最近在看vue项目 涉及一些es6语法,目前只写一些 看到的 ,别的有时间会补充
1、解构
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在解构中,有下面两部分参与:
- 解构的源,解构赋值表达式的右边部分。
- 解构的目标,解构赋值表达式的左边部分。
解构使我们方便的从数组或对象中获得数据
// ES6 解构 //数组 const [x,y] = [1,2] //x = 1,y = 2 // 对象 const obj = { x:"王一博", y:"爱摩托" } const{x,y} = obj // x = 王一博,y = 爱摩托 const {x:name,y:girlfriend} = obj console.log("name"+':'+name,"girlFriend"+':'+girlfriend)
基本
let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3
可嵌套
let [a, [[b], c]] = [1, [[2], 3]]; // a = 1 // b = 2 // c = 3
可忽略
let [a, , b] = [1, 2, 3]; // a = 1 // b = 3
不完全解构
let [a = 1, b] = []; // a = 1, b = undefined
剩余运算符
let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3]
字符串等
在数组的解构中,解构的目标若为可遍历对象,皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。
let [a, b, c, d, e] = 'hello'; // a = 'h' // b = 'e' // c = 'l' // d = 'l' // e = 'o'
解构默认值
let [a = 2] = [undefined]; // a = 2
当解构模式有匹配结果,且匹配结果是 undefined 时,会触发默认值作为返回结果。
let [a = 3, b = a] = []; // a = 3, b = 3 let [a = 3, b = a] = [1]; // a = 1, b = 1 let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
- a 与 b 匹配结果为 undefined ,触发默认值:a = 3; b = a =3
- a 正常解构赋值,匹配结果:a = 1,b 匹配结果 undefined ,触发默认值:b = a =1
- a 与 b 正常解构赋值,匹配结果:a = 1,b = 2
-
对象模型的解构(Object)
基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb' let { baz : foo } = { baz : 'ddd' }; // foo = 'ddd'可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { y }] } = obj; // x = 'hello' // y = 'world' let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { }] } = obj; // x = 'hello'不完全解构
let obj = {p: [{y: 'world'}] }; let {p: [{ y }, x ] } = obj; // x = undefined // y = 'world'剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 // b = 20 // rest = {c: 30, d: 40}解构默认值
let {a = 10, b = 5} = {a: 3}; // a = 3; b = 5; let {a: aa = 10, b: bb = 5} = {a: 3}; // aa = 3; bb = 5;
2、let const var 区别
2.1、let和const不能预解析,不能变量提升,有严格的块级作用域,不允许重复声明。
2.2、let var 声明变量 const 声明常量
2.3、const 必须初始化
// 1、let const 不存在变量提升 console.log(a) // undefined 变量提升 var a = '1' console.log(b) // error let b = '啧啧啧' // 2、let const 同一个作用域不能重复声明同一个变量 var c = '1' var c = '10' console.log(c) // 10 let d = '1' // let d = '10' // error d = '10' // 可 可以赋值 console.log(d) // 10 // 3、var 函数作用域 let const 块级作用域 function fun(){ var e = '1' if(true){ var e = '100' } console.log(e) // 100 } fun() function fun2(){ let f = '1' if(true){ let f = '100' } console.log(f) // 1 } fun2() // // 4、const定义常量 且必须初始化 const g = '1' g = '100' //error const h //error
3、... 三点扩展运算符
3.1、 将一个数组转换为用逗号分隔的参数序列
let add = (x,y)=>x + y let num = [3,14] let result = add(...num) //17 Math.max(...[63,23,43]) === Math.max(63,23,43) // true
3.2、用push将一个数组添加到另一个数组的尾部
let arr1 = [1,2,3] let arr2 = [4,5,6] //es5 Array.prototype.push.apply(arr1,arr2) console.log(arr1) //[1,2,3,4,5,6] //es6 arr1.push(...arr2)
3.3、合并数组
//合并数组 var arr1 = ['a','b'] var arr2 = ['c','d'] var arr3 = ['g'] //es5的合并数组 console.log(arr1.concat(arr2,arr3)) //返回一个新数组 // es6 合并数组 var newArr = [...arr1, ...arr2, ...arr3]
concat() 连接两个或多个数组,返回一个新的数组。
3.4、转换伪数组为真数组
//转换伪数组为真数组 var nodeList = document.querySelectorAll('p'); var array = [...nodeList];
4、set 和map
4.1 set 类似 数组 可用于去重(let 会去掉里面重复的元素)
let arr = [1,2,3,2] let arr3 = new Set(arr) console.log(arr3) //这里返回的是一个 set形式的数组,不是一个真正的数组 let arr2 = [...new Set(arr)] // 这里用扩展运算符 解析成序列,再转为数组 console.log(arr2) //[1,2,3]