js数组操作整合实例——【数组的判断、创建、增、删、改、查、遍历、转化等】

会改变原数组的函数：push()、unshift()、pop()、shift()、splice()、copyWithin()、fill()、reverse()、sort()

一、判断是否是数组

1. instanceof

let arr = [];
console.log(arr instanceof Array);  // true

2. Array.isArray()

let arr = [];
console.log(Array.isArray(arr));   // true

3. constructor

let arr = [];
console.log(arr.constructor === Array);  // true;
// 通过构造函数判断

二、创建数组

1. New Array(arg1,arg2,…)

console.log( new Array() );  //[] 
console.log( new Array(5) );  //[,,,,] 不建议稀疏数组
console.log( new Array(1,2,3) ); //[1,2,3]

2. Array.of(arg1,arg2,…)

Array.of(7);       // [7]
Array.of(undefined) // [undefined]
Array.of(1, 2, 3); // [1, 2, 3]
//描述：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量和类型。

3. 中括号方式定义

let arr = [1,2,3]   //[1,2,3]  推荐使用

三、增

1. arr.push(*arg1,arg2,…)

let arr = [1];
let len = arr.push(2,3);  // len = 3
console.log(arr);  // [1,2,3]
//描述：在原数组末项后新增参数。
//参数：可以接收任意类型，任意数量的参数，例如: arr.push(1,2,'3','four',[6,7,8])。
//结果：返回新数组的长度，会改变原数组。

2. arr.unshift(*arg1,arg2,…)

let arr = [1];
let len = arr.unshift(2,3); // len = 3
console.log(arr);  // [2,3,1]
//描述：在原数组首项前新增参数。
//参数：可以接收任意类型，任意数量的参数。
//结果：返回新数组的长度，会改变原数组。

3.arr.concat(*arr2,arr3,…)

let arr1 = [2,4,6,8];
let arr2 = [1,3,5,7];
console.log(arr1.concat(arr2));   //[2,4,6,8,1,3,5,7]
//描述：用于连接两个或多个数组。
//参数：一个或任意多个数组。
//结果：返回连接后的新数组，不会改变原数组。
//注：字符串可使用，如console.log('Hello'.concat(' world;')); // Hello world;

4. arr.splice()-见第五点

四、删

1. arr.pop()

let arr = ['arg1','arg2','arg3'];
let item = arr.pop();  // item = 'arg3'
console.log(arr);  // ['arg1','arg2']
//描述：删除原数组的末尾一项。
//参数：无。
//结果：返回删除元素，会改变原数组。

2. arr.shift()

let arr = ['arg1','arg2','arg3'];
let item = arr.shift();  // item = 'arg1'
console.log(arr);  // ['arg2','arg3']
//描述：删除原数组的首部一项。
//参数：无。
//结果：返回删除元素，会改变原数组。

3. arr.slice(*start,end)

let arr = ['a','b','c','d','e','f'];
console.log(arr.slice(2,4));   //['c','d']
//描述：从原数组中截取选定的元素段。
//参数：*start,end。
// start-数组起始位置下标，如果是负数，则表示从数组尾部的位置开始算起，即-1代表最后一个元素，以此类推。
// end-数组的结束位置下标，如果没有，则表示从start到数组结束的位置。
//结果：返回从start~end截取的子数组，不会改变原数组。

4. arr.splice()-见第五点

五、改（会改变原数组）

1. arr.splice(*startIndex, *count, arg1,arg2,…)(增删改)

let arr = ['a','b','c','d','e'];
let arrTemp = arr.splice(0,0,'f','g');
//增-以数组arr的下标index=0为起始位置，删除0项元素,即arrTemp=[]，即在下标为0的元素之前新增('f','g');
console.log(arr);  // ['f','g','a','b','c','d','e']

arrTemp = arr.splice(2,3);
//删-以数组arr的下标index=2为起始位置，删除3项元素,即arrTemp=['a','b','c'];
console.log(arr); // ['f','g','d','e']

arrTemp=arr.splice(1,2,'arg1','arg2','arg3');
//改-以数组arr的下标index=1为起始位置，删除2项元素，即arrTemp=['g','d'],并在当前位置插入['arg1','arg2','arg3'];
console.log(arr); // ['f','arg1','arg2','arg3','e']

