【JS007】ES6的学习笔记之扩展运算符（数组篇）

最新推荐文章于 2024-07-09 13:51:43 发布

Commas.KM

最新推荐文章于 2024-07-09 13:51:43 发布

阅读量141

点赞数 1

分类专栏： javascript 文章标签： javascript js 扩展运算符 ... es6

本文链接：https://blog.csdn.net/qq_35844043/article/details/119717766

版权

javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

日期：2021年8月15日
作者：Commas
注释：如果您觉得有所帮助，帮忙点个赞；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
(ง •_•)ง 积跬步以致千里，ES6的学习笔记
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

一、数组扩展运算符的定义

定义：扩展运算符（spread）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。

let nameGroup = ["张三","李四"];
console.log(nameGroup);    //(2) ["张三", "李四"]
console.log(...nameGroup); //张三 李四

let numGroup = [1,2,3,4];
console.log(numGroup);    //(4) [1, 2, 3, 4]
console.log(...numGroup); //1 2 3 4

二、数组扩展运算符的作用

数组的合并
语法：mergeArr = [...arr1,...arr2,...arr3,...arr4]

let group1 = ["张三","李四"];
console.log(group1);    //(2) ["张三", "李四"]
console.log(...group1); //张三 李四

let group2 = ["王五","赵六"];
console.log(group2);    //(2) ["王五", "赵六"]
console.log(...group2); //王五 赵六

//（1）数组的方法合并数组
let groupConcat = group1.concat(group2);
console.log(groupConcat);    //(4) ["张三", "李四", "王五", "赵六"]
console.log(...groupConcat); //张三 李四 王五 赵六

//（2）扩展运算符
let groupSpread = [...group1,...group2];
console.log(groupSpread);    //(4) ["张三", "李四", "王五", "赵六"]
console.log(...groupSpread); //张三 李四 王五 赵六

数组的复制
语法：newArr = [...oldArr]

let oldArr = [1,2,3];
//（1）同一个数组，引用是一样的
let oldArr1 = oldArr;
console.log(oldArr1);           //(3) [1, 2, 3]
console.log(oldArr1===oldArr);  //true

//（2）数组的复制，不同的引用
let newArr = [...oldArr];
console.log(newArr);            //(3) [1, 2, 3]
console.log(newArr===oldArr);   //false

将伪数组转换为真数组
语法：Array = [...ArrayLike]
伪数组：实现了 Iterator（迭代器且可遍历），但非数组的数据；

<!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>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        
        //（1）伪数组
        let divs = document.getElementsByTagName("div");
        console.log(divs);      //HTMLCollection(3) [div, div, div]
        
        let strS = "Hello";
        console.log(strS);      //Hello
        
        //（2）真数组
		let divArr = [...divs];
        console.log(divArr);    //(3) [div, div, div]

        let strArr = [...strS];
        console.log(strArr);    //(5) ["H", "e", "l", "l", "o"]
    </script>
</body>
</html>

作为函数中的rest参数，即剩余运算符（the rest operator）
形式：function fn(a,b,c,...args){} 或 function fn(...args){}
注意：
①rest参数一般放于所有形参后面，用于接收形参多出的参数；
②如函数无形参，则所接受的参数就是rest参数；

//（1）arguments版本
let sumByArgs = function(){
    console.log(arguments)  
    //控制台输出：
    //Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

    console.log(arguments instanceof Array) 
    //控制台输出：false

    let total = 0;
    for(let i=0;i<arguments.length;i++){
        total += arguments[i]
    };
    return total
};
let sum1 = sumByArgs(1,2,3,4);
console.log(sum1);              //控制台输出：10

//（2）rest版本
let sumByRest = function(...args){
    console.log(args)   
    //控制台输出：(5) [1, 2, 3, 4, 5]
    console.log(args instanceof Array)  
    //控制台输出：true
    let total = 0;
    for(let i=0;i<args.length;i++){
        total += args[i]
    };
    return total
};
let sum2 = sumByRest(1,2,3,4,5);
console.log(sum2);              //控制台输出：15

序号	`arguments`对象	`rest`参数
1	只接收没有形参对应的实参	包含传递给函数的所有实参
2	真数组，无附加属性	伪数组，有附件属性，如`callee: ƒ ()`

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/119717766

Commas.KM

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS007】ES6的学习笔记之扩展运算符（数组篇）

日期：2021年8月15日作者：Commas注释：如果您觉得有所帮助，帮忙点个赞；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^(ง •_•)ง 积跬步以致千里，ES6的学习笔记1.01365 = 37.7834；0.99365 = 0.02551.02365 = 1377.4083；0.98365 = 0.0006文章目录一、箭头函数的定义一、箭头函数的定义定义：ES6 允许使用=>来定义函数，因为它很像一个箭头（=>），所以我们称其定义的函数为箭头函数.
复制链接

扫一扫