JavaScript数组方法详解

JavaScript数组方法详解JavaScript数组方法详解JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法;并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中

大家好,又见面了,我是你们的朋友全栈君。

JavaScript数组方法详解

JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法;并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中原型上的方法,本文举例介绍了从ES3到ES7几乎所有的数组方法。这大概是最全的数组方法详解了。希望读者能从中有所收获。

一、各版本数组方法一览表

数组方法名 对应版本 功能 原数组是否改变
pop() ES3- 删除最后一位,并返回删除的数据
push() ES3- 在最后一位新增一或多个数据,返回长度
shift() ES3- 删除第一位,并返回删除的数据
unshift() ES3- 在第一位新增一或多个数据,返回长度
reverse() ES3- 反转数组,返回结果
sort() ES3- 排序(字符规则),返回结果
splice() ES3- 删除指定位置,并替换,返回删除的数据
copyWithin() ES6- 指定位置的成员复制到其他位置
fill() ES6- 使用给定的值,填充到数组中,类似于替换
concat() ES3- 合并数组,并返回合并之后的数据
join() ES3- 使用分隔符,将数组转为字符串并返回
slice() ES3- 截取指定位置的数组,并返回
toString() ES3- 直接转为字符串,并返回
valueOf() ES5- 返回数组对象的原始值
indexOf() ES5- 查询并返回数据的索引
lastIndexOf() ES5- 反向查询并返回数据的索引
forEach() ES6- 参数为回调函数,会遍历数组所有的项,回调函数接受三个参数,分别为value,index,self;forEach没有返回值
map() ES6- 同forEach,同时回调函数返回数据,组成新数组由map返回
filter() ES6- 同forEach,同时回调函数返回布尔值,为true的数据组成新数组由filter返回
every() ES6- 同forEach,同时回调函数返回布尔值,全部为true,由every返回true
some() ES6- 同forEach,同时回调函数返回布尔值,只要有一个为true,由some返回true
reduce() ES6- 归并,同forEach,迭代数组的所有项,并构建一个最终值,由reduce返回
reduceRight() ES6- 反向归并,同forEach,迭代数组的所有项,并构建一个最终值,由reduceRight返回
from() ES6- 将类数组对象和可遍历对象转化为数组
of() ES6- 将一组值转化为数组
find() ES6- 在数组内部, 找到第一个符合条件的数组成员,返回值
findIndex() ES6- 在数组内部, 找到第一个符合条件的数组成员,返回索引
includes() ES7- 表示某个数组是否包含给定的值,与字符串的includes()方法类似

二、方法详解

在讲解数组方法前,我们先简单将数组方法按上方表格内容分为下面两大类

(1)使用后会改变原数组
(2)使用后不会改变原数组

第一类、使用后原数组改变,失去原数组,得到改变后的新数组

1.pop()

功能:用于删除并返回数组的最后一个元素。
参数:无

var arr = [1,2,3];
console.log(arr.pop());     //3---删除并返回3
console.log(arr);           //[1,2]---原数组改变

2.push()

功能:向数组的末尾添加一个或更多元素,并返回数组新的长度。
参数:push(newData1, newData2, ……)

var arr = [1,2,3];
console.log(arr.push("a"));  		//4---返回数组现在的长度
console.log(arr);                	//[1,2,3,"a"]---原数组改变
console.log(arr.push("hello","world"));  //6---一次可添加多个数组,返回新的数组长度
console.log(arr);                	//[1,2,3,"a","hello",world]---原数组改变

3.shift()

功能:方法用于删除并返回数组的第一个元素。
参数:无

var arr = [1,2,3]
console.log(arr.shift());       //1---返回被删除的元素
console.log(arr);               //[2,3]---原数组改变
console.log(arr.shift());       //2---返回被删除的元素
console.log(arr);               //[3]---原数组改变

4.unshift()

功能:向数组的开头添加一个或更多元素,并返回新的长度。
参数:unshift(newData1, newData2, ……)

var arr = [1,2,3];
console.log(arr.unshift("world"));  //4---返回当前的数组长度
console.log(arr);                   //["world",1,2,3]---原数组改变
console.log(arr.unshift("a","b","hello"));  //7---返回当前的数组长度,可一次性添加多个元素
console.log(arr);                   //["a","b","hello","world",1,2,3]---原数组改变

5.reverse()

功能:颠倒数组中元素的顺序,并返回更改后的数组
参数:无

