js中常用数组函数总结 reduce() forEach() every() some() map() filter()...

数组API

一、会改变原数组

splice()

let newArr = arr.splice(start,count,value1,value2...);

用法:

​ 删除数组中的元素,会直接在原数组上操作

参数:

​ start:开始的下标

​ count:删除的数量

​ value…:删除以后补充的元素

​ 如果count为空表示删除到最后,value为空表示不补充任何元素;返回删除的元素,原数组会发生变化

返回值:

​ 返回一个新的数组都是要删除的元素

案例:

let arr = [0,1, 2, 3, 4,5,6];
let newArr = arr.splice(2,3,"111","222","333");
console.log(arr);    // [0, 1, "111", "222", "333", 5, 6]
console.log(newArr);   // [2, 3, 4]

reverse()

let newArr = arr.reverse();

用法:

​ 翻转数组中的元素

参数:

返回值:

​ 返回翻转后的数组

案例:

let arr = [0,1, 2, 3, 4,5,6];
arr.reverse();
console.log(arr);   // [6, 5, 4, 3, 2, 1, 0]

push()

let newArr = arr.push(value..);

用法:

​ 在数组的末尾添加元素

参数:

​ value…:要添加的元素列表

返回值:

​ 返回数组的长度

案例:

let arr = [1]
let arrLenght = arr.push(2,3);
console.log(arr);   //[1, 2, 3]
console.log(arrLenght)   //3

pop()

let newArr = arr.pop();

用法:

​ 删除数组末尾的一个元素

参数:

返回值:

​ 返回删除的元素

案例:

let arr = [1,2,3]
let arrLenght = arr.pop();
console.log(arr);   //[1, 2]
console.log(arrLenght)   //3

unshift()

let newArr = arr.unshift(value...);

用法:

​ 在数组的开头添加元素

参数:

​ value…:要添加的元素列表

返回值:

​ 返回数组的长度

案例:

let arr = [1,2,3]
let arrLenght = arr.unshift(0);
console.log(arr);   //[0,1,2,3]
console.log(arrLenght)   //4

shift()

let newArr = arr.shift(value...);

用法:

​ 删除数组开头的一个元素

参数:

​ value…:要添加的元素列表

返回值:

​ 返回删除的元素

案例:

let arr = [0,1,2,3]
let arrLenght = arr.shift();
console.log(arr);   //[1,2,3]
console.log(arrLenght)   //0

sort()

array.sort(sortby)

用法:

​ sort() 函数用于将当前数组对象的元素按指定顺序进行排序,并返回排序后的数组。

参数:

​ sortby:可选,回调函数,规定排序顺序,每个元素都会执行这个函数

返回值:

​ 返回排好序的原数组

说明:

  1. 没有参数时默认排序顺序是根据字符串UniCode码进行排序

  2. 有参数时比较回调函数的参数a和b

    若 a 小于 b,即 a - b 小于零,则返回一个小于零的值,数组将按照升序排列。

    若 a 等于 b,则返回 0 。

    若 a 大于 b, 即 a - b 大于零,则返回一个大于零的值,数组将按照降序排列

    a -->代表每一次执行匿名函时候,找到的数组中的当前项;
    b -->代表当前项的后一项;

案例:

var arr = [268,65,314,39,52];
arr.sort( (a,b) => a-b );
console.log(arr); 
// [39, 52, 65, 268, 314]

var arr = [268,65,314,39,52];
arr.sort( (a,b) => b-a );
console.log(arr); 
// [314, 268, 65, 52, 39]

按照数组中对象的某一个属性值进行排序

var arr = [
	{"name":"LiMing","money":"3000"},
    {"name":"Jenny","money":"1000"},
	{"name":"Danny","money":"2000"},
];

function rich(prop){
    return function(a,b){
        var value1 = a[prop];
        var value2 = b[prop];
        return value1 - value2;
    }
}
console.log(arr.sort(rich('money')))

forEach()

