JS的数组方法总结

睦月夜猫
205 阅读17分钟

JS的数组方法总结

前言

这篇文章主要是对自己薄弱的记忆力存个档，强化一下自己对js中的数组方法的使用

我：这个东西我有印象是那个什么方法就能直接解决来着。

脑子：不，你想不起来。

我：.......

如果有不对的地方请指出来，我尽快修改

常用的数组方法

1. toString() 方法

将数组转为字符串

语法：number.toString(radix)

参数描述
radix可选。规定表示数字的基数，是 2 ~ 36 之间的整数。若省略该参数，则默认使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。

  • 2 - 数字以二进制值显示

  • 8 - 数字以八进制值显示

  • 16 - 数字以十六进制值显示

var num = 12;
console.log(num.toString(2)); // 1100
console.log(num.toString(8)); // 14
console.log(num.toString(16)); // c

处理数组：

var arr1 = ["张三","李四","王五"]
var arr2 = [1,2,[3,[4,5,6],7],8]
var str1 = arr1.toString();
var str2 = arr2.toString();
console.log("arr1: ",arr1); // arr1:  [ '张三', '李四', '王五' ]
console.log("str1: ",str1); // str1:  张三,李四,王五
console.log("str2: ",str2); // str2:  1,2,3,4,5,6,7,8

toStrin() 方法小结：

  • 能够数字或数组中的元素转换为字符串

  • 可以接收一个2-32的一个数字作为进制转换

  • 也能够将数组的全部方括号去除，进行类似扁平化处理

2. join()方法

将数组转为字符串

语法：array.join(separator)

参数描述
separator可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
  • separator 也可以一个字符串
var arr3 = [1,2,3];
var arr4 = [1,2,[3,[4,5,6],7],8];
var str4 = arr4.join(" ")
console.log(typeof(str4),str4); // string 1 2 3,4,5,6,7 8
console.log(arr3.join()); 　 // 1,2,3 
console.log(arr3.join(""));  // 123
console.log(arr3.join("-")); // 1-2-3
console.log(arr3.join(" and ")); // 1 and 2 and 3
console.log(arr3); 　　　　　 // [1, 2, 3]（原数组不变）

join() 方法小结：

  • jion() 方法不会改变原数组
  • 如果括号内什么都没有，就会直接使用默认逗号作为分隔符号
  • 指定的分隔符可以是符号，也可以是字符串（包括空字符串）
  • 是多维数组的话无法像toString那样全部转换或是全部全部逗号都去除

3. push() 方法

向数组尾部追加元素 （常用划重点）

语法：array.push(item1, item2, ..., itemX)

参数描述
item1, item2, ..., itemX必需。要添加到数组的元素。
  • 把里面的内容添加到数组末尾，并返回修改后的长度。
var arr5 = [1, 2, 3, 4];
arr5.push(5,6)
console.log(arr5); // [ 1, 2, 3, 4, 5, 6 ]
arr5.push([5,6])
console.log(arr5); // [ 1, 2, 3, 4, 5, 6, [ 5, 6 ] ]

push() 方法小结：

  • 返回一个新数组，会修改原数组。
  • 新元素将添加在数组的末尾。
  • 此方法改变数组的长度，并返回修改后的长度
  • 字符串内容要加引号

可以配合ES6的扩展运算符(...)实现数组的合并

// 扩展运算符应用于数组合并
var arr6 = [4, 5, 6]
var arr7 = [7, 8, 9]
var arr8 = [...arr6, ...arr7];
console.log(arr8); // [ 4, 5, 6, 7, 8, 9 ]
//push 方法合并
arr6.push(...arr7);
console.log(arr6); // [ 4, 5, 6, 7, 8, 9 ]

4. unshift()方法

向数组头部追加

语法：array.unshift(item1,item2, ..., itemX)

参数描述
item1,item2, ..., itemX可选。向数组起始位置添加一个或者多个元素

与 push() 方法类似，只不过它是添加到了数组的头部

var unshiftArr = [1, 2, 3, 4];
unshiftArr.unshift(5,6);
console.log(unshiftArr); // [ 5, 6, 1, 2, 3, 4 ]
unshiftArr.unshift([5,6]);
console.log(unshiftArr); // [ [ 5, 6 ], 5, 6, 1, 2, 3, 4 ]

