【js基础】—数组常用方法总结

189 阅读10分钟

不改变原数组

1.concat()

定义: 链接两个或多个数组,并返回一个新数组

参数:

arrayX(必须):该参数可以是具体的值,也可以是数组对象。可以是任意多个。

例子:

var arr1 = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8];
var arr3 = [10, 11, 12];
var arr4 = [5, 6, [8]]
// 链接两个数组
arr1.concat(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]
// 链接三个数组
arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 10,11,12]
// 添加元素
arr1.concat(arr2, arr3, '添加一个元素'); // [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12,'添加一个元素']
// 合并嵌套数组
arr1.concat(arr4); // [1, 2, 3, 4, 5, 6, [8]]
 

2.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.join("")); // "123"

对于join()/toString()来说

如果一个元素为 undefined 或 null,它会被转换为空字符串。

如果数组中的元素是数组,会将里面的数组也调用join()/toString(),如果数组中是对象,对象会被转为[object Object]字符串。

例子:

   let a= [['Kobe','24'],'great'];
   console.log(a.join());  // "Kobe,24,great"
   
   let b = [{name:'kobe', number:24&8}, 'love']
   console.log(b.join()); // "[object Object],love"   

3.toString

定义:用于把数组转换为由逗号链接起来的字符串

区别:该方法的效果和join方法一样,都是用于数组转字符串的,但是与join方法相比没有优势,也不能自定义字符串的分隔符,因此不推荐使用。

let arr = [1, 2, 3, 4]
console.log(arr.toString())  // “1,2,3,4”

4.slice()

定义:返回一个含有被提取元素的新数组

参数:arr.slice([begin , end)) (前闭后开)

1.begin:默认值为0,如果超出原数组的索引范围,则会返回空数组

2.end:如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

3.当只有一个参数的情况下,返回该参数指定位置开始到当前数组末尾的所有项

4.当参数为负数时,将 负数 + 数组长度的值 来替换该位置

var arr = [1, 3, 5, 7, 9, 11];
var arrCopy = arr.slice(1);     // [3, 5, 7, 9, 11]
var arrCopy2 = arr.slice(1, 4);  // [3,5,7]
var arrCopy3 = arr.slice(1, -2); // [3,5,7]
var arrCopy4 = arr.slice(-4, -1); // [5,7,9]  相当于slice(2,5) 

扩展:slice()可以实现浅拷贝

5.indexOf

定义:查找某个字符,有则返回第一次匹配到的下标值,否则返回 -1

语法: array.indexOf(searchElement,fromIndex)

参数:

searchElement: 必传参数;要查找的元素

fromIndex: 可选参数;表示调用该方法的字符串中开始查找的位置。可以是任意整数。默认值为 0。如果 fromIndex < 0 则查找整个字符串(如同传进了 0)。如果 fromIndex >= str.length,则该方法返回 -1,除非被查找的字符串是一个空字符串,此时返回 str.length。

   var str = 'hello world';
   str.indexof('o', -5) // 4   从0开始遍历
   str.indeof('0', 11)  // -1

注意:

1.严格相等的搜索:数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素,即数组元素要完全匹配才能搜索成功。

2.indexOf()不能识别NaN

let a = ['啦啦', 2, 4, 24, NaN]
a.indexOf('啦');  // -1
a.indexOf('NaN');  // -1
a.indexOf('啦啦'); // 0

6.lastIndexOf()

定义:查找某个字符,有则返回最后一次匹配到的位置,否则返回-1

语法; arr.lastIndexOf(searchElement,fromIndex)

参数: searchElement(必须): 被查找的元素

fromIndex(可选):

1.正值:如果该值大于或等于数组的长度,则整个数组会被查找。

如果该值小于数组的长度,则从该值的位置向前查找。

2.负值。若其绝对值小于数组长度,将其视为从数组末尾向前的偏移。(比如-2,从数组最后第二个元素开始往前查找)

若其绝对值大于数组长度,则方法返回 -1,即数组不会被查找

let a = ['OB', 4, 'Koro1', 1, 2, 'Koro1', 3, 4, 5, 'Koro1']; // 数组长度为10
let b = a.lastIndexOf('Koro1', 4); // 从下标4开始往前找 返回下标2
let b = a.lastIndexOf('Koro1', 100); //  大于或数组的长度 查找整个数组 返回9
let b = a.lastIndexOf('Koro1', -11); // -1 数组不会被查找
let b = a.lastIndexOf('Koro1', -9); // 从第二个元素4往前查找,没有找到 返回-1
let b = a.lastIndexOf(''); // 10
let b = a.lastIndexOf('', 2);  // 2  如果searchValue是空字符串,则fromIndex返回。

7.includes()

定义:返回一个布尔值,表示某个数组是否包含给定的值

语法:array.includes(searchElement,fromIndex=0)

参数:

searchElement(必须):被查找的元素 fromIndex(可选):默认值为0,参数表示搜索的起始位置,接受负值。

正值超过数组长度,数组不会被搜索,返回false。

负值绝对值超过长数组度,从0开始搜索整个数组。

let a = ['OB', 'Koro1', 1, NaN];
let b = a.includes(NaN); // true 识别NaN
let b = a.includes('Koro1', 100); // false 超过数组长度 不搜索
let b = a.includes('Koro1', -3);  // true 从倒数第三个元素开始搜索 
let b = a.includes('Koro1', -100);  // true 负值绝对值超过数组长度,搜索整个数组

