ES6 之 数组的扩展

ES5

向数组前后添加元素

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

从数组前后删除元素

// 删除并返回数组的第一个元素 【原数组会发生变化】
数组名.shift();
// 删除并返回数组的最后一个元素 【原数组会发生变化】
数组名.pop();

数组任意位置的添加、删除

// 向/从数组中添加/删除项目，然后返回被删除的项目。【原数组会发生变化】
数组名.splice(index,howmany,item1,.....,itemX)
参数：
    index 从哪个位置开始删    数字
    howmany 删除几个    数字
    item1,.....,itemX   新添加的数据（可以是多个）  可选
    
 var arr = [1,2,3];
 console.log(arr.splice(2,0,4,5,6));
 console.log(arr);

数组元素的查询

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

数组的反转 和 排序

// 颠倒数组中元素的顺序。返回颠倒后的数组 【原数组会发生变化】
数组名.reverse();

// 对数组的元素进行排序 
数组名.sort();   // 默认排序顺序是根据字符串Unicode编码 【了解】

数组名.sort(function(a,b){    //【重点】
  return a - b;   // 升序（从小到大）
})

数组名.sort(function(a,b){    //【重点】
  return b - a;   // 降序（从大到小）
})

数组截取

// 从已有的数组中返回选定的元素。【截取后，不会改变原数组，而是返回新的数组】
数组名.slice(start,end);

数组元素的拼接

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

用于连接两个或多个数组

语法：arr.concat(arrayX,arrayX,......,arrayX)

返回值：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arr中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

// 案例一
var a = [1,2,3];
console.log(a.concat(4,5)); //[1,2,3,4,5]
// 案例二
var arr =['one','two','three'];
var arr1 = ['four','five','six'];
console.log(arr.concat(arr1)); // ["one", "two", "three", "four", "five", "six"]
// 案例三
var arr =['one','two','three'];
var arr1 = ['four','five','six'];
var arr2 = ['seven','eight','nine'];
console.log(arr.concat(arr1,arr2)); //["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]

 

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); // 9
    let b = arr11.findIndex( (n) => n > 8)
    console.log(b); // 1

数组实例的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() 将两类对象转化为真正的数组

    //类似数组的对象 和 可遍历数组对象
    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]