//描述：在原数组上的进行数组项的增、删、改操作。
//参数：*startIndex, *count, arg1,arg2,... （*号必填）
// startIndex-对数组进行操作的起始下标
// count-从startIndex之后的零个或多个元素
// arg-向数组添加的新元素
// 结果：返回删除元素的新数组，会改变原数组。

2. copyWithin(*target,startIndex,endIndex)

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


//描述：用于从数组的指定位置拷贝元素到数组的另一个指定位置。
//参数：*target,startIndex,endIndex
// target-复制到指定目标索引位置
// start-元素复制的起始位置
// end-停止复制的索引位置（默认为array.length），如果是负数，表示倒数。
//结果：返回更改后的数组，会改变原数组。

3. arr.fill(*value,startIndex,endIndex)-数组初始化

let arr = [1,2,3,4,5,6];
console.log(arr.fill(7,2,4));  //[1,2,7,7,5,6]
console.log(arr); //[1,2,7,7,5,6]
console.log(arr.fill(8)); //[8,8,8,8,8,8]
//描述：用于将一组固定值替换数组的元素
//参数：*value,startIndex,endIndex
// value-填充的值。
// startIndex-开始填充的位置下标
// endIndex-停止填充的位置下标
//结果：返回更改后的数组，会改变原数组。

六、查（不会改变原数组）

1. arr.find(*Func)

let arr = [
		{name:'zhangsan',age:18},
		{name:'wangsi',age:18},
		{name:'liming',age:17},
	];
console.log(arr.find(item=>item.age===18));   // {name:'zhangsan',age:18}

//描述：从下标index=0开始查找数组中符合条件的一项元素。
//参数：*item, index, arr
// item-当前元素。
// index-当前元素的索引值。
// arr-当前查找元素所属的数组。
//结果：不管有多少项满足条件，只返回找到的第一个结果的那一项。找到之后立即返回，不再查找后续的元素；如果找不到，则返回undefined。

2. arr.indexOf(*searchValue, startIndex)

let arr = ['1','1','1'];
console.log(arr.indexOf('1'));  // 0
console.log(arr.indexOf('1',1));  // 1
//描述：从下标index=0开始查找数组中符合条件的第一项元素，并返回该元素首次出现位置的下标。
//参数：*searchValue, startIndex
// searchValue-查找的值。
// startIndex-开始查找的起始位置，范围为0~arr.length-1。
//结果：返回该元素首次出现的位置的下标，如果找不到，则返回-1。
//注：字符串可使用，如console.log("Hello World,hello World".indexOf('World')); // 6
//缺点：无法识别数组中的NAN成员。

3. arr.lastIndexOf(*searchValue, startIndex)

let arr = ['1','1','1'];
console.log(arr.lastIndexOf('1'));  // 2
//描述：从下标index=arr.length-1开始查找数组中符合条件的第一项元素，并返回该元素首次出现位置的下标。
//参数：*searchValue, startIndex
// searchValue-查找的值。
// startIndex-开始查找的起始位置，范围为0~arr.length-1。
//结果：返回该元素首次出现的位置的下标，如果找不到，则返回-1。
//注：字符串可使用，如console.log("Hello World,hello World".lastIndexOf('World')); // 18

4. arr.includes(*searchValue, startIndex)

console.log([1,2,3,4,5].includes(1));    //true
//描述：判断一个数组中是否含指定的值。
//参数：*searchValue, startIndex （*号必填）
// searchValue-查找的值。
// startIndex-开始查找的起始位置，如果为负值，则按升序从 array.length + startIndex的索引开始搜索，默认为0。
//结果：存在返回true，不存在返回false。
//注：字符串可使用，如console.log('abcdef'.includes('a')); //true

5. arr.some(*Func)

let arr = [
		{name:'zhangsan',age:18},
		{name:'wangsi',age:18},
		{name:'liming',age:17},
	];
console.log(arr.some((item=>item.age===18)))  //true
//描述：用于检测数组中是否存在元素满足条件。如果其中一个元素满足，则返回true，且剩余的元素不再进行检测。如果全部不满足，则返回false。
//结果：	true/false

6. arr.every(*Func)

let arr = [
		{name:'zhangsan',age:18},
		{name:'wangsi',age:18},
		{name:'liming',age:17},
	];
console.log(arr.every((item=>item.age>16)))  // true
//描述：用于检测数组的所有元素是否满足条件。如果其中一个元素不满足，则返回false，且剩余的元素不再进行检测。如果全部满足，则返回true。
//结果：	true/false

七、遍历（不会改变原数组）

