【持续更新】js数组方法汇总

数组方法汇总

整理记录，方便查看；接受建议、持续更新~
（如需转载，烦请告知）

//变量举例：str-字符串，arr-数组，obj-对象，index-索引，num-数量，fun-函数function, item-元素（可以是 str或 arr）
1.创建
	var arr1 = new Array(); 
	var arr2 = [];
2.清空
	arr = [];
	arr.length = 0;
	arr.splice(0, arr.length);  /  arr.splice(0);
// 以此数组为例：let arr = [1,2,3]
3.查询
	arr.indexOf(1)          返回第一个匹配元素的索引，无则返回-1（字符串同） // 0
	arr.lastIndexOf(1)      同理，查找最后一位 // 0
	arr.find(a => a>1)      返回第一个符合条件的元素 // 2
	arr.includes(1)         判断是否包含，返回true/false // true
	arr.length              数组长度 // 3
4.排序（改变原数组）
	arr.reverse()           翻转 // [3, 2, 1]
	arr.sort((a, b) => b-a) 从小到大排序 // b-a倒序 [3, 2, 1]
5.转换（想想也不会改变原数组）
	arr.toString()          相当于arr.join()，用逗号分隔的字符串 // '1,2,3'
	arr.join('/')           将数组转化为字符串，可以定义分隔符 // '1/2/3'
6.操作
 6.1栈操作（改变原数组）
	arr.push(4)             往后添加元素。返回：数组的长度  // 4, arr: [1, 2, 3, 4]
	arr.pop()               删除最后一项。返回：删除项 // 4，arr: [1, 2, 3]
 6.2队列操作（改变原数组）
	arr.unshift(0)          往前添加元素。返回：数组的长度 // 4，arr: [0, 1, 2, 3]
	arr.shift()             删除最前一项。返回：删除项 // 0，arr: [1, 2, 3]
 6.3迭代（html5，不改变原数组）
	arr.forEach(fun)        循环处理，没有返回值
	arr.map(fun)            循环处理，返回新数组
	arr.every(fun)          都满足条件返回true，有一个不满足跳出循环
	arr.some(fun)           有一个满足返回true，有一个满足就跳出循环
	arr.filter(fun)         筛选、过滤，返回符合条件的数组
 6.4其他操作
	arr.concat(item)        连接；数组末尾以打碎形式（数组每项）拼接元素。返回：新数组（不改变原数组）
	arr.slice(1, 2)         切开；根据索引截取并返回选定元素的数组（不改变原数组）
	arr.splice(1, 0, item)  拼接；删除/添加来更改一个数组，返回含删除项的数组，不删除则返回空数组（改变原数组）
	delete arr[index]       删除数组的某一项，不改变数组长度：[empty, 2, 3]
	arr.fill(1)             覆盖填充；参1-填充项，可选参2参3-起止索引
7.其他
 7.1 new Set 数组去重
	var arr = [1,2,2,3,3,3]
	Array.from(new Set(arr))            //[1, 2, 3]

3. find

描述：返回符合条件的第一个元素，没有则undefined
参数：函数

var arr = [
	{name: '张三', id: 1},
	{name: '李四', id: 2}
];
let obj = arr.find(item => {
	return item.name == '张三'
});
console.log(obj);               //{name: "张三", id: 1}

3. includes

描述：判断数组中是否包含给定的值；如果包含返回 true，反之 false

var arr = [1, 2, 3];
var a = arr.includes(2);
console.log(a);                //true

4.sort

sort()方法用于对数组的元素进行排序（改变原数组）
1.默认根据字符串Unicode码点排序（从小到大，从少到多），下面案例只考虑number类型的排序
2.可选参数compareFunction，规定排序顺序

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

//2.降序
var arr = [1, 3, 2];
function compare(a, b){
	return b - a;
}
arr.sort(compare);
console.log(arr);               //[1, 2, 3]

//3.按照字符长度（升序）
var arr = ['abc', 'aBc', 'a', 'abd', 'xy'];
arr.sort(function (a, b){
	return a.length - b.length;
})
console.log(arr);               //["a", "xy", "abc", "aBc", "abd"]

//4.实际业务：根据数组对象中某个属性的值对数组排序（例：根据type值升序）
compare(property) {
	return (a, b) => {
		return a[property] - b[property];
	}
}
let newArr = arr.sort(this.compare('type'));

5. join

