JS Array 操作方法合集

1. 创建数组

1.1 使用 Array 构造函数

// 无参构建
let arr = new Array();   //创建一个空数组  []

// 如果只传一个数值参数，则表示创建一个初始长度为指定数值的空数组
let arr = new Array(5);   // 创建一个包含20项的数组  [empty × 5]

// 如果传入一个非数值的参数或者参数个数大于 1，则表示创建一个包含指定元素的数组。
let arr = new Array("lily","lucy","Tom");  // ['lily', 'lucy', 'Tom']

let arr = new Array( '23' ); // ["23"]

1.2 Array.of 方法创建数组(es6 新增)

ES6 为数组新增创建方法的目的之一，是帮助开发者在使用 Array 构造器时避开 js 语言的一个怪异点。
Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

let arr = Array.of(1, 2);  // [ 1, 2 ]

let arr1 = Array.of(3);
console.log('Array.of',arr1.length); //1
console.log('Array.of',arr1[0]); //3

1.3 Array.from 方法创建数组(es6 新增)

在 js 中将非数组对象转换为真正的数组是非常麻烦的。在 ES6 中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组。

function arga(...args) {  //...args剩余参数数组,由传递给函数的实际参数提供
    let arg = Array.from(args);
    console.log(arg);
}

arga( 'arr1' , 26,  'from' ); // [ arr1 ,26, from ]

映射转化
如果你想实行进一步的数组转换，你可以向 Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将数组对象的每一个值转换为目标形式，并将其存储在目标数组的对应位置上。

function arga(...args) {  
     return Array.from(args, value => value + 1);
}

let arr = arga( 'arr' , 26,  'pop' );
console.log(arr);//[ arr1 ,27, pop1 ]

2. join 方法

该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
返回值:返回一个新的字符串

//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log('join',str)   // str = 1-2-3-4-5;

3. split 方法

​ 该方法是用过指定的分隔符,将字符串分割成数组。
返回值:返回一个新的数组

let str = 'wqz-ttj'
let arr = str.split('-');
console.log('split',arr);// arr=['wqz','ttj'];

4. 数组的翻转和排序(改变数组)

4.1 reverse 翻转数组

let arr = [1,2,3,4,5];
arr.reverse()
console.log('reserse',arr);   // [5, 4, 3, 2, 1]

4.2 sort 排序

let arr = [1,3,5,2,4,23,122,34];
// 没有参数:时按照首字符的先后排序
arr.sort()  
console.log('没有参数',arr);  //arr=[1,122,2,23,3,34,4,5];

// 有参数
arr.sort(function(a,b){
	return a-b;//从小到大排序
	return b-a;//从大到小排序
})
console.log('正序排列',arr); // [1, 2, 3, 4, 5, 23, 34, 122]

5. concat 拼接方法

concat 方法会将参数拼接到该数组中；
如果是基本数据类型，那么直接添加进去；
如果是数组类型那么会将外层的 【】去掉，只将参数添加进去
如果是数组嵌套数组，那么只会扒掉一层 【】，将内层数组添加进去

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

arr = arr1.concat({ name: '张三' })
console.log(arr);  // arr = [1,2,3, { name: '张三' }]

arr = arr1.concat([ [ 7,8,9 ] ])
console.log(arr);  // arr = [1,2,3, [7,8,9]]

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

6. slice 截取方法

该方法可以从数组中截取指定的字段,返回出来
返回值:返回截取出来的字段,放到新的数组中,不改变原数组

6.1 arr.slice(start,end)

从start下标开始截取,一直到end结束,不包括end

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

6.2 arr.slice(start)

从start下标开始截取,一直到最后

let arr = [0,1,2,3,4,5,6,7];
newArr = arr.slice(2)//newArr = [2，3，4，5，6，7];
console.log('slice',newArr);

6.3 arr.slice( )

全部截取

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

7. splice

删除或增加元素(任意在任何位置,直接改变原数组,返回的是被删除元素组成的新数组或者空数组)

7.1 arr.splice(start,deletedCount) 纯删除

从start下标开始,删除几个

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

7.2 arr.splice(start,deletedCount,item) 替换

从start下标开始,删除几个,并在该位置添加item

let arr = [0,1,2,3,4,5,6,7]
arr.splice(1,2, 10, 20, 30) // newArr = [1,2];
console.log('splice',arr);  // [0, 10, 20, 30, 3, 4, 5, 6, 7]

7.3 arr.splice(start,0,item) 纯添加

从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动

let arr = [0,1,2,3,4,5,6,7]
arr.splice(2,0,10,20,30); //arr = [0,1,2,3,4,5,6,7]
console.log('splice',arr);  //  [0, 1, 10, 20, 30, 2, 3, 4, 5, 6, 7]

