ES6 之 数组的扩展

ES5

检测数组

let arr = [1,2,3,4]
Array.isArray(arr)
arr instanceof Array

转换方法

arr.toLocaleString()
arr.toString()
arr.valueOf()

栈方法（后进先出）

arr.push(item1,item2,....,itemx); // 添加元素，返回值为数组的长度，并且原数组会发生变化
arr.pop(item1,item2,....,itemx);  // 删除并返回数组的最后一个元素，原数组会发生变化

队列方法（先进先出）

//  向数组的开头添加一个或更多元素，并返回新的长度。【原数组会发生变化】
数组名.unshift(newelement1,newelement2,....,newelementX);
// 删除并返回数组的第一个元素 【原数组会发生变化】
数组名.shift();

数组的重排序——反转 和 排序

// 颠倒数组中元素的顺序。返回颠倒后的数组 【原数组会发生变化】
数组名.reverse();
 
// 对数组的元素进行排序
数组名.sort();   // 默认排序顺序是根据字符串Unicode编码 【了解】
 
数组名.sort(function(a,b){    //【重点】
  return a - b;   // 升序（从小到大）
})
数组名.sort(function(a,b){    //【重点】
  return b - a;   // 降序（从大到小）
})

操作方法

// 数组拼接
arr.concat(arr01,arr02,...) // 返回新的数组
 
// 从已有的数组中返回选定的元素。【截取后，不会改变原数组，而是返回新的数组】
数组名.slice(start,end); // 只有start，将会截取到数组末尾 
// 如果 start 的值为负数，假如数组长度为 length，则表示从 length+start 的位置开始复制，此时参数 end 如果有值，只能是比 start 大的负数，否则将返回空数组。
console.log([1,2,3].slice(-1));//[3]
 
// 向/从数组中添加/替换项目，然后返回被替换出来的项目。【原数组会发生变化】
数组名.splice(index,howmany,item1,.....,itemX)
参数：
    index 从哪个索引位置开始删    数字
    howmany 替换几个    数字
    item1,.....,itemX   替换的数据（可以是多个）  可选
  

位置方法

// 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
数组名.indexOf(searchElement); 【用的较多】
// 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找
数组名.lastIndexOf(searchElement);

数组元素的拼接

// 用于把数组中的所有元素放入一个字符串。
数组名.join(separator);
var arr = [ 1, 2, 4, 90, 67, 5, 434, 64];
var str = arr.join('❤');
console.log( typeof arr);//object类型
console.log( str);

迭代方法

// 数组遍历
数组名.forEach(function(value,index,currentArray){
  console.log(value);
});
/*第一个参数是遍历的数组内容
  第二个参数是对应的索引
  第三个参数数数组本身 */
 
// 过滤出符合筛选条件的元素，返回一个新的数组
数组名.filter(function(value,index,currentArray){
    return 条件;    // 如：return value >= 1000;
});
 
// 验证数组中的每一个元素是否都符合指定的条件,返回布尔值
数组名.every(function(value,index,currentArray){
  return 条件;    // 如：return value >= 1000;
});
 
// 验证数组中的元素，是否有符合指定条件的，返回布尔值
数组名.some(function(value,index,currentArray){
  return 条件;  // 如：return value >= 1000;
});
 
// 遍历数组中的每一个元素，更改后存入一个新的数组中，返回一个新的数组
数组名.map(function(value,index,currentArray){
  return 操作;   // 如：return value * 2;
});

缩小方法

// reduce() 和 reduceRight()
// 这俩个方法都会迭代数组的所有项，然后构建一个最终返回的值
// reduce() 从数组的第一项开始，逐个遍历，reduceRight()从数组的最后一项开始，逐个遍历
arr = [1, 2, 3, 4, 5]
/*
prev, 前一项
cur, 当前项
index, 索引
array 当前数组
*/
arr.reduce(function(prev, cur, index, array) {
    return prev + cur;
}) // 15 原数组不发生改变
 
arr.reduceRight(function(prev, cur, index, array) {
    return prev + cur;
}) // 15 原数组不发生改变

ES6

扩展运算符 ...

    let arr = [1, 9, 3, 4, 5, 7];
    console.log(...arr); // 讲一个数组转化为用逗号分隔的参数序列
    // 替代apply方法
    Math.max.apply(null,arr)
    console.log(Math.max.apply(null,arr));
    Math.max(...arr)
    console.log(Math.max(...arr));

