数组方法总结(ES6之前)

1,159 阅读12分钟

一、什么是数组

简单的说:数组是一个包含了多个值的对象

二、数组的方法

1、concat()
concat(): 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

语法: concat(value0, value1, /* … ,*/ valueN)

valueN(可选): 数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝

返回值:新的Array实例

代码示例(如下)

  const num1 = [1, 2, 3];
      const num2 = [4, 5, 6];
      const num3 = [7, 8, 9];

      const numbers = num1.concat(num2, num3);
      // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2、join()
join(): 方法将一个数组(或一个类数组)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。

语法: join(separator)

separator(可选): 指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果省略,数组元素用逗号(,)分隔。如果 separator 是空字符串(""),则所有元素之间都没有任何字符

返回值:一个所有数组元素连接的字符串。如果 arr.length 为 0,则返回空字符串

代码示例(如下)

const a = ["wjk", "shh", "zyh"];
      a.join(); // 'wjk,shh,zyh'
      a.join(", "); // 'wjk, shh, zyh'
      a.join(" + "); // 'wjk + shh + zyh'
      a.join(""); // 'wjkshhzyh'

3、pop()
pop(): 方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

语法: concat(value0, value1, /* … ,*/ valueN)

返回值:从数组中删除的元素(当数组为空时返回 undefined)。

代码示例(如下)

const a = ["wjk", "shh", "www", "kkk"];

      const b = a.pop();

      console.log(a); // ['wjk','shh','www']

      console.log(b); // 'kkk'

4、shift()
shift(): 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

语法: shift()

返回值:从数组中删除的元素 (如果数组为空则返回 undefined)。

代码示例(如下)

let a = ["wjk", "zzh", "ws", "zsl"];

      console.log("调用 shift 之前:" + a);
      // "调用 shift 之前:wjk,zzh,ws,zsl"

      var shifted = a.shift();

      console.log("调用 shift 之后:" + a);
      // "调用 shift 之后:zzh,ws,zsl"

      console.log("被删除的元素:" + shifted);
      // "被删除的元素:wjk"

5、unshift()
unshift(): 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

语法: unshift(element0, element1, /* … ,*/ elementN)

elementN: 要添加到数组开头的元素。

返回值:返回调用方法对象的新 length 属性值。

代码示例(如下)

arr = [3, 2, 1];

arr.unshift(4);
arr.unshift(5);
arr.unshift(6);

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

6、push()
push(): 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度

语法: push(element0, element1, /* … ,*/ elementN)

elementN: 被添加到数组末尾的元素。

返回值:当调用该方法的时候,新的 length 属性值将被返回。

代码示例(如下)

let a = ["wjk", "zyh"];
let b = a.push("ws", "zzh");

console.log(sports);
// ["wjk", "zyh", "ws", "zzh"]

console.log(b);
// 4

7、reverse()
reverse(): 方法将数组中元素的位置颠倒,并返回该数组,该方法会改变原数组。

语法: reverse()

返回值:颠倒后的数组。

代码示例(如下)

const a = [1, 2, 3];

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

a.reverse();

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

8、slice()
slice(): 方法将数组部分的副本返回到新的数组对象中。这个对象是从 start 到 end 选择的(包括 start,不包括end)。需要注意的是,此方法不会修改原始数组

语法: slice(start, end)

start(可选): 是一个从 0 开始的索引,用于开始复制数组的一部分。如果未定义,start 的默认值为 0。如果 start 大于数组的索引范围, slice() 方法将返回一个空数组,此外,start 还可以使用负索引, slice(-1) 提取数组的最后一个元素。

end(可选):规定从何处结束选取,如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。

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

代码示例(如下)

const a = ['www', 'jjj', 'kkk', 'aaa', 'bbb'];
let b = a.slice(1, 3);
let c = a.slice();
console.log(b);//['jjj', 'kkk']
console.log(c);['www', 'jjj', 'kkk', 'aaa', 'bbb']