8. indexOf

查找元素在数组中出现的位置
arr.indexOf (ele,fromIndex) 接收两个参数
第一个参数是查找的元素
第二个参数是从那个下标开始查找
找到返回元素下标 ； 未找到返回-1

let arr = [0,1,2,3,4,5,6,7]
// 从左向右开始筛查
if( arr.indexOf( 4 ) === -1 ) {
  console.log('indexOf','元素不存在');
} else {
  console.log('indexOf','元素存在');
}
// 从右向左开始筛查
if( arr.lastIndexOf( 4 ) === -1 ) {
  console.log('lastIndexOf','元素不存在');
} else {
  console.log('lastIndexOf','元素存在');
}

9. ES5新增的遍历数组方法

9.1 forEach

该方法等同于for循环,没有返回值，可以修改原数组

let arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})

9.2 map

映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等，可以修改原数组。
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身

let arr = [1,32,54,6,543];
let res = arr.map(function(item,index,arr){
	return item*2;
})
console.log('map',res);  // [2, 64, 108, 12, 1086]

9.3 filter

filter方法: 有返回值, 过滤出符合条件的元素

let arr = [1, 3, 5, 2, 4, 6];
let res3 = arr.filter(function(item, index) {
  return item % 2 === 0;
});
console.log('filter',res3); // [2, 4, 6]

过滤出布尔类型为true的项

let arr2 = [0, "", false, 1, 3, 4];
let res4 = arr2.filter(function(item, index) {
  return item;
});
console.log('filter',res4);  // [1,3,4]

9.4 some

判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

let arr3 = [
  { name: "zs", age: 18, done: "notYet" },
  { name: "ls", age: 20, done: true },
  { name: "ww", age: 22, done: true }
];
let res5 = arr3.some(function(item) {
  return item.done;
});
console.log('some',res5);  // true

9.5 every

判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

let arr3 = [
  { name: "zs", age: 18, done: "notYet" },
  { name: "ls", age: 20, done: true },
  { name: "ww", age: 22, done: true }
];
let res6 = arr3.every(function(item) {
  return item.done;
});
console.log('every',res6);  // true

9.6 find

找到符合条件的项,并且返回第一项

let arr4 = [
  { id: 3, name: "ls", done: false },
  { id: 1, name: "zs", done: true },
  { id: 2, name: "ww", done: true }
];
var res7 = arr4.find(function(item) {
  return item.done;
});
console.log('find',res7);  // {id: 1, name: 'zs', done: true}

9.7 findIndex

找到符合条件的项的下标,并且返回第一个

arr4 = [
  { id: 3, name: "ls", done: false },
  { id: 1, name: "zs", done: true },
  { id: 2, name: "ww", done: true }
];
var res8 = arr4.findIndex(function(item) {
  return item.done;
});
console.log('findindex',res8);  // 1

9.8 reduce

1.当reduce（）方法的第二个值为空时，第一次循环方法中的第一个参数（prev）为数组的第一项值，第二个参数（cur）为数组的第二项值，反之，第一次循环方法中的第一个参数（prev）为reduce的第二个参数值，第二个参数（cur）为数值的第一项值。

2.reduce（）方法的第一个参数，就是每次遍历都会执行的匿名函数，当前函数的返回值就会传给下一次执行函数的第一个值。也就是prev

​ 1.求和计算

​ *第一次：pre–>1 next–>2 index–>1
pre+next=1+2=3
*第二次：pre–>3 next–>3 index–>2
pre+next=3+3=6
*第三次：pre–>6 next–>4 index–>3
pre+next=6+4=10
*第四次：pre–>10 next–>5 index–>4

let arr1 = [1, 2, 3, 4, 5];
var new1 = arr1.reduce(function (pre, next, index) {
  console.log('reduce',pre,next),index;
  return pre + next;
  //pre+next=10+5=15
})
console.log('reduce total',new1);  // 15

2.扁平化数组(拼接数组)

let arr2 = [[1,2,3],[4,5],[6,7]] ;
var new2 = arr2.reduce(function(pre,next,index){
    return pre.concat(next);	//前数组拼接后数组 .concat()
})
 console.log('reduce',new2); // [1, 2, 3, 4, 5, 6, 7]

对象数组叠加计算

let arr3 = [
  { price: 10, count: 1 },
  { price: 15, count: 2 },
  { price: 10, count: 3 }
];
var new3 = arr3.reduce(function (pre, next, index) {
  return pre + next.price * next.count;
}, 0)	//在原数组第一项添加为0，不改变原数组，则可不操作第一项
console.log('reduce 对象数组叠加', new3); // 70

