本文汇总了数组常用的方法。
因为[]是Array构造函数的实例对象，所以[]可以访问到Array.prototype上面的方法。
详情查看 MDN
image.png

push() / unshift()

:::info 作用：push() 会在数组的末尾新增数据
返回值：该方法返回新增数据后数组的新长度。
是否更改原数组：☑️ :::

  1. var arr = [2, 3, 4];
  2. arr.push(5);
  3. var res = arr.push(6, 7, 8);
  4. console.log(arr); // [2, 3, 4, 5, 6, 7, 8]
  5. console.log(res); // 7

:::info 作用：unshift() 会在数组的开头新增数据
返回值：该方法返回新增数据后数组的新长度。
是否更改原数组：☑️ :::

  1. var arr = [2, 3, 4];
  2. arr.unshift(1);
  3. var res = arr.unshift(11, 12);
  4. console.log(arr); // [11, 12, 1, 2, 3, 4]
  5. console.log(res); // 6

自己实现一个push()方法：

  1. Array.prototype.myPush = function () {
  2.   for (let index = 0; index < arguments.length; index++) {
  3.     // this 代表 arr
  4.     // arr[arr.length] 表示数组的长度，也就是最后一位
  5.     this[this.length] = arguments[index];
  6.   }
  7.   return this.length;
  8. };
  10. var arr = [];
  11. var res = arr.myPush(1, 2, 3);
  12. console.log(res, arr); // 3 [1, 2, 3]

pop() / shift()

:::info 作用：pop() 会从数组的末尾删除一个数据
返回值：该方法返回被删除的数据。
是否更改原数组：☑️ :::

  1. var arr = ["a", "b", "c"];
  2. var res = arr.pop();
  3. console.log(res, arr); // c , ['a', 'b']

:::info 作用：shift() 会从数组的开头删除一个数据
返回值：该方法返回被删除的数据。
是否更改原数组：☑️ :::

  1. var arr = ["a", "b", "c"];
  2. var res = arr.shift();
  3. console.log(res, arr); // a , ['b', 'c']

splice()

:::info 作用：该方法可用于新增、替换、删除数据元素
arr.splice(元素开始的下标，要删除元素的个数，要替换的元素)
返回值：该方法返回被删除元素后组成的数组，如果没有删除元素则返回空数组
是否更改原数组：☑️ :::

  1. // 新增
  2. var arr = ["a", "b", "c"];
  3. var res = arr.splice(3, 0, "d");
  4. console.log(arr); // ['a', 'b', 'c', 'd']
  5. console.log(res); // []
  7. // 新增多个数据
  8. var arr = ["a", "b", "c"];
  9. var res = arr.splice(3, 0, "d", "e", "f");
  10. console.log(arr); // ['a', 'b', 'c', 'd', 'e', 'f']
  11. console.log(res); // []
  1. // 替换
  2. var arr = ["a", "b", "c"];
  3. var res = arr.splice(1, 1, "edit");
  4. console.log(arr); // ['a', 'edit', 'c']
  5. console.log(res); // ['b']
  7. // 替换多个元素
  8. var arr = ["a", "b", "c"];
  9. var res = arr.splice(1, 2, "edit");
  10. console.log(arr); // ['a', 'edit']
  11. console.log(res); // ['b', 'c']
  1. // 删除
  2. var arr = ["a", "b", "c"];
  3. var res = arr.splice(0, 2);
  4. console.log(arr); // ['c']
  5. console.log(res); // ['a', 'b']

这个数组的第0位参数还可以是负数，如果是负数，下标就会从数组的末尾往左数：

  1. var arr = ["a", "b", "c"];
  2. arr.splice(-1, 0, "d");
  3. console.log(arr); // ['a', 'b', 'd', 'c']

reverse()