5. shift() 方法与 pop()方法

shift()方法： 删除并返回数组的第一个元素

语法：array.shift()

var shiftArr = ["小红", "小王", "小明"]
var delArr = shiftArr.shift()   // 接收返回值
console.log('arr: ', shiftArr)  //  ["小王", "小明"]
console.log('delArr: ', delArr) // 小红

pop() 方法： 删除 并 返回 数组的最后一个元素

语法：array.pop()

var popArr = ["小红", "小王", "小明"]
console.log('arr: ', popArr)     // arr:  [ '小红', '小王', '小明' ]
var delArr = popArr.pop()        // 接收返回值
console.log('arr: ', popArr)     // ["小红", "小王"]
console.log('delArr: ', delArr)  // 小明

shift() 方法 与 pop() 方法小结：

  • 返回值，返回被删除的元素，类型可以是所有类型
  • 同样会修改数组的长度
  • 数组元素可以是一个字符串，数字，数组，布尔，或者其他对象类型。

unshift() 方法与 shift() 方法相对，针对数组头部的增加和删除

push() 方法和 pop() 方法相对，针对数组尾部的增加和删除

6. sort()方法

用于对数组的元素进行排序

语法：array.sort(callback)

参数描述
callback可选。规定排序顺序。必须是函数。

返回值

Type描述
Array对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

可以对数组中的元素按Unicode编码进行排序，会修改原数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits);   // [ 'Apple', 'Banana', 'Mango', 'Orange' ]
var points  = [33,1,34,35,8,9]
var pointsA  = points.sort()  // 接收返回值 
console.log('arr: ', points)   // [1, 33, 34, 35, 8, 9]
console.log('arr2: ', pointsA) // [1, 33, 34, 35, 8, 9]

我们可以在**sort()**中添加回调函数，来指定排序规则，回调函数中需要定义两个形参，**sort()**会分别使用数组中的元素作为实参去调用回调函数。

然后根据返回值来决定元素的顺序：

  • 返回值大于0，则元素交换位置；返回值小于0元素位置不变；
  • 返回值等于0，认为两元素相等 位置不交换；
  • 若 a 大于 b，则返回一个大于 0 的值
  • 即 return a - b; 升序排序 return b - a; 降序排序
var points = [33, 1, 34, 35, 8, 9]
points.sort((a,b)=>{
    return a-b 		// 升序
})
// points.sort((a, b) => a - b)  // 更简化的写法 
console.log("points: ", points)     // [ 1, 8, 9, 33, 34, 35 ]

sort() 方法小结：

  • 排序顺序可以是字母或数字，并按升序或降序
  • 默认排序顺序为按字母升序
  • 使用数字排序，必须设置一个回调函数指定升序还是降序
  • 会修改原来的数组

7. reverse()方法

颠倒数组中元素的顺序

语法：array.reverse()

返回值

类型描述
Array颠倒顺序后的数组

不接受参数

var fruits2 = [1,2,4,3,5,6]
fruits2.reverse();
console.log(fruits2) // [ 6, 5, 3, 4, 2, 1 ]
  • 会改变原来的数组

8. concat()方法

concat() 方法用于连接两个或多个字符串

语法：string.concat(string1, string2, ..., stringX)

数描述
string1, string2, ..., stringX必需。将被连接为一个字符串的一个或多个字符串对象。

返回值

类型描述
String两个或多个字符串连接后生成的新字符串。

该方法不会改变原有字符串

var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
console.log(n); // Hello world!

实际上也可以用来连接数组

可以连接两个或者多个数组，并将新的数组返回

该方法不会对原数组产生影响

var conArr = [1,2,3];
var conArr2 = [3,4,5];
var conArr3 = [6,7,8];
var result = conArr.concat(conArr2,conArr3,4,5); 
// [1, 2, 3, 3, 4, 5, 6, 7, 8, 4,5]
console.log(result);

多出来的元素会补充到新数组的末尾

9. splice()方法

splice() 方法用于添加或删除数组中的指定元素 （划重点）

