js数组方法

1.数组分类

1.1 会改变原数组的方法

数组方法	作用
push() 、pop()	向数组结尾添加(删除)一或多个元素
unshift() 、shift()	向数组开头添加(删除)一或多个元素
reverse()	反转数组
sort()	数组排序
splice()	数组任意位置增删改
fill()	批量替换数组元素
copyWithin()	拷贝数组内的元素到数组内指定位置

1.2 不会改变原数组的方法

数组方法	作用
Array.isArray()	判断一个值是否为数组
concat()	合并数组
join()	数组转字符串(整个数组转为一个字符串)
toString()	元素转字符串(每个元素分别转为一个字符串)
slice()	截取数组元素
indexOf()、lastIndexOf()	检测某个元素在数组中第一次(最后一次)出现的位置
forEach()、map()	遍历数组
filter()	过滤数组
every()、some()	判断数组所有(一个)元素是否满足条件
includes()	判断某个元素是否存在数组中
find()、findIndex()	获取数组中满足条件的第一个数据(的索引)
reduce()	数组元素叠加后的效果
flat()	数组扁平化
flatMap()	扁平化并加工数组

2. 数组方法详解

2.1 push 向数组(结尾)添加一或多个元素

• 返回值：新数组长度
• 改变原数组

• 语法

// 参数：一个或多个元素
var arr = ['a', 's', 'd']
var a = arr.push('q')	    //向数组末尾添加一个元素
var b = arr.push('q', 'e')	//向数组末尾添加多个元素
console.log(arr);  // ['a', 's', 'd', 'q', 'q', 'e']
console.log(a);    // 4
console.log(b);    // 6

2.2 pop 删除数组最后一位元素

• 返回值：被删除的元素
• 改变原数组

• 语法

//参数：无
var arr = ['a', 's', 'd', 'r']
var a = arr.pop()  //删除数组最末尾一个元素
console.log(arr);  // ['a', 's', 'd']
console.log(a);    // r

2.3 unshift 向数组(开头)添加一或多个元素

• 返回值：新数组长度
• 改变原数组

• 语法

// 参数：一个或多个元素
var arr = ['a', 's', 'd']
var a = arr.unshift('q')	    //向数组开头添加一个元素
var b = arr.unshift('q', 'e')	//向数组开头添加多个元素
console.log(arr);  // ['q', 'e', 'q', 'a', 's', 'd']
console.log(a);    // 4
console.log(b);    // 6

2.4 shift 删除数组第一位元素

• 返回值：被删除的元素.
• 改变原数组

• 语法

//参数：无
var arr = ['a', 's', 'd', 'r']
var a = arr.shift()  //删除数组开头一个元素
console.log(arr);    // ['s', 'd', 'r']
console.log(a);      // a

2.5 reverse 反转数组

• 返回值：反转后的数组
• 改变原数组

• 语法

//参数：无
var arr1 = ['a', 's', 'd', 'r']
var arr2 = arr1.reverse()  // 反转数组
console.log(arr1);        // ['r', 'd', 's', 'a']
console.log(arr2);        // ['r', 'd', 's', 'a']

2.6 sort 数组排序

• 返回值：排序后的数组
• 改变原数组

• 语法

//参数一：前一个元素
//参数二：后一个元素
//无参数时，只能给0-9，a-z，A-Z以内的元素升序
var arr1 = [6, 4, 3, 9]
var arr2 = arr1.sort()
console.log(arr1);	// [3, 4, 6, 9]
console.log(arr2);	// [3, 4, 6, 9]

//数字升序
var arr3 = [106, 4, 43, 9]
var arr4 = arr3.sort((a, b) => {
	return a - b
})
console.log(arr3);	// [4, 9, 43, 106]
console.log(arr4);	// [4, 9, 43, 106]

//数字降序
var arr5 = [106, 4, 43, 9]
var arr6 = arr5.sort((a, b) => {
	return b - a
})
console.log(arr5);	// [106, 43, 9, 4]
console.log(arr6);	// [106, 43, 9, 4]

//单字母升序
var arr7 = ['a', 'c', 'z', 'b']
var arr8 = arr7.sort()
console.log(arr7);  // ['a', 'b', 'c', 'z']
console.log(arr8);  // ['a', 'b', 'c', 'z']

//单字母降序
// a.charCodeAt(0) 将字母转化为code码，再比较
var arr9 = ['a', 'c', 'z', 'b']
var arr10 = arr9.sort((a, b) => {
	return b.charCodeAt(0) - a.charCodeAt(0);
})
console.log(arr9);	// ['z', 'c', 'b', 'a']
console.log(arr10);	// ['z', 'c', 'b', 'a']

2.7 Array.isArray() 判断一个值是否为数组

• 返回值：是数组返回true，不是数组返回false
• 不改变原数组

• 语法

//参数：任意变量
var arr = ['a', 'b', 'c']
var a = Array.isArray(123)
var b = Array.isArray('asd')
var c = Array.isArray(arr)

console.log(a);	// false
console.log(b);	// false
console.log(c);	// true

