JS数组操作方法

1.合并数组 - concat()

拼接数组 ,返回新数组，不会改变原数组。

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

2.用数组的元素组成字符串 - join()

将数组中所有元素都转化为字符串并连接在一起,不会改变原数组。

var arr = [1,2,3,4,5,6];
console.log(arr.join())// 1,2,3,4,5,6
console.log(arr.join("-"))// 1-2-3-4-5-6

3.删除数组的最后一个元素 - pop()

会改变原数组

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

4.数组的末尾添加新的元素 - push()

会改变原数组

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

5.将一个数组中的元素的顺序反转排序 - reverse()

会改变原数组

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

6.删除数组的第一个元素 - shift()

会改变原数组

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

7.在数组的开头添加新元素 - unshift()

会改变原数组

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

8.从一个数组中选择元素 - slice()

不会改变原数组，会返回一个截取后的新数组

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

9.数组排序 - sort()

会改变原数组

var arr = [1, -1, 3, 18, 12];
arr.sort(function(a, b) {
	return a - b
})
console.log(arr);// [-1, 1, 3, 12, 18]

var arr = ["George","John","Thomas","James","Adrew","Martin"];
arr.sort();
console.log(arr);// ["Adrew", "George", "James", "John", "Martin", "Thomas"]

10.在数组的第2位置添加一个元素 - splice()

会改变原数组

splice(index,howmany,tem1,…,itemX)

index表示从什么位置开始添加或删除数组元素

howmany表示删除的元素数量，如果为0，则表示不删除数组元素

tem1,…,itemX表示新增的数组元素

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

11.转换数组到字符串 -toString()

不会改变原数组

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

12.从前向后搜索，返回数组查找值的第一个索引 -indexOf()

不会改变数组，返回指定数值的数组下标

var arr = [1,2,3,4,5,6];
console.log(arr.indexOf(2)); // 1 返回值为2的数组的下标

13.从后向前搜索，返回数组查找值的最后一个索引 -indexOf()

不会改变数组，返回指定数值的数组下标

var arr = [1,2,3,4,5,6];
console.log(arr.lastIndexOf(4)); // 3 返回值为4的数组的下标

14.遍历数组 -forEach()

不会改变数组且方法没有返回值
注：

1）forEach 使用return只是跳出了当前的循环， 使用break报语法错误。

2）forEach 无法在所有元素都传递给调用的函数之前终止遍历，可以用for代替forEach。

var arr = [1,2,3,4,5,6];
arr.forEach(function(element, index) { 
    console.log(element, index);// 参数分别为：遍历的数组内容,内容对应的数组索引
    // 3 2 1
    // 3 3 2
    // 3 4 3
    // 3 5 4
    // 3 6 5
})
console.log(arr);// [1, 2, 3, 4, 5, 6]

15.遍历数组 -map()

不会改变原数组且返回一个新数组

var arr = [1,2,3,4,5,6];
var arr1 = arr.map(function(a) { //遍历数组，并将返回每一项调用结果组成新的数组
    return a * 2;
})
console.log(arr);// [1, 2, 3, 4, 5, 6]
console.log(arr1);// [2, 4, 6, 8, 10, 12]

16.数组过滤 -filter()

不会改变原数组，且返回一个新数组

var arr = [1,2,3,4,5,6];
var arr1 = arr.filter(function(a) { // 返回满足过滤条件组成的数组
    return a > 2;
})
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [3, 4, 5, 6]

17.判断数组每一项是否满足条件 -every()

不会改变原数组，且返回一个布尔值

var arr = [1,2,3,4,5,6];
var arr1 = arr.every(function(a) { // 判断数组中每一项都是否满足条件，所有项都满足条件才会返回true
    return a > 2;
})
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // false

18.判断数组其中一项是否满足条件 -some()

不会改变原数组，且返回一个布尔值

var arr = [1,2,3,4,5,6];
var arr1 = arr.some(function(a) { // 判断数组中是否有一项满足条件，如果有就会返回true
    return a > 2;
})
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // true

19.reduce()

不会改变原数组，迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，逐个遍历到最后

reduce接受一个函数，函数有四个参数，分别是：1、上一次的值;2、当前值;3、当前值的索引;4、数组;

var arr = [1,2,3,4,5,6];
 var sum = arr.reduce(function(previousValue, currentValue, index, array){
    return previousValue + currentValue;
});
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(sum); // 21

20.reduceRight()

不会改变原数组，迭代数组的所有项，从数组的最后一项开始，向前遍历到第一项

reduceRight接受一个函数，函数有四个参数，分别是：1、上一次的值;2、当前值;3、当前值的索引;4、数组;

var arr = [1,2,3,4,5,6];
var sum = arr.reduceRight(function(pre, cur, index, array) { 
    return pre + cur;
})
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(sum); // 21

21.填充数组 -fill()

会改变原数组，元素填充

var arr = [1,2,3,4,5,6];
// arr.fill(value, start, end)
// value：填充值。
// start：填充起始位置，可以省略。
// end：填充结束位置，可以省略，实际结束位置是end-1。
arr.fill(1,2,4); // 用1填充数组中从起始索引到终止索引内的全部元素
console.log(arr); // (5) [1, 2, 1, 1, 5, 6]

22.数组查找索引 -findIndex()

不会改变原数组，返回数组中满足提供的测试函数的第一个元素的索引

var arr = [1,2,3,4,5,6];
/*满足条件，返回下标位置1*/
var index = arr.findIndex((value)=>value === 2)
console.log(arr)// [1, 2, 3, 4, 5, 6]
console.log(index)// 1
/*没有满足条件的，返回-1*/
var index = arr.findIndex((value)=>value === 12)
console.log(index)// -1

23.数组查找值 -find()

不会改变原数组，返回数组中满足提供的测试函数的第一个元素的值

var arr = [1,2,3,4,5,6];
var arr1 = arr.find((value)=>value > 2)
console.log(arr)// [1, 2, 3, 4, 5, 6]
console.log(arr1)// 3

24.includes()

用来判断一个数组是否包含一个指定的值，返回 true或 false

var arr = [1,2,3,4,5,6];
console.log(arr.includes(2)); // true
console.log(arr.includes(7)); // false

25.Array.from()

将伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象

// Array.from(arrayLike, mapFn, thisArg)
// arrayLike：想要转换成数组的伪数组对象或可迭代对象
// mapFn (可选参数)：如果指定了该参数，新数组中的每个元素会执行该回调函数
// thisArg (可选参数)：可选参数，执行回调函数 mapFn 时 this 对象
// 返回值：一个新的数组实例

var arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
var arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

26.数组扁平化 -flat()

var arr = [[1,2],[3,4]]
var arr1 = arr.flat()
console.log(arr1,arr)// [1, 2, 3, 4] [[1,2],[3,4]]

会改变原数组的方法

pop、push、shift、unshift、fill、sort、reverse、splice

参考文章：js数组操作方法大全