ES6 常见代码片段，对数组和对象的操作

刺骨的言语ヽ痛彻心扉 2022-03-01 15:52 151阅读 0赞

> ## ** es6一些常见的代码片段 对数组和对象的操作** ##

**复制之后用node直接跑起来就可以看到输出**

// 遍历
    let arr = [1,2,3,4]
    arr.forEach(v => {
        //console.log(v)
    })
    // 可以返回每一个元素都乘以2的数组
    console.log(arr.map(v => v*2)) // [ 2, 4, 6, 8 ]
    // 返回数组每一项是否都大于2
    console.log(arr.every(v => v>2)) // false
    // 过滤  保留数组中大于3的元素
    console.log(arr.filter(v => v>3)) // [ 4 ]
    // 这几项都是可以链式调用的  例如 arr.map(v => v*2).every(v => v>2).filter(v => v>3)
    
    // 数组去重
    let arr1 = [1,2,2,3,3,4]
    let arr2 = [3,4,5,6]
    console.log(new Set(arr1)) // Set { 1, 2, 3, 4 }
    console.log([...new Set(arr1)]) // [ 1, 2, 3, 4 ]  使用展开运算符 把它变成一个数组 并且是去重之后的数组
    // 并集  合并两个数组
    // 之前的并集 没有去重 只是合并
    console.log(arr1.concat(arr2)) // [ 1, 2, 2, 3, 3, 4, 3, 4, 5, 6 ]
    // 骚气的写法 合并去重
    console.log([...new Set([...arr1, ...arr2])]) // [ 1, 2, 3, 4, 5, 6 ]
    
    
    // 经典前端面试题
    // 淘宝首页一共用了多少种标签？
    // new Set([...document.querySelectorAll('*')].map(v=>v.nodeName)).size
    
    // 对象
    const obj = {
        name: 'lao',
        age: 20
    }
    // 遍历对象
    Object.keys(obj).forEach(v => {
        console.log(v, obj[v])
    })
    
    console.log({...obj, job: 'fe'}) // 展开对象 { name: 'lao', age: 20, job: 'fe' }
    
    let obj1 = {
        fullName: '小白',
        sex: 'man'
    }
    // 合并对象
    // 展开两个对象，后面接要覆盖的数据
    console.log({...obj, ...obj1, age: 15}) // { name: 'lao', age: 15, fullName: '小白', sex: 'man' } 合并对象 并且覆盖数据