:::info 作用：该方法用于把数组进行反转。
返回值：该方法返回反转后的数组。
是否更改原数组：☑️ :::

  1. var arr = [1, 2, 3];
  2. var res = arr.reverse();
  3. console.log(arr); // [3, 2, 1]
  4. console.log(res); // [3, 2, 1]

sort()

:::info 作用：该方法用于把数组按照 ASCII 码表中的位置进行排序。
返回值：该方法返回排序后的数组。
是否更改原数组：☑️ :::

  1. var arr = [-1, -5, 8, 0, 2];
  2. var res = arr.sort();
  3. console.log(arr); // [-1, -5, 0, 2, 8]
  4. console.log(res); // [-1, -5, 0, 2, 8]
  1. var arr = ["b", "z", "h", "i", "a"];
  2. var res = arr.sort();
  3. console.log(arr, res); // ['a', 'b', 'h', 'i', 'z']
  1. // 按照 ASCII 码表进行比较
  2. var arr = [27, 49, 5, 7]; // 先比较第一位
  3. console.log(arr.sort()); // [27, 49, 5, 7]

我们还可以自定义排序规则。

sort()方法还容许接收一个函数作为参数，该函数有以下三点需要注意

  1. 该函数必须有两个参数，我们姑且命名为a和b
  2. 函数必须有返回值
  3. 返回值应为任意的「正数」或「负数」
    1. 当return为「负数」时，a排在前面
    2. 当return为「正数」时，b排在前面
  1. var arr = [27, 49, 5, 7];
  3. var res = arr.sort(function(a,b){
  4.   if(a < b){
  5.     return -1;
  6.   }else{
  7.     return 1;
  8.   }
  10.   // 可以简化成
  11.   // 假设 a 是 27，b 是 49，那么 27 - 49 = -22; 返回负数
  12.   return a - b;
  13. });
  15. console.log(arr); // [5, 7, 27, 49]
  16. console.log(res); // [5, 7, 27, 49]
  18. // =========
  20. var arr = [27, 49, 5, 7];
  22. var res = arr.sort(function(a,b){
  23.   return b - a;
  24. });
  25. console.log(arr); // [49, 27, 7, 5]
  26. console.log(res); // [49, 27, 7, 5]

sort()方法内部的原理其实就是「冒泡排序」的原理，sort()方法执行的时候会一直循环，根据返回的是「正数」还是「负数」决定a或者b排在前面。 27 49 5 7 // 初始状态 27 49 5 7 // 拿 27 进行对比 27 5 7 49 // 拿 49 进行对比 5 27 7 49 // 拿 5 进行对比 5 7 27 49 // 拿 7 进行对比

既然知道了sort()方法内部的原理，那么我们来实现几个实例吧。
随机排序

  1. var arr = [1, 2, 3, 4, 5, 6];
  3. arr.sort(function (a, b) {
  4.   // Math.random() 返回 0-1 之间的小数
  5.   // var rand = Math.random();
  6.   // 减去 0.5 后大于 0 表示 rand 肯定是 大于 0.5
  7.   // return rand - 0.5 > 0 ? 1 : -1;
  9.   // 简化
  10.   return Math.random() - 0.5；
  11. });
  13. console.log(arr);

数组对象排序

  1. var arr = [
  2.   { son: "Jenny", age: 18 },
  3.   { son: "Jone", age: 10 },
  4.   { son: "Ben", age: 16 },
  5.   { son: "Crytal", age: 3 },
  6.   { son: "Lucy", age: 11 },
  7. ];
  9. arr.sort(function (a, b) {
  10.   return a.age - b.age;
  11. });
  12. console.log(arr);
  13. // [{son: 'Crytal', age: 3}
  14. //     {son: 'Jone', age: 10}
  15. //     {son: 'Lucy', age: 11}
  16. //     {son: 'Ben', age: 16}
  17. //     {son: 'Jenny', age: 18}]

根据字符串长度排序

  1. var arr = ["12345", "1", "1234", "12", "1234567"];
  2. arr.sort(function (a, b) {
  3.   return a.length - b.length;
  4. });
  5. console.log(arr)

