一些比较常用而且好用的关于ES6数组和对象方法梳理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            const target = {};
            const obj1 = { key1: 2 }
            const obj2 = { key2: 3 }
            const obj3 = { key2: 4 }
            // 1、Object.assign合并对象方式一(Object.assign方法的第一个参数是目标对象,后面的参数都是源对象)
            Object.assign(target, obj1, obj2);
            console.log(target) // {key1:2, key2:3}
            // 注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。比如此时源对象加个obj3 = {key2: 4} 则会输出 {key1:2, key2:4}
            
            // 2、...es6扩展运算符合并对象方式二
            const newObj = {...obj1,...obj2}
            console.log(newObj) // {key1:2, key2:3}
            
            // ...es6扩展运算符将一个数组转为用逗号分隔的参数序列
            const arr = [1,2,3]
            console.log(...arr) // 1 2 3
            
            // 合并数组 (都是浅拷贝)
            const arr1 = [1,2,3]
            const arr2 = [4,5]
            // ES5 的合并数组
            var newArr= arr1.concat(arr2);
            console.log(newArr) //  [1, 2, 3, 4, 5]
            // ES6 的合并数组
            const newArr2= [...arr1,...arr2];
            console.log(newArr2) //  [1, 2, 3, 4, 5]
            // 扩展运算符如果用于数组赋值,只能放在参数的最后一位,否则会报错。
            
            // Array.from方法用于将两类对象转为真正的数组(类数组转为数组的方法 比如类似下面的数据结构和一些dom的集合)
            const testArr = { '0': '222', '1': '333',  length: 2}
            // ES5的写法
            var testArr1 = [].slice.call(testArr); 
            console.log(testArr1)// ["222", "333"]
            // ES6的写法
            const testArr2 = Array.from(testArr); 
            console.log(testArr2)// ["222", "333"]
            
            // Array.of方法用于将一组值,转换为数组;Array.of基本上可以用来替代Array()或new Array()
            let aArr = Array.of({a:1},{b:1},{c:1})
            let bArr = Array.of(1,2,3)
            console.log(aArr)//  [{a:1},{b:1},{c:1}]
            console.log(bArr)// [1, 2, 3]
            
            // 数组实例的find方法,用于找出第一个符合条件的数组成员 如果没有符合条件的成员,则返回undefined
            let aFind = [1, 5, 10, 15].find(function(value, index, arr) {
              return value > 9;
            }) // 10
            console.log(aFind)
            
            // findIndex如果所有成员都不符合条件,则返回-1
            let aFindIndex = [1, 5, 10, 15].findIndex(function(value, index, arr) {
              return value > 9;
            }) 
            console.log(aFindIndex) // 2
            
            // fill方法使用给定值,填充一个数组
            let aFill = new Array(10).fill(10)
            console.log(aFill) // [10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
            // fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
            let aFillStarEnd = ['a', 'b', 'c'].fill(10, 1, 2)
            console.log(aFillStarEnd) // ["a", 10, "c"]
            
            // flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1 不适用于[{aa:'xxx',[{aa:'xxx'}]},{}]
            let aFill1 = [1, 2, [3, [4, 5]]].flat()
            console.log(aFill1) // [1, 2, 3, [4, 5]]
            let aFill2 = [1, 2, [3, [4, 5]]].flat(2)
            console.log(aFill2) // [1, 2, 3, 4, 5]
            // 如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数
            let aFill3 = [1, [2, [3]]].flat(Infinity)
            console.log(aFill3) // [1, 2, 3]
            
            // 去重引用类型 [{},{},{}]    
            let objArr = [{
                "id": 1,
                "name": "tom",
                "age": "17"
            }, {
                "id": 2,
                "name": "bob",
                "age": "18"
            }, {
                "id": 3,
                "name": "pitter",
                "age": "16"
            }, {
                "id": 1,
                "name": "sopp",
                "age": "15"
            }];
            let hash = {};
            objArr = objArr.reduce(function(item, temp) {
                console.log(item, temp)
                hash[temp.id] ? '' : hash[temp.id] = true && item.push(temp);
                return item
            }, [])
            console.log(objArr, '去重后的引用类型');
            // 封装成函数 distinct(arr) 把需要去重的数组传进去即可
            function distinct(arr){
                var result = []
                var obj = {}
                arr.reduce((item,temp)=>{
                  // 这里判断的是数组引用类型中的ID, 各位可自行替换判断依据
                  obj[temp.id]?'':obj[temp.id]=true&&result.push(temp)
                })
                return result
            }
        </script>
    </body>
</html>

  内容原创,转载请注明出处!!!!谢谢合作!

posted @ 2020-05-29 11:21  鱼樱前端  阅读(505)  评论(0编辑  收藏  举报