JS学习笔记 - -day11

最新推荐文章于 2023-02-17 19:12:25 发布

VIP文章欧亨利@mh

最新推荐文章于 2023-02-17 19:12:25 发布

阅读量218

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_48625424/article/details/128552727

版权

一、数组的扩展

1.扩展运算符:是剩余运算符的逆运算
剩余运算符:一般是在等号的左边,将剩余的元素添加到数组中
扩展运算符:一般是在等号的右边,将数组中的元素依次展开

<script>
        let arr = [1, 2, 3, "hello"];
        console.log(arr);
        console.log(...arr);
        console.log("hello", ...[123, 444], ...["666"]);
    </script>

2.扩展运算符的应用
应用1：可以将类数组转换为真的的数组 […arraylike]

<body>
	<p>段落标签1</p>
    <p>段落标签2</p>
    <p>段落标签3</p>
    <p>段落标签4</p>
	<script>
	        let p = document.querySelectorAll("p");
	        console.log(p);
	        console.log(Array.from(p));
	        console.log([...p]);
	        function myfun1(a, b, c) {
     
	            console.log(a, b, c);
	        }
	        myfun1(...[1, 2, 3]) //myfun1(1,2,3)
	</script>
</body>

应用2：复制数组

 <script>
        // es5 复制数组
        let arr1 = [1, 2, 4];
        let arr2 = arr1;
        let arr3 = arr1.concat();
        let arr4 = arr1.slice();
        console.log(arr3, arr4);
        // es6  复制数组
        let arr5 = [...arr1];
        console.log(arr5);
    </script>

应用3：合并数组

<script>
        // es5  合并数组
        console.log(arr1.concat(["hello"], 7777, "true1"))
        let arr11 = [122, true, "hello"];
        let arr12 = [555, "你好"]
        // es6  合并数组
        console.log([...arr11, ...arr12, ...[]]);
</script>

应用4：代替apply方法

<script>
function myfun2(a, b, c) {
     
            console.log(a, b, c);
        }
        // es5
        myfun2.apply(window, [1, 2, 3]);
        // es6
        myfun2(...[1, 2, 3]);
        
        console.log(Math.max.apply(undefined, [10, 2, 343, 2, 19]));
        console.log(Math.max(...[10, 2, 343, 2, 19]));
</script>