再见繁琐代码：ES6新特性解析之剩余参数、扩展运算符、伪数组转换，让你写出优美简洁的函数。

狗蛋的博客之旅

已于 2023-05-20 23:54:44 修改

阅读量63

点赞数

分类专栏： ES6 文章标签：数据结构 leetcode 排序算法

于 2023-05-19 17:54:46 首次发布

本文链接：https://blog.csdn.net/weixin_43263566/article/details/130771538

版权

ES6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

语法:

array.forEach(function(currentValue,index,arr){})

currentValue:数组当前项的值
index:数组当前项的索引
arr:数组对象本身

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function sum(first, ...args) {// ...这三个点表示剩余的形参它都接收了
            console.log(first);//10
            console.log(args);//[20, 30]
        }
        sum(10, 20, 30);

        const sumx = (...args) => {
            let total = 0;
            // item args循环的当前项的值(也函数的形参)
            args.forEach(item => total += item);
            console.log('1+' + total);
            // 相当于 不过只有一行 省略了小括号()和大括号{}
            // args.forEach((item) => { total += item })
            // 因为要在外面用所以要返回
            return total;
        }
        console.log(sumx(10, 20));
        console.log(sumx(10, 20, 30));

    </script>
</body>

</html>

剩余参数和解构配合使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 剩余参数和解构配合使用
        let stu = ['张三', '李四', '王五'];
        let [s1, ...s2] = stu;
        console.log(s1);//张三
        console.log(s2);//["李四", "王五"]
    </script>
</body>

</html>

扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

   <script>
        // 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
        let ary = [1, 2, 3];
        // 在console.log() 的方法会把逗号当做参数分隔符,所以没有逗号输出
        console.log(...ary);//1 2 3
        console.log(1, 2, 3);//1 2 3
    </script>

示例

扩展运算符应用合并数组

扩展运算符可以应用于合并数组。

    <script>
        // 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
        // 方法一
        // let ary1 = [1, 2, 3];
        // let ary2 = [4, 5, 6];
        // // 我们在数组的外面加一个[]中括号,就可以让参数序列重新变回数组
        // // ...ary1 // 1,2,3
        // // ...ary2 // 4,5,6
        // let ary3 = [...ary1, ...ary2];
        // console.log(ary3);//[1, 2, 3, 4, 5, 6]
        // 方法二
        let ary1 = [1, 2, 3];
        let ary2 = [4, 5, 6];
        // push 向参数后面追加元素
        ary1.push(...ary2);
        console.log(ary1);//[1, 2, 3, 4, 5, 6]

    </script>

将伪数组转换伪数组

方法：将类数组或可遍历的对象转换为真正的数组

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script>
        // 将类数组或可遍历的对象转换为真正的数组
        // var div = document.getElementsByTagName('div');
        var div = document.querySelectorAll('div');
        console.log(div);
        var ary = [...div];//NodeList(5) [div, div, div, div, div] 伪数组
        console.log(ary);// [div, div, div, div, div]
        // 将伪数组转化为数组,就可以使用数组对象下的方法
        // push 在元素的后面追加元素
        ary.push('a');
        console.log(ary);
    </script>
</body>