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());
复制代码