语法：array.splice(index,howmany,item1,.....,itemX)

参数描述
index必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany可选。规定应该删除多少元素。必须是数字，也可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX可选。要添加到数组的新元素

人话版：

  • 第一个，表示开始位置的索引（从0开始）
  • 第二个，表示删除数量，可以是0
  • 第三个及以后，传递进去新的元素，这些元素会插入到开始位置索引的前面

返回值

Type描述
Array如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

var spliceArr = [1, 2, 3, 4]
var resArr = spliceArr.splice(2, 0, [9, 8]) // 接收返回值
console.log(resArr);    // []   没删东西，返回空数组
console.log(spliceArr)  // [ 1, 2, [ 9, 8 ], 3, 4 ]

删了东西的情况

var spliceArr = [1, 2, 3, 4, 5, 6]
var resArr = spliceArr.splice(3, 2, [9]) // 接收返回值
console.log(resArr)     // [ 4, 5 ]
console.log(spliceArr)  // [ 1, 2, 3, [ 9 ], 6 ]

不设置第二个参数

var spliceArr = [1, 2, 3, 4, 5, 6]
var resArr = spliceArr.splice(3) // 接收返回值
console.log(resArr)     // [ 4, 5, 6 ]
console.log(spliceArr) 	// [ 1, 2, 3 ]

splice() 方法小结：

  • 这种方法会改变原始数组
  • 对数组中的元素更换更为容易
  • 如果未删除任何元素，则返回空数组

10. slice() 方法

slice() 方法可提取数组/字符串的某个部分，并以新的数组/字符串返回被提取的部分。

语法：array.slice(start, end)

参数描述
start可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

人话版：

  • start 截取开始的位置的索引，包含索引
  • end 截取结束的位置的索引，不包含结束索引，这个可以不写后面全取
  • 传递的索引可以为负数，此时从后往前计算

返回值

Type描述
Array返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

​ 方法不会修改原数组，会把提取打的原数组提取封装到一个新数组中返回

var sliceArr = ["小红", "小王", "小明"]
var sliceArr2 = sliceArr.slice(1, 2)
console.log('sliceArr: ', sliceArr)   // ["小红", "小王", "小明"]，原数组保持不变
console.log('sliceArr2: ', sliceArr2) // [ '小王' ]，并没有提取到第三个元素

​ 参数为负数的时候

var sliceArr2 = sliceArr.slice(-2,-1)
console.log("sliceArr: ", sliceArr)   // [ '小红', '小王', '小明' ]
console.log("sliceArr2: ", sliceArr2) // [ '小王' ]

slice() 方法小结：

  • 能够截取指定范围内的元素，但不包括最后一个元素
  • 是一个数组方法同时也是一个字符串方法
  • 指定的参数为负数的时候就会从数组尾部开始计算

ES6的数组方法

ES6真实的方便

1. 扩展运算符(...)

​ 扩展运算符可以将数组拆分成以逗号分隔的参数序列，复制，合并数组都行，也能用于函数调用

拆分成为逗号分隔的参数序列

let ary = ['a', 'b', 'c'];
console.log(...ary); 	// a b c
console.log('a', 'b', 'c'); // a b c  
// 可以看到两次输出的东西是一样的， ...ary = 'a', 'b', 'c'

用于数组合并，也能够配合push() 进行数组合并

// 扩展运算符应用于数组合并
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); 	// [1, 2, 3, 4, 5, 6]
//push 方法合并, 效果是一样的，不过不用再创建第三个对象
arr1.push(...arr2)
console.log(arr1)  // [ 1, 2, 3, 4, 5, 6 ]

如果包含空位，则会被解析为 undefined

// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2]
console.log(arr3) // [ 1, undefined, 3 ]

用于数组的复制，直接等于的话，只是将指针指向底层的数据，会是同一个内存地址

let a1 = [1, 2];
let a2 = a1;
a2[0] = 2	
console.log('a1: ', a1) // [2, 2]
console.log('a2: ', a2) // [2, 2] 
// 可以看到，修改了a2数组的元素以后a1的元素也一同被修改了，这是因为它们指向的是同一个内存空间

