ES6系列学习（4）

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]

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

我们添加合并两个数组：

//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(){

	}
}