join(separator) 分隔符
//将一个数组转成一个字符串，返回一个数组（原数组不受影响）
var arr = [1, 2, 3];
var str1 = arr.join();          //"1,2,3"
var str1 = arr.join('');        //"123"
var str1 = arr.join(' ');       //"1 2 3"
console.log(arr);               //[1, 2, 3]

6.3 forEach、map、some、every、filter

1.forEach：调用数组的每个元素，并将元素传递给回调函数
2.map：本意是映射，将一个值从一种形式映射到另一种形式，每一次遍历都会有一个返回值。这些返回值组合成最终的数组。
3.some：检测数组中的元素是否满足指定条件，有一个元素满足则返回true，剩余元素不再检测
4.every：检测数组中的元素是否满足指定条件，有一个元素不满足则返回false
5.filter：从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。

//1.forEach：不会生成新的数组，也无法通过return或者break这样的语句跳出本次循环
//...略
//2.map
let arr = [1, 2, 3] 
let newArr = arr.map(item=>{
	return item*2;
}) 
console.log(arr);               //[1, 2, 3]
console.log(newArr);            //[2, 4, 6]
//3.some
var arr = [1, 2, 3];
let flag = arr.some(function(item, index, arr) {
	return item == 3;
});
console.log(flag);              //true
//4.every
var arr = [1, 2, 3];
let flag = arr.every(function(item) {
	return item > 0;
});
console.log(flag);              //true
//5.filter
var arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item =>{
	return item > 3;
})
console.log(newArr);             //[4, 5]
//(1)filter实例：去重
var arr = [3,4,5,3,6,7,3,5];
var newArr = arr.filter(function(item, index, array) {
	return index == array.indexOf(item);
})
console.log(newArr);             //[3, 4, 5, 6, 7]
//(2)filter实例：list完全包含dataList，但dataList属性多，保留dataList已有部分，拼接剩余部分
let list = [{name:1, id:1}, {name:2, id:2}, {name:3, id:3}];
let dataList = [{name:1, id:1, age:18}];
let tempList = list.filter((item) => {
	//若dataList中找到id相同的，取反，
	return !dataList.some( ele => ele.id === item.id);
});
dataList.push(...tempList);
console.log(dataList);
//[{name:1, id:1, age:18}, {name:2, id:2},{name:3, id:3}]

6.4 concat

描述：拼接数组（不改变原数组）

var arr1 = [1, 2, 3];
var arr2 = arr1.concat(4, 5)
console.log(arr2);              //[1, 2, 3, 4, 5]
console.log(arr1);              //[1, 2, 3]

6.4 slice

描述：根据索引截取并返回选定元素的数组（字符串同理，返回选定字符串）
参数：splice(startIndex, endIndex)
备注：正数索引从0开始，-1则是倒数第一个数

var arr = [1, 2, 3];
var arr1 = arr.slice();          //从开始截取到end：[1， 2, 3]
var arr2 = arr.slice(0);         //索引0截取到end：[1， 2, 3]
var arr2 = arr.slice(-3);        //截取最后三个元素：[1， 2, 3]
var arr3 = arr.slice(1, 2);      //索引1（包含）截取到索引2（不包含）：[2]
var arr3 = arr.slice(-2, -1);    //倒数第2个（包含）截取到倒数第一个（不包含）：[2]

6.4 splice

描述：删除/添加来更改一个数组，返回含删除项的数组，不删除则返回空数组（改变原数组）
参数：splice(startIndex, num, str1, str2…)

var arr = [1, 2, 3];
//1.删除
arr.splice(0, 1);
console.log(arr);        //[2, 3]
//2.替换
arr.splice(0, 1, 0);
console.log(arr);        //[0, 2, 3]
//3.添加
arr.splice(3, 0, 4, 5);
console.log(arr);        //[1, 2, 3, 4, 5]

6.4 fill

描述：用固定值替换数组元素。改变数组、返回数组（es6）
参数：splice(item, startIndex, endIndex)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
//1个参数：全部替换
arr.fill(6);             //arr: [6, 6, 6, 6, 6, 6, 6, 6, 6]
//2个参数：start到结束
arr.fill(6, 7);          //[1, 2, 3, 4, 5, 6, 7, 6, 6]
//3个参数：start到end，取不到end
arr.fill(6, 7， 8);      //[1, 2, 3, 4, 5, 6, 7, 6, 9]