var arr = [1,2,3];
console.log(arr.reverse());     //[3,2,1]---返回颠倒后的数组
console.log(arr);               //[3,2,1]---原数组改变

6.sort()

功能:对数组中的元素进行排序,默认是升序,返回新数组
参数:无

var arr = [6,1,5,2,3,4];
console.log(arr.sort());    //[1, 2, 3, 4, 5, 6]---返回排序后的新数组,默认升序排列
console.log(arr);           //[1, 2, 3, 4, 5, 6]---原数组改变

注意:但是在排序前,会先调用数组的toString方法,将每个元素都转成字符之后,再进行排序,此时会按照字符串的排序,逐位比较,进行排序。

var arr = [6,1024,52,256,369];
console.log(arr.sort());    //[1024, 256, 369, 52, 6]---按照第一个字符的大小排序,多位数值的排序会出错
console.log(arr);           //[1024, 256, 369, 52, 6]---原数组改变

解决方法:通过回调函数实现
参数:sort(callback)
如果需要按照数值排序,需要传参。sort(callback),callback为回调函数,该函数应该具有两个参数,比较这两个参数,然后返回一个用于说明这两个值的相对顺序的数字(a-b)。其返回值如下:
若 a 小于 b,返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

1)从小到大排序
var arr = [6,1024,52,256,369];
console.log(arr.sort(fn));  //[6, 52, 256, 369, 1024]---排序正常升序
console.log(arr);           //[6, 52, 256, 369, 1024]---原数组改变
function fn(a,b){
    return a-b;
}
2)从大到小排序
var arr = [6,1024,52,256,369];
console.log(arr.sort(fn));  //[1024, 369, 256, 52, 6]---排序正常降序
console.log(arr);           //[1024, 369, 256, 52, 6]---原数组改变
function fn(a,b){
    return b-a;
}

7.splice()

功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。
参数:splice(start,num,data1,data2,…); 所有参数全部可选;分为多种情况

start:整数,规定添加/删除项目位置的索引,使用负数可从数组结尾处规定删除的位置
num:整数,规定要删除元素的数量,若为0则不会删除
data1,data2,data3…..:可选,规定需要添加的元素

(1)不传参时:无操作

var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice());      //[]---不传参,不操作,没有没删除替换的元素,返回空数组
console.log(arr);               //["Tom","Jack","Lucy","Lily","May"]---无操作,原数组未变,返回原数组

(2)只传入start:表示从索引为start的数据开始删除,直到数组结束

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2));     //["Lucy", "Lily", "May"]--从索引为2开始删除,直到结束,返回被删除的数组
console.log(arr);               //["Tom", "Jack"]---原数组改变,返回改变后的数组
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(0));     //["Tom","Jack","Lucy","Lily","May"]--从索引为0开始删除,直到结束
console.log(arr);               //[]---原数组数据被全部删除,返回空数组

(3)传入start和num:表示从索引为start的数据开始删除,删除num个

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(1,3));   //["Jack", "Lucy", "Lily",]---从索引为2开始删除,删除3个元素
console.log(arr);               //["Tom", "May"]---原数组改变,按顺序返回剩下的元素

(4)传入更多:表示从索引为start的数据开始删除,删除num个,并将第三个参数及后面所有参数,插入到start的位置

1)删除的数据,等于,添加的数据,数量相同。相当于把某几个数据替换了
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,2,"a","b"));  //["Lucy", "Lily"]--从索引为2开始删除2个,再把"a""b"插入删除的空隙
console.log(arr);                      //["Tom", "Jack", "a", "b", "May"]---原数组改变,相当于被替换了
2)删除的数据,多于,添加的数据。多的空位由后面的数据向前移补上
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,2,"a"));//["Lucy", "Lily"]--从索引为2开始删除2个,再把"a"插入删除的空隙,多的空隙,后面数据补上来。
console.log(arr);                //["Tom", "Jack", "a", "May"]---原数组改变
3)删除的数据,少于,添加的数据。多的数据挤进去,后面的元素都相应后退。
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,1,"a","b"));  //["Lucy"]--从索引为2开始删除1个,再把"a""b"插入删除的空隙
console.log(arr);                  //["Tom", "Jack", "a", "b", "Lily", "May"]---原数组改变

(5)传入更多:表示从索引为start的数据开始删除,删除num个,并将第三个参数及后面所有参数,插入到start的位置

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,0,"a","b"));  //[]
console.log(arr);    //["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原数组改变