array.forEach(function(elem,index,arr), thisValue)

js有五个迭代方法,分别为:every、some、filter、map、forEach

用法:

​ 方法用于调用数组的每个元素,并将元素传递给回调函数,回调函数在对拿出的元素进行操作(这里会发生按值传递,具体见下文)。

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ thisValue:可选。对象作为该执行回调时使用,传递给回调函数,用作“this”值,没有值为undefined

返回值:

不会有返回值只是循环操作

案例:

var arr = [1,2,3];
arr.forEach(function(elem,i,arr){
		 elem = elem*2;
	  })
console.log(arr); // [1, 2, 3]

var arr = [1,2,3];
arr.forEach(function(elem,i,arr){
		 arr[i] = elem*2;
	  })
console.log(arr); // [2, 4, 6]

var objs=[{x:1},{x:2},{x:3}]
objs.forEach(function(elem,i,arr){
    elem.x*=2;
})
console.log(objs);
//[{x: 2},{x: 4},{x: 6}]

看以上案例,第一个直接对elem进行操作,并没有改变原数组中的元素,是因为这时发生了按值传递,把原数组中当前元素复制了一个副本出来进行操作,这时操作副本对原来的值并没有任何影响。

第二个是通过地址值找到了当前的数组,直接在原数组上进行赋值,所以第一个没有任何改变,第二个发生了变化。

第三个是按值传递时复制了一个地址副本,在对elem元素操作时先通过地址值找原数组中的对象再进行操作。

按值传递传送门

注意:

  1. 不会对空数组进行循环
  2. 修改元素值时注意当前元素是原始类型还是引用类型,原始类型用回调函数参数中数组.下标,引用类型直接用回调函数参数中的当前元素

二、不会改变原数组

toString()

let stringObject=arr.toString();

用法:

​ 将数组元素转为字符串,按逗号分隔

参数:

返回值:

​ 转化后的字符串

案例:

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

join()

let stringObject=arr.join();

用法:

​ 将数组元素转字符串,可以按照指定的字符串分隔元素

参数:

​ 指定的要分隔符字符串

返回值:

​ 转化后的字符串

案例:

console.log([1,2,3].join("|"));  //"1|2|3"

concat()

let arrayObject=arr.concat(arr1,arr2...);

用法:

​ 拼接arr1,arr2…多个数组到arr中

参数(必需):

​ 该参数可以是具体的多个值,也可以是多个数组对象,还可以混搭。

返回值:

​ 返回一个新的数组,该数组是通过把所有 arr1,arr2… 参数添加到 arr 中生成的

案例:

let newArr=[1].concat(2,[3],4);   //newArr = [1, 2, 3, 4]

slice()

let newArr = arr.slice( start,end );

用法:

​ 截取数组中的元素

参数:

​ slice:开始的下标

​ end:结束的下标

​ 包头不包尾,如果是负数表示倒数,如果end 为空表示截取到最后

返回值:

​ 返回一个新的数组,该数组是通过截取数组中的元素生成的

案例:

let newArr = [1, 2, 3, 4].slice(1,3);   //newArr = [2,3]

every()

array.every(function(elem,index,arr), thisValue)

js有五个迭代方法,分别为:every、some、filter、map、forEach

用法:

​ 方法用于检测数组所有元素是否都符合指定条件(通过回调函数提供)。

​ 如果有一个元素不满足条件,则整个表达式返回false,且剩余的元素不会再进行检测。

​ 如果所有条件都满足则返回true

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ thisValue:可选。对象作为该执行回调时使用,传递给回调函数,用作“this”值,没有值为undefined

返回值:

true/false

案例:

var arr = [2,4,6];
var bool=arr.every(function(elem,i,arr){
		return elem%2 == 0;
	  })
console.log(bool)   // true

注意: 不会对空数组进行检测

some()

array.some(function(elem,index,arr), thisValue)

js有五个迭代方法,分别为:every、some、filter、map、forEach

用法:

