JavaScript 解构以及ECMA6

好的船长�

已于 2022-12-03 15:00:00 修改

阅读量183

点赞数

文章标签： ECMAScript6 解构赋值数组方法字符串模板 Object.assign

于 2022-11-28 22:57:01 首次发布

本文链接：https://blog.csdn.net/qq_52781485/article/details/128089159

版权

解构和ECMA6字符串

中括号解构

        var x = 10, y = 20, z= 30;

        var [x, y, z] = [10, 20, 30];
        alert(x + "," + y);//10,20

        var [x, [a, b], y] = [10, [20, 30], 40];
        alert(a + "," + y);//20,40

        var [x, [a, b], y] = [10, [20], 40];
        alert(a + "," + y);//20,40
        alert(b);//undefined

大括号解构

        var {name, age, sex} = {
            name: "钢铁侠",
            age: 18,
            sex: "男"
        };
        /* 不是对象 */
        alert(name);//钢铁侠
        alert(age);//18
        alert(sex);//男

解构对传统的颠覆(好处)

1、交换两个数的值

        var [x, y] = [10, 20];
        [x, y] = [y, x];
        alert(x + "," + y);  //20, 10

2、函数可以返回多个值

        function show(){
            return ["结果1", "结果2", "结果3"];
        }

        var [a, b, c] = show();
        alert(a + "," + c);  //结果1,结果3

3、函数定义参数和传入参数的顺序改变【注】参数可以带默认值

        function showSelf(name, age, sex){
            alert("我叫" + name + ",今年" + age + "，是一位" + sex + "性");
        }
        showSelf("小明", 18, "男");

        /* 当参数过多时可以使用，不需要按照顺序传参 */
        function showSelf({name, age, sex}){
            alert("我叫" + name + ",今年" + age + "，是一位" + sex + "性");
        }
        showSelf({
            age: 18,
            name: "小明",
            sex: "男"
        });

        function showSelf({name, age, sex = "男"}){
            alert("我叫" + name + ",今年" + age + "，是一位" + sex + "性");
        }
        showSelf({
            age: 18,
            name: "小明",
        });     //sex = 男

        function showSelf({name, age, sex = "男"}){
            alert("我叫" + name + ",今年" + age + "，是一位" + sex + "性");
        }
        showSelf({
            age: 18,
            name: "小明",
            sex: "女"
        });   //sex = 女

4、快速取出数组中的某一个元素

        var arr = [10, 20, 30, 40, 50];
        var {0:first, 4:last} = arr;
        alert(first);//10
        alert(last == arr[4]);//true

ECMA6字符串

传统字符串：所有单引号，双引号括起来的都叫做字符串

ECMA6字符串：反引号 ` `

1、ECMA6字符串，想怎么写怎么写，换行，代码缩进，都能在字符串中体现出来

        //var str1 = "hello
        //world";
        //alert(str);  //Uncaught SyntaxError: Invalid or unexpected token

        var str2 = "hello \
        world";
        alert(str2); 

        var str3 = `hello 
        world`;
        alert(str3);

2、$(变量/表达式/函数调用)

        function showSelf({name, age, sex = "男"}){
            alert(`我叫${name}，今年${age}岁，是一位${sex}性`);
            alert(`我叫${name}，今年${Math.max(age,20,30)}岁，是一位${sex}性`);
        }
        showSelf({
            age: 18,
            name: "小明",
            sex: "女"
        });

新增数组方法和合并对象

新增数组方法

Array.from( )

将伪书组转成真数组

<script>
        window.onload = function(){
            var aLis = document.getElementsByTagName("li");
            alert(aLis.length);  //6，为伪数组
            // aLis.push("hello");  //数组的方法；Uncaught TypeError: aLis.push is not a function

            aLis = Array.from(aLis);
            aLis.push("hello");
            alert(aLis);  //[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],hello
        }
    </script>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

find( )

功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素就终止遍历

返回值：找到的元素

        var arr = [10, 20, 30, 40, 50];
        var res = arr.find(function(item, index, arr){
            return item > 20;
        })
        alert(res);

        var arr = [10, 20, 30, 40, 50];
        alert(arr.find(item => item > 20));

findIndex( )

返回值：找到元素的下标

         var arr = [10, 20, 30, 40, 50];
        alert(arr.findIndex(item => item > 20));

copyWithin( )

第一个参数：从哪个下标开始

第二个参数和第三个参数：范围 [ start，end )

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        arr.copyWithin(3,7,9);  //从下标3开始，取[7,9）的下标，从下标3开始覆盖
        alert(arr);  //1,2,3,8,9,6,7,8,9,10

合并对象

Object.assign

将所有传入的对象合并到第一个对象中

            var obj1 = {
                a: 10
            }

            var obj2 = {
                b: 20,
                c: 30
            }

            var obj3 = {
                d: 40,
                f: ["hello", "world", true]
            }

            Object.assign(obj1, obj2, obj3);
            console.log(obj1);
            console.log(obj2);
            console.log(obj3);

修改obj2的值，obj1内不会改变，obj2会变

            var obj1 = {
                a: 10
            }

            var obj2 = {
                b: 20,
                c: 30
            }

            var obj3 = {
                d: 40,
                f: ["hello", "world", true]
            }

            Object.assign(obj1, obj2, obj3);

            obj2.b = 100;
            console.log(obj1);
            console.log(obj2);

给obj3push一个元素，obj1内同样也被push此元素

            var obj1 = {
                a: 10
            }

            var obj2 = {
                b: 20,
                c: 30
            }

            var obj3 = {
                d: 40,
                f: ["hello", "world", true]
            }

            Object.assign(obj1, obj2, obj3);

            obj3.f.push("xxx");
            console.log(obj1);
            console.log(obj3);