8.ES6新增:copyWithin()

功能:在当前数组内部,将指定位置的成员复制到其他位置顶替掉原来位置的元素,并返回新数组
参数:copyWithin(target,start=0,end=this.length)

target:从该索引位置开始替换元素,如果为负值,则表示从右往左
start:从该索引位置开始读取元素(包括该索引对应的元素)。默认为0,如果为负值,则表示从右往左
end:到该索引位置前停止读取元素(不包括该索引对应的元素)。默认等于数组长度,使用负数可从数组结尾处规定位置开始

Tip:数组的长度前后不会改变

var arr=["Tom","Jack","Lucy","Lily","May","Alice","Ben","Rouse","Peter"]
console.log(arr.copyWithin(1,3,6));
//["Tom", "Lily", "May", "Alice", "May", "Alice", "Ben", "Rouse", "Peter"]
//从索引为1的元素开始被替换,从索引为3的元素开始读取要替换的 索引为6的元素前面停止替换
//简单来说就是将索引为3,4,5位置的元素复制到索引为1,2,3的位置上.后面的元素不变。

var arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, -2, -1));//负数表示从右到左数索引。-2相当于索引2的位置,-1相当索引为3的位置
//[4, 2, 3, 4, 5]
//表示将索引为-2的元素复制到索引为0的位置上

9.ES6新增:fill()

功能:使用给定的值,填充到数组中,类似于替换
参数:fill(data,start,end)

data:要填充数组的值
start:填充开始的位置,默认值是0
end:填充结束的位置,默认值是this.length(数组长度)

var arr = ["a","b","c"];
console.log(arr.fill(7));//[7, 7, 7]---start和end都为0,默认填充所有元素
console.log(arr);//[7, 7, 7]---原数组改变
var arr = ["a","b","c","d","e","f"];
console.log(arr.fill(7, 1, 4));//["a", 7, 7, 7, "e", "f"]---将索引1到4的元素填充为7
console.log(arr);//["a", 7, 7, 7, "e", "f"]---原数组改变

第二类、使用后原数组不变,返回新数组后,仍然可以得到原数组

1.concat()

功能:用于将两个或多个数组连接到一起
参数:concat(data1,data2,…);

data:为数组时,将data合并到原数组;data为具体数据时直接添加到原数组尾部;省略时创建原数组的副本

var arr1 = [1,2,3];
var arr2 = arr1.concat();
console.log(arr1);           //[1,2,3]---原数组
console.log(arr2);           //[1,2,3]---原数组的副本;看起来和原数组一样,但他们是两个东西,不相等。
console.log(arr1 === arr2);  //false---数组也是对象的一种,所有对象都不相等,除非是对象本身等于自己
console.log(arr1.concat("hello","world"));//[1,2,3,"hello","world"]---将字符拼接到数组后
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));//[1,2,3,"a","b",[3,4],{"name":"admin"}]
var arr3 = [4,5,6];
console.log(arr1.concat(arr3));//[1, 2, 3, 4, 5, 6]---将两个数组拼接
console.log(arr1);           //[1,2,3]---原数组未改变

2.join()

功能:根据指定分隔符将数组中的所有元素放入一个字符串,并返回这个字符串
参数:join(str);

str:默认为”,”号,以传入的字符作为分隔符

var arr = [1,2,3];
console.log(arr.join());         //1,2,3---将数组每个元素用","连接成字符串并返回
console.log(arr.join("-"));      //1-2-3---将数组每个元素用"-"连接成字符串并返回
console.log(arr);                //[1,2,3]---原数组未改变

//当数组里的元素也是数组或对象时
var a= [['OBKoro1','23'],'test'];
console.log(a.join("*"));//OBKoro1,23*test---数组内的还是用","连接(join只对一维数组连接,多维数组时,里面的数组不连接,只是转成字符串),数组外的用"*"连接
var b= [{name:'OBKoro1',age:'23'},'test'];
console.log(b.join("*"));//[object Object]*test---数组内是对象时。会出问题,先转成数组,对象内容显示"Object",再连接。不能显示具体值
// 对象转字符串推荐JSON.stringify(obj);

3.slice()

功能:可从已有的数组中返回选定的元素。
参数:slice(start, end)

start:为必填,表示从第几位索引开始。若为负数,则表示从后往前计算索引
end:为可填,表示到第几位结束(不包含end位),省略表示到最后一位;若为负数,则表示从后往前计算索引