2.8 splice 数组任意位置增删改

• 返回值：被删除的数据所组成的数组
• 改变原数组

• 语法

//增加元素
//参数一：起始位置(从哪里开始增加)
//参数二：0
//参数三及后面的参数：要增加的元素
var arr1 = ['a', 'c', 'd', 'b']
var arr2 = arr1.splice(0, 0, 'f', 'p')
console.log(arr1);  // ['f', 'p', 'a', 'c', 'd', 'b']
console.log(arr2);  // []

//删除元素
//参数一：起始位置(从哪里开始删除)
//参数二：要删除的元素个数
//参数三：不写
var arr3 = ['a', 'c', 'd', 'b']
var arr4 = arr3.splice(0, 2)
console.log(arr3);  // ['d', 'b']
console.log(arr4);  // ['a', 'c']

//替换数组元素
//参数一：起始位置(从哪里开始替换)
//参数二：要替换掉的元素个数
//参数三及后面的参数：要替换上的元素
var arr5 = ['a', 'c', 'd', 'b']
var arr6 = arr5.splice(0, 1, 'r', 'g')
console.log(arr5);  // ['r', 'g', 'd', 'b']
console.log(arr6);  // ['a']

2.9 fill 批量替换数组元素

• 返回值：替换后的数组
• 改变原数组

• 语法

// 参数一：要替换上的的元素
// 参数二：开始替换的位置
// 参数三：要替换的个数（不写默认全部）
var arr1 = ['e', 'f', 'o', 'p', 'o']
var arr2 = arr1.fill('a', 0, 3)
console.log(arr1);   // ['a', 'a', 'a', 'p', 'o']
console.log(arr2);   // ['a', 'a', 'a', 'p', 'o'] 

var arr3 = ['e', 'f', 'o', 'p', 'o']
var arr4 = arr3.fill('a')
console.log(arr3);   // ['a', 'a', 'a', 'a', 'a']
console.log(arr4);   // ['a', 'a', 'a', 'a', 'a'] 

2.10 copyWithin 拷贝数组内的元素到数组内指定位置

• 返回值：修改后的数组
• 改变原数组，不改变数组长度

• 语法

// 参数一：开始拷贝的位置(必须)
// 参数二：要拷贝的元素起始位置(默认0)
// 参数二：要拷贝的元素终止位置(默认数组长度)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 从数组3号位置开始拷贝，拷贝的元素是数组0-4位置的元素
var a = arr.copyWithin(3, 0, 4)

console.log(arr);   // [1, 2, 3, 1, 2, 3, 4, 8, 9]
console.log(a);     // [1, 2, 3, 1, 2, 3, 4, 8, 9]

2.11 concat 合并数组

• 返回值：合并后的数组
• 不改变原数组

• 语法

//参数：一个或多个元素(数组)
var arr1 = [1, 2, 3, 4, 5]
var arr2 = ['a', 's', 'd']
var arr3 = 'e'
var a = arr1.concat(arr2, arr3)
console.log(arr1);  // [1, 2, 3, 4, 5]
console.log(a);     // [1, 2, 3, 4, 5, 'a', 's', 'd', 'e']

2.12 join 数组转字符串(整个数组转为一个字符串)

• 返回值：转换后的字符串
• 不改变原数组

• 语法

//参数：连接符
var arr = [1, 2, 3, 4, 5]
var str = arr.join('-')
console.log(arr);   // [1, 2, 3, 4, 5]
console.log(str);   // 1-2-3-4-5

2.13 toString 元素转字符串(每个元素分别转为一个字符串)

• 返回值：转换后的字符串
• 不改变原数组

• 语法

// 参数：无
const arr = [22, 3, 31, 12];
const str = arr.toString();

console.log(arr);  // [22, 3, 31, 12]
console.log(str);  // 22,3,31,12

2.14 slice 截取数组元素

• 返回值：截取的元素组成的数组
• 不改变原数组

• 语法

//参数一：开始截取的位置
//参数二：截取的长度
var arr1 = ['e', 'f', 'o', 'p']
var arr2 = arr1.slice(0, 2)
console.log(arr1);  // ['e', 'f', 'o', 'p']
console.log(arr2);  // ['e', 'f']

2.15 indexOf 检测某个元素在数组中第一次出现的位置

• 返回值：找到返回索引位置，找不到返回-1
• 不改变原数组

• 语法

// 参数：要查找的数组元素
var arr = ['e', 'f', 'o', 'p', 'o']
var a = arr.indexOf('o')
var b = arr.indexOf('q')
console.log(arr);   // ['e', 'f', 'o', 'p', 'o']
console.log(a);     // 2 
console.log(b);     // -1

2.16 lastIndexOf 检测某个元素在数组中最后一次出现的位置

• 返回值：找到返回索引位置，找不到返回-1
• 不改变原数组

• 语法

// 参数：要查找的数组元素
var arr = ['e', 'f', 'o', 'p', 'o']
var a = arr.lastIndexOf('o')
var b = arr.lastIndexOf('q')
console.log(arr);   // ['e', 'f', 'o', 'p', 'o']
console.log(a);     // 4 
console.log(b);     // -1