以上方法都会修改原数组！！！

—-

以下方法都不会修改原数组！！！

concat()

作用：拼接数组 返回值：返回拼接的新数组

  1. var arr1 = ["a", "b", "c"];
  2. var arr2 = ["d", "e", "f"];
  3. var arr3 = arr1.concat(arr2);
  4. console.log(arr3, arr1, arr2); 
  5. // ["a", "b", "c", "d", "e", "f"] 
  6. // ["a", "b", "c"]
  7. // ["d", "e", "f"]

slice()

作用：截取数组 返回值：返回截取的数组 参数：

  • 参数1，开始截取位置的下标，如果没有参数则从0截取到数组的最后
  • 参数2，结束截取位置的下标之前，如果只有参数 1 那么会从参数1的位置截取到最后
  1. var arr = ["a", "b", "c", "d", "e", "f"];
  2. var arr1 = arr.slice();
  3. console.log(arr.slice(1, 3)); // ["b", "c"]

toString()

作用：将数组转换为字符串 返回值：返回转化的字符串

  1. var arr = ["a", "b", "c", "d"];
  2. console.log(arr.toString()); // a,b,c,d

join()

作用：将数组根据指定的字符转换成字符串 返回值：返回转化的字符串

  1. var arr = ["a", "b", "c", "d"];
  2. var str1 = arr.join(); // a,b,c,d 等于 arr.toString()
  3. var str2 = arr.join("-"); // a-b-c-d

另外String.prototype还有个split()方法和join()方法是对应的，split()方法是将字符串按照指定的字符转换为数组

  1. var arr = ["a", "b", "c", "d"];
  2. var str2 = arr.join("-"); // a-b-c-d
  3. var arr1 = str2.split("-"); // ["a", "b", "c", "d"];

indexOf()

说明：查找数组中是否存在某个值 参数1: 要查询的值 参数2: 开始查询的位置 返回：如果存在要查询的值返回这个值在数组中的下标，否则返回 -1 表示不存在

  1. const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
  3. console.log(beasts.indexOf('bison')); // 1
  4. console.log(beasts.indexOf('bison', 2)); // 4
  5. console.log(beasts.indexOf('giraffe')); // -1

isArray

说明：判断参数是不是一个数组（这是一个静态方法） 返回：布尔值

  1. Array.isArray([1, 2, 3]);  // true
  2. Array.isArray(new Array()); // true
  3. Array.isArray(new Array('a', 'b', 'c', 'd')); // // true
  5. Array.isArray({foo: 123}); // false
  6. Array.isArray('foobar');   // false
  7. Array.isArray(undefined);  // false

—-

forEach()

:::warning 说明：遍历数组
参数1：fn每次遍历要执行的函数
fn(当前遍历的元素, 当前遍历的元素下标, 当前遍历的数组)
参数2：每次执行fn内的this对象（默认指向window对象）
null、undefind的时候this仍然指向window对象，1、"1"、true/false的时候this指向相应的包装对象
返回值：无 :::

  1. var data = [{ a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }, { e: 5 }, { f: 6 }];
  3. data.forEach(function(el, index, array){
  4.   console.log(el, index, array, this);
  5. });
  6. // {a: 1} 0 [{a: 1} ...] window
  8. data.forEach(function(el, index, array){
  9.   console.log(el, index, array, this);
  10. },{test: "test"});
  11. // {a: 1} 0 [{a: 1} ...] {test: "test"}


模拟重写forEach()方法：

  1. Array.prototype.myForEach = function (fn) {
  2.   var array = this,
  3.       len = array.length,
  4.       arg2 = arguments[1] || this;
  6.   for (let i = 0; i < len; i++) {
  7.     // 每次遍历执行方法，然后更改 this 指向
  8.     fn.apply(arg2, [array[i], i, array]);
  9.   }
  10. };
  11. data.myForEach(function (el, index, array) {
  12.   console.log(el, index, array, this);
  13. }, {});

