JavaScript操作数组常用方法包括es6方法

一 添加操作

  1. push: 向数组末尾添加一个或多个元素(不限数据类型，也可以是函数)；改变原数组；返回的是原数组改变后的长度
let arr = [1, 2, 3];
//  push: 向数组的末尾 添加一个或多个元素(不限数据类型，可以是函数也可以是一个变量)，改变原数组，返回原数组改变后的长度
let fun = () => 10;
let num = 10;
let a = arr.push(3, 10, 100, '1', {name: 'dj', age: 100}, fun, num);
console.log('a=' + a);
console.log('arr=' + arr);
a=10
arr=1,2,3,3,10,100,1,[object Object],() => 10,10
  1. unshift：向数组的最前面添加一个或多个元素(不限数据类型也可以是一个函数)；改变原数组；返回的是改变后的数组的长度
let arr1 = [1, 2, 3, 4];
let b = arr1.unshift(100, '123', function () {
    console.log('123')
}, {name: 'dj'}, num);
console.log('b=' + b);
console.log('arr1=' + arr1);
b=9
arr1=100,123,function () {
    console.log('123')
},[object Object],10,1,2,3,4

二 删除操作

  1. pop:删除数组的最后一个元素；改变原数组；返回的是被删除的数组元素
let arr = [1, 2, 3, 4, 10];
// pop: 删除数组的最后一个元素，改变原数组，返回的是被删除的数组的元素
let ele = arr.pop();
console.log('ele=' + ele);
console.log('arr=' + arr);
ele=10
arr=1,2,3,4
  1. shift:删除数组的第一个元素；改变原数组；返回的是被删除的数组元素
let arr1 = [1, 2, 3, 4, 5];
// shift: 删除数组最前面的一个元素，改变原数组，返回的是被删除的数组的元素
let ele1 = arr1.shift();
console.log(ele1);
console.log(arr1);
1
[ 2, 3, 4, 5 ]
  1. splice：删除数组一个或多个元素；改变原数组；返回的是被删除的元素组成的数组
  • 关于splice参数的介绍：第一个参数为开始删除的索引号；第二个为要删除的长度；第三个及其以上为替换被删除的数组元素的新元素
  • 当只有一个参数时：这时候会从该索引号开始删除数组后面所有的元素
let arr2 = [100, 200, 300, 400];
let ele2 = arr2.splice(0);
console.log(ele2, arr2);    /*   [ 100, 200, 300, 400 ]  []    */
  • 当有两个参数时：从第一个参数指定的索引号开始删除第二个参数指定的长度
let ele3 = arr2.splice(1, 2);
console.log(ele3, arr2);   /*  [ 200, 300 ] [ 100, 400 ]  */
  • 当有三个参数及其以上时：会将原数组删除的元素替换成第三个及以后的参数，若原数组没有删除元素则将第三个及其以后的参数插入到第一个参数指定的位置（往前插入）
let ele4 = arr2.splice(1, 0, '1000', '2000');
console.log(ele4, arr2);   /* [] [ 100, '1000', '2000', 200, 300, 400 ] */
let ele5 = arr2.splice(1, 2, '1000', '2000');
console.log(ele5, arr2);  /* [ 200, 300 ] [ 100, '1000', '2000', 400 ] */

三 查找操作

  1. indexOf：查找数组的元素，从前往后查，查找到则返回第一个被查找到的元素的索引号，没有查找到则返回 -1
  2. lastIndexOf：查找数组的元素，从后往前查，查找到则返回第一个被查找到的元素的索引号，没有查找到则返回 -1
let arr = [1, 2, 3, 2, 4, '5', 6];
let ele = arr.indexOf(2);
console.log(ele);  /*  1  */
let ele1 = arr.lastIndexOf(2);
console.log(ele1);  /*  3  */

四 concat、slice、sort、rerverse、join、forEach

  1. concat：连接数组；不改变原数组；返回连接后的新数组；
let arr = [1,2,3];
let arr2 = [2,3,4];
let arr3 = [2,3,4,5,6,7];
//  concat 用于连接两个或多个数组，返回一个新数组，不改变原来数组的值
console.log(arr.concat(arr2, arr3));
console.log(arr, arr2, arr3);
[
  1, 2, 3, 2, 3,
  4, 2, 3, 4, 5,
  6, 7
]
[ 1, 2, 3 ] [ 2, 3, 4 ] [ 2, 3, 4, 5, 6, 7 ]
  1. slice：截取数组；不改变原数组；返回的是一个由截取的元素组成的数组；
