JavaScript数组方法
JavaScript数组方法
检测方法
Array.isArray()
Array.isArray(obj)
定义:判断传入的值是否是一个数组
参数:
obj:需要判断的值
返回值:如果 obj 是Array,则为 true ,否则为 false
1 | console.log(array.isArray([1,2,3])); // true |
创建数组方法
Array.from()
Array.from( arrayLike, mapFn, thisArg)
定义:用于将类数组对象和可迭代对象转为真正的数组(不改变原对象,返回新的数组)
参数:
arrayLike(必选):需要转成数组的对象
mapFn(可选):类似于数组的map方法,对每个元素进行处理,将处理后的值放入返回的数组
thisArg(可选):用于绑定this
返回值:新的数组实例
1 | // 从String生成数组 |
注意: array.from(null)或者array.from(undefined)会抛出异常
Array.of()
Array.of( element0[, element1[, …[, elementN]]])
定义:返回一个由所有参数值组成的数组,如果没有参数,就返回一个空数组
参数:
elementN(可选):任意个参数,将按顺序成为返回数组中的元素
返回值:新的Array实例
1 | array.of() // [] |
遍历(迭代)方法
array.forEach()
array.forEach( callback(element, index, array), thisArg)
定义:对数组的每个元素执行一个回调函数
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:undefined
关于forEach():
- 无法中途退出循环,只能用
return退出本次回调,进行下一次回调。 - 它总是返回一个undefined值,即使你return了一个值,并且不可链式调用
forEach不会直接改变调用它的对象,但是那个对象可能会被callback函数改变forEach会自动跳过已删除或者未初始化的元素
array.map()
array.map( callback(element, index, array), thisArg)
定义:创建一个新数组,其结果是该数组中的每个元素是调用回调函数后的返回值
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:一个由原数组每个元素执行回调函数的结果组成的新数组
关于map():
map会产生一个新数组,当你不打算使用返回的新数组却使用map是违背设计初衷的,请用forEach或者for-of替代map不修改调用它的原数组本身(当然可以在callback执行时改变原数组)
应用场景:
格式化数组
1
2
3
4
5
6
7let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
return value + '新数组的新元素'
});
console.log(result, a);
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素
// ["1","2","3","4"]
array.filter()
array.filter( callback(element, index, array), thisArg)
定义:创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
关于filter():
filter不修改调用它的原数组本身(当然可以在callback执行时改变原数组)与
map()的区别,在回调函数里,filter返回的是通过表达式的元素,而map返回的是表达式的布尔值1
2
3
4
5
6// 回调函数
function callback(element) {
return element > 20
}
// map 会返回相应的布尔值,比如false/true
// filter 会返回通过表达式的元素
array.some()
array.some( callback(element, index, array), thisArg)
定义:测试数组中是不是至少有1个元素通过了回调函数的测试
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:数组中有至少一个元素通过回调函数的测试就会返回**true;所有元素都没有通过回调函数的测试返回值才会为false**
1 | [2, 5, 8, 1, 4].some(x => x > 10); // false |
array.every()
array.every( callback(element, index, array), thisArg)
定义:测试数组中是不是所有元素通过了回调函数的测试
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:数组中所有元素通过回调函数的测试就会返回**true,至少一个元素没有通过回调函数的测试就返回false**
1 | [12, 5, 8, 130, 44].every(x => x >= 10); // false |
array.find()
array.find( callback(element, index, array), thisArg)
定义:用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:数组中第一个满足所提供测试函数的元素的值,否则返回undefined
关于find():
- 注意
callback函数会为数组中的每个索引调用即从0到length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法
1 | [2, 5, 8, 1, 4].find(x => x > 7); // 8 |
array.findIndex()
array.findIndex( callback(element, index, array), thisArg)
定义:返回第一个符合条件的数组成员的索引,如果所有成员都不符合条件,则返回-1。
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:数组中通过回调函数的第一个元素的索引,否则返回-1
1 | [2, 5, 8, 1, 4].findIndex(x => x > 7); // 2 |
keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值
定义:遍历数组,返回一个遍历器Array Iterator对象,区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是键值对的遍历
参数:无
返回值:一个新的 Array 迭代器对象
操作方法
push() 向数组末尾添加元素
array.push(element1, …, elementN)
定义:将一个或者多个元素添加到数组的末尾,并且返回该数组的新长度
参数:
elementN: 被添加到数组末尾的元素
返回值:数组的新长度
关于push()
push方法根据length属性来决定从哪里开始插入给定的值。如果length不能被转成一个数值,则插入的元素索引为 0,包括length不存在时。当length不存在时,将会创建它。- 对象也可以使用
push,其创建一个键为length、值为element的键值对
1 | // 对象中定义push方法 |
pop() 删除数组末尾的元素
array.pop()
定义:从数组末尾删除最后一个元素,并返回该元素的值。此方法改变数组的长度
参数:无
返回值:从数组中删除的元素,当数组为空时返回undefined
关于pop():
pop方法根据length属性来确定最后一个元素的位置。如果不包含length属性或length属性不能被转成一个数值,会将length置为0,并返回undefined。
1 | let myFish = ["angel", "clown", "mandarin", "surgeon"]; |
shift() 删除数组第一个元素
array.shift()
定义:从数组中删除第一个元素,并返回该元素的值。此方法改变数组的长度
参数:无
返回值:从数组中删除的元素,当数组为空时返回undefined
1 | let myFish = ['angel', 'clown', 'mandarin', 'surgeon']; |
unshift() 向数组头部添加元素
array.unshift(element1, …, elementN)
定义:将一个或者多个元素添加到数组的开头,并返回该数组的新长度
参数:
elementN:被添加到数组开头的元素
返回值:数组的新长度
1 | let arr = [4,5,6]; |
concat() 合并数组
array.concat(value1[, value2[, …[, valueN]]])
定义:用于合并两个或者多个数组,此方法不会改变现有数组,而是返回一个新数组
参数:
valueN: 数组/值,将被合并到一个新的数组中。如果省略了 valueN 参数,则concat会返回调用此方法的数组的一个浅拷贝
返回值:新的 Array 实例
关于concat():
concat方法创建一个新的数组,它由被调用的对象中的元素组成,每个参数的顺序依次是该参数的元素(如果参数是数组)或参数本身(如果参数不是数组)。它不会递归到嵌套数组参数中。concat方法不会改变this或者作为参数提供的数组,而且返回一个浅拷贝。- 如果复制元素为对象引用,
concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。
1 | // concat返回一个浅拷贝 |
indexOf()
array.indexOf(searchElement[, fromIndex])
定义:返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1
参数:
searchElement(必选):要查找的元素
fromIndex(可选):从此索引开始顺向查找。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0
返回值:被找到的元素的索引,如果没找到则返回 -1
lastIndexOf()
array.lastIndexOf(searchElement[, fromIndex])
定义:返回指定元素在数组中的最后一个的索引。如果不存在,则返回 -1
参数:
searchElement:要查找的元素
fromIndex:从此索引开始逆向查找。默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
返回值:数组中该元素最后一次出现的索引,如果没找到则返回 -1
slice() 浅拷贝数组元素
array.slice( [begin[, end]])
定义:返回一个新的数组对象,对象由 begin 和 end 决定的原数组的浅拷贝(包括 begin ,不包括 end ),此方法不会改变原数组
参数:
begin(可选):
- 默认值为0
- 提取起始处的索引(从
0开始),从该索引开始提取原数组元素。 - 如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,
slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。 - 如果
begin超出原数组的索引范围,则会返回空数组。
end(可选):
- 默认值为 array.length
- 提取终止处的索引(从
0开始),在该索引处结束提取原数组元素。slice会提取原数组中索引从begin到end的所有元素(包含begin,但不包含end)。 - 如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。
slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。 - 如果
end被省略,则slice会一直提取到原数组末尾。 - 如果
end大于数组的长度,slice也会一直提取到原数组末尾。
返回值:一个含有被提取元素的新数组
1 | var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; |
splice() 删除 / 插入 / 替换元素
array.splice( start[, deleteCount[, item1[, item2[, …itemN]]]])
定义:向数组中删除 / 插入 / 替换元素,返回值是被删除的元素组成的数组,如果没有删除元素,则返回空数组。此方法会改变原数组
参数:
start(必选):指定修改位置的索引,使用负数可从数组结尾处规定位置。
deleteCount(可选):
- 表示要移除的数组元素的个数。
- 如果为 0 或者负数,则不删除元素。
itemN(可选):要添加入数组中的元素,从 start 位置开始。如果不指定,则 splice()将只删除元素
返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
eg1:删除元素,从索引3的位置开始删除1个元素
1 | let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; |
eg2:插入元素,从索引2的位置开始删除0个元素,插入“drum”
1 | let myFish = ["angel", "clown", "mandarin", "sturgeon"]; |
eg3:替换元素,从索引2的位置开始删除1个元素,插入”trumpet“
1 | let myFish = ['angel', 'clown', 'drum', 'sturgeon']; |
copyWithin() 指定位置的成员复制到其他位置
array.copyWithin( target[, start[, end]])
定义:浅复制数组的一部分到同一数组中的另一个位置,并返回它。该方法会改变原数组,但不会改变数组长度
参数:
target(必选):从该索引位置开始替换位置。如果 target 大于等于 arr.length,将会不发生拷贝
start(可选):从该索引位置开始复制元素,默认为 0
end(可选):停止复制的索引,不包含自身,默认为 array.length
返回值:改变后的数组
1 | let arr = [1, 2, 3, 4, 5, 6]; |
fill() 填充数组
array.fill( value[, start[, end]])
定义:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
参数:
value(必选):用来填充数组的元素
start(可选):起始索引,默认值为 0
end(可选):终止索引,默认值为 array.length
返回值:修改后的数组
1 | [1, 2, 3].fill(4); |
flat() 扁平化数组
let newArray = array.flat([depth])
定义:将嵌套的数组,变成一维的数组。返回一个新数组。该方法不会改变原数组
参数:
depth(可选):
- 指定药提取嵌套数组的结构深度,默认值为 1
- 使用 Infinity,可展开任意深度的嵌套数组(Infinity是表示正无穷大的数值)
返回值:扁平化后的数组
关于flat():
- 使用
Infinity作为flat的参数,可以不需要知道数组的维度来进行扁平化 flat()方法会移除数组中的空项
1 | //使用 Infinity,可展开任意深度的嵌套数组 |
手动实现 flat()
1 | // forEach+isArray+push+recursivity |
flatMap()
flatMap( callback(element, index, array), thisArg)
定义:首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,即 array.map().flat(1),但 flatMap 通常在合并成一种方法的效率稍微高一些。
参数:
callback(必选):数组中每个元素执行的回调函数,接受三个参数
element(必选):数组当前元素
index(可选):当前元素的索引
array(可选):数组本身
thisArg(可选):当执行回调函数 callback 时,用作 this 的值
返回值:一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为1。
1 | var arr = [1, 2, [3]]; |
includes() 查找数组是否包含某个元素 返回布尔
array.includes(value[, fromIndex])
定义:返回一个布尔值,表示数组是否包含给定的值
参数:
value(必选):需要查找的值
fromIndex(可选):从 fromIndex 索引处开始查找
返回值:如果找到返回 true ,否则返回 false
关于 includes()
- includes() 可以识别NaN
应用场景:优化 if 中的判断条件
1 | if( |
排序方法
sort() 数组排序
array.sort([compareFunction ( a, b) ])
定义:对数组元素进行排序,并返回这个数组。此方法会改变原数组
参数:
compareFunction(可选):比较函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
element1, element2:比较函数的参数
返回值:排序后的数组
关于sort():
- sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用 a 和 b 接收两个将要比较的元素
- 若比较函数返回值<0,那么a将排到b的前面;
- 若比较函数返回值=0,那么a 和 b 相对位置不变;
- 若比较函数返回值>0,那么b 排在a 将的前面
对于sort()方法更深层级的内部实现以及处理机制可以看一下这篇文章深入了解javascript的sort方法
sort() 排序常见用法
数组元素为数字的升序、降序:
1
2
3
4
5
6
7
8
9
10
11
12var array = [10, 1, 3, 4, 20, 4, 25, 8];
// 升序 a-b < 0 a将排到b的前面,按照a的大小来排序的
// 比如被减数a是10,减数是20 10-20 < 0 被减数a(10)在减数b(20)前面
array.sort(function (a, b) {
return a - b;
});
console.log(array); // [1,3,4,4,8,10,20,25];
// 降序 被减数和减数调换了 20-10>0 被减数b(20)在减数a(10)的前面
array.sort(function (a, b) {
return b - a;
});
console.log(array); // [25,20,10,8,4,4,3,1];数组多条件排序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19var array = [
{ id: 10, age: 2 },
{ id: 5, age: 4 },
{ id: 6, age: 10 },
{ id: 9, age: 6 },
{ id: 2, age: 8 },
{ id: 10, age: 9 },
];
array.sort(function (a, b) {
if (a.id === b.id) {
// 如果id的值相等,按照age的值降序
return b.age - a.age;
} else {
// 如果id的值不相等,按照id的值升序
return a.id - b.id;
}
});
// [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}]自定义比较函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18var array = [
{ name: "Latte" },
{ name: "Latte" },
{ name: "OB" },
{ name: "Latte" },
{ name: "OB" },
{ name: "OB" },
];
array.sort(function (a, b) {
if (a.name === "Latte") {
// 如果name是'Latte' 返回-1 ,-1<0 a排在b的前面
return -1;
} else {
// 如果不是的话,a排在b的后面
return 1;
}
});
// [{"name":"Latte"},{"name":"Latte"},{"name":"Latte"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]
reverse() 颠倒数组中元素的顺序
array.reverse()
定义:用于颠倒数组中元素的顺序,此方法会改变原数组
参数:无
返回值:颠倒后的数组
转换方法
join() 数组转字符串
array.join([ separator ])
定义:用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串。
参数:
separator(可选):分隔符,默认用逗号(,)分隔
返回值:转换后的字符串
关于join():
- 如果一个元素为
undefined或null,它会被转换为空字符串。
1 | let a = ["hello", "world"]; |
toLocaleString() 数组转字符串
array.toLocaleString([ locales[, options]]);
定义:返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 的返回值调用 join() 方法连接(由逗号隔开)
参数:
locales(可选):区域名称
options(可选):元素调用的toLocaleString()的options
返回值:转换后的字符串
1 | let a=[{name:'OBKoro1'},23,'abcd',new Date()]; |
如上述栗子:调用数组的toLocaleString方法,数组中的每个元素都会调用自身的toLocaleString方法,对象调用对象的toLocaleString,Date调用Date的toLocaleString。
toString() 数组转字符串 不推荐
array.toString()
定义: toString() 方法可把数组转换为由逗号链接起来的字符串。
参数:无
返回值:转换后的字符串
不推荐理由:该方法的效果和join方法一样,都是用于数组转字符串的,但是与join方法相比没有优势,也不能自定义字符串的分隔符,因此不推荐使用。
值得注意的是:当数组和字符串操作的时候,js 会调用这个方法将数组自动转换成字符串
1 | let b = ["toString", "演示"].toString(); // toString,演示 |
归并方法(迭代数组的所有项,然后构建一个最终返回的值)
reduce() 为数组提供累加器,合并为一个值
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
定义:对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。
参数:
function(必选):执行函数,包括四个参数
- total(必选):初始值, 或者上一次调用回调返回的值
- currentValue(必选):数组当前的元素
- index(可选):当前元素的索引
- arr:数组对象本身
initialValue(可选): 指定第一次回调 的第一个参数,即total的初始值,如果没有提供初始值,则使用数组中的第一个元素
回调第一次执行时:
如果 initialValue 在调用 reduce 时被提供,那么第一个 total 将等于 initialValue,此时 currentValue 等于数组中的第一个值;
如果 initialValue 未被提供,那么 total 等于数组中的第一个值,currentValue 等于数组中的第二个值。此时如果数组为空,那么将抛出 TypeError。
如果数组仅有一个元素,并且没有提供 initialValue,或提供了 initialValue 但数组为空,那么回调不会被执行,数组的唯一值将被返回。
注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。
也就是说,如果没有提供 initiaValue,则 reduce()的调用次数为 length - 1
1 | // 数组求和 |
reduceRight() 从右至左累加
这个方法除了与reduce执行方向相反外,其他完全与其一致,请参考上述 reduce 方法介绍。