copyWithin() 复制数组项

    // 数组实例的copyWithin()
    // 数组实例的copyWithin()方法会在当前数组内部将指定位置的成员复制到其他位置（会覆盖原理成员）
    // 然后返回新数组，也就是说，使用这个方法会改变修改当前数组
    // Array.prototype.copyWithin(target, start = 0, end = this.length)
    // target 可选，从该位置替换数据
    // start可选，从该位置读取数据，默认是0
    // end 可选，到该位置前停止读取数据，默认等于数组长度。如果是负值，表示倒数
 
    console.log([1,2,3,4,5,6].copyWithin(0, 4));  // 5 6 覆盖 1 2 => [5, 6, 3, 4, 5, 6]

找到符合条件的数组项 find() findIndex()

    // 数组实例的find() 和 findIndex()
    // .find() 找出第一个符合条件的数组成员，参数是一个回调函数
    // 所有数组成员一次执行该回调函数，直到找到第一个返回为true的成员，然后返回该成员
    // 如果么有符合从条件的成员，则返回undefined。 findIndex() 返回 索引
    let arr11 = [1, 9, 3, 4, 5, 7];
    let a = arr11.find( (n) => n > 8)
    console.log(a); //
    let b = arr11.findIndex( (n) => n > 8)
    console.log(b); //

数组实例的fill() 给定值 填充到一个数组中,返回值为新数组

    let c = [1, 2, 6].fill('aaa')
    console.log(c); // ["aaa", "aaa", "aaa"]

数组实例的 entries() keys() values() -- 用于遍历数组

    // 他们三个都返回一个遍历器，for ··· of ··· 循环遍历
    // entries() 遍历 键值对
    // keys() 遍历 键
    // values() 遍历 值
    let arr22 = [1, 9, 7];
    for(let index of arr22.keys() ) {
      console.log(index);
    }
    for(let value of arr22.values() ) {
      console.log(value);
    }
    for(let entry of arr22.entries() ) {
      console.log(entry);  // [0, 1] 键和值组成数组
    }

数组实例的includes()

    // Array.prototype.includes() 方法返回的是一个布尔值，表示数组是否包含给定的值
    console.log([1, 2, 3].includes(2)); // true
    console.log([1, 2, NaN].includes(NaN)); // true

数组的空位

    // 空位不是undefined
    console.log(Array(3)); // [empty × 3]
 
    // forEach(),filter(),every()和some() 都会跳过空位
    // map() 会跳过空位，但是会保留这个值
    // join() 和 toString() 会将空位视为undefined
    // 而undefined 和 null 会被处理成空字符串
    // ES6 明确将空位转化为 undefined

迭代方法

// 数组遍历
数组名.forEach(function(value,index,currentArray){
  console.log(value);
});
/*第一个参数是遍历的数组内容
  第二个参数是对应的索引
  第三个参数数数组本身 */

        let arr = [1,2,3,4,5,6,5,4];
        var everyResult = arr.every(function(item,index,array){
            return (item > 2)
        })
        // 判断数组中的每一项都符合return后的条件，返回 true & false
        console.log(everyResult)
 
        var someResult = arr.some(function(item,index,array){
            return (item > 2)
        })
        // 判断数组中的每一项只要有一项符合return后的条件，返回 true & false
        console.log(someResult)
 
        var filterResult = arr.filter(function(item,index,array){
            return (item > 2)
        })
        // 判断数组中的项符合条件，符合的项组成一个新的数组
        console.log(filterResult)
 
        var mapResult = arr.map(function(item,index,array){
            return (item - 2)
        })
        // 对数组的每一项进行相同的计算，返回新数组
        console.log(mapResult)

Array

Array.from() 将类数组对象转化为真正的数组

Array.of() 将一组值转化为数组

    //类似数组的对象 和 可遍历数组对象
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      '3': 'd',
      'length': 4
    }
    var arr1 = [].slice.call(arrayLike)
    console.log(arr1); // ["a", "b", "c", "d"]
    var arr2 = Array.from(arrayLike)
    console.log(arr2); // ["a", "b", "c", "d"]
 
    // Array.of() 将一组值转化为数组
    let arr3 = Array.of(1, 5, 5, 8)
    console.log(arr3); // [1, 5, 5, 8]