var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.slice(1,3));        //["Jack","Lucy"]---返回索引为1,2的元素组成的数组
console.log(arr.slice(1));          //["Jack","Lucy","Lily","May"]---返回索引为1,2,3,4的元素组成的数组
console.log(arr.slice(-4,-1));      //["Jack","Lucy","Lily"]
console.log(arr.slice(-2));         //["Lily","May"]
console.log(arr.slice(1,-2));       //["Jack","Lucy"]
console.log(arr);                   //["Tom","Jack","Lucy","Lily","May"]---原数组未改变

4.toString()

功能:转换成字符串,类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用,如果手动调用,就是直接转为字符串。
参数:无

var arr = [1,2,3];
var a= [{name:'OBKoro1',age:'23'},'test'];
console.log(arr.toString());     //1,2,3---转为字符
console.log(a.toString()); 		//[object Object],test--对象没办法直接转
console.log(arr);                //[1,2,3]---原数组未改变

5.valueOf()

功能:返回数组的原始值(一般情况下其实就是数组自身),一般由js在后台调用,并不显式的出现在代码中
参数:无

var arr = [1,2,3];
console.log(arr.valueOf());         //[1,2,3]---返回的是数组本身
console.log(arr);                   //[1,2,3]---原数组未变
//为了证明返回的是数组自身
console.log(arr.valueOf() == arr);  //true

6.indexOf()

功能:根据指定的数据,从左向右,查询某元素在数组中出现的位置,如果不存在指定的元素,返回-1。该方法是查询方法,不会对数组产生改变。
参数:indexOf(value, start);

value:必填,要查询的数据;
start:选填,表示开始查询的位置,当start为负数时,从数组的尾部向前数;如果查询不到value的存在,则方法返回-1

var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l"));        //2---字母"l"在数组中的索引,返回第一个索引
console.log(arr.indexOf("l",3));      //3
console.log(arr.indexOf("l",4));      //-1---从索引为4的位置开始查询,未找到返回-1
console.log(arr.indexOf("l",-1));     //-1
console.log(arr.indexOf("l",-3));     //2
console.log(arr);					// ["h","e","l","l","o"]---原数组未改变

7.lastIndexOf()

功能:根据指定的数据,从右向左,查询在数组中出现的位置,如果不存在指定的数据,返回-1。该方法是查询方法,不会对数组产生改变。
参数:lastIndexOf(value, start);

value:必填,要查询的数据;
start:选填,表示开始查询的位置,当start为负数时,从数组的头部向尾部数;如果查询不到value的存在,则方法返回-1

var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l"));        //3
console.log(arr.lastIndexOf("l",3));      //3
console.log(arr.lastIndexOf("l",1));      //-1
console.log(arr.lastIndexOf("l",-3));     //2
console.log(arr.lastIndexOf("l",-4));     //-1
console.log(arr);						// ["h","e","l","l","o"]---原数组未改变

8.forEach()

功能:用来遍历数组,该方法没有返回值。forEach接收的回调函数会根据数组的每一项执行,该回调函数默认有三个参数,分别为:遍历到的数组的数据,对应的索引,数组自身。
参数:forEach(callback);callback默认有三个参数,分别为value,index,self。

value:遍历到的数组元素
index:元素对应的索引
self:数组自身

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.forEach(function(value,index,self){
    console.log(index + "--" + value + "--" + self);
})
// 打印结果为:---第一列为遍历到的数组元素,第二列为对应的索引,第三列为数组自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May
console.log(arr);	//["Tom","Jack","Lucy","Lily","May"]---原数组未改变
console.log(a);     //undefined---forEach没有返回值
//该方法为遍历方法,不会修改原数组

9.map()

功能:1.同forEach功能;2.map的回调函数会将执行结果返回,最后map将所有回调函数的返回值组成新数组返回。
参数:map()接收一个回调函数作为参数,这个回调函数需要有返回值;map(callback);callback默认有三个参数,分别为value,index,self。

value:遍历到的数组元素
index:元素对应的索引
self:数组自身

(1)功能1:同forEach

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
    console.log(index + "--" + value + "--" + self);
})
// 打印结果为:---第一列为遍历到的数组元素,第二列为对应的索引,第三列为数组自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May

(2)功能2:每次回调函数的返回值被map组成新数组返回

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
    return "hi:"+value;
})
console.log(a);     //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
//可通过此方法批量修改数组,返回新数组。
console.log(arr);   //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

