前言:数组方法过多,在03中已有小总结,但不完善且较冗余,特此单开方便查询学习。
遍历数组并不会改变原始数组的方法(12个):
ES5:
1.forEach() 2.map() 3.filter()
// forEach没有返回值,map | filter都返回新数组。
// filter是满足条件的留下,是对原数组的过滤;(true留下,false走开)
// map则是对原数组的加工,一一映射成新的数组;
//forEach适合于不打算改变数据、遍历item。
//map适用于要改变数据值的时候。更快,且返回一个新的数组
// - 这样可以使用链式(结合filter()、reduce()等使用)
// - 性能上来说 for>forEach>map
4.every() 5.some()
6.reduce() 7.reduceRight()
ES6:
8.find() 9.findIndex()
10.keys() 11.values() 12.entries()
1. forEach() - 遍历 + 每项执行回调函数
定义: 按升序为数组中含有效值的每一项执行一次回调函数。
语法:arr.forEach(function(item, index, arr), thisValue)
参数:
- function(必须):数组中每个元素需要调用的函数。
- item(必须),数组当前元素的值
- index(可选),当前元素的索引值
- arr(可选),数组对象本身
- thisValue(可选):当执行回调函数时this绑定对象的值,默认值为undefined,匿名函数中的this指向window
返回值:
- forEach()总是返回 undefined值,即使你return了一个值。
PS:
- 无法中途退出循环,只能用return退出本次回调,进行下一次回调。
下面类似语法同样适用这些规则:
- 对于空数组是不会执行回调函数的
- 对于已在迭代过程中删除的元素,或者空元素会跳过回调函数
- 遍历次数在第一次循环前就会确定,再添加到数组中的元素不会被遍历
- 如果已经存在的值被改变,则传递给 callback 的值是遍历到它们那一刻的值
var arr = ['a','b','c']
var newArr= []
arr.forEach(function(item, index, arr){
newArr.push(item)
})
console.log(newArr)
2. map() - 用函数修改每条数据 + 返回新数组
定义: 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法: arr.map(function(item, index, arr), thisValue)
参数:
- function(必须):数组中每个元素需要调用的函数。
- item(必须),数组当前元素的值
- index(可选),当前元素的索引值
- arr(可选),数组对象本身
- thisValue(可选):当执行回调函数时this绑定对象的值,默认值为undefined
返回值:
- 根据需求格式化原数组,返回格式化后的数组。原数组不变
var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(item,index,array){
return item + 1
})
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]
3. filter() - 过滤数据 + 返回新数组
定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法: arr = arr.filter(function(item, index, arr), thisValue)
参数:
- function(必须):数组中每个元素需要调用的函数。
- item(必须),数组当前元素的值
- index(可选),当前元素的索引值
- arr(可选),数组对象本身
- thisValue(可选):当执行回调函数时this绑定对象的值,默认值为undefined
返回值:
- 返回数组中满足条件的元素组成的新数组,原数组不变
var a = [1,2,3,4,11]
// 第一个参数为一个方法,有三个参数,item:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(item,index,array){
return current < 10
})
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
4.5. every() && some() - 遍历 + 检测每项
定义: 方法用于检测数组所有元素是否都符合函数定义的条件
语法:arr.every|some (function(item, index, arr), thisValue)
参数:
- function(必须):数组中每个元素需要调用的函数。
- item(必须),数组当前元素的值
- index(可选),当前元素的索引值
- arr(可选),数组对象本身
- thisValue(可选):当执行回调函数时this绑定对象的值,默认值为undefined
every方法返回值:
- 如果检测到有一个元素不满足,则整个表达式返回 false,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
some方法返回值:
- 如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
//every()
var a = [1,2,3,4,5]
var b = a.every(function(item,index,array){
return item< 6
})
var c = a.every(function(item,index,array){
return item< 3
})
console.log(b) // true
console.log(c) // false
//some()
function isBigEnough(item, index, array) {
return (item >= 10); //数组中是否有一个元素大于 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true
6. 7. reduce() reduceRight() - 累加/累乘
定义: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。
语法: arr.reduce(function(perviousValue,currentValue,currentIndex,arr),initialValue)
参数:
- function(必须):数组中每个元素需要调用的函数
- perviousValue(必须):初始值,上一次的计算结果的返回值
- currentValue(必须):当前元素,若指定了初始值,则起始索引为 0,否则为 1
- currentIndex(可选):当前元素的索引。若指定了初始值,则起始索引为 0,否则为 1
- arr(可选):被遍历的对象数组
- initialValue(可选):此参数作为第一次调用函数时参数 previousValue 的值,
若指定了初始值
initialValue
,则currentValue
取数组第一个元素;
若未指定初始值,则perviousValue
取数组的第一个元素,currentValue
取数组第二个元素
返回值
- reduce里面必须要return,return出去累加/累乘等等的值
PS: reduce() 对于空数组不会执行回调函数。
// 当没有设置初始值
let arr = [1,3,4,6,7]
let sum = arr.reduce((perviousValue,current,index)=>{
console.log(index, current, total);
return perviousValue + current
})
console.log(sum, '求和')
实例:
// 累加和累乘
let arr3 = [1,3,4,6,7];
let sum3 = arr3.reduce((pre,cur)=> pre+cur)
let multiply = arr3.reduce((pre,cur) => pre*cur)
console.log(sum3) // 21
console.log(multiply) // 504
//数组去重
let arr4 = [1,3,2,5,3,1,2,7,8];
let newArr = arr4.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
} else {
return pre
}
},[]);
console.log(newArr, '数组去重') // [1, 3, 2, 5, 7, 8] , 数组去重
8.9. ES6 - find() & findIndex() - 查找符合条件的成员 + 返回元素或index
find()定义: 用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined。
findIndex()定义: 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
语法:arr.find|findIndex(function(item, index, arr), thisValue)
参数:
- function(必须):数组中每个元素需要调用的函数。
- item(必须),数组当前元素的值
- index(可选),当前元素的索引值
- arr(可选),数组对象本身
- thisValue(可选):当执行回调函数时this绑定对象的值,默认值为undefined
返回值:
- find 返回第一个符合条件的数组成员,没有返回undefined
- findIndex 返回第一个符合条件的数组成员的index,没有返回-1
这两个方法都可以识别NaN,弥补了indexOf的不足
// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10, NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10, NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4
// find
var a = [1,2,3,4]
// b在下面需要使用,则一般用find
var b = a.find(function(ele,index,array){
return ele == 1
})
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组),则一般使用Array.includes(value)方法
// 如果为对象数组,则可以使用Array.some()方法
var a = [1,2,3]
console.log(a.includes(1)) // true
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
console.log(a.some(function(ele){
return ele.name == 'xiaoming'
})) // true
// findIndex
var a = [1,2,3,4]
var b = a.findIndex(function(ele,index,array){
return ele === 2
})
var c = a.indexOf(2)
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(c) // 1
ES6 - 10.11.12 keys() & values() & entries()
遍历键名、遍历键值、遍历键名+键值
定义: 三个方法都返回一个新的 Array Iterator 对象,对象根据方法不同包含不同的值。
语法:
arr.keys()
arr.values()
arr.entries()
参数: 无
遍历例子(摘自ECMAScript 6 入门):
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
在for…of中如果遍历中途要退出,可以使用break退出循环。
如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历:
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
entries()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1
keys()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8
PS. isArray() - ES6
用来判断一个元素是否为数组
Array.isArray([]) // true
Array.isArray({}) // false
附上原博客地址:
js 常用数组操作方法总结
js 数组详细操作方法及解析合集