9、sort()
sort(): 方法对数组的元素进行排序,并返回数组。

语法: sort((a, b) => { /* … */ } )

compareFn(可选):用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。

a:第一个用于比较的元素
b: 第二个用于比较的元素。

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

若 a 等于 b,则返回 0。

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

a代表当前比较数的下一个比较数,b代表当前比较数

返回值:排序后的数组。

compareFn(a, b) 返回值排序顺序
> 0a 在 b 后
< 0a 在 b 前
=== 0保持 a 和 b 的顺序

代码示例(如下)

//升序
const nums = [4, 2, 5, 1, 3];
nums.sort((a, b) => a - b);
console.log(nums);
// [1, 2, 3, 4, 5]

//降序
const nums = [4, 2, 5, 1, 3];
nums.sort((a, b) => b - a);
console.log(nums);
// [5, 4, 3, 2, 1]

10、splice()
splice(): 方法用于添加或删除数组中的元素。此方法会改变原数组。

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

start:规定从何处添加/删除元素,该参数是开始插入和(或)删除的数组元素的下标,如果是负值,则表示从数组末位开始的第几位,必须是数字。

howmany(可选):整规定应该删除多少元素。必须是数字,但可以是 "0",如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

item1,..., itemX(可选):要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

代码示例(如下)

var a = ['wjk', 'shy', 'czh', 'ws'];
a.splice(2, 0, 'zsl', 'why');
consle.log(a) //'wjk', 'shy', 'zsl', 'why', 'czh', 'ws'

11、toString()
toString(): 方法返回一个字符串,表示指定的数组及其元素。

语法: toString()

返回值:一个表示数组所有元素的字符串。

代码示例(如下)

const array = [1, 2, 'a', 'b'];

console.log(array1.toString());
//"1,2,a,b"

12、valueOf()
valueOf(): 方法返回 Array 对象的原始值,不会改变原数组。

语法: array.valueOf()

返回值:返回的是一个对象,也是原对象本身。

代码示例(如下)

 let array = [1, 2, 3];
      console.log(typeof array.valueOf()); //object
      console.log(array.valueOf() === array); //true

13、indexOf()
indexOf(): 方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1。

语法: indexOf(item, fromIndex)

item: 要查找的元素。

fromIndex(可选):规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1,如果是负数就是倒数到位置开始

返回值:首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

代码示例(如下)

const array = [2, 9, 9];
array.indexOf(2); // 0

14、lastIndexOf()
lastIndexOf(): 方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

语法: lastIndexOf(searchElement, fromIndex)

searchElement: 被要查找的元素。

fromIndex(可选):规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

返回值:数组中该元素最后一次出现的索引,如未找到返回 -1

代码示例(如下)

const array = [2, 9, 9];
array.indexOf(2); // 0

15、forEach()
forEach(): 方法对数组的每个元素执行一次给定的函数。

语法: arr.forEach(callbackFn(currentValue [, index [, array]])[, thisArg]);

callbackFn: 为数组中每个元素执行的,函数函数调用时带有以下参数:

currentValue:数组中正在处理的当前元素值。

index(可选):数组中正在处理的当前元素的索引。

array(可选):forEach() 方法正在操作的数组。

thisArg(可选):可选参数。当执行回调函数 callbackFn 时,用作 this 的值。

返回值:undefined

代码示例(如下)

const arr = ['red', 'green', 'blue']
        const result = arr.forEach(function (ele, index) {
            console.log(ele);  // 数组元素  red   green  blue
            console.log(index); // 索引号
        })

16、map()
map(): 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

语法: array.map(function(currentValue, index, arr), thisIndex)

callbackFn: 生成新数组元素的函数,使用三个参数:

currentValue: callbackFn 数组中正在处理的当前元素值。

index: callbackFn 数组中正在处理的当前元素的索引。

array: map 方法调用的数组。

