Js数组方法汇总

1.join

用于把数组转换为一个字符串，原数组不会发生改变。

var arr = [1,2,3];
console.log(arr.join());   // 1,2,3
console.log(arr.join("-"));   // 1-2-3
console.log(arr);   // [1, 2, 3]（原数组不变）

2.concat

数组后面新增数组，不会改变原数组，会生成一个副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);   // [1, 3, 5, 7](原数组未被修改)

3.slice

不会改变原数组，分为一个参数和两个参数。参数都代表数组下标。

1.一个参数时：从当前下标位置直接到数组末尾。

2.两个参数时：从起始下标到结束下标，但不包括结束下标。

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

这里记住一个点：
使用Array.slice方法可以直接进行浅拷贝一个新的数组。原数组不会进行改变，只会创建一个新数组。但是如果数组元素是对象等使用这个方式进行数组拷贝是不正确的。因为对象元素更改，原数组相对应的对象也会进行更改

const number = [1, 2, 3, 4, 5];
const newNumber = number.slice();
newNumber.push(6);//添加新项证明不会改变原数组
console.log(number);//[1,2,3,4,5]
console.log(newNumber);//[1,2,3,4,5,6]

4.push

原数组末尾新增元素。

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count);  // 5
console.log(arr);   // ["Lily", "lucy", "Tom", "Jack", "Sean"]

5.pop

删除原数组末尾最后一个元素。

1
2
3

var item = arr.pop();
console.log(item);   // Sean
console.log(arr);   // ["Lily", "lucy", "Tom", "Jack"]

6.shift

原数组头部删除第一个元素,如果数组没有长度以后，原数组最终是一个空数组。

1
2
3

var item = arr.shift();
console.log(item);   // Jack
console.log(arr);   // ["Sean", "Lily", "lucy", "Tom"]

7.unshift

原数组头部新增元素。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count);   // 5
console.log(arr);   //["Jack", "Sean", "Lily", "lucy", "Tom"]

8.reverse

改变原数组，将原数组整体顺序颠倒。

1
2
3

var arr = [13, 24, 51, 3];
console.log(arr.reverse());   //[3, 51, 24, 13]
console.log(arr);   //[3, 51, 24, 13](原数组改变)

9.splice

三种功能：插入、删除、替换原数组进行更改。

1.删除数组项数（两个参数）【索引值开始值，项数】：

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr);   //[5, 7, 9, 11]
console.log(arrRemoved);   //[1, 3]

2.插入项数【索引值开始值，0，要插入的数】

1
2
3

var array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35);  //[]
console.log(array1); // [22, 12, 35, 3, 31, 12]

3.替换项数【索引开始值，项数，要替换的数】

1
2
3

const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8);   //[3]
console.log(array1);  // [22, 8, 31, 12]

10.indexOf

要查找的元素，返回在数组中的下标位置，没有返回-1。

1
2
3

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));   //2
console.log(arr.indexOf("5"));   //-1

11.forEach

参数（value,index）该方法没有返回值，遍历数组使用。

var arr = [11, 22, 33, 44, 55];
arr.forEach(function(x, index, a){
	console.log(x + '|' + index + '|' + (a === arr));
});
输出为：
 11|0|true
 22|1|true
 33|2|true
 44|3|true
 55|4|true

12.map

map的方法会返回一个新数组，新数组是return之后形成的数组。

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

13.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]

14.reduce

逐步处理相关参数

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
},10);   //数组一开始加了一个初始值10,可以不设默认0
console.log(sum);  //25

15.some/every

some

判断数组中是否包含满足条件的项，只有一项满足，就会返回true,没有满足返回false。

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

every

运行给定函数，如果所有项都符合则会返回true，有一项不是true就会返回false。

1
2
3

let arr = [3, 4, 5, 6]
let result = arr.every((item) => item > 2)
console.log(result) // true

16.includes

判断一个数组是否包括该值，返回true/false 另外：【NaN】被认为与原值相等。

1
2
3

const array1 = [22, 3, 31, 12, 'arr'];
const includes = array1.includes(31);
console.log(includes); // true

1
2
3

let values = [1, NaN, 2];
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true

17.toString

将数组转换为字符串

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();

console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

18.find和findIndex

find返回匹配的数值，findIndex返回匹配值的索引。

let arr = [1, 2, 3, 'arr', 5, 1, 9];

console.log(arr.find((value, keys, arr) => {
    return value > 2;
})); // 3 返回匹配的值

console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
})); // 2 返回匹配位置的索引

19.flat

会创建一个新数组，对原数组没有影响。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 扁平化数组空项,如果原数组有空位，flat()方法会跳过空位
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

20.扩展运算符

1.赋值数组

1 2	const a1 = [1, 2]; const a2 = [...a1];

2.合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
const newArr = [...arr1, ...arr2,...arr3];
console.log(newArr) //['a', 'b','c','d', 'e']

3.与解构赋值结合

1
2
3

const [a, ...b] = ['a', 'b','c','d', 'e'];
console.log(a) //a
console.log(b) //["b", "c", "d", "e"]

这里记住一个点：
使用扩展运算符方法可以直接进行浅拷贝一个新的数组。原数组不会进行改变，只会创建一个新数组。但是如果数组元素是对象等使用这个方式进行数组拷贝是不正确的。因为对象元素更改，原数组相对应的对象也会进行更改

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

总结：整体就是这些，后续继续补充。