2020-10-09

                                                      常见的es6语法糖

 

1、模板字符串 `` 可换行,可使用${}插值

let name = 'heimi'
let str = `<div>
            <p>${name}</p>
        </div>`

2、解构赋值 左右两边格式相同

let obj = {
    name1: 'heima',
    age: 19,
}
let { name1, age } = obj
console.log(name1, age);

3、扩展运算符 ...

let arr = [1, 3, 5]
let newa = [...arr]
console.log(newa);

4、深拷贝

let obj = {
    name: 'heima',
    age: 19,
    info: {
        add: 'hahas'
    },
    n: null,
    un: undefined,  //丢失
    fn: function () { //丢失
    },
    s: Symbol('1')  //丢失
}
let newO = JSON.parse(JSON.stringify(obj))
newO.info.add = 'eee'
console.log(obj, newO);

let arr = [1, 2, 3]
let newa = arr.slice(0)
newa.push({ 213: 343 })
console.log(newa, arr);

5、实现一个深拷贝

let obj = {
    name: 'heima',
    age: 10,
    info: {
        add: 'aa'
    }
}
let arr = [1, 2, 34]
const deepClone = (obj) => {
    if (obj === null) return obj
    if (typeof obj !== 'object') return obj
    const newObj = new obj.constructor
    for (let key in obj) {
        newObj[key] = deepClone(obj[key])
    }
    return newObj
}

// let Newobj = deepClone(obj)
// Newobj.info.add='xx'
// console.log(Newobj,obj);

let newArr = deepClone(arr)
newArr.push([21, 43])
console.log(newArr, arr);

6、set 去重

let arr = [1, 2, 3, 3, 2, 1]
let set = new Set([...arr])
set.add(6)
console.log(set.has(2));
set.delete(3)
set.clear()
console.log(set);

7、forEach 不能中断 for in for of

let arr = [1, 2, 3, 4, 6]
arr.forEach((key, index) => {
    if (key === 2) {
        return
    }
    console.log(key, index);
})