ES6——数组扩展

数组扩展

1、扩展运算符的结合使用

将一个数组展开，赋给函数的参数

function foo(a, b, c) {
	console.log(a);
	console.log(b);
	console.log(c);
}
foo(...[1, 3, 2]);//1,3,2


const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友'];
function say(name, age, hobby, desc) {
	console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join('和') }, ${ desc }`);
}

say(...user);//相当于say(user[0], user[1], user[2], user[3]);

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
语法：func.apply(thisArg, [argsArray])
参数：
thisArg 必选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
argsArray 可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。
返回值：调用有指定this值和参数的函数的结果
注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友'];
function say(name, age, hobby, desc) {
	console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join('和') }, ${ desc }`);
}

say.apply(null, user);
Math.max Math.min 最大/小值

const arr = [1, 2, 233, 3, 4, 5];

console.log(Math.max(...arr));
console.log(Math.max.apply(null, arr));

console.log(Math.min(...arr));
console.log(Math.min.apply(null, arr));

复制&合并

const arr1 = [1, 2, 3, 4];
const arr2 = [4, 2, 2, 1];
const arr3 = [2.2, '123', false];

const cArr1 = [1, 2, 3, ...arr3];

const cArr2 = [...arr1];
const [...cArr3] = arr3;

const cArr4 = [...arr1, ...arr2, ...arr3];

2、生成器*函数 解决了异步问题 通过扩展运算符可以生成一个数组

（写法是function g或者function g，g是函数名，可以任意换）

yield—函数暂停关键字，暂停函数的执行

.next()----表示执行一次调用函数

function *g() {
	console.log(1);
	yield 'hi~';    //暂停函数的执行
	console.log(2);
	yield 'imooc~';  //暂停函数的执行
}

// const arr = [...g()];

const gg = g();

gg.next();//表示执行一次调用函数

setTimeout(function() {
	gg.next(); //表示执行一次调用函数
}, 1000);

Set()方法，返回结果是一个对象集合，对象集合中没有重复的属性。【new Set(arr)】
可以用来去重，先使用Set方法把重复的内容去掉，然后通过扩展运算符变成数组

let set = new Set([1, 2, 2, 3]);

console.log([set]);//{1,2,3}
console.log([...set]);//去重,[1,2,3]

数组扩展新的方法

1、Array.form(object，回调函数) 将类数组对象转换为数组

1）该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组
2）该类数组对象的属性名必须为数值型或字符串型的数字
3）from()方法的作用是将一个ArrayLike对象或者Iterable对象转换成一个Array

const obj = {
	0: 1,
	1: '22',
	2: false,
	length: 2 //根据这个长度取舍属性
};

console.log(Array.from(obj));//[1,22]
console.log(Array.from(obj, item => item * 2));//[2,44]

//以前将类数组转换为数组方式:
//Array.prototype.slice.call();
//[].slice.call();
//[...]

2、Array.of( ) 将传入的参数数据合并为一个数组。

console.log(Array.of(1, 2, '123', false));

3、fill()函数，使用制定的元素填充数组，其实就是用默认内容初始化数组，语法是arr.fill(value, start, end)，参数value表示要填充的值、start表示填充起始位置，可以省略、end表示填充结束位置，可以省略，实际结束位置是end-1。

let arr = new Array(10).fill(0, 0, 3);
console.log([1, 2, 3].fill(0));
//let arr=new Array（10）--表示创建数组的长度（只有一个参数时），若有多个表示数组的参数；
//*若填充的原来的数组中有数值，填充的数值会将原来的数组项全部覆盖；

4、includes判断是否包含某项,返回布尔值

var arr = [1, 2, 3, 4];
console.log(arr.includes(1));//true
console.log(arr.includes(55));//false

5、arr.keys( ) 遍历数组的索引 迭代Symbol.iterator

for(let a of arr.keys( )){ }

const arr = [1, 2, 3, 444];

console.log(arr.keys());//迭代器接口

for (let i of arr.keys()) {
	console.log(i);//0,1,2,3
}

6、arr.values( ) 遍历数组的元素值 ,按照顺序来遍历

for(let a of arr.values( )){ }

for (let v of arr.values()) {
	console.log(v);//1,2,3,444
}

7、arr.emtries( ) 遍历获取数组的索引和元素值（索引与数组项键值对）

for(let [i ,v] of arr.values( )){ }

for (let [i, v] of arr.entries()) {
	console.log(i, v);//0 1 , 1 2 , 2 3 , 3 444
}

8、find(回调函数) 按顺序遍历数组，当回调返回true时，就返回当前遍历到的值

const res=[5,62,47,5,NaN].find((value,index,arr)=>Number.isNaN(value))

const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);//判断值为偶数的值
console.log(res);//6

9、findIndex(回调函数) 按顺序遍历数组 当回调返回true时就返回当前遍历到的值的下标。

IndexOf( )不能判断数组中有没有NAN

const res = [1, 7, 6, 3].findIndex((value, index, arr) => value % 2 === 0);//判断值为偶数的值的下标
console.log(res);//2

const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));//判断里面有没有NaN
console.log(res);//