2.17 forEach 遍历数组

• 返回值：没有返回值

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr1 = ['e', 'f']
arr1.forEach((item,index,arr)=>{
	console.log(item, index,arr);
})
// e  0  ['e', 'f']
// f  1  ['e', 'f']
console.log(arr1); // ['e', 'f']

2.18 map 映射数组

• 返回值：一个映射完毕的数组，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr1 = ['e', 'f', 'h']
var arr2 = arr1.map((item,index,arr) => {
	return item + '1'
})
console.log(arr1); // ['e', 'f', 'h']
console.log(arr2); // ['e1', 'f1', 'h1']

2.19 filter 过滤数组

• 返回值：如果有，返回筛选后的元素组成的数组；如果没有返回一个空数组，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr1 = [1, 2, 3, 4, 5, 6]
var arr2 = arr1.filter((item,index,arr) => {
	return item >= 3
})
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // [3, 4, 5, 6]

2.20 every 判断数组所有元素是否满足条件

• 返回值：所有元素都满足条件，返回true；只要有一个不满足，就返回false，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr1 = [1, 2, 3, 4, 5, 6]
var arr2 = arr1.every((item) => {
	return item >= 3
})
var arr3 = arr1.every((item) => {
	return item >= 0
})
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // false
console.log(arr3); // true

2.21 some 判断数组是否有元素满足条件

• 返回值：有一个元素满足条件，返回true；没有一个元素满足条件，就返回false，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr1 = [1, 2, 3, 4, 5, 6]
var arr2 = arr1.some((item) => {
	return item >= 3
})
var arr3 = arr1.some((item) => {
	return item >= 10
})
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // true
console.log(arr3); // false 

2.22 includes 判断某个元素是否存在数组中

• 返回值：存在返回true，不存在返回false
• 不改变原数组

• 语法

// 参数：数组元素
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.includes(2)
var b = arr.includes(8)

console.log(arr);   // [1, 2, 3, 4, 5, 6]
console.log(a);     // true
console.log(b);     // false 

2.23 find 获取数组中满足条件的第一个数据

• 返回值：返回满足条件的第一个元素；没有返回undefined，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.find((item) => {
	return item > 3
})

var b = arr.find((item) => {
	return item > 10
})

console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(a);   // 4
console.log(b);   // undefined

2.24 findIndex 获取数组中满足条件的第一个数据的索引

• 返回值：返回满足条件的第一个元素索引；没有返回-1，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：数组元素
// 参数二：数组索引
// 参数三：原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.findIndex((item) => {
	return item > 3
})

var b = arr.findIndex((item) => {
	return item > 10
})

console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(a);   // 3
console.log(b);   // -1

2.25 reduce 数组元素叠加后的效果

• 返回值：返回叠加后的结果，要以return的形式执行返回条件
• 不改变原数组

• 语法

// 参数一：上次结果
// 参数二：数组元素
// 参数三：数组索引
// 参数四：原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.reduce((prev, item) => {
	return prev += item
})

console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(a);    // 21

2.26 flat 数组扁平化

• 返回值：降维后的数组
• 不改变原数组

• 语法

//参数：数组要降低的维度(比如参数为1时，三维数组转化为二维数组)，默认1
var arr1 = [0, 1, 2, [3, 4]];
var arr2 = arr1.flat()
console.log(arr1);  // [0, 1, 2, [3, 4]]
console.log(arr2);  // [0, 1, 2, 3, 4]

var arr3 = [0, 1, 2, [[[3, 4]]]];
var arr4 = arr3.flat(2)
console.log(arr3);  // [0, 1, 2, [[[3, 4]]]]
console.log(arr4);  // [0,1,2,[3,4]]

//使用 Infinity，将任意维度数组转为一维数组
var arr5 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
var arr6 = arr5.flat(Infinity);
console.log(arr5);  // [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
console.log(arr6);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

2.27 flatMap 扁平化并加工数组

• 返回值：加工后的降维数组(可以返回跟原数组长度不同的数组)
• 不改变原数组

• 语法

//参数:callback
/*
	回调函数的参数
	参数一：当前正在数组中处理的元素。
	参数二：可选的。数组中正在处理的当前元素的索引。
	参数三：可选的。调用flatMap方法的数组。
*/

// 增加元素
var arr1 = [2, 3, 4];
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
var arr2 = arr1.flatMap((item) => [item, item * 2])
console.log(arr1);  // [2, 3, 4]  
console.log(arr2);  // [2, 4, 3, 6, 4, 8]

// 删除元素
const arr3 = [1, 2, 3, 4]
const arr4 = arr3.flatMap(x => x % 2 === 0 ? [x] : [])
console.log(arr3); // [1, 2, 3, 4]
console.log(arr4); // [2, 4]

// 修改元素
const arr5 = [1, 2, 3, 4]
const arr6 = arr5.flatMap(x => [x * 2])
console.log(arr5); // [1, 2, 3, 4]
console.log(arr6); // [2, 4, 6, 8]