thisArg(可选):可选参数。当执行回调函数 callbackFn 时,用作 this 的值。

返回值:一个新数组,每个元素都是回调函数的返回值。

代码示例(如下)

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

17、filter()
filter(): 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。

语法: Array.filter(function(currentValue, indedx, arr), thisValue)

callbackFn: 用来测试数组中每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

currentValue: callbackFn 数组中正在处理的当前元素值。

index(可选): callbackFn 数组中正在处理的当前元素的索引。

array(可选): filter 方法调用的数组。

thisArg(可选):可选参数。当执行回调函数 callbackFn 时,用作 this 的值。

返回值:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

代码示例(如下)

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
  return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10]

//数组去重
let arr = [1, 2, 3, 2, 3, 4];
      let arrFIlter1 = arr.filter((ele, index, arr) => {
        return arr.indexOf(ele) === index;
      });
      console.log(arrFIlter1);

18、every()
every(): 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
注意:若收到一个空数组,此方法在任何情况下都会返回 true

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

callbackFn: 用来测试数组中每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

currentValue: callbackFn 数组中正在处理的当前元素值。

index(可选): callbackFn 数组中正在处理的当前元素的索引。

array(可选): every 方法调用的数组。

thisArg(可选):可选参数。当执行回调函数 callbackFn 时,用作 this 的值。

返回值:如果回调函数的每一次返回都为真值,返回 true,否则返回 false

代码示例(如下)

[12, 54, 18, 130, 44].every(x => x >= 10); // true


let arr = [] 
let flag = arr.every((item, index) => { 
    return item && item.age > 10 
}) 
console.log(flag) //输出的是true

19、some()
some(): 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,如果没有满足条件的元素,则返回false。

注意:如果用一个空数组进行测试,在任何情况下它返回的都是false

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

callbackFn: 用来测试数组中每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

currentValue: callbackFn 数组中正在处理的当前元素值。

index(可选): callbackFn 数组中正在处理的当前元素的索引。

array(可选): some 方法调用的数组。

thisArg(可选):可选参数。当执行回调函数 callbackFn 时,用作 this 的值。

返回值:数组中有至少一个元素通过回调函数的测试就会返回 true;所有元素都没有通过回调函数的测试返回值才会为 false。

代码示例(如下)

[2, 5, 8, 1, 11].some(x => x > 10);  // true

20、reduce()
reduce(): 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行),将其结果汇总为单个返回值。

语法: Array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue);

callbackFn: 一个“reducer”函数,包含四个参数:

accumulator: 累计器。

currentValue: 当前元素。

currentIndex(可选): 当前元素的索引。

arr(可选): 要处理的数组。

initialValue(可选): 传递给函数的初始值,相当于accumulator的初始值。

返回值:使用“reducer”回调函数遍历整个数组后的结果。

代码示例(如下)

//简单来说就是对一个array执行reduce()方法,
//就是把其中的function()挨个地作用于arr中的元素上,
//而且上一次的输出会作为下一次的一个输入
let arr = [1, 2, 3, 4, 5];
let s = arr.reduce((sum, curr) => sum + curr, 0);
console.log(s);//15

21、reduceRight()
reduceRight():reduceRight() 方法的功能和reduce()功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

语法: Array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

callbackFn: 一个回调函数,用于操作数组中的每个元素,它可接受四个参数:

accumulator: 累计器。

currentValue: 当前元素。

currentIndex(可选): 当前元素的索引。

arr(可选): 要处理的数组。

initialValue(可选): 传递给函数的初始值,相当于accumulator的初始值。

返回值:执行之后的返回值。

代码示例(如下)

//简单来说就是对一个array执行reduce()方法,
//就是把其中的function()挨个地作用于arr中的元素上,
//而且上一次的输出会作为下一次的一个输入
let arr = [5, 4, 3, 2, 1];
let s = arr.reduce((sum, curr) => sum + curr, 0);
console.log(s);//15

更多内容请看MDN