Array

属性

length

ES5

改变原数组

• push, pop, unshift, shift

let arr1 = [12, 34, 4, 3, 4, 4];
console.log(arr1.pop()); // 4 返回最后一个删除的元素
console.log(arr1); // [12, 34, 4, 3, 4]
console.log(arr1.push(5)); // 返回数组长度
console.log(arr1);
console.log(arr1.shift()) // 12 返回第一个删除的元素
console.log(arr1); //[ 34, 4, 3, 4, 5 ]
console.log(arr1.unshift(1)); // 返回数组长度
console.log(arr1); //[ 1, 34, 4, 3, 4, 5 ]

• reverse
  反转数组，返回先数组，原数组也会跟着改变

const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log(reversed);//["three", "two", "one"]
console.log(array1);// ["three", "two", "one"]

• sort
  按照首字母来排序

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); //1, 100000, 21, 30, 4]
array1.sort((a, b) => b - a); //[ 100000, 30, 21, 4, 1 ]
array1.sort((a, b) => a - b); //[ 1, 4, 21, 30, 100000 ]
console.log(array1); 

• splice, slice
  array.splice(start[, deleteCount[, item1[, item2[, ...]]]]), 可以实现数组内容的增删，由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

const months = ['Jan', 'March', 'April', 'June'];
let m = months.splice(1, 0, 'Feb'); //不删除
console.log(months); // [ 'Jan', 'Feb', 'March', 'April', 'June' ] 
console.log(m) //[]
m = months.splice(4, 1, 'May'); //从下标为4开始，删除一个
m.push(3);
console.log(months); //[ 'Jan', 'Feb', 'March', 'April', 'May' ]
console.log(m) //[ 'June', 3 ]
m[0] = 2;
console.log(m) //[ 2, 3 ]

slice方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

不改变原数组

• Array.isArray //判断是否是数组
• concat 返回一个新数组
  var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]);
• indexOf/ lastIndexOF 返回下标，没有则是-1
• ** jion，toString， toLocaleString**
  jion 拼接成字符串， 支持参数传递
  toString 返回一个字符串，表示指定的数组及其元素。
  toLocaleString, 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。
  arr.toLocaleString([locales[,options]]);

var prices = ['￥7', 500, 8123, 12];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });// "￥7,￥500,￥8,123,￥12"

ES6

改变原数组

• copyWithin() IE11不支持
  是一个可变方法，它不会改变 this 的长度 length，但是会改变 this 本身的内容，返回一个浅拷贝的数组
  arr.copyWithin(target[, start[, end]])；

let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(-2);// [1, 2, 3, 1, 2]
numbers.copyWithin(0, 3);// [4, 5, 3, 4, 5]
numbers.copyWithin(0, 3, 4);// [4, 2, 3, 4, 5]
numbers.copyWithin(-2, -3, -1);// [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5, 3: 1}, 0, 3);// {0: 1, 3: 1, length: 5}

const array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = array1.copyWithin(0, 3, 4);
array2.push(2)
console.log(array1.copyWithin(1, 3)); //[ 'd', 'd', 'e', 2, 'e', 2 ]
console.log(Array.isArray(array2)); //true
console.log(array1); //[ 'd', 'd', 'e', 2, 'e', 2 ]

• fill 填充数组
  arr.fill(value[, start[, end]])

const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));//[1, 2, 0, 0]
console.log(array1.fill(5, 1));//[1, 5, 5, 5]
console.log(array1.fill(6)); //[ 6, 6, 6, 6 ]
console.log(array1)//[ 6, 6, 6, 6 ]

不改变原数组或其他

• Array.from(obj, mapFn, thisArg); IE11不支持
  obj 可以是 String，Set，Map，arguments等类数组，克隆一个新数组
• Array.of(element0[, element1[, ...[, elementN]]]) IE11不支持
  方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

• entries()，keys()，values() 数组遍历 IE11支持

1. entries 遍历key value， 一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（proto:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]
   image.png
   done: 遍历到数组最后一个时才为true
2. keys 遍历索引，其他同entries
3. values 遍历value，其他同entries

• every(), some(), includes 可兼容IE9，返回布尔值, includes不支持IE
  arr.includes(valueToFind[, fromIndex])，includes还可以包含指引数

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

• filter, find, findIndex IE11
  filter 返回复合条件的数组
  find 返回复合条件的第一个值，无则undefined
  findIndex 返回复合条件的第一个索引，无则undefined
• flat(number| Infinity) 拍平数组 IE11, Edge不支持

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity));// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr4)//[1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];

• flatMap 深度为1的flat 与 map 相结合

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])

var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8]
arr1.flatMap(x => [[x * 2]]);// [[2], [4], [6], [8]]

• reduce, reduceRight 支持到IE9
  接受四个参数
  Accumulator (acc) (累计器)
  Current Value (cur) (当前值)
  Current Index (idx) (当前索引)
  Source Array (src) (源数组)
  函数累计处理的结果

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array {
  return accumulator + currentValue;
}); //10

其他

• forEach, map
  两者里面没有break , 可以用return 语句等同于continue语句
  forEach 是es5的语法，无返回值。forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。

let arr1 = [12, 34, 4, 3, 4, 4];
let arr2 = arr1.forEach(va => {
    if (va === 4) {
        return false;
    }
    console.log(va)
    return va * 2;
});
console.log(arr1, arr2);
/**
12
34
3
[ 12, 34, 4, 3, 4, 4 ] undefined
 */

map, es6中的语法，有返回值，不敢变原数组，相当于深拷贝

let arr1 = [12, 34, 4, 3, 4, 4];
let arr2 = arr1.map(va => {
    if (va === 4) {
        return "aa";
    }
    console.log(va)
    return va * 2;
});
console.log(arr1, arr2);
/**
12
34
3
[ 12, 34, 4, 3, 4, 4 ] [ 24, 68, 'aa', 6, 'aa', 'aa' ]
 */