10.filter()

功能:1.同forEach功能;2.filter的回调函数需要返回布尔值,当为true时,将本次数组的数据返回给filter,最后filter将所有回调函数的返回值组成新数组返回(此功能可理解为“过滤”)。
参数:filter()接收一个回调函数作为参数,这个回调函数需要有返回值;filter(callback);callback默认有三个参数,分别为value,index,self

value:遍历到的数组元素
index:元素对应的索引
self:数组自身

(1)功能1:同forEach

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
    console.log(index + "--" + value + "--" + self);
})
// 打印结果为:---第一列为遍历到的数组元素,第二列为对应的索引,第三列为数组自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May

(2)功能2:当回调函数的返回值为true时,本次的数组值返回给filter,被filter组成新数组返回

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
    return value.length > 3;//返回元素长度大于3的元素。若有符合条件的元素,返回元素
})
console.log(a);         //["Jack", "Lucy", "Lily"]
//相当于一个筛选器(过滤器),可以在数组中查找需要的内容并返回
console.log(arr);       //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

11.every()

功能:判断数组中每一项是否都满足条件,只有所有项都满足条件,才会返回true。
参数:every()接收一个回调函数作为参数,这个回调函数需要有返回值;every(callback);callback默认有三个参数,分别为value,index,self

value:遍历到的数组元素
index:元素对应的索引
self:数组自身

(1)功能1:当回调函数的返回值为true时,类似于forEach的功能,遍历所有;如果为false,那么停止执行,后面的数据不再遍历,停在第一个返回false的位置。

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
})
// 打印结果为:没有返回值,打印了第一个,默认为false,后面的就不再遍历
// Tom--0--true
//因为回调函数中没有return true,默认返回undefined,等同于返回false

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return value.length < 4;
})
// 打印结果为:
// Tom--0--true
// abc--1--true
// Jack--2--true
//因为当遍历到Jack时,回调函数到return返回false,此时Jack已经遍历,但是后面数据就不再被遍历了

//demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return true;
})
// 打印结果为:
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
//因为每个回调函数的返回值都是true,那么会遍历数组所有数据,等同于forEach功能

(2)功能2:当每个回调函数的返回值都为true时,every的返回值为true,只要有一个回调函数的返回值为false,every的返回值都为false

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    return value.length > 3;
})
console.log(a);           //false---只要出现一个false,返回值就为false

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    return value.length > 2;
})
console.log(a);           //true---遍历数组全部为true,才能返回true

12.some()

功能:判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
参数:some()接收一个回调函数作为参数,这个回调函数需要有返回值,some(callback);callback默认有三个参数,分别为value,index,self

value:遍历到的数组元素
index:元素对应的索引
self:数组自身

(1)功能1

因为要判断数组中的每一项,只要有一个回调函数返回true,some都会返回true,所以与every正好相反,当遇到一个回调函数的返回值为true时,可以确定结果,那么停止执行,后面都数据不再遍历,停在第一个返回true的位置;当回调函数的返回值为false时,需要继续向后执行,到最后才能确定结果,所以会遍历所有数据,实现类似于forEach的功能,遍历所有。

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return value.length > 3;
})
// 打印结果为:
// Tom--0--true
// abc--1--true
// Jack--2--true

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return true;
})
// 打印结果为:
// Tom--0--true

//demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return false;
})
// 打印结果为:
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true

(2)功能2

与every相反,只要有一个回调函数的返回值都为true,some的返回值为true,所有回调函数的返回值为false,some的返回值才为false

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    return value.length > 3;
})
console.log(a);             //true

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    return value.length > 4;
})
console.log(a);             //false

13.reduce()

功能:从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。
参数:reduce()接收一个或两个参数:第一个是回调函数,表示在数组的每一项上调用的函数;第二个参数(可选的)作为归并的初始值,被回调函数第一次执行时的第一个参数接收。
reduce(callback,initial);callback默认有四个参数,分别为prev,now,index,self
callback返回的任何值都会作为下一次执行的第一个参数。
如果initial参数被省略,那么第一次迭代发生在数组的第二项上,因此callback的第一个参数是数组的第一项,第二个参数就是数组的第二项。

prev:初始值, 或者计算结束后的返回值
now:当前元素值
index:当前元素的索引
self:数组自身

