ES6学习之路-03-CSDN博客

ES6学习之路-03

数组

JSON数组格式转换

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

let json = {
    '0': 'test1',
    '1': 'test2',
    '2': 'test3',
    length: 3
}
let arr = Array.from(json)
console.log(arr)

output:
["test1", "test2", "test3"]
复制代码

这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组，并打印在控制台。

Array.of()方法

它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，d但是eval的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上：

let arr2 = Array.of(3, 4, 5, 6)
console.log(arr2)

let arr3 = Array.of("1test", "2test", "3test")
console.log(arr3)

[3, 4, 5, 6]
["1test", "2test", "3test"]
复制代码

find( )实例方法

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

value：表示当前查找的值。
index：表示当前查找的数组索引。
arr：表示当前数组。在函数中如果找到符合条件的数组元素就进行return，并停止查找。你可以拷贝下边的代码进行测试，就会知道find作用。

let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr4.find(function(value, index, arr) {
    return value > 6;
}))
复制代码

fill( )实例方法

fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。

let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr4.find(function(value, index, arr) {
    return value > 6;
}))

arr4.fill("es6", 3, 5)

[1, 2, 3, "es6", "es6", 6, 7, 8, 9]
复制代码

数组的遍历

for...of循环

先来一个最简单的for of循环

let arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let item of arr5) {
    console.log(item)
}
复制代码

for...of数组索引

let arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (let index of arr5.keys()) {
    console.log(index)
}
复制代码

for...of 值和索引同时访问

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

for (let [index, value] of arr4.entries()) {
    console.log(index + ':' + value)
}
复制代码

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

箭头函数和扩展

默认值

function add(a, b = 1) {
    return a + b;
}
console.log(add(1));
复制代码

主动抛出错误

ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

/**函数抛出异常 */
function addExp(a, b = 1) {
    if (a == 0) {
        throw new Error('This is error')
    }
    return a + b;
}
console.log(addExp(0));
console.log(addExp.length);
复制代码

注意上面代码最后一行，可以打印出函数的参数（必传参数）个数。

箭头函数

感觉有点像java的lambda表达式，语言果然像融合的方向发展。

let add1 = (a, b = 1) => a + b
console.log(add1(3, 4))
复制代码

{}的使用

括号右侧如果是两句话，就需要使用{}。

let add2 = (a, b = 1) => {
    console.log("function")
    return a + b
}
console.log(add2(6, 7))
复制代码

箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。

对象的函数解构

在前后端分离时，后端经常返回来JSON格式的数据，前端的美好愿望是直接把这个JSON格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。

let json = {
    a: 'es6',
    b: 'study'
}
let foo = ({ a, b = 'study' }) => console.log(a, b)
foo(json)
复制代码

in的用法

in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。

对象判断

let ajson = {
    a: 'es6',
    b: 'study'
}
console.log('a' in ajson); //true
复制代码

数组判断

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

/**in的用法 判断数组是否为空 */
let arr11 = [, , , , , ];
console.log(arr11.length); //5
console.log(0 in arr11); //false
复制代码

数组的遍历方法

下面的代码包含了forEach，filter,some，map，这四个方法的参数本质上也是个函数，函数参数使用了匿名箭头函数。

/**数组循环 */
let arrs = ["w1", "w2", "w3", "w4", "w5"]
arrs.forEach((value, index) => console.log(index + ":" + value))

arrs.filter(x => console.log(x))
arrs.some(x => console.log(x))
let arrs1 = ["w11", "w21", "w31", "w41", "w51"]
arrs1.map(x => {
    'web';
    console.log(x)
})
复制代码

数组转换字符串

join()方法

let arrs22 = ["w11", "w21", "w31", "w41", "w51"]
console.log(arrs22.join('|'));
复制代码

toString方法

let arrs22 = ["w11", "w21", "w31", "w41", "w51"]
console.log(arrs22.join('|'));
console.log(arrs22.toString());
复制代码

参考链接

技术胖老师es6学习blog