ES6基础
对象字面量
-
属性值得简写
// 原先的写法 var listeners = []; function listen(){}; var events = { listeners: listeners, listen: listen, } // ES6简写:当对象的属性名和所引用的变量名相同时,可以简写 var listeners = []; function listen(){}; var events = { listeners, listen, }
-
可计算属性
// 场景: 属性名是可变的 // 使用[]包裹变量即可 var expertise = 'journalism'; var person = { name: 'sharon', age: 27, [expertise]: ['international', 'politics', 'internet'], }
注意:可计算属性和属性简写是不可以同时使用的
-
方法定义
// 原先的写法 var person = { eat: function() { console.log('I have eatten'); } } // ES6简写:当对象的属性名和所引用的变量名相同时,可以简写 var person = { eat() { console.log('I have eatten'); } }
箭头函数
var example = (params) => {
// 函数体
}
- 箭头函数绑定的作用域是父级作用域,意味着this是父级的this
- 箭头函数没有自己的this,arguments, super
- 箭头函数不能用作构造函数
结构
-
对象的解构
var character = { name: 'Bruce', prseudonym: 'batman', metadata: { age: 34, gender: 'male' }, batarang: ['gas pellet', 'bat-mobile control', 'bat-cuffs'] } // 对象的解构 var { prseudonym, name } = character; // 等价于var prseudonym = character.prseudonym, name = character.name // 解构别名 var { prseudonym: alias } = character; // 等价于var alias = character.prseudonym // 对象的深层次解构 var {metadata: { gender } } = character // 等价于 var { gender } = character.metadata; // var gender = character.metadata.gender // 解构的属性不存在时 var { boots } = character; console.log(boots); // undefined // 为不存在的属性提供默认值 var { boots = {size: 10} } = character; console.log(boots); // {size: 10} // 默认值也适用于嵌套属性 var { matadata: {enemy = 'Satan'} } = character; console.log(enemy); // Satan // 默认值与别名结合使用的时候,别名放到前面,默认值放到后面 var { boots: footwear = { size: 10 }} = character; console.log(footwear); // {size: 10}
-
数组的解构
数组的解构语法和对象的解构语法非常的类似。对象解构语法使用{},数组解构语法使用[]
// 数组解构 var coordinates = [12, -7]; var [x, y] = coordinates; console.log(x); // 12 // 跳过不感兴趣的值 var names = ['James', 'L.', 'Howlett']; var [ firstName, ,lastName ] = names; console.log(lastName); // 'Howlett' // 给undefined设置默认值 var names = ['James', 'L.']; var var [ firstName='John', ,lastName='Doe' ] = names; console.log(lastName); // 'Doe'
-
函数参数的默认值
// 当没有传入值,或者传入的值时undefine或null时,会使用默认值 function sumof (a=1, b=2, c=3) { return a+b+c } console.log(sumof(undefined, undefined, 4)); // 7
-
函数参数的解构
var defaultOptions = {brand: 'Volkswagen', make: 1999}; function carFactory(option = defaultOptions) { console.log(option.brand); console.log(option.make); } carFactory() // 'Volkswagen' 1999 // 当传递options时,默认值会失效 carFactory({make: 2000}) // undefined 2000
因此这里需要用到函数的解构
function carFactory({brand = 'Volkswagen', make = 1999}) { console.log(brand); console.log(make); } carFactory({make: 2000}) // 'Volkswagen' 2000 // 弊病是当没有给函数传递对象时,根本就不会发生解构
函数参数的解构和默认值结合使用
function carFactory({brand = 'Volkswagen', make = 1999} = {}) { console.log(brand); console.log(make); } carFactory() // 'Volkswagen' 1999
剩余参数和扩展运算符
-
剩余参数:在函数的最后一个参数面前添加…,可以将该参数转化为一个特殊的‘剩余参数’。当剩余参数是函数中唯一的参数时,会获取所有传入函数的参数。
- 剩余参数前面的参数不会包含在剩余参数中
- 剩余参数也可以使用在数组或对象结构中
// 剩余参数时函数的唯一参数时 function join(...list) { return list.join(','); } join('first', 'second', 'third') // 'first,second,third' // 剩余参数前面还有参数时 function join(separator, ...list) { return list.join(','); } join('first', 'second', 'third') // 'second,third' // 在数组中使用剩余参数 var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e']; console.log(other); // ['c', 'd', 'e'] // 在对象中使用剩余参数 var obj = { name: 'lisi', age: 10 } var { name, ...list } = obj; console.log(list); // {age: 10}
模板字面量
var world = ' world'
var str = `hello${world}`
console.log(str); // "hello world"
let和const声明
- let
- 没有变量提升
- 存在块级作用域
- 会有暂时性死区
- const
- 没有变量提升
- 存在块级作用域
- 会有暂时性死区
- 声明后必须马上赋值
- 赋值后不可更改。对于引用来行来说,不可更改的只是引用地址。