ES6语法 es6 - 锐客网

【ES6语法】
文章图片

一、CONST

不允许重复声明
不属于顶层对象window
不存在变量提升
暂时性死区（先声明后使用）
块级作用域（块级作用域内有用）

二、 Arrow Function（箭头函数） https://es6.ruanyifeng.com/#d...
三、解构赋值

const obj = { name: '张三', age: 30, hobby: ['篮球','足球'], school: { name: '北大附中', city: '北京' } }const { name: aliaName, // 别名 age, hobby, school: { name, city } } = obj console.log(aliaName,age,hobby,name,city) 打印：张三，30，['篮球','足球']，北大附中，北京

在项目中使用解构赋值

// 当作函数参数传递方式一： const sum = ([a, b]) => { return a+b; // 5 } sum([2,3])// 方式二： const foo = ({name, age}) => { console.log(name, age); // 张三， 30 } foo({ name: '张三', age: 30 })

// 两个值交换 let a = 1; let b = 2; [b,a] = [a,b]

// Ajax请求（json格式） json: { "name": "张三", "age": 30 }axios.get('./data.json', (res) => { console.log(res); //{..., data:{name:张三',age:30}, ...} }) axios.get('./data.json', ({data}) => { console.log(data); // {name:张三',age:30} }) axios.get('./data.json', ({data:{name, age}}) => { console.log(name,age); // 张三, 30 })

四、ES6运算符扩展 4.1 链判断运算符

a?.b // 等同于 a == null ? undefined : a.ba?.[x] // 等同于 a == null ? undefined : a[x]a?.b() // 等同于 a == null ? undefined : a.b()a?.() // 等同于 a == null ? undefined : a()

五、Symbol [ 消除魔术字符串 ]

// ES5 function getArea(shape){ let area = 0 switch(shape){ case: 'Triangle': area = 1 break case: 'Circle': area = 2 break } return area } getArea('Triangle')// ES6 const shapeType = { triangle: Symbol(), circle: Symbol() } function getArea(shape){ let area = 0 switch(shape){ case shapeType.triangle: area = 1 break case shapeType.triangle: area = 2 break } return area }getArea(shapeType.triangle)