1. for…of【可遍历Array, String, Maps, Sets等可迭代的数据结构】

let arr = ['arg1','arg2','arg3'];
for(const value of arr){
	console.log(value);  //arg1 arg2 arg3
}
let str = 'abcd';
for(const value of str){
	console.log(value);  // a b c d
}
let maps = new Map([['id',1],['name','zhangsan'],['age','18']]);
for(const [key,value] of maps){
	console.log(key+'-'+value);  // id-1   name-zhangsan  age-18
}
let sets = new Set(['arg1','agr2','arg3']);
for(const value of sets){
	console.log(value);   // arg1 arg2 arg3
}

//描述：打印迭代器(Array数组、String字符串、Maps映射、Set集合)中的值。普通对象（Object）不可打印。

2. for…in

let obj = {id:1, name:'zhangsan',age:'18'};
for(const index in obj){
	console.log(index);  // id  name  age
}
let arr = ['arg1','arg2','arg3'];
for(const index in arr){
	console.log(index);  // 0 1 2
}
let str = 'abcd';
for(const index in str){
	console.log(index);  // 0 1 2 3
}
//描述：遍历一个对象的可枚举属性，得到对象的key值，数组或字符串的下标。

3. arr.forEach(*Func)

let arr = ['arg1','arg2','arg3'];
arr.forEach((item,index)=>{
    if(index===1) return;  //仅能使用return跳过满足该条件的元素,无法使用break、continue跳出循环。 
	console.log(index+'-'+item);   // 0-arg1  2-arg3
});
//描述：遍历数组
//参数：*item,index,arr
// item-当前的元素
// index-当前下标
// arr-当前元素的所属数组对象
//结果：无返回值。

4. arr.filter(*Func)

let arr = [
		{name:'zhangsan',age:18},
		{name:'wangsi',age:18},
		{name:'liming',age:17},
	];
console.log(arr.filter((item=>item.age===18)))  //[{name:'zhangsan',age:18},{name:'wangsi',age:18}]
//描述：创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
//参数：*item,index,arr
// item-当前的元素。
// index-当前下标。
// arr-当前元素的所属数组对象。
//结果：返回一个新数组，不会改变原数组。

5. arr.map(*Func)

let arr = [2,4,6,8];
console.log(arr.map(item=>item/2))   //[1,2,3,4]
//描述：创建一个新数组，新数组中的元素是原数据调用函数处理后的值。
//参数：*item,index,arr
// item-当前的元素。
// index-当前下标。
// arr-当前元素的所属数组对象。
//结果：返回一个新数组，不会改变原数组。

6. arr.reduce(*Func,InitData)

//用法1：累加
let arr = [1,2,3];
let initData = 1;
console.log(arr.reduce((sum,item)=>sum+item, initData))  // 7  循环3次
console.log(arr.reduce((sum,item)=>sum+item))  //6 循环2次

//用法2：计算每个元素出现的次数
let arr=['Bob','Tom','Joe','Bob','Bob','Joe'];
console.log(arr.reduce((obj,cur)=>{
	if(cur in obj){
		obj[cur]++;
	}else{
		obj[cur] = 1;
	}
	return obj;
},{}));     // {Bob: 3, Tom: 1, Joe: 2}

//用法3：多维数组转一维数组(ES6新特性flat也可以解决，下面会讲到)
let arr=[1,2,3,[4,5],[6,[7,8,[9,10],11],12],13];
let flatten = function(arr){
	return arr.reduce((res,item)=>{
		return res.concat(Array.isArray(item)?flatten(item):item);
	},[])
}
console.log(flatten(arr));  //[1,2,3,4,5,6,7,8,9,10,11,12,13]

//用法4：去重
let arr=['Bob','Tom','Joe','Bob','Bob','Joe'];
console.log(arr.reduce((res,cur)=>{	
	if(!res.includes(cur)){
		res.push(cur);
	}
	return res;
},[]));     // ['Bob','Tom','Joe'];

//描述：接收一个函数作为累加器，遍历数组中的元素，最终计算为一个值。（讲不太清楚，直接看实例）
//参数：*Func,InitData
// Func(*total,*currentValue,currentIndex,arr)-total表示累加的值，currentValue表示当前元素，currentIndex表示当前元素的索引，arr表示当前元素所属的数组对象。
// InitData-初始值。
//结果：返回total。不会改变原数组。

7. arr.entries()