应用 : 计算数组中每个元素出现的次数
投票板

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
    // console.log(allNames, '| ' + name);
    if (name in allNames) {
      allNames[name]++;
    } else {
      allNames[name] = 1;
    }
    return allNames;
}, {});
console.log('reduce 投票版',countedNames);  // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

9.9 fill

方法能使用特定值填充数组中的一个或多个元素

let arr = new Array(10)
// 填充数组
arr.fill('A')  // ['A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A', 'A']

// 替换数组元素：
arr.fill(0, 2, 4); // 从索引2到索引4（不包括4）之间的元素替换为0
console.log(array); // ['A', 'A', 0, 0, 'A', 'A', 'A', 'A', 'A', 'A']

// 扩展数组长度
const array = [1, 2, 3];
array.length = 5; // 扩展数组长度
array.fill(0); // 填充新增的元素为0
console.log(array); // [1, 2, 3, 0, 0]

9.10 includes

是 JavaScript 中用于检查数组是否包含指定元素的方法。它会返回一个布尔值，表示数组中是否包含指定的元素。

array.includes(searchElement[, fromIndex])
// searchElement：要查找的元素。
// fromIndex（可选）：从数组的哪个索引开始查找，默认为 0。如果指定了负数的 fromIndex，则从数组末尾向前查找。

const array = [1, 2, 3, 4, 5];
const element = 3;
const includesElement = array.includes(element);
console.log(includesElement); // true

// 指定索引开始下标
const array = [1, 2, 3, 4, 5];
const element = 3;
const fromIndex = 2;
const includesElement = array.includes(element, fromIndex);
console.log(includesElement); // false（从索引2开始查找，未找到元素3）

// 索引下标设置为负数
const array = [1, 2, 3, 4, 5];
const element = 1;
const fromIndex = -3; // 从数组倒数第3个元素开始查找
const includesElement = array.includes(element, fromIndex);
console.log(includesElement); // true（从倒数第3个元素开始查找，找到元素1）

9.11 copyWithin

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
接收两个参数
第一个参数为粘贴的位置下标
第二个参数是开始复制的位置下标
第三个参数是结束复制的位置下标

//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3,  arr , 5];
arr.copyWithin(3, 0);
console.log(arr);   //[1,2,3,1,2]



let arr = [1, 2, 3,  arr , 5, 9, 17];
//从索引3的位置开始粘贴
//从索引0的位置开始复制
//遇到索引3时停止复制
arr.copyWithin(3, 0, 3);
console.log(arr);   //[1,2,3,1,2,3,17]

9.12 flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
该方法返回一个新数组，对原数据没有影响。
参数： 指定要提取嵌套数组的结构深度，默认值为 1。

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]

9.13 flatMap()

对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

9.14 entries(),keys() 和 values() 【ES6】

entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历
区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of [ a ,  b ].keys()) {  
console.log(index);  
}  
// 0  
// 1  
for (let elem of [ a ,  b ].values()) {  
console.log(elem);  
}  
//  a   
//  b   
for (let [index, elem] of [ a ,  b ].entries()) {  
console.log(index, elem);  
}  
// 0 "a"  
// 1 "b"

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = [ a ,  b ,  c ];  
let entries = letter.entries();  
console.log(entries.next().value); // [0,  a ]  
console.log(entries.next().value); // [1,  b ]  
console.log(entries.next().value); // [2,  c ]

10. 数组的增删类型

10.1 push 方法（末尾添加）

push 向数组末尾添加数据

let arr = [1, 2, 3, 4, 5]
arr.push(6)                 // 返回值:返回的是添加元素后数组的长度.
console.log('push', arr);   //  [1, 2, 3, 4, 5, 6]

10.2 unshift 方法（首部添加）

unshift 向数组前面添加数据

let arr = [1, 2, 3, 4, 5]
arr.unshift(0)                // 6 返回的是添加元素后数组的长度
console.log('unshift', arr);  //  [0, 1, 2, 3, 4, 5, 6]

10.3 pop方法（末尾删除）

pop 删除末尾元素元素

let arr = [1, 2, 3, 4, 5]
arr.pop()                   //  5 返回值:返回的是刚才删除的元素.
console.log('pop', arr);    //  [1, 2, 3, 4]

10.4 shift 方法（首部删除）

shift 删除前面的元素

let arr = [1, 2, 3, 4, 5]
arr.shift()                 //  1 返回值:返回的是刚才删除的元素.
console.log('shift', arr);  //  [2, 3, 4, 5]