es6 数组的扩展

扩展运算符 ...

一下代码的打印结果是什么

let [a,b] = [1,2,3,4];
console.log(a,b)

a从索引0找到了数字1,并且声明了变量a值是1
b从索引1找到了数字2,并且声明了变量b值是2

那么如何让b获取到后面的所有参数？？？

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

如果想要得到b后面的所有数据，只要在b前面加上...点即可，这样就让让这个b接收后面的所有数据并且存放在一个数组当中

b是rest参数 专门接受剩余的所有数据
...的作用 专门收集数据并且放置在变量中

那么如何把散列的数据整合在数组中？？

console.log([...[1,2,3]]);

只要前面加上...就可以打散这个数组了,当...点打散一些数据的时候你必须给打散的数据放置在一个容器当中,也可以放置在新的数组中,也可以放置在新的对象当中

console.log([...[1,2,3]]);//将打散的数组放置在新的数组中
console.log({...[1,2,3]});//将打散的数组放置在新的对象中

...能够打散数组也能够打散字符串的

console.log({...'huasheng'});//将打散的字符串放置在对象中
console.log([...'huasheng']);//将打散的字符串放置在数组中

这个方法好像字符串方法中的split函数用指定的分割符分割字符串

console.log('huasheng'.split(''));

现在就可以不用split函数了，直接用...就可以了打散字符串并且放置在数组当中和split函数的作用是一样的

...他也能打散类数组的，那该怎么打散类数组

之前接触过的类数组

console.log(document.getElementsByTagName("div"))

用document.getElementsByTagName方法获取了3个div是放置在一个数组当中的，其实他不是一个真正的数组他是一个类数组,这个类数组本质是不能调用数组中的方法的

一个真正的数组是用push方法的那么一下的数组中都有push方法吗

console.log(document.getElementsByTagName("div").push(4));

他会报错表示(上面的push不是一个函数),这个是类数组不是一个真正的数组使以就没有push方法的(类数组是没有push方法的)

 console.log([1,2,3].push(4));

用push方法往这个数组里面追加4(真数组有push方法)

类数组有那些

• document.getElementsByClassName()等，操作DOM节点的形式返回类数组的结果
• arguments 函数内部关键词是存储了函数内部的所有实参集合,返回结果是一个类数组

如果是普通数组的话原型应当是Array就有数组中的方法

	     var attr = [1,2,3];
	     console.log(attr.constructor);//原型是Array(真正的数组)

	     var dom = document.getElementsByTagName('div');
	     console.log(dom.constructor);//原型是HTMLCollection

	     function auto(){
	     	console.log(arguments.constructor);//原型是Object
	     }
	     auto(1,2,3)

...可以把类数组打散

function auto(){
	   console.log([...arguments].push(4));
	   //他确实是往arguments失态类表中push进去了一个4
	   console.log([...arguments].constructor);
	   //原型是Array是一个数组
}
auto(1,2,3)

通过...的方式把arguments类数组打散之后放置在一个新的数组里面,打散后的数组就是一个新的数组(真的数组)

var oDiv = document.getElementsByTagName('div');
console.log([...oDiv].push('huasheng'));
//当前是有3个DOM元素是类数组
//然后我先用...给你打散然后放置在一个新的数组当中(没有报错是一个新数组)
console.log([...oDiv].constructor);//原型是Array是一个数组

通过...打散类数组之后放置在一个新的数组当中,这个新的数组确实是一个新的数组(原型是Array)

用...用的比较多的时候,就是打散类数组并且放置在一个新的数组中(一般都是打散类数组把类数组放置在一个新的数组当中) 我们就可以调用数组中的方法了

总结

• 如果...后面跟的是rest参数(变量) ,专门接受剩余的所有数据
• 如果...后面是需要打散的数据 ,此时...叫做扩展运算符

...的作用

• 专门收集数据并放置在变量中
• 打散数组/字符串/类数组() 并且还需要放置在数组/对象中

如何求出数组中的最大值

es5中的方法

console.log( Math.max.apply(null,[1,35,25,10])); null表示不修改函数内部的this指向

调用apply函数修改里面的this指向(自身或者是null),然后在把数组给你传进去,第二个参数他只能穿数组

call修改this指向的时候传参数的时候是一个一个传的

apply修改this指向的时候,在传第二个参数必须把参数放置在一个数组当中传递参数

es6中的方法