let arr = ['Bob','Tom','Joe'];
for(const [key,value] of arr.entries()){
	console.log(key+'-'+value);  //0-Bob 1-Tom 2-Joe 
}
//描述：创建一个可迭代对象，该对象包含了数组的键值对。

8. arr.keys()

let arr = ['Bob','Tom','Joe'];
for(const index of arr.keys()){
	console.log(index);   //0 1 2
}
//描述：创建一个可迭代对象，该对象包含了数组的键。

9. arr.values()

let arr = ['Bob','Tom','Joe'];
for(const values of arr.values()){
	console.log(values);   // Bob Tom Joe
}
//描述：创建一个可迭代对象，该对象包含了数组的键值。

八、 附加

1. str.split(*s,count)

let str = 'How are you?'
console.log(str.split(' '));  // ['How','are','you?']
console.log(str.split(' ',2)); //['How','are']
console.log(str);   // 'How are you?'
//描述：把一个字符串分割成字符串数组。
//参数：*s,count
// s-字符串或正则表达式。
// count-返回数组的最长长度。
//结果：返回一个新数组，不会改变原字符串。

2. arr.join(s)

let arr = [1,2,3,4,5,6];
console.log(arr.join('-'));   //1-2-3-4-5-6
//描述：把一个数组按照指定的分隔符放入一个字符串。
//参数：s-任意分隔符，如果该参数省略，则默认使用逗号，即','进行分割。
//结果：返回新的字符串，不会改变原数组。

3. arr.toString()

let arr = [1,2,3,4,5,6];
console.log(arr.toString());   //1,2,3,4,5,6
//描述：把一个数组按照','为分隔符放入一个字符串。
//参数：无。
//结果：返回新的字符串，不改变原数组。

4. arr.reverse()

let arr = [1,2,3];
console.log(arr.reverse());  //[3,2,1]
console.log(arr);   //[3,2,1]
//描述：颠倒原数组中元素的顺序。
//参数：无
//结果：返回颠倒元素之后的数组，会改变原数组。

5. arr.sort(*Func)

let arr = [8,9,2,5,4,6,14,7,12];
console.log(arr.sort());   //[12,14,2,4,5,6,7,8,9]
console.log(arr.sort(function(a,b){  //[2,4,5,6,7,8,9,12,14]
	return a-b;
}))
//描述：对原数组元素进行排序。
//参数：func-可选，规定排序顺序，默认为按字母顺序对数组中的元素进行排序
//结果：返回排序之后的元素，会改变原数组。

6. Array.from(*arrayLike,Func)

//实例1：字符串转成数组
console.log(Array.from('abcd'));  //['a','b','c','d']

//实例2：Set转成数组
console.log(Array.from(new Set([1,2,3,4])));   //[1,2,3,4] 

//实例3：Map转成数组
console.log( Array.from( new Map([[1,'a'],[2,'b']]) ) );  //[[1,'a'],[2,'b']];

//实例4：从类数组对象转成数组
//说明：类数组对象必须具备的特点：
//（1）该类数组对象必须有length属性，用于指定数组的长度。如果没有length属性，那么转化后的数组是一个空的数组。
//（2）该类数组对象的属性名必须是数值型或字符串型的数字。
let arrayLike = {
	'length':3, 
	0: 'Bob',    //属性名为0,即数值型
	'1': 'Tom',  //属性名为'1',即字符串型的数字
	'name':'Joe' //属性名为'name',非上诉两种情况,转为undefined
}
console.log(Array.from(arrayLike));  //['Bob','Tom','undefined']

//实例5：
console.log(Array.from([1,2,3],x=>x*2)) //[2,4,6]

//描述：将一个类数组的对象或者可遍历对象转换成一个真正的数组。
//参数：*arrayLike,Func
// arrayLike-想要转成数组的伪数组或可迭代对象
// Func-如果指定该参数，数组中的每个元素会执行该回调函数
//结果：返回一个新数组，不会改变原类数组对象。

7. arr.flat(level | Infinity)

let arr=[1,2,3,[4,5],[6,[7,8,[9,10],11],12],13];
console.log(arr.flat(Infinity));  //[1,2,3,4,5,6,7,8,9,10,11,12,13]
//描述：将多维数组转化为一维数组，即数组扁平化。
//参数：level-“拉平”的层数，默认是1层，使用Infinity关键字做参数可以“拉平”多层。
//结果：返回扁平化后的新数组,不改变原数组。

篇幅较长，有错误的地方请帮忙指正，谢谢~