js数组常用的方法（总结）

目录

1.数组头和尾操作——push、pop、unshift/shift

2、数组转为字符串 —— join()

3、数组截取 —— slice()

4、数组更新 —— splice()

5、反转数组 —— reverse()

6、连接数组 —— concat()

7、ES6连接数组 —— ...

ES5数组新增方法

8、索引方法 —— indexOf()和 lastIndexOf() 

9、迭代方法

1、遍历循环 —— forEach()

2、映射 —— map()

3、过滤 —— filter()

4、判断 —— every()   都满足吗

5、判断 —— some()   有满足吗

ES6数组新增方法

10、Array.from() —— 将类数组的对象转换成数组

 11、Array.of() —— 将一组值转变为数组

12、find() —— 返回第一个匹配的数据

13、findIndex() —— 返回第一个匹配的数据的索引

 14、fill() —— 填充数组

15、includes() —— 判断数组是否包含指定的值，返回true  or  false

16、copyWithin() —— 拷贝元素

---

1.数组头和尾操作——push、pop、unshift/shift

尾部	push	可向数组的末尾添加一个或多个元素，并返回新的长度	影响 原数组
	pop	可向数组的末尾删除一个或多个元素，并返回新的长度
头部	unshift	可向数组的头部添加一个或多个元素，并返回新的长度
	shift	可向数组的头部删除一个或多个元素，并返回新的长度

代码示例：

let arr = [1,2,3];//数组尾操作
arr.push(4);
console.log(arr);
arr.pop(4);
console.log(arr);//数组头操作
arr.unshift(0);
console.log(arr);
arr.shift(0);
console.log(arr);

运行结果：

2、数组转为字符串 —— join()

join()将数组转为字符串，间隔默认为“，”，里面传参的话可以自定义间隔符。原数组不变

代码：

			let arr2 = [1,2,3]console.log(arr2.join())console.log(arr2.join(':'))console.log(arr2)

 运行结果：

3、数组截取 —— slice()

arr.slice(start , end); 

其中end为可选，且原数组不变

let arr3 = [1,2,3,4,5];
console.log(arr3.slice(0,2));// [1, 2]
console.log(arr3.slice(2));//[3, 4, 5]
console.log(arr3);//[1, 2, 3, 4, 5]

4、数组更新 —— splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）