使用扩展运算符来处理，按我的理解就是把a1的值解析后再重新赋值给a2，这样就是两个不同的数组了

let a1 = [1, 2];
let a2 = [...a1]  // let [...a2] = a1 两种写法是一样的效果
a2[0] = 2
console.log('a1: ', a1) // [1, 2]
console.log('a2: ', a2) // [2, 2]
// 这里可以看到在修改了a2的元素以后a1内的元素未被修改

也能够将字符串转变为数组

let str = 'abcde'
let arr = [...str]
console.log('arr: ', arr) // [ 'a', 'b', 'c', 'd', 'e' ]

扩展运算符小结：

  • 扩展运算符主要作用还是拆分数组，所以能够进行对数组的拼接、复制等等一系列操作
  • 扩展运算符也能够用于形参中接收传递进来的多余实参

2. Array.of()方法

Array.of() 方法可以将一组参数转变为数组，并且参数可以是不同类型的。

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

与 Array() 方法不同点：

// 处理整数参数的方式不同
Array.of(7);       // [7]， 会创建一个具有单个元素 7 的数组
Array.of(1, 2, 3); // [1, 2, 3]
// 而Array则会生成七个空位的数组
Array(7);          // [ <7 empty items> ], 即[ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

3. Array.from() 方法

Array.from() 将类数组对象或可迭代对象转化为数组

  • 参数为数组，返回与原数组一样的数组
  • 参数含空位时会直接解析为 undefined ，与 **Array.of() ** 类似
let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3   // 类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符
};
let arr1 = [].slice.call(arrayLike)  // ES5
let arr2 = Array.from(arrayLike)   // ES6
console.log('arr1: ', arr1) // ["a", "b", "c"]
console.log('arr2: ', arr2) // ["a", "b", "c"]

4. find()方法 与 findIndex()方法

find() 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

接收一个回调函数作为参数，并且为返回值为true的时候返回

let arr = [1, 2, 3, 4]
console.log(arr.find(item => item > 2)); // 3
// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined

使用对象的属性来查找数组里的对象

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
function findCherries(fruit) {
    return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

findIndex()查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

  • 存在数组中存在要查找的元素时，返回其索引值
  • 不存在查找的元素就返回-1
  • 数组空位处理为 undefined
let arr = [1, 2, 3, 4]
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item == 3)); // 2
console.log(arr.findIndex(item => item == 5)); // -1
// 数组空位处理为 undefined
console.log([, 1].findIndex(item => item == undefined)); // 0

小结：

  • find() 和 findIndex() 方法都相对较为常用
  • find() 返回的是查找到的对象，而**findIndex()**返回的是查找的元素索引值

5. fill()方法

将一定范围索引的数组元素内容填充为单个指定的值

语法： arr.fill(value[, start[, end]])

valuestart(可选)end(可选)
用来填充数组元素的值起始索引，默认值为0终止索引，默认值为 this.length

返回值：修改后的数组，会改变原数组

let arrFill = [1, 2, 3, 4]
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arrFill.fill(0,1,2)); // [1, 0, 3, 4]
console.log(arrFill.fill('N',1)); // [ 1, 'N', 'N', 'N' ]

也能够生成类数组~~（好像没啥用）~~

[].fill.call({ length: 3 }, 4) // { '0': 4, '1': 4, '2': 4, length: 3 }

如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

let arrFill2 = new Array(3).fill({name: "Mike"});
console.log(arrFill2);	// [ { name: 'Mike' }, { name: 'Mike' }, { name: 'Mike' } ]
arrFill2[0].name = "Ben";
console.log('arr: ', arrFill2) // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

6. flat()方法

可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法：var newArray = arr.flat([depth])

depth 可选，指定要提取嵌套数组的结构深度，默认值为 1。

返回值：一个包含将数组与子数组中所有元素的新数组。

var arrFlat = [0, 1, ,2, [3, 4]]
// flat() 方法会跳过数组中的空项:
console.log(arrFlat.flat());    // [0, 1, 2, 3, 4]
var arrFlat2 = [0, 1, 2, [[[3, 4]]]];
console.log(arrFlat2.flat(2));  // [ 0, 1, 2, [ 3, 4 ] ]
//使用 Infinity，可展开任意深度的嵌套数组
var arrFlat3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arrFlat3.flat(Infinity))  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flatMap() 方法与 flat() 方法类似,但 flatMap() 只能展开一层数组