console.log(Math.max(...[1,35,25,10]));

先用...运算符把这个数组给你打散,之后我把打散的数据传到Math.max这个函数当中求出最大值

在es6当中用...就可以了，把数据打散传递到Math.max函数当中求出最大值，在es5中调用apply函数修改一下函数中的this指向把数组当中实参一一的给你传到Math.max函数当中去执行然后取大值

如何求出数组中的最小值

es6中的方法

console.log(Math.min(...[1,35,25,10]));//1 ...后面跟的是数组不要用数组接收了

es5中的方法

 console.log(Math.min.apply(null,[1,35,25,10]));//1 null表示不修改函数内部的this指向

并不是刻意的修改函数内部的this指向，而是因为只能使用apply函数，才能够在第二个参数传递一个数组，而数组中的每一项都是函数执行时候的参数(实参)，都是Math.min执行之后传递的实参,我们利用的就是apply在第二个参数传递的时候是必须是一个数组的特点，数组中的每一项是函数执行的实参

如何复制数组

赋值数组是指把一个数组赋值给一个变量,而这两个数组是不会互相影响的，这就叫做复制数组

es5中复制数组

arr.concat()
arr.slice()
arr.slice(0)
//以上的方法都可以复制数组，但是大前提要在es5中复制数组

var arr = [1,2,3];
var arr1 = arr.concat();//concat()也可以克隆原来的数组
console.log(arr,arr1)
console.log(arr===arr1);//false表示arr和arr1不是一个数组

当concat函数不传参的时候是可以克隆出来一个数组的,也可以传参数添加数据

当slice函数不传参或者传递一个0,也是可以克隆出来一个数组的

es6中复制数组

var arr = [1,2,3];
var arr1 = [...arr];//现在我用...给你打散,打散完之后我给你放置在一个新的数组当中
console.log(arr,arr1);
console.log(arr===arr1);//false表示arr和arr1不是一个数组

用...打散一个数组并且放置在一个新的数组当中这样可以复制一个新的数组

如何合并数组

es5中合并数组

var arr = [1,2,3];
var arr1 = [3,2,1]
console.log(arr.concat(arr,arr1))//在es5中concat方法可以合并多个数组

es6中合并数组

 console.log([...[1,2,3],...[3,2,1]]);
 //用...把两个数字给你打散然后用,号隔开就可以合并数组了

数组的新增方法

Array.from(类数组) 传入类数组，返回纯数组

var div = document.getElementsByTagName('div');//获取类数组
console.log(Array.from(div));//获取纯数组
//一个纯数组他的原型是Array,那么他就是一个纯数组
console.log(Array.from(div).constructor)// Array()

Array.of(实参1,实参2) 传入若干实参，返回结果把这些实参整合后的新数组

console.log(Array.of(1,2,3,4));//Array.of里面传递的参数就是你新数组中的值
console.log(Array.of('huasheng',20,null,undefined));

在es5中可以用new Array构造函数构造一个新的数组

console.log(new Array(1,2,3,4));

那么在es5中可以通过new Aarray这个大的构造函数构造一个新的数组，那么为什么es6中还出现了Aarray of()这个函数构造一个新的数组呢？？？

那就就是解决在new Array这个构造函数构造的数组他是有缺陷的,那么Array这个函数就是解决这个缺陷的

console.log(new Array(5));

理论上你只传递了5,说明了你想构造一个数组这个数组他是[5]，而es5中他只认为你这个是数组的length长度

当参数只要一个的时候new Array他会把你传递的参数当中构造数组的长度

console.log(Array.of(5));
//Array of是弥补new Array这个构造函数,构造出来数组的缺点

arr.copyWithin(x,y,z) 作用如下

• 复制从索引y到索引z的数据
• 把复制的数据从arr的索引x开始覆盖
• 返回覆盖后的新数组

var fruits = ["Banana","Orange","Apple","Mango","Kiwi","Papaya"];
console.log(fruits.copyWithin(2,0,2));

他表示从索引0的位置,复制到索引2的数据，你看到的索引2的位置其实就是去得到0但是取不到2的((0,2])

var fruits = ["Banana","Orange","Apple","Mango","Kiwi","Papaya"];
console.log(fruits.copyWithin(5,0,2));

他是不会改变数组的length长度的是该变原数组的

第一个参数是必须写的，但是也可以写两个参数