filter()

:::warning 说明：过滤数组
参数1：fn每次遍历要执行的函数
fn需返回一个布尔值表示是否要将遍历项返回出去
参数2：每次执行fn内的this对象（默认指向window对象）
返回值：返回过滤后的新数组 :::

  1. var data = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];
  3. var result = data.filter(function(el,index,array){
  4.   // 如果不指定 this，这里的 this 仍然指向 window
  5.   return el.id % 2 === 0
  6. });
  7. console.log(result); // [{ id: 2 }, { id: 4 }]

模拟重写filter()方法：

  1. Array.prototype.myFilter = function (fn) {
  2.   var arr = this,
  3.       len = arr.length,
  4.       arg2 = arguments[1],
  5.       newArr = [];
  7.   for (let i = 0; i < len; i++) {
  8.     var result = fn.apply(arg2, [arr[i], i, arr]);
  9.     result ? newArr.push(arr[i]) : "";
  10.   }
  12.   return newArr;
  13. };
  15. data.myFilter(function (el, index, array) {
  16.    return el.id % 2 === 0
  17. }, {});

map()

:::warning 说明：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
参数1：fn每次遍历要执行的函数
fn需提供返回值
参数2：每次执行fn内的this对象（默认指向window对象）
返回值：返回一个由返回值组成的新数组 :::

  1. var data = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];
  3. var result = data.map(function (el, index, array) {
  4.   return el.id;
  5. });
  7. console.log(result); // [1, 2, 3, 4, 5, 6]

模拟重写map()方法：

  1. Array.prototype.myMap = function (fn) {
  2.   var arr = this,
  3.       len = arr.length,
  4.       arg2 = arguments[1],
  5.       newArr = [];
  7.   for (var i = 0; i < len; i++) {
  8.     var result = fn.apply(arg2, [arr[i], i, arr]);
  9.     // 将回调函数的返回值 push 到一个新的数组里
  10.     newArr.push(result);
  11.   }
  12.   return newArr;
  13. };
  15. var result = data.myMap(function (el, index, array) {
  16.   return el.id;
  17. });
  18. console.log(result);

every()

:::warning 说明：检查数组中的每一项是否符合return的条件
参数1：fn每次遍历要执行的函数
fn需提供返回值
参数2：每次执行fn内的this对象（默认指向window对象）
返回值：布尔值 :::

  1. var data = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];
  3. var result1 = data.every(function (el, index, array) {
  4.   return el.id;
  5. });
  6. var result2 = data.every(function (el, index, array) {
  7.   return el.name;
  8. });
  9. console.log(result1, result2); // true false

模拟重写every()方法：

  1. Array.prototype.myEvery = function (fn) {
  2.   var arr = this,
  3.       len = arr.length,
  4.       arg2 = arguments[1],
  5.       result = true;
  7.   for (var i = 0; i < len; i++) {
  8.     var bool = fn.apply(arg2, [arr[i], i, arr]);
  9.     // 如果有回调函数有一次返回 false，那就中止循环
  10.     if (!bool) {
  11.       result = false;
  12.       break;
  13.     }
  14.   }
  16.   return result;
  17. };
  19. var res = data.myEvery(function (el, index, array) {
  20.   return el.is_free === "0";
  21. });
  22. console.log(res);

some()

:::warning 说明：检查数组中的任意一项是否符合return的条件（和every相反）
参数1：fn每次遍历要执行的函数
fn需提供返回值
参数2：每次执行fn内的this对象（默认指向window对象）
返回值：布尔值 :::

  1. var data = [
  2.   { id: 1 },
  3.   { id: 2 },
  4.   { id: 3, name: "test" },
  5.   { id: 4 },
  6.   { id: 5 },
  7.   { id: 6 },
  8. ];
  10. var result1 = data.some(function (el, index, array) {
  11.   return el.id;
  12. });
  13. var result2 = data.some(function (el, index, array) {
  14.   return el.name;
  15. });
  16. console.log(result1, result2); // true true