​ 方法用于检测数组中的元素是否满足指定条件(通过回调函数提供)。

​ 如果有一个元素满足条件,则表达式返回true,剩余的元素不会再执行检测。

​ 如果没有满足条件的元素,则返回false

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ thisValue:可选。对象作为该执行回调时使用,传递给回调函数,用作“this”值,没有值为undefined

返回值:

true/false

案例:

var arr = [1,2,3];
var bool=arr.some(function(elem,i,arr){
		return elem%2 == 0;
	  })
console.log(bool)   // true

注意: 不会对空数组进行检测

map()

array.map(function(elem,index,arr), thisValue)

js有五个迭代方法,分别为:every、some、filter、map、forEach

用法:

​ 方法返回一个新数组,数组中的元素为原数组调用回调函数处理后的值。

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ thisValue:可选。对象作为该执行回调时使用,传递给回调函数,用作“this”值,没有值为undefined

返回值:

​ 回调函数操作后得到的新数组

案例:

var arr = [1,2,3];
var newArr=arr.map(function(elem,i,arr){
		return elem = elem*2;
	  })
console.log(newArr)   // [2, 4, 6]

注意: 不会对空数组进行操作

filter()

array.filter(function(elem,index,arr), thisValue)

js有五个迭代方法,分别为:every、some、filter、map、forEach

用法:

​ 方法创建一个新的数组,新数组中的元素是通过检查原数组中符合条件的所有元素

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ thisValue:可选。对象作为该执行回调时使用,传递给回调函数,用作“this”值,没有值为undefined

返回值:

​ 通过回调函数检查后过滤后得到的新数组

案例:

var arr = [1,2,3];
var newArr=arr.filter(function(elem,i,arr){
		return elem%2!=0;
	  })
console.log(newArr)   // [1,3]

注意: 不会对空数组进行操作

reduce()

javascript高级程序设计中称此方法为并归方法

array.reduce(function(prev,elem,index,arr), initialValue)

用法:

​ 接收一个函数作为累加器,数组中的每个值(从左到右)开始汇总,最终汇总为一个值

参数:

