ES6系列学习（4）

小鱼儿 2022-02-13 04:55 207阅读 0赞

**1.剩余参数**

function sum(...numbers){
    	console.log(numbers)
    }
    sum(1,2,3,4)
    sum(1,2,3,4,5)
    
    function sum(v1,...nums){
    	console.log(nums)
    }
    
    //数组解构
    const player = ['Jelly',123,5.4,6.7,3.4,7.8,8.9]
    const [name,id,scores] = player;
    console.log(name,id,scores);   //Jelly 123 5.4 
    
    const [name,id,...scores] = player;
    console.log(name,id,scores);    //[5.4,6.7,3.4,7.8,8.9]

**2.扩展运算符**

解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr\[x\]或者obj\[key\]等传统方式进行赋值。

剩余参数是我们将一个不定数量的参数表示为一个数组。

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值。

const youngers = ['','','']
    const olders = ['','','']
    
    youngers.concat(olders);
    
    function foo(a,b,c){
    	
    }
    
    var arr = [1, 2, 3];
    
    //传统写法
    foo(arr[0], arr[1], arr[2]);
    //使用扩展运算符
    foo(...arr);

一些应用场景：

//1.数组拷贝(Array.from也可以进行数组拷贝)
    var arr2 = arr;
    var arr3 = [...arr];
    var arr3 = Array.from(arr);
    
    //2.数组合并
    var arr4 = [...arr, 4, 5, 6];
    console.log(arr4);//[1, 2, 3, 4, 5, 6]
    
    var a1 = [1,2,3]; 
    var a3 = [4,5,6];
    var a2 = [...a1,0,...a3];
    a2
    [1, 2, 3, 0, 4, 5, 6]
    
    //3.字符串转数组(当然Array.from也可以)
    var str = 'love';
    var arr5 = [...str];
    console.log(arr5);//[ 'l', 'o', 'v', 'e' ]
    var arr6 = Array.from(str)
    
    //4.DOM节点转数组
    const todos = [...document.querySelectorAll('li')];
    
    //5.从对象中获取数组
    const favorites = {
    	color:['yellow','blue'];
    	fruits:['banana','mongo']
    }
    const shopingList = ['milk','sweets',...favorites.fruits]

再看一个例子（查找索引，然后根据索引删除，获得数组剩下部分。）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
我们添加合并两个数组：

//1.之前解决方法
    const fruit = ['apple','banans','pear']
    const newFruit = ['orange','mongo']
    
    fruit.push.apply(fruit,newFruit);
    
    //2.利用扩展运算符
    fruit.push(...newFruit)

数组和对象合并的方法：

数组合并：concat、循环遍历、apply

对象合并：$.extend()、遍历赋值、Object.assign()

参考文章：  
https://www.cnblogs.com/xingxiangyi/p/6416468.html  
https://www.cnblogs.com/koala0521/p/7278056.html

**3.对象字面量扩展**

const Laravist = {
    	name:'Laravist',
    	age:2,
    	birthday:'2015-09',
    	greet(){
    
    	},
    	getName(){
    
    	},
    	getAge(){
    
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220213/b4ec752621464bf68cc8a808d5336695.png