模拟重写some()方法：

  1. Array.prototype.mySome = function (fn) {
  2.   var arr = this,
  3.       len = arr.length,
  4.       arg2 = arguments[1],
  5.       result = false;
  7.   for (var i = 0; i < len; i++) {
  8.     var bool = fn.apply(arg2, [arr[i], i, arr]);
  9.     // 如果回调函数有一项返回 true 那就中止循环
  10.     if (bool) {
  11.       result = true;
  12.       break;
  13.     }
  14.   }
  16.   return result;
  17. };
  19. var res = data.mySome(function (el, index, array) {
  20.   return el.is_free === "1";
  21. });
  22. console.log(res);

reduce()

:::warning 说明：迭代函数。每一次遍历会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
参数1：fn每次遍历要执行的函数
fn(前一次遍历处理后的数据, 当前遍历项, 当前遍历项的下标, 当前遍历的数组)需返回一个处理后的数据
参数2：初始化数据
返回值：返回每次遍历迭代处理的数据 :::

  1. var data = [
  2.   { id: 1 },
  3.   { id: 2 },
  4.   { id: 3 },
  5.   { id: 4 },
  6.   { id: 5 },
  7.   { id: 6 },
  8. ];
  10. var result1 = data.reduce(function (prev, el, index, array) {
  11.   console.log(prev);
  12.   prev.push(el.id);
  13.   return prev;
  14. }, []);
  15. console.log(result1);
  16. // []
  17. // [1]
  18. // [1, 2]
  19. // [1, 2, 3]
  20. // [1, 2, 3, 4]
  21. // [1, 2, 3, 4, 5]
  23. // [1, 2, 3, 4, 5, 6]
  1. var data = [
  2.   { id: 1 },
  3.   { id: 2 },
  4.   { id: 3 },
  5.   { id: 4 },
  6.   { id: 5 },
  7.   { id: 6 },
  8. ];
  10. var result1 = data.reduce(function (prev, el, index, array) {
  11.   console.log(prev)
  12.   prev += el.id;
  13.   return prev;
  14. }, 0);
  15. console.log(result1);
  16. // 0
  17. // 1
  18. // 3
  19. // 6
  20. // 10
  21. // 15
  23. // 21

模拟重写reduce()方法：

  1. Array.prototype.myReduce = function (fn, initalVal) {
  2.   var arr = this,
  3.       len = arr.length;
  5.   for (let i = 0; i < len; i++) {
  6.     // 将返回值直接赋值给 initalVal
  7.     initalVal = fn(arg2, [initalVal, arr[i], i, arr]);
  8.   }
  10.   return initalVal;
  11. };
  13. data.myReduce(function(prev, el, index, array){
  14.   prev+= el.id;
  15.   return prev;
  16. })

reduceRight()

:::warning 说明：和reduce()函数是一样的，只不过是从数组的末尾遍历（倒序）
参数1：fn每次遍历要执行的函数
fn(前一次遍历处理后的数据, 当前遍历项, 当前遍历项的下标, 当前遍历的数组)需返回一个处理后的数据
参数2：初始化数据
返回值：返回每次遍历迭代处理的数据 :::

  1. var data = [
  2.   { id: 1 },
  3.   { id: 2 },
  4.   { id: 3 },
  5.   { id: 4 },
  6.   { id: 5 },
  7.   { id: 6 },
  8. ];
  10. var result1 = data.reduceRight(function (prev, el, index, array) {
  11.   console.log(el)
  12.   prev += el.id;
  13.   return prev;
  14. }, 0);
  15. console.log(result1);
  16. // {id: 6}
  17. // {id: 5}
  18. // {id: 4}
  19. // {id: 3}
  20. // {id: 2}
  21. // {id: 1}
  23. // 21