​ function(prev,elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ prev:没有默认值时第一项的值,或上次叠加操作的结果

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ initialValue:可选。传递给回调函数的初始值

返回值:

​ 返回计算的结果

案例:

var arr = [1,2,3];
var num=arr.reduce(function(prev,elem,i,arr){
    console.log("prev:"+prev+"---elem:"+elem+"---index:"+i)
	return prev+elem
})
console.log(num)
// prev:1---elem:2---index:1
// prev:3---elem:3---index:2
// 6

var arr = [1,2,3];
var num=arr.reduce(function(prev,elem,i,arr){
    console.log("prev:"+prev+"---elem:"+elem+"---index:"+i)
	return prev+elem
},10)
console.log(num)   
// prev:10---elem:1---index:0
// prev:11---elem:2---index:1
// prev:13---elem:3---index:2
// 16

由上边可看出,当没有设置默认值的时候,原数组arr的第一项就是默认值,循环会从第二个元素开始,设置了默认值循环就从第一项开始,而最后的汇总值其实就是return出来的prev

注意: 不会对空数组进行操作

面试题:

如何知道一串字符串中每个字母出现的次数?

var str = 'zhenzhengdedashiyongyuanhuaizheyikexuetudexin';
str.split('').reduce(function(prev,elem,index,arr){
    prev[elem] ? prev[elem]++ : prev[elem] = 1;
    return prev;
},{}) 

利用reduce数组去重

var str = 'zhenzhengdedashiyongyuanhuaizheyikexuetudexin';
str.split('').reduce(function(prev,elem,index,arr){
    prev.indexOf(elem) != -1 ? console.log("已经存在改元素"+elem) : prev.push(elem)
    return prev;
},[]) 

求数组中最大项

var arr = [11,34,51,19,64];
arr.reduce(function(prev,elem){
    return prev<elem ? elem:prev
})

find()

array.find(function(elem,index,arr), initialValue)

用法:

​ 返回通过测试(回调函数内判断)的数组的第一个元素的值

​ 当数组中的元素在测试条件时返回true,find()返回符合条件的元素,函数运行结束。

​ 如果没有符合的元素返回undefined

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ initialValue:可选。传递给回调函数的初始值

返回值:

​ 返回通过测试的元素或者undefined

案例:

let friendArray = [
{"name":"Jenny","money":"1000"},
{"name":"Danny","money":"2000"},
{"name":"LiMing","money":"3000"},
];
let result = friendArray.find(function (item) {
    return item.money > 1000;
});
console.log(result); //{name: "Danny", money: "2000"}

findIndex()

array.findIndex(function(elem,index,arr), initialValue)

用法:

​ 返回通过测试(回调函数内判断)的数组的第一个元素的下标

​ 当数组中的元素在测试条件时返回true,find()返回符合条件的元素的下标,函数运行结束。

​ 如果没有符合的元素返回-1

参数:

​ function(elem,index,arr) :必须,回调函数,每个元素都会执行这个函数

​ elem:必须,当前元素

​ index:可选,当前元素索引值

​ arr:可选,当前元素属于的数组对象

​ initialValue:可选。传递给回调函数的初始值

返回值:

​ 返回通过测试的元素的下标或者-1

案例:

let friendArray = [
{"name":"Jenny","money":"1000"},
{"name":"Danny","money":"2000"},
{"name":"LiMing","money":"3000"},
];
let result = friendArray.findIndex(function (item) {
    return item.name == "Danny";
});
console.log(result); // 1

includes()

 var result=arr.includes(searchElement, fromIndex)

用法:

​ 判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

参数:

​ searchElement(必须):需要查找的元素值。

​ fromIndex(可选):表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

返回值:

​ 如果找到匹配的字符串返回 true,否则返回 false。

案例:

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true -1:倒数的位置
[1, 2, NaN].includes(NaN); // true 不会对NaN误判

注意:

  1. index内部使用严格的相等运算符(===)进行判断,会对NaN误判
  2. includes使用的是不一样的判断算法,没有这个问题

flat()

ES10新增加数组降维方法。

array.flat(number);

用法:

​ 对多维数组进行降维。

参数:

​ number:可选。控制降维的层数,要去掉几层数组就传几,默认为1,不确定长度,可以用Infinity关键字作为参数。

返回值:

​ 返回降维后的数组。

注意:如果原数组有空位,flat()方法会跳过空位。

案例:

var arr = [1, 2, [3, 4, 5]].flat();
console.log(arr); //arr = [1, 2, 3, 4, 5]

var arr = [1, 2, [3, [4], 5]].flat(2);
console.log(arr); //arr = [1, 2, 3, 4, 5]

var arr = [1, [[2], [3, [4]], 5]].flat(Infinity);
console.log(arr); //arr = [1, 2, 3, 4, 5]

var arr = [1, [[2],, [3, ,[4,,]], 5]].flat(Infinity);
console.log(arr); //arr = [1, 2, 3, 4, 5]

flatMap()

用法:

​ 对原数组的每个成员执行一个map()函数,然后对返回值组成的数组执行flat()方法(只能展开一层数组)。该方法返回一个新数组,不改变原数组。

案例:

let array = [1, 2, 3, 4, 5]
array.map(x => [x, x * 2])
//转换
[Array(2), Array(2), Array(2)]
0: (2)[1, 2]
1: (2)[2, 4]
2: (2)[3, 6]
3: (2)[4, 8]
4: (2)[5, 10]
//继续
array.flatMap(v => [v, v * 2]) == array.flat(1) //1维flatMap效率高一点
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

三、Array的静态方法

Array.from()

用于将两类对象转化为真正的数组:类数组对象,和可遍历的对象(包括ES6新增加的数据结构SetMap

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际开发中,多数用于DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉沦与遐想。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值