改变原数组

1.splice()

定义: splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目的新数组

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

index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置

howmany:可选。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX: 可选。向数组添加的新项目。

eg1: 删除元素

// 从数组下标0开始,删除3个元素
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]

let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除3个元素,因为最后一个元素,所以只删除了7

eg2: 删除并添加

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3, '添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始,删除3个元素,并添加元素'添加'
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2, 3, '添加1', '添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加1'、'添加2'

eg3: 不删除只添加

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 0, '添加1', '添加2'); // [] 没有删除元素,返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1, 0, '添加1', '添加2'); // [] 没有删除元素,返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

2.sort()

定义: 对数组元素进行排序,并返回排序后的数组

参数: 传入比较函数

// 字符串排列 默认按字母排序
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
//数字排序的时候 因为转换成Unicode字符串之后,有些数字会比较大会排在后面 这显然不是我们想要的
var a = [10, 1, 3, 20, 25, 8];
console.log(a.sort()) // [1,10,20,25,3,8];

比较函数的两个参数: sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用a和b来接受要比较的元素。

若比较函数返回值<0,那么a将排到b的前面, 升序排序

若比较函数返回值=0,那么a 和 b 相对位置不变;

若比较函数返回值>0,那么b 排在a 将的前面,降序排序

var array = [10, 1, 3, 4, 20, 4, 25, 8];
array.sort(function (a, b) {
  return a - b;
});
console.log(array); // [1,3,4,4,8,10,20,25];

array.sort(function (a, b) {
  return b - a;
});
console.log(array); // [25,20,10,8,4,4,3,1];

3.pop()

定义:删除一个数组中的最后的一个元素返回被删除的元素

let a = [1, 2, 3];
let item = a.pop();  // **3**
console.log(a); // [1,2]

4.shift()

定义: 删除数组的第一个元素,返回被删除的元素

let a = [1, 2, 3];
let item = a.shift();  // 1
console.log(a); // [2,3]

5.push()

定义:向数组的末尾添加一个或多个元素,返回新的长度

参数:item1, item2, ..., itemX,要添加到数组末尾的元素

let a = [1, 2, 3];
let item = a.push('末尾', '末尾1');  // 5
console.log(a); // [1,2,3,'末尾','末尾2']

6.unshift()

定义:向数组的开头添加一个或更多元素,并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组开头的元素

let a = [1, 2, 3];
let item = a.unshift('开头');  // 4
console.log(a); // ['开头',1,2,3]
 

7.reserve()

定义: 用于颠倒数组中元素的顺序,返回倒序后的数组。

let a = [1, 2, 3];
a.reverse();
console.log(a); // [3,2,1]

8.fill()

定义:使用给定值,填充一个数组,返回填充后的数组

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选):填充的结束位置,默认是为this.length

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4));  // [1, 2, 0, 0]

console.log(array1.fill(5, 1)); // expected output: [1, 5, 5, 5]

console.log(array1.fill(6));  // expected output: [6, 6, 6, 6]

遍历数组

以下几个函数,参数语法都很类似: every/some/map/filter/forEach/find/findIndex

语法: array.every(function(currentValue, index, arr), thisValue)

参数: 

 1. currentValue(必须),数组当前元素的值
 
 2.index(可选), 当前元素的索引值
 
 3.arr(可选),数组对象本身
 
 4.thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined   
 

1.every()

定义:判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function (x) {
  return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function (x) {
  return x < 3;
});
console.log(arr3); // false

2.some()

定义: 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function (x) {
  return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function (x) {
  return x < 1;
});
console.log(arr3); // false

3.filter()

定义:数组中的每一项运行给定函数,返回满足过滤条件组成的数组

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

4.map()

定义:用于对数组中的每个元素进行修改,返回其构成的新数组

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function (item) {
  return item * item;
});
console.log(arr2); //[1, 4, 9, 16, 25]  

5.forEach()

定义: 按升序为数组中含有效值的每一项执行一次回调函数,返回值是undefined

var arr = ["Tom", "Jack", "Lucy", "Lily", "May"];
var a = arr.forEach(function (value, index, self) {
  console.log(value + "--" + index + "--" + (arr === self));
})

console.log(a);     //undefined---forEach没有返回值

6.find() & findIndex()

find()定义:用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined。

findIndex()定义:返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

注意:这两个方法都可以识别NaN,弥补了indexOf()的不足.

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

7.reduce()

定义:reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。

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

参数:

  1. total(必须),初始值, 或者上一次调用回调返回的值
  2. currentValue(必须),数组当前元素的值
  3. currentIndex(可选),当前元素的索引值
  4. arr(可选),数组对象本身

执行过程:

回调第一次执行时,如果 initialValue 在调用 reduce 时被提供,那么第一个 total 将等于 initialValue,此时 currentValue 等于数组中的第一个值;

如果 initialValue 未被提供,那么 total 等于数组中的第一个值,currentValue 等于数组中的第二个值。此时如果数组为空,那么将抛出 TypeError。

如果数组仅有一个元素,并且没有提供 initialValue,或提供了 initialValue 但数组为空,那么回调不会被执行,数组的唯一值将被返回。

let sum = [0, 1, 2, 3].reduce(function (a, b) {
  return a + b;
}, 0);

参考

juejin.cn/post/684490…

MDN