//demo1:不省略initial参数,回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 打印结果为:
// 2019--10--0--true
// undefined--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此时回调函数没有return,所以从第二次开始,prev拿到的是undefined

//demo2:省略initial参数,回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
// 打印结果为:第一次,回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 10--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此时回调函数没有return,所以从第二次开始,prev拿到的是undefined

//demo3:不省略initial参数,回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
}, 2019)
// 打印结果为:
// 2019--10--0--true
// hello--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此时回调函数有return,所以从第二次开始,prev拿到的是回调函数return的值

//demo4:省略initial参数,回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
})
// 打印结果为:第一次,回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 10--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此时回调函数有return,所以从第二次开始,prev拿到的是回调函数return的值

//demo5:使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
    return prev + now;
})
console.log(sum);      //150
// 回调函数的最后一次return的结果被返回到reduce方法的身上

//demo6:使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
    return prev + now;
}, 8)
console.log(sum);      //158
// 回调函数的最后一次return的结果被返回到reduce方法的身上
// 因为reduce有第二个参数initial,在第一次执行时被计算,所以最终结果被加上8

14.reduceRight()

功能:从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。
参数:reduce()接收一个或两个参数:第一个是回调函数,表示在数组的每一项上调用的函数;第二个参数(可选的)作为归并的初始值,被回调函数第一次执行时的第一个参数接收。
reduce(callback,initial);callback默认有四个参数,分别为prev,now,index,self
callback返回的任何值都会作为下一次执行的第一个参数。
如果initial参数被省略,那么第一次迭代发生在数组的第二项上,因此callback的第一个参数是数组的第一项,第二个参数就是数组的第二项。

prev:初始值, 或者计算结束后的返回值
now:当前元素值
index:当前元素的索引
self:数组自身

//demo1:不省略initial参数,回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 打印结果为:
//2019--50--4--true
//undefined--40--3--true
//undefined--30--2--true
//undefined--20--1--true
//undefined--10--0--true
// 此时回调函数没有return,所以从第二次开始,prev拿到的是undefined

//demo2:省略initial参数,回调函数没有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
// 打印结果为:第一次,回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
//50--40--3--true
//undefined--30--2--true
//undefined--20--1--true
//undefined--10--0--true
// 此时回调函数没有return,所以从第二次开始,prev拿到的是undefined

//demo3:不省略initial参数,回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
}, 2019)
// 打印结果为:
//2019--50--4--true
//hello--40--3--true
//hello--30--2--true
//hello--20--1--true
//hello--10--0--true
// 此时回调函数有return,所以从第二次开始,prev拿到的是回调函数reduceRight的值

//demo4:省略initial参数,回调函数有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
})
// 打印结果为:第一次,回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
//50--40--3--true
//hello--30--2--true
//hello--20--1--true
//hello--10--0--true
// 此时回调函数有return,所以从第二次开始,prev拿到的是回调函数reduceRight的值

//demo5:使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduceRight(function(prev,now,index,self){
    return prev + now;
})
console.log(sum);      //150
// 回调函数的最后一次return的结果被返回到reduceRight方法的身上

//demo6:使用reduce计算数组中所有数据的和
var arr = [10,20,30,40,50];
var sum = arr.reduceRight(function(prev,now,index,self){
    return prev + now;
}, 8)
console.log(sum);      //158
// 回调函数的最后一次return的结果被返回到reduceRight方法的身上
// 因为reduceRight有第二个参数initial,在第一次执行时被计算,所以最终结果被加上8

15.ES6新增:from()

功能:将类数组对象和可遍历对象转化为数组
参数:from(object, mapFunction, thisValue)

object:必需,要转换为数组的对象
mapFunction:可选,数组中每个元素要调用的函数
thisValue:可选,映射函数(mapFunction)中的 this 对象

var arr = "foo";
console.log(Array.from(arr));//["f", "o", "o"]---将类数组对象转换为数组
console.log(arr);//"foo"---不改变原对象

16.ES6新增:of()

功能:将一组值转化为数组
参数:of(element0[, element1[, …[, elementN]]])

elementN:任意个参数,将按顺序成为返回数组中的元素

console.log(Array.of(1));         // [1]
console.log(Array.of(1, 2, 3));   // [1, 2, 3]
console.log(Array.of(undefined)); // [undefined]

17.ES6新增:find()

功能:在数组内部, 找到第一个符合条件的数组成员
参数:find(callback[, thisArg]);callback回调函数接受三个参数(element,index,self)