arr.splice(index , howmany , item1,.....,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX：可选。向数组添加的新项目。

返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。

示例代码：

var arr = ["张三","李四","王五","小明","小红"];/**************删除"王五"****************/var arrReplace1 = arr.splice(2,1);	console.log(arrReplace1);  // ["王五"] console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)//删除多个var arrReplace2 = arr.splice(1,2);	console.log(arrReplace2);  //  ["李四", "小明"] console.log(arr);  // ["张三", "小红"]/**************添加"小刚"****************/var arrReplace3 = arr.splice(1,0,"小刚");console.log(arrReplace3);  // [] (没有删除元素，所以返回的是空数组)console.log(arr);  // ["张三", "小刚", "小红"]//添加多个var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");console.log(arrReplace4);  // []console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]/**************"王五"替换"小刚"****************/var arrReplace5 = arr.splice(1,1,"王五");console.log(arrReplace5);  // ["小刚"]console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]//替换多个var arrReplace6 = arr.splice(1,4,"李四");console.log(arrReplace6);  // ["王五", "小红", "刘一", "陈二"]console.log(arr);  // ["张三", "李四", "赵六"]

5、反转数组 —— reverse()

方法用于颠倒数组中元素的顺序。改变原数组

代码示例：

let arr4 = ['苹果','香蕉','梨子'];
console.log(arr4.reverse());//['梨子', '香蕉', '苹果']
console.log(arr4);          //['梨子', '香蕉', '苹果']

6、连接数组 —— concat()

连接一个或多个数组，传参时连接数组，不传参时复制数组。不改变原数组

代码示例：

let arr5 = [1,2,3];
let arr6 = [4,5,6];
let newArr = arr5.concat(arr6);
console.log(arr5.concat());  //[1, 2, 3]
console.log(newArr);         //[1, 2, 3, 4, 5, 6]
console.log(arr5);           //[1, 2, 3]

7、ES6连接数组 —— ...

[..数组1,...数组2,...数组3,..,...数组N]； 就可以将两个或者多个数组进行连接，不改变原数组

代码示例：

let arr7 = ['a','b','c'];
let arr8 = ['d','e','f'];
let arr9 = ['g','h','i'];// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
console.log([...arr7,...arr8,...arr9]);

---

ES5数组新增方法

---

8、索引方法 —— indexOf()和 lastIndexOf() 

.indexOf(查找的字符,[从哪开始])     从前往后找，查找到字符首次出现的位置下标，没找到返回-1

.lastIndexOf(查找的字符,[从哪开始])     从后往前找，查找到字符首次出现的位置下标，没找到返回-1

代码示例：

let array = [1,2,3,4,2];
console.log(array.indexOf(2));     //1
console.log(array.indexOf(2,2));   //4
console.log(array.lastIndexOf(2)); //4

9、迭代方法

这几个方法语法都一样，都不会改变原数组

1、遍历循环 —— forEach()

array.forEach(function(value,key,arr){

        ...

})

value:必选，当前元素的值；

key:可选，当前元素的索引值；

arr:可选，当前元素所属的数组对象。

代码示例：

let arr = ['a','b','c','d'];
arr.forEach(function(a,b,array){console.log(a+'--'+b+'--'+array)
})

运行结果：

2、映射 —— map()

返回新数组，新数组是原数组处理后的值。

代码示例：

let arr = ['a','b','c','d'];
var arr2 = arr.map(function(a,b){return a+'00';
})
console.log(arr2)

 运行结果：

3、过滤 —— filter()

创建一个新的数组，返回的是对原数组进行筛选过滤

代码示例：

let arr3 = ['a','b','c','d'];
var arr4 = arr3.filter(function(a,b){return b>2;
})
console.log(arr4);//['d']

4、判断 —— every()   都满足吗

判断所有选项是否都满足条件，是返回true

代码示例：

			let arr3 = [1,2,3,4,5];let result1 = arr3.every(function(a,b){return a>3;})console.log(result1);let result2 = arr3.every(function(a,b){return a>0;})console.log(result2);

运行结果：

5、判断 —— some()   有满足吗

判断所有选项是否有满足条件，是返回true

代码示例：

			let arr3 = [1,2,3,4,5];let result1 = arr3.some(function(a,b){return a>3;})console.log(result1);let result2 = arr3.some(function(a,b){return a>12;})console.log(result2);

运行结果：

---

ES6数组新增方法

---

10、Array.from() —— 将类数组的对象转换成数组

代码示例：

let json ={'0':'星','1':'期','2':'六',length:3}
let arr2 = Array.from(json);
console.log(arr2);

运行结果：

 11、Array.of() —— 将一组值转变为数组

方法是将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。

    let arr1 = Array.of(1,2,3);	let arr2 = Array.of([1,2,3]);let arr3 = Array.of(undefined);let arr4 = Array.of();console.log(arr1); // [1, 2, 3]console.log(arr2); // [[1, 2, 3]]console.log(arr3); // [undefined]console.log(arr4); // []

12、find() —— 返回第一个匹配的数据

        作用: 返回第一个匹配的数据

        参数: 回调函数

        返回值: 指定数据的下标值或undefined

        用法: 数组.find(回调函数)

let arr = [5,4,3,2,1];
let arr1 = arr.find((v,k)=>{return v==4;
})
let arr2 = arr.find((v,k)=>{return v==0;
})
console.log(arr);
console.log(arr1);
console.log(arr2);

其中，find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。

运行结果：

let array = [{name:'小王',age:18},{name:'小张',age:13}
];
let array1 = array.find((v,k)=>{return v.age>12;
})
console.log(array1);

 只返回满足条件的第一个，运行结果如下：

13、findIndex() —— 返回第一个匹配的数据的索引

跟find()相似，只不过find()返回的是第一个匹配的数据，而findIndex()返回的是第一个匹配的下标。

代码示例：

let array1 = array.findIndex((v,k)=>{return v.age>12;
})
console.log(array1);

 运行结果：

 14、fill() —— 填充数组

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法：array.fill(value,  start,  end)

value：必需。填充的值。

start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

let arr = [1,2,3,4,5,6,7,8];
let arr1 = arr.fill(0);
console.log(arr);  //[0, 0, 0, 0, 0, 0, 0, 0]
console.log(arr1); //[0, 0, 0, 0, 0, 0, 0, 0]let arr2 = [1,2,3,4,5,6,7,8].fill(0,1);    
let arr3 = [1,2,3,4,5,6,7,8].fill(0,1,2); 
console.log(arr2);  //[1, 0, 0, 0, 0, 0, 0, 0]
console.log(arr3); //[1, 0, 3, 4, 5, 6, 7, 8]

注意：fill()会修改本身的数组。

15、includes() —— 判断数组是否包含指定的值，返回true  or  false

方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法：arr.includes(searchElement ,  fromIndex)

searchElement ： 必须。需要查找的元素值。

fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let array = ['aaa','bbb','ccc','ddd','eee'];
let array1 = array.includes('aaa');
console.log(array1); //truelet array2 = array.includes('aaa',1);
console.log(array2); //false

16、copyWithin() —— 拷贝元素

方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员

语法：array.copyWithin(target ,  start ,  end)

target ：必需。从该位置开始替换数据。

start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。

end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
 

    let arr = [1,2,3,4,5,6];let result1 = [1,2,3,4,5,6].copyWithin(0);let result2 = [1,2,3,4,5,6].copyWithin(0,1);let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);console.log(result1);  // [1, 2, 3, 4, 5, 6]console.log(result2);  // [2, 3, 4, 5, 6, 6]console.log(result3);  // [1, 4, 5, 4, 5, 6]console.log(result4);  // [1, 3, 4, 5, 5, 6]console.log(result5);  // [1, 3, 4, 5, 6, 6]