zoukankan      html  css  js  c++  java
  • 一些比较常用而且好用的关于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>
  • 相关阅读:
    JVM内存结构
    JVM中的类加载
    数据库索引详解
    Spring IOC 总结
    Java多线程(一)—— 常见问题整理
    Java集合框架 面试问题整理
    Java8 Lambda表达式
    vue开发技巧
    mysql(MariaDB)问题处理
    字符串非空判断的效率问题
  • 原文地址:https://www.cnblogs.com/lhl66/p/12986418.html
Copyright © 2011-2022 走看看