// 1. 不带参数： 截取整个数组
let arr = [1,2,3,4,5];
let newArr = arr.slice();
console.log(arr);/* [ 1, 2, 3, 4, 5 ]  */
console.log(newArr);  /* [ 1, 2, 3, 4, 5 ]  */

// 2. 带一个参数： 截取从此参数开始到数组最后一个元素
let arr1 = [2,5,8,12,9];
let newArr2 = arr1.slice(2);
console.log(arr1);  /*  [ 2, 5, 8, 12, 9 ] */
console.log(newArr2);   /*  [ 8, 12, 9 ]  */

// 3. 两个参数: 截取从第一个参数开始到第二个参数结束(但不包括第二个参数对应的数组元素)
let arr3 = [12,90,3,6,0];
let newArr3 = arr3.slice(2, 4);
console.log(arr3);  /*  [ 12, 90, 3, 6, 0 ]  */
console.log(newArr3);  /*  [ 3, 6 ]  */
  1. sort：数组排序；改变原数组；返回改变后的数组；sort只能多个位数进行排序，以下给的代码中进行了改进
let arr = [1, 2, 1, 8, 9];
let newArr = arr.sort();
console.log(arr, newArr);

// 改进1: 对十位数及其以上都能排序，升序
let arr1 = [109, 20, 300, 13, 8];
arr1.sort(function (a, b) {
    return a - b
});
console.log(arr1);  /*  [ 8, 13, 20, 109, 300 ]  */
// 降序
arr1.sort(function (a, b) {
    return b - a
});
console.log(arr1);   /*   [ 300, 109, 20, 13, 8 ]  */

// 改进2： 依据对象的某个属性进行排序
let objArr = [{
    age: 123
}, {
    age: 13
}, {
    age: 567
}];
objArr.sort(function (a, b) {
    return a.age - b.age
});
console.log(objArr);  /*  [ { age: 13 }, { age: 123 }, { age: 567 } ]  */
  1. reverse：颠倒数组的顺序；改变原数组；返回改变后的数组；
let arr = [1,4,56,67,24];
// 颠倒数组的顺序  改变原来的数组, 会返回一个已经颠倒顺序的数组
let arr1 = arr.reverse();
console.log(arr, arr1);  /*  [ 24, 67, 56, 4, 1 ] [ 24, 67, 56, 4, 1 ]    */
  1. join：将数组变为字符串每个元素被指定的分隔符分隔(默认为逗号)；不改变原数组；返回一个字符串；
let arr = [1,2,3,4,5];
// join:  数组.join(特定的分隔符),将数组变为字符串，用特定的分隔符分隔数组中的每个元素，默认逗号为分隔符，
// 不会改变原来数组的值，  会返回一个指定分隔符的字符串
let strArr = arr.join();
console.log(arr);  /*       [ 1, 2, 3, 4, 5 ]       */
console.log(strArr, typeof strArr);   /*   1,2,3,4,5 string    */
strArr = arr.join('/');
console.log(strArr);   /*   1/2/3/4/5   */
  1. forEach：遍历数组
['a','b','c'].forEach(function (currentValue, index, arr) {
   console.log(currentValue);
   console.log(index);
   console.log(arr);
});
运行结果
a
0
[ 'a', 'b', 'c' ]
b
1
[ 'a', 'b', 'c' ]
c
2
[ 'a', 'b', 'c' ]

五 筛选或判断特定条件、修改操作

  1. every：对数组的每一项都进行给定的函数运行，每一项都返回true，则返回true；若是空数组则始终返回true；若数组为稀疏数组，例：见下面代码，数组本身有7个元素但是every会自动忽略数组没有定义的值所以只需要多1,2，3,4，5进行函数的判断
// 稀疏数组 ：  [1,2,,3,4,,5]
let arr = [10, 20, 40, 67];
// element 必选，当前数组的值， index 可选，当前数组对应值得索引号， array 可选，调用every的当前数组
const bool = arr.every(function (element, index, array) {
    return element < 100
});
console.log(bool);  //  true
  1. some：对数组的每一项进行指定函数的判断，只要有一项返回true，则返回true；数组为空时始终返回false，和every不同