var fruits = ["Banana","Orange","Apple","Mango","Kiwi","Papaya"];
console.log(fruits.copyWithin(2,0));

从索引2开始替换,复制索引0的数据(是复制所有的的数据)，复制完成之后我会从索引2开始替换，当你第三个参数不写的时候表示默认替换掉最后一个(fruits.length-1)

arr.includes(数据) 判断arr里有没有指定数据，有返回true,反之false

var arr = ['huasheng','花生','JS'];
console.log(arr.includes('huasheng'));
//true表示在arr中有'huasheng'这个字符串
console.log(arr.includes('花生',1));
//includes表示你是从索引几开始检测有没有你要找的数据

arr.fill(数据) 用指定数据填满arr，arr中原来的数据会被覆盖

var arr = ['huasheng','波老师','皮老师'];
console.log(arr.fill('huasheng'));
//fiil(表示填充填满的意思)表示在arr当前这个数组里是用'huasheng'这个字符串来填满的
//就是则个数组里面全都是'huasheng'这个字符串

arr.find(回调函数) 该方法返回满足条件的数组成员

var arr = [1,2,3,4,5];
console.log(arr.find(function(value,index){
	//第一个参数value是你找到的数组成员
	//第二个参数index是数组成员相对应的索引
	console.log(value,index);
	//当回调函数返回值是真的时候就就会找到对应的数组成员
	// return value == 2; //当返回值 value值==2的时候就打印此结果
	return index == 3;//当返回值 index值==3的时候就打印此结果
}));

find他是会找某些数组成员的 他接收的是回调函数(当一个函数当做实参被传进去的时候那么这个函数就会回调函数);

一旦执行了find函数内部的回调函数就会重复执行(find是会挨个找到数组中的每一项的,数组中有几个数据那么就会执行几次回调函数,他是找到数组中符合条件的数组成员的)

那么第三个参数是什么

var arr = [1,2,3,4,5];
console.log(arr.find(function(value,index,arr){//第三个参数表示原来的数组
	  console.log(arguments);//当你不知道系统个你这个函数偷偷地传了一些什么参数是
	  //arguments可以告诉你一切
	 console.log(value,index,arr);
}))

arr.find(回调函数) 该方法返回满足条件的数组成员

只要回调函数的返回值是true 则满足条件 反之不满足条件

• 第一个参数是你的数组成员(数组中的数据)
• 第二个参数是你的数组成员对应的索引位置
• 第三个参数是你原本的数组(原数组)

arr.findIndex(回调函数) 该方法返回满足条件的数组成员对应的索引位置

只要回调函数的返回值是true 则满足条件 反之不满足条件

• 第一个参数是你的数组成员(数组中的数据)
• 第二个参数是你的数组成员对应的索引位置
• 第三个参数是你原本的数组(原数组

 // 查找满足数组成员的索引位置
var arr = ['huasheng','花和尚','666'];
console.log(arr.findIndex(function(value,index,arr){
	   return value == '花和尚';//在这个判断条件下为真才满足条件
}))//findIndex这个函数他也是会查找数组的第一项触发里面的回调函数以此类推到多次

arr.forEach(回调函数) 只有遍历的作用

• 第一个参数表示对应的数组成员(内容)
• 第二个参数表示对应数组成员的索引位置
• 第三个参数表示原本要遍历的数组(原数组)

var arr = [1,2,3,4,5];
console.log(arr.forEach(function(value,index,arr){//找到数组中的每一项触发对应的回调函数
	    console.log(value,index,arr);
	    // forEach,这个函数只有遍历的作用他是没有返回值的（没有返回值）
}));

如果你不知道一个函数内部系统给你传递了什么参数那么你打印一下arguments就显示出来了

无论是find还是findIndex他都有遍历的功能触发对应的回调函数和遍历次数相对应

arr.map(回调函数) 返回值是一个新的数组，回调函数的返回值 作为新数组的成员

• 第一个参数表示对应的数组成员(内容)
• 第二个参数表示对应数组成员的索引位置
• 第三个参数表示原本要遍历的数组(原数组)

map这个函数也有遍历的作用，也能触发对应的回调函数,最终map函数返回的是一个数组,返回的结果取决于回调函数的返回值

 var arr = ['海力士','大理石','毛蛋'];
	    console.log(arr.map(function(value,index,arr){
	    	return '我是'+value;
	    	//return true //返回值全是true(返回值取决于你的回调函数的返回值)
	    }))

当你遍历到第一个数组成员,这个数组成员的返回值返回给你放置在数组当中把每次函数的返回值都放置在一个数组当中(map这个函数的返回值取决于你的回调函数的返回值)返回值的结果和原来的length长度是一致的))

