ES6中的数组

ES6

数组方法

JSON数组格式转换成数组 Array.from()

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式

什么是JSON数组格式？

let json = {
    '0': '123',
    '1': 'abc',
    '2': 'www',
    length: 3
}

这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。

JSON数组格式转换成数组 Array.from()
只要是以上这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。

我们就用Array.from(xxx)来进行转换。接下来我们把上边的JSON代码转换成数组，并打印在控制台。

let json = {
    '0': '123',
    '1': 'abc',
    '2': 'www',
    length: 3         // 必须要有，没有length，Array.from(json) 为 []
}
let arr = Array.from(json);
console.log(arr);           //  ["123", "abc", "www"]

实际开发中这种方法还是比较常用的，毕竟节省了我们代码行数，也让我们的程序更清晰。

数字、字符串转换成数组 Array.of()

在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，如果你是一个老手程序员就知道eval的效率是很低的，它会拖慢我们的程序。

let str = '[3,4,5,6]';
console.log(eval(str));         // [3, 4, 5, 6]
console.log(Array.of(str));     // ["[3,4,5,6]"]

这时候我们就可以使用Array.of方法，它负责把一堆文本或者变量转换成数组。

数字转换成数组

console.log(Array.of(3,4,5,6));     // [3, 4, 5, 6]

当然它不仅可以转换数字，字符串也是可以转换的

字符串转换成数组

console.log(Array.of('123', 'www'));     // ["123", "www"]

判断数组当前索引内容是否为空 in

先来看一下ES5判断的弊端，以前会使用length属性进行判断，为0表示没有数组元素。但是这并不准确，或者说真实开发中有弊端。

let array = [,,,,,];
console.log(array.length);        // 5

上边的代码输出了5，但是数组中其实全是空值，这就是一个坑啊。那用ES6的in就可以解决这个问题。

let array = [,,,,,];
console.log(0 in array);          //false
let array1 = ['123', 'abc'];
console.log(0 in array1);         // true
console.log(3 in array1);         // false

注意：这里的0指的是数组下标位置是否为空。

数组转换字符串 join() & toString()

在开发中我们经常会碰到把数组输出成字符串的形式，我们今天学两种方法，你要注意两种方法的区别。

join()

参数一： 数组拼接的连接符

let arr = ['123', 'abc', 'www'];
console.log(arr.join('|'));         // 123|abc|www

toString()

默认使用,逗号作为连接符；传参无效

let arr = ['123', 'abc', 'www'];
console.log(arr.toString());           // 123,abc,www
console.log(arr.toString('|'));        // 123,abc,www   传参无效

数组的实例方法

查找数组中的某个元素 find()

实例方法： 所谓的实例方法就是并不是以Array对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法（不理解请看下边的代码，再和上边的代码进行比对，你会有所顿悟）。

这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数。

find() 参数

value：表示当前查找的值。
index：表示当前查找的数组索引。
arr：表示当前数组。

例子：在数组中查找大于5的数值

let arr1 = [1,2,3,4,5,6,7,8,9];
let fun = arr1.find(function (value, index, arr){
    return value > 5
})
console.log(fun);       // 6
let arr2 = ['a', 'b', 'c'];
let fun1 = arr2.find(function (value, index, arr){
    return value == 'www'
})
console.log(fun1);       // undefined

注意： 这里只要找到符合条件的值，就会停止查找并返回，如果找不到会显示undefined。

数组填充 fill()

fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数。

参数
第一个参数：填充的内容
第二个参数：开始填充的索引（包含索引）
第三个参数：填充到的索引（不包含索引）

例子：数组从 索引3 到 索引5 用 www 进行填充

let arr2 = [1,2,3,4,5,6];
arr2.fill('www', 3, 5);
console.log(arr2);          // [1, 2, 3, "www", "www", 6]

第三参数不填，默认填充到最后一位

let arr3 = [1,2,3,4,5,6];
arr3.fill('www', 3);
console.log(arr3);          // [1, 2, 3, "www", "www", "www"]

若第三参数 <= 第二参数，则填充无效

let arr4 = [1,2,3,4,5,6];
arr4.fill('www', 3, 0);
console.log(arr4);          // [1, 2, 3, 4, 5, 6]
let arr5 = [1,2,3,4,5,6];
arr5.fill('www', 3, 1);
console.log(arr5);          // [1, 2, 3, 4, 5, 6]

数组循环（遍历） 方法

1、for…of

for…of 比ES5的for循环要简单而且高效。

1. 输出数组内容

let arr4 = [1,2,3,4,5,6];
for (let item of arr4){
    console.log(item);      // 1 2 3 4 5 6
}

2. 输出数组索引 keys()

有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。

let arr5 = [1,2,3,4,5,6];
for (let item of arr5.keys()){
    console.log(item);      // 0 1 2 3 4 5
}

3. 输出数组内容、索引 entries()

我们用entries()这个实例方法，配合我们的for…of循环就可以同时输出内容和索引了。

let arr6 = [1,2,3,4,5,6];
for (let [index, item] of arr6.entries()){
    console.log(index, item);
}

2、数组手动循环 entries() 实例方法

entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码：

let arr7 = ['123', 'abc', 'www'];
let list = arr7.entries();
console.log(list);                  // Array Iterator {}
console.log(list.next().value);     // [0, "123"]
console.log(list.next().value);     // [1, "abc"]
console.log(list.next().value);     // [2, "www"]
console.log(list.next().value);     // undefined

3、forEach()

let arr = ['123', 'abc',, 'www'];
arr.forEach((val, index) => console.log(index, val));

控制台打印：
0 "123"
1 "abc"
3 "www"

forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。但是有时候也会给我们帮倒忙。

4、filter()

let arr = ['123', 'abc', 'www'];
arr.filter(x => console.log(x));

控制台打印：
123
abc
www

5、some()

let arr = ['123', 'abc', 'www'];
arr.some(x => console.log(x));

控制台打印：
123
abc
www

数组元素替换 map()

let arr = ['123', 'abc', 'www'];
console.log(arr.map(x => 'web'));   // ["web", "web", "web"]

map在这里起到一个替换的作用

总结： 数组在我们的实际开发中是特别重要的，几乎每天都要编写数组的操作代码，所以一定要熟练数组操作