JavaScript Array对象之ES5、ES6新增方法

上一篇我写了Array数组对象的一些基本方法，这次总结些关于ES5、ES6新增的数组对象的方法。

一、ES5新增数组方法（IE9+支持）

1.1索引方法

indexOf():返回要查找数值在数组中的索引值，从前往后查找，找不到返回-1

lastIndexOf():从后面往前找，但索引值不变。

语法格式: indexOf / lastIndexOf(要查找的项,查找起点索引)。

            var a = [2, 9, 5,44,88,9,32];
            console.log(a.indexOf(2)); // 0
            console.log(a.indexOf(7)); // -1
            console.log(a.lastIndexOf(2));//0
            console.log(a.lastIndexOf(7));//-1
            console.log(a.lastIndexOf(9,3));//1
            console.log(a.lastIndexOf(9,5));//5

1.2数组迭代方法

ECMAScript 5 为数组定义了 5 个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响 this 的值。

　　传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置、数组对象本身。

1.2.1 forEach(fn)：用于替代for循环，比for循环简便，但不能随意退出，不能使用break。此方法没有返回值。

            const items = ['item1', 'item2', 'item3'];
            const copy = [];    
            items.forEach(function(item){
              copy.push(item)
            });
            console.log(copy);//["item1", "item2", "item3"]        

1.2.3 map(fn):返回的是一个数量相等的新数组，返回的内容是什么取决于在fn中返回的值。

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
   return x * 2;
});
console.log(doubles);// [2, 10, 20, 30]

1.2.3 filter(fn): 得到执行fn后返回时true对应的数组元素组成的数组，利用这个方法对数组元素进行筛选。

        var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

        var longWords = words.filter(function(word){
          return word.length > 6;
        });
        
        console.log(longWords);//["exuberant", "destruction", "present"]

1.2.4 some(fn):如果该函数对任何一项返回ture,则返回ture。-->用于判断数组是否存在某个属性值/对象等（indexOf有局限性）

        var aa=[2,5,8,4];
        var  bb=[11,3,6,8];
        var cc=aa.some(function(item){
            return item >10;
        });
        var dd=bb.some(function(item){
            return item >10;
        })
        console.log(cc);//false
        console.log(dd);//true

1.2.5 every(fn):执行函数时，所有元素都返回ture,则返回ture。

        var aa=[2,5,8,4];
        var  bb=[11,3,6,8];
        var cc=aa.every(function(item){
            return item <10;
        });
        var dd=bb.every(function(item){
            return item <10;
        })
        console.log(cc);//true
        console.log(dd);//false

二、ES6新增新操作数组的方法

2.1 find();传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

findIndex();传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

const arr1 = [1, "2", 3, 3, "2"]
console.log(arr1.findIndex(n => typeof n === "number")) // 0

2.2 fill();

用新元素替换掉数组内的元素，可以指定替换下标范围。

格式：arr.fill(value, start, end)

const arr2=[1,2,3,4];
console.log(arr2.fill(5));//[5, 5, 5, 5]，默认所有元素替换
const arr3=[1,2,3,4];
console.log(arr3.fill(6,1,5));//[1, 6, 6, 6],新元素6替换在索引值为1到5之间的所有元素

2.3 copyWithin()

选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

格式：arr.copyWithin(被替换的起始位置,选取替换值的起始位置,选取替换值的结束位置)

let arr4 = [1, 'c', 'd', 'a', 'b'];  
console.log(arr4.copyWithin(0, 3, 5))   // ["a", "b", "d", "a", "b"]

2.4 Array.from()

将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组

const bar = ["a", "b", "c"];
console.log(Array.from(bar));// ["a", "b", "c"]

2. 5 Array.of();用于将一组值，转换为数组

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

2.6 entries() 返回迭代器：返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
  console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b'

2.7values() 返回迭代器：返回键值对的value；

keys() 返回迭代器：返回键值对的key

const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
  console.log(v)
}
//'a' 'b' 'c'

const arr = ['a', 'b', 'c'];

for(let v of arr.keys()) {

console.log(v)

}

// 0 1 2

2.8 includes（）

判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。

var a = [1, 2, 3];
console.log(a.includes(2)); // true
console.log(a.includes(4)); // false