js处理数组的方法总结

本文总结了JavaScript操作数组的所有方法方式。包含了ES6+新增的方法。会在操作方法上解释出现的版本。 内容较多，建议收藏查看。

1. push(): 在数组末尾添加一个或多个元素，并返回新的长度。

let arr = [1, 2, 3];
let newLength = arr.push(4, 5);
console.log(arr);  // 输出[1, 2, 3, 4, 5]
console.log(newLength); // 输出：5

2. pop(); 删除数组的最后一个元素，并返回被删除的元素。

let arr = [1, 2, 3];
let ele = arr.pop();
console.log(arr);  // 输出[1, 2]
console.log(ele); // 输出：3

3. shift(): 删除数组的第一个元素，并返回被删除的元素。

let arr = [1, 2, 3];
let ele = arr.shift();
console.log(arr);  // 输出[2, 3]
console.log(ele); // 输出：1

4. unshift(): 在数组的开头添加一个或多个元素，并返回新的长度

let arr = [1, 2, 3];
let newLength = arr.unshift(-2, -1);
console.log(arr); // 输出[-2, -1, 1, 2, 3];
console.log(newLength); // 输出5

5. splice(): 通过删除现有元素和添加新元素来更改一个数组的内容,返回被输出的元素数组

let arr = [1, 2, 3, 4, 5];
// 从索引2开始删除3个元素
let removed = arr.splice(2, 3);
console.log(arr); // 输出: [1, 2]
console.log(removed); // 输出：[3, 4, 5]

// 在索引2出新增两个元素
let removed2 = arr.splice(2, 0, "a", "b")
console.log(arr); // 输出: [1, 2, "a", "b"]
console.log(removed2 ); // 输出：[]

6. slice(): 返回数组的一个浅拷贝，从开始到结束（左闭右开，不包括结束）的元素

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(2, 4);
console.log(sliced);  // 输出:[3, 4]

es5新增的方法

7. isArray(): ES5检查对象是否为数组

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

8. forEach(): ES5为每个元素调用一次函数

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>"; 
}

9. map(): (ES5)创建一个新数组。其结果是该数组中的每个元素作为参数执行函数的返回值。

let arr = [1, 2, 3]
let mapped = arr.map(x=> x*2);
console.log(mapped); // 输出：[2, 4, 6];

10. filter(): (ES5)创建一个新数组，其结果是符合参数函数条件的数组元素

let arr = [1, 2, 3, 4, 5]
let filterd = arr.filter(x=> x > 3);
console.log(filterd); // 输出[4, 5]

11. reduce(): (ES5)对数组中每个元素(从左到右)执行一个由提供reducer函数，将其结果汇总为单个返回值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((accumulator, currentValue)=> accumulator + currentValue);
console.log(sum); // 15;

12. reduceRight()： (ES5)与reduce()是相同的，只是遍历顺序相反(从右到左)
13. forEach(): (ES5)为数组每个元素调用一次函数

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>"; 
}

14. every(): (ES5)检查数组里的所有元素是否都符合条件，符合则为true。

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

console.log(allOver18); // false

function myFunction(value) {
  return value > 18;
}

15. some(): (ES5)检查某些元素是否符合条件，有一个符合则为true

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

16. indexOf(): (ES5)检查数组中的某个元素值并返回其下表（从左到右寻找）

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple") // 2

17. lastIndexOf(): ES5与indexOf()类似，只是检索是从右向左。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

es6新增的方法

18. find(): ES6 返回通过测试函数的第一个数组元素的值。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);


/**
 * params1：元素值
 * parmas2：元素下标
 * parmas3: 数组本身  
**/
function myFunction(value, index, array) {
  return value > 18;
}

19. findIndex()：ES6返回通过测试函数的第一个数组元素的索引。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

/**
 * params1：元素值
 * parmas2：元素下标
 * parmas3: 数组本身  
**/
function myFunction(value, index, array) {
  return value > 18;
}