element:可选;当前遍历到的元素
index:可选:当前遍历到的索引
self:可选:数组本身
thisArg:执行回调时用作this 的对象

var array = [5, 12, 8, 130, 44];
var found = array.find(function(element) {
  return element > 10;
});
console.log(found);//12
console.log(array)//[5, 12, 8, 130, 44]---原数组不便

18.ES6新增数组findIndex()

功能:在数组内部, 找到第一个符合条件的数组成员 ,返回索引,若找不到返回-1
参数:arr.findIndex(callback[, thisArg]);callback回调函数接受三个参数(element,index,self)

element:可选;当前遍历到的元素
index:可选:当前遍历到的索引
self:可选:数组本身
thisArg:执行回调时用作this 的对象

var array = [5, 12, 8, 130, 44];
function isLargeNumber(element) {
  return element > 13;
}
console.log(array.findIndex(isLargeNumber));//3
console.log(array);//[5, 12, 8, 130, 44]---数组未改变

19.ES7新增:includes()

功能:用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false
参数: arr.includes(valueToFind[, fromIndex])

fromIndex:从fromIndex 索引处开始查找 valueToFind。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。
valueToFind:需要查找的元素值

var array = [1, 2, 3];
console.log(array1.includes(2));//true
console.log(array);//[1, 2, 3]---原数组未改变
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));//true
console.log(pets.includes('at'));//false
console.log(pets);//['cat', 'dog', 'bat']---原数组未改变
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155221.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月2日 下午4:00
下一篇 2022年7月2日 下午4:00


相关推荐

  • Java Spring 框架详解

    Java Spring 框架详解文章目录1Spring入门1.1Spring简介1.1.1Spring的由来1.1.2Spring的优点1.1.3Spring的体系结构1.2Spring开发环境1.2.1环境准备1.2.2创建Spring工程1.3使用IDEA开发Spring入门程序2SpringIoC2.1SpringIoC的基本概念2.2SpringIoC容器2.2.1BeanFactory2.2.2ApplicationContext3SpringBean4SpringAOP

    2022年7月7日
    25
  • modelsim-win64-10.4-se 破解攻略

    modelsim-win64-10.4-se 破解攻略在实验室换了新的win10系统,原来的quartus9.0在win10上安装不成功,没办法只能换成13.1版本,已经安装可用,下面是与其配合的modelsim-win64-10.4-se的破解攻略,安装教程可以去看正点原子的FPGA开发手册,写的很详细,但是没有讲破解方法,下面是可用的破解方法:软件安装好了却不能用,想必大家都有过这样的痛苦和无奈。这款软件的破解花了我整整一个下午的时间…

    2022年5月24日
    168
  • php正则表达式替换,php正则表达式如何替换字符

    php正则表达式替换,php正则表达式如何替换字符php 正则表达式字符串替换字符的方法 首先创建一个 PHP 示例文件 然后获取需要被替换的字符串 接着使用正则表达式匹配并替换相关字符 最后用 echo 输出替换后的字符串即可 php 正则表达式替换匹配的字符串

    2026年2月17日
    2
  • 运动规划RRT*算法图解

    运动规划RRT*算法图解RRT 算法 具体过程 1 产生一个随机点 xrand 2 在树上找到与 xrand 最近的节点 xnearest 3 连接 xrand 与 xnearest 4 以 xrand 为中心 ri 为半径 在树上搜索节点 5 找出潜在的父节点集合 Xpotential parent 其目的是要更新 xrand 看看有没有比它更好的父节点 6 从某一个潜在的父节点 xpotential par

    2026年3月17日
    2
  • STM32F103C8T6单片机简介

    STM32F103C8T6单片机简介TheSTM32F103xxmedium-densityperformancelinefamilyincorporatesthehigh-performanceARMCortex-M332-bitRISCcoreoperatingata72MHzfrequency,high-speedembeddedmemories(Flashmemoryupto128KbytesandSRAMupto20Kbytes),andanextensive

    2022年4月25日
    123
  • Linux 用户 和 用户组 管理 (添加、删除、修改)及说明

    Linux 用户 和 用户组 管理 (添加、删除、修改)及说明From http www cnblogs com xd502djj archive 2011 11 23 2260094 html 鸟哥官网 Linux 帐号管理与 ACL 权限设定 http linux vbird org linux basic 0410accountm php 鸟哥官网 简体中文 http cn linux vbird org linux ba

    2026年3月26日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号