let arr = [1,2,3,4,5];
const bool = arr.some(function (element) {
    return element > 3
});
console.log(bool); /* true */
  1. filter：对数组的每一一个元素进行指定的函数的判断，返回所有符号要求的元素组成的数组
let arr = [1,2,3,4,5,6];
let newArr = arr.filter(function (element) {
    return element > 4
});
console.log(newArr);   /*  [ 5, 6 ]   */
  1. map：对数组的每一项元素都运行指定函数；返回一个新数组
let arr = [1,2,3,4,5];
let newArr = arr.map(function (element) {
    return element * 2 + 10
});
console.log(newArr);  /*    [ 12, 14, 16, 18, 20 ]  */

六 es6新增方法

  1. Array.from：Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
console.log(Array.from.length); /* 1  */
console.log(Array.from('foo'));
console.log(Array.from('foo', function (currentValue) {
    return currentValue + '1'
}));
1
[ 'f', 'o', 'o' ]
[ 'f1', 'o1', 'o1' ]
  1. Array.of：
// Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
// Array.of(element1, element2, element3, ...)
console.log(Array.of(1,2,3,4));  /* [1, 2, 3, 4]*/
  1. find和findIndex：前者是返回满足测试函数的第一个数组元素，否则返回undefined；后者是返回满足测试函数的第一个数组元素的索引号，否则返回 -1；这两个方法对于稀疏数组的效率会低一些，因为这两个方法的回调函数会为索引号 0 至 length - 1 调用
  2. fill：
// fill: 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。改变原数组，但不会改变原数组的长度
// 三个参数： 第一个为填充的值，第二个为开始的索引号（可选，默认为 0），第三个为结束的索引号（可选， 默认为 length）
let arr = [1,2,3,4,5];
// arr.fill('true', 1, 3);   /*  [ 1, 'true', 'true', 4, 5 ]  */
// 如果 start 和 end 为负数 则参数自动会转变成  length + start(end)
// arr.fill('true', -2);   /*  [ 1, 2, 3, 'true', 'true' ]  */
arr.fill('true', -2, -5);  /*length + start = 3  >  length + end = 0*/
console.log(arr);  /* [ 1, 2, 3, 4, 5 ] */
  1. copyWithin：
// copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
// 参数： 第一个为索引号，复制的元素插入的索引号；第二个参数为开始位置（默认0）；第三个参数为结束位置（不包含这个位置，默认为 length）
// 如果为负数，这三个参数都会以  length+值 计算
let arr = [1,2,3,4,5,6,7,8];
arr.copyWithin(2, 0, 2);
/*
[
  1, 2, 1, 2,
  5, 6, 7, 8
]
*/
let arr1 = [10,20,30,40,50];
arr1.copyWithin(-3, 0, 2);   /* [ 10, 20, 10, 20, 50 ]  */
let arr2 = [100,200,300,400,500,600,700];
arr2.copyWithin(-5, 0, -5);
/*[
  100, 200, 100,
  200, 500, 600,
  700
]
*/
  1. entries：
//entries() 方法返回一个新的包含 [key, value] 对的 Iterator 对象，返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。
let arr = ['a','b','c','d','e'];
const newArr = arr.entries();
for (let i = 0; i < arr.length; i++) {
    console.log(newArr.next().value);
}
[ 0, 'a' ]
[ 1, 'b' ]
[ 2, 'c' ]
[ 3, 'd' ]
[ 4, 'e' ]
  1. values和keys：
let arr=  ['a','b','c','d','e','f'];
for (let k of arr.values()) {
    console.log(k);  /* a b c d e*/
}

for (let k of arr.keys()) {
    console.log(k);  /* 0 1 2 3 4 5*/
}
  1. includes：
// includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
// 参数： includes(valueToFind, [fromIndex])
// valueToFind 需要查找的元素值。 fromIndex 可选  从fromIndex 索引处开始查找 valueToFind。
// 如果为负值，则按升序从 length + fromIndex 的索引开始搜。默认为 0。
let arr = [1,2,3,4,5];
const bool = arr.includes(2);
console.log(bool);  /* true */

let arr1 = ['a', 'b', 'c'];
const boo = arr.includes('A');  /* false  因为区分大小写*/
console.log(boo);