arr.filter(回调函数) 返回值是一个基于老数组 过滤后的新数组

var arr = ['海力士','大理石','毛蛋'];
console.log(arr.filter(function(value,index,arr){
	   console.log(value,index,arr)
	    //filter是基于老数组的过滤,他能把那些数组过滤掉呢就取决于你的返回值
	     return value>3;
	     //返回值是一个新数组这个新数组是基于老数组的过滤之后的一个新的数组回调函数的
	     //返回值为true则对应数组成员保留,反之不保留
	    	//返回值的结果和原来的length长度是不一致的
	    	//return true;//数组成员全部保留
	    }));

filter这个函数他也是有遍历这个数组的作用触发遍历对应的回调函数,他的返回值是返回值是一个基于老数组,过滤后的新数组(基于对老数组的过滤)

arr.filter(回调函数) 返回值是一个基于老数组 过滤后的新数组

回调函数的返回值为true 则对应数组成员保留，反之不保留

• 第一个参数表示对应的数组成员(内容)
• 第二个参数表示对应数组成员的索引位置
• 第三个参数表示原本要遍历的数组(原数组)

arr.every(回调函数) 返回值一个布尔值

所有回调函数的返回值都是true 则every的返回值才是true

只要一个回调函数的返回值是false 则every的返回值就是false

反之是false

• 第一个参数表示对应的数组成员(内容)
• 第二个参数表示对应数组成员的索引位置
• 第三个参数表示原本要遍历的数组(原数组)

 var arr = ['海力士','大理石','毛蛋'];
	    console.log(arr.every(function(value,index,arr){
	    	console.log(value,index,arr)
	    	return value>0;//所有回调函数的返回值都是true则every的返回值才是true
	    	// return value>2
	    }))

every这个函数他也是有遍历这个数组的作用触发遍历对应的回调函数,他的返回值是一个布尔值(只有当回调函数全为真返回值才为真,反之是假)

arr.some(回调函数) 返回值一个布尔值

• 只要一个回调函数的返回值是true 则some的返回值就是true
• 所有回调函数的返回值都是false some的返回值才是false

第一个参数表示对应的数组成员(内容)

第二个参数表示对应数组成员的索引位置

第三个参数表示原本要遍历的数组(原数组)

var arr = ['海力士','大理石','毛蛋'];
console.log(arr.some(function(value,index,arr){
	   console.log(value,index,arr)
	   // some返回的也是一个布尔值,返回值是只要一个回调函数返回值是真那么我就是真默认值是(false)
	   return value=='大理石'//只要一个条件是真,那么他的返回值的结果就是真
}))

传一个函数作为函数执行的参数,那么这个函数就叫做高级函数

arr.reduce(回调函数) 默认从索引1开始遍历的 从左向右

求出数组中的和???

第一次执行回调函数：他第一次遍历的是索引1而,pre是前一个数组成员的索引位置1,next是数字2,index是数字2对应的索引位置

第二次回调函数执行：他是把你第一次回调函数的返回值,来作为下一次函数执行的pre(第一个参数)
每会函数执行的返回值会作为下一次函数执行的第一个参数(他是从索引1开始遍历的)

 var arr = [1,2,3,4,5,6];
 console.log(arr.reduce(function(pre,next,index){
	   //reduce函数是专门用来求累加的他也有遍历的功能
     return pre+next;//前一次遍历的值会保留到下一次遍历的初始值
},0))
//reduce第二个是初始值会从索引0开始遍历的(reduce第二个参数传的是什么第一个参数就会接受什么)

arr.reduce(回调函数) 默认从索引1开始遍历的 从左向右 (回调函数（pre,next,index))

• pre 保留了上一次 回调函数的返回值(核心)
• next 本次遍历到的数组成员
• index 本次遍历到的数组成员的索引
• arr.reduce(回调函数,初始值) 会从索引0开始遍历

arr.reduceRight(回调函数) 从右向左遍历

 var arr = [1,2,3,4,5,6];
	    console.log(arr.reduceRight(function(pre,next,index){
	    	console.log(pre,next,index)
	    },0))