7. reduce() 方法

对数组中的每个元素执行一个函数作为累加器，将其结果汇总为单个返回值。

语法：array.reduce( function( total, currentValue, currentIndex, arr ), initialValue )

参数描述
function(total,currentValue, index,arr)必需。用于执行每个数组元素的函数
initialValue可选。传递给函数的初始值

function( total, currentValue, index, arr )的参数

参数描述
total必需。初始值, 或者计算结束后的返回值。
currentValue必需。当前元素
currentIndex可选。当前元素的索引
arr可选。当前元素所属的数组对象。

示例：

var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
console.log(numbers.reduce(getSum))  // 125

reduce() 运行过程中的参数变化

[0, 1, 2, 3, 4].reduce((total, currentValue, currentIndex, arr) => {
    return total + currentValue
})
callbacktotalcurrentValuecurrentIndexarrreturn value
first call011[0, 1, 2, 3, 4]1
second call122[0, 1, 2, 3, 4]3
third call333[0, 1, 2, 3, 4]6
fourth call644[0, 1, 2, 3, 4]10

8. forEach()

对数组的每个元素执行一次给定的函数，对于数组的空位会直接跳过。

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

参数描述
function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数
thisValue可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

function(currentValue, index, arr)

参数描述
currentValue必需。当前元素
index可选。当前元素的索引值
arr可选。当前元素所属的数组对象

示例：

var arForEach = [1, 2, 3, 4, 5]
arForEach.forEach(function (curr, index, arr) {
	console.log(curr + "|" + index) // 1|0 , 2|1 , 3|2 , 4|3 , 5|4
    console.log(arr)  // 每次都是 [ 1, 2, 3, 4, 5 ]
})

forEach() 没有返回值，本质上等同于 for 循环，对每一项执行 回调函数

9. includes()方法

includes() 方法用来判断数组是否包含一个给定的值，返回 的是一个 布尔值

语法：arr.includes(valueToFind[, fromIndex])

valueToFind（必须）fromIndex（可选）
需要查找的元素值从fromIndex 索引处开始查找 valueToFind

如果 fromIndex 索引值为负数则会从后往前计算

示例：

var arrIncludes = ['a','b','c']
arrIncludes.includes('a') // true
arrIncludes.includes('1') // false
arrIncludes.includes('A') // false

查找的时候是区分大小写的

10. map()方法

map() 方法返回一个新数组，按照原数组中的顺序依次处理元素，并返回处理后的值。返回的结果组成数组。

语法：array.map( function(currentValue, index, arr), thisValue )

参数描述
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象

function( currentValue, index, arr)

参数描述
currentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象

返回数组

示例

let mapArr = [1, 4,, 9, 16];
let map1 = mapArr.map(x => x * 2);
console.log(map1)  	  // [2, 8, empty, 18, 32]
console.log(mapArr)   // [1, 4, empty, 9, 16]
  • map() 不会改变原始数组。
  • 对空位会直接返回空位

11. filter()方法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

语法：array.filter(function(currentValue,index,arr), thisValue)

参数描述
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数
thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

function(currentValue,index,arr) 参考上面的map()

返回值：

返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

示例：

var filterarr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var filterarr2 = filterarr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
}); 
console.log(filterarr2); 　//[1, 4, 7, 8, 9, 10]

利用 filter 进行数组去重：

function unique(arr) {
	return arr.filter(function (item, index, arr) {
		//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
		return arr.indexOf(item, 0) === index
	})
}
var arrFF = [1, 1, "RUNOOB", "RUNOOB", true, true, 15]
console.log(unique(arrFF))	// [1, "RUNOOB", true, 15]
  • filter() 不会对空数组进行检测。
  • filter() 不会改变原始数组。
var arr = [1,2,,3,,-3,null,,0,,undefined,4,,4,,5,,6,,,,];
arr.filter(Number) 
// [1, 2, 3, -3, 4, 4, 5, 6]
avatar
文章
阅读
粉丝