JavaScript常用操作

一、数值变换

1. 变量声明

(1) var 声明

var 允许变量名重复，且定义在局部的变量仍能在全局访问。

var num = 1;
var num = 2;
// 输出 2 
console.log(num)

if(true) {
    var text = '123';
}
// 仍可以访问到变量
console.log(text)

(2) let 声明

let变量值可以发生改变，但受限于作用域，且不能重复定义。

let num = 1;
num = 2;              // 合法
let num = 3;          // 非法，会提示变量已定义

if(true) {
    let text = '123';
}
console.log(text)     // 非法，无法访问局部变量

(3) const 声明

const变量值在定义之后便不能发生变化。

const num = 1;
num = 2;              // 非法

2. Json数组

(1) 遍历取值

获取所有数组对象的某属性值，返回结果仍为数组。

const dataList: [
    { id: 123, name: 'aa' },
    { id: 456, name: 'bb' }
]

const keys = dataList.map(item => item.id)
console.log(keys)
// keys = ['123', '456']

(2) 数组去重

用于去除 Json 数组中重复元素。

const source = ['a', 'b', 'a', 'c', 'd']
const result = source.filter(function (element, index, array) {
    return array.indexOf(element) === index
})

console.log(result)
// result = ['a', 'b', 'c', 'd']

(3) 数组过滤

根据指定条件过滤数组元素，返回结果为数组。

const dataList: [
    { id: 123, name: 'aa' },
    { id: 456, name: 'bb' }
]
const result = menuData.filter(item => item.id === '123')

console.log(result)
// result = [{ id: 123, name: 'aa' }]

(4) 属性添加

用于给数组中每一个对象元素添加新属性。

let dataList = [
    { id: 123, name: 'aa' },
    { id: 456, name: 'bb' }
]

let result = []
dataList.map((item, index) => {
    result.push(Object.assign({}, item, {key: '1234'}))
}))

console.log(result)
// result = [
//   { id: 123, name: 'aa', key: '1234' },
//   { id: 456, name: 'bb', key: '1234' }
// ]

3. 对象遍历

遍历对象所有元素，并进行一系列相应操作。

const obj = {
    face: 111,
    thing: 222,
    scene: 333,
    person: 444,
    motorVehicle: 555,
    nonMotorVehicle: 666
}
let num = 0
for (const i in obj) {
    num += obj[i];
}
console.log(num)

二、正则判断

1. 是否邮箱

判断字符串格式是否为邮箱。

const email = '123@163.com'
const isEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)
console.log(isEmail)

2. 是否电话

判断字符串格式是否为电话。

const mobile = 18760543562
const isMobile = /^1[0-9]{10}$/.test(mobile)
console.log(isMobile)

3. 是否URL

判断字符串格式是否为URL地址。

const url = 'http://ibudai.xyz'
const isurl = /^http[s]?:\/\/.*/.test(url)
console.log(isurl)

三、时间操作

1. 当前日期

获取当前时间，时间格式：yyyy-MM-dd。

// 获取当前时间年月日
const _date = new Date()
const formatDate = _date.toLocaleDateString().replaceAll("/", "-")
// 2022-05-20
console.log(formatDate)

2. 前n天日期

获取当前时间前 n 天日期，时间格式：yyyy-MM-dd。

// 获取当前时间前 n 天
getNDate (n) {
    const now = new Date()
    const date = new Date(now.getTime() - n * 24 * 3600 * 1000)
    const year = date.getFullYear()
    const month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
    const day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
    return year + '-' + month + '-' + day
}

3. 上周始末

获取上一周的周一与周天日期。

function getWeek() {
    var lastWeek = {};
    var date = new Date();
    var day = date.getDay();
    if (day === 0) {
        day = 7
    }
    const offset1 = 1 - day;
    // 上周一的日期
    date.setDate(date.getDate() + offset1 - 7);
    lastWeek.startDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    // 上周日的日期
    date.setDate(date.getDate() + 6);
    lastWeek.endDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    return lastWeek;
}

4. 上月始末

获取上一月的始末日期。

function getMonth() {
    var lastMonth = {};
    var nowdays = new Date();
    var year = nowdays.getFullYear();
    var month = nowdays.getMonth();
    if (month == 0) {
        month = 12;
        year = year - 1;
    }
    if (month < 10) {
        month = "0" + month;
    }
    // 上个月的第一天
    lastMonth.startDate = year + "-" + month + "-" + "01";
    var myDate = new Date(year, month, 0);
    // 上个月的最后一天
    lastMonth.endDate = year + "-" + month + "-" + myDate.getDate();
    return lastMonth;
}