ES6基础

ES6基础

对象字面量

  1. 属性值得简写

    // 原先的写法
    var listeners = [];
    function listen(){};
    var events = {
        listeners: listeners,
        listen: listen,
    }
    
    // ES6简写:当对象的属性名和所引用的变量名相同时,可以简写
    var listeners = [];
    function listen(){};
    var events = {
        listeners,
        listen,
    }
    
  2. 可计算属性

    // 场景: 属性名是可变的
    // 使用[]包裹变量即可
    var expertise = 'journalism';
    var person = {
        name: 'sharon',
        age: 27,
        [expertise]: ['international', 'politics', 'internet'],
    }
    

    注意:可计算属性和属性简写是不可以同时使用的

  3. 方法定义

    // 原先的写法
    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
  • 箭头函数不能用作构造函数

结构

  1. 对象的解构

    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}
    
  2. 数组的解构

    数组的解构语法和对象的解构语法非常的类似。对象解构语法使用{},数组解构语法使用[]

    // 数组解构
    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'
    
  3. 函数参数的默认值

    // 当没有传入值,或者传入的值时undefine或null时,会使用默认值
    function sumof (a=1, b=2, c=3) {
        return a+b+c
    }
    console.log(sumof(undefined, undefined, 4)); // 7
    
  4. 函数参数的解构

    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
    

剩余参数和扩展运算符

  1. 剩余参数:在函数的最后一个参数面前添加,可以将该参数转化为一个特殊的‘剩余参数’。当剩余参数是函数中唯一的参数时,会获取所有传入函数的参数。

    • 剩余参数前面的参数不会包含在剩余参数中
    • 剩余参数也可以使用在数组或对象结构中
    // 剩余参数时函数的唯一参数时
    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声明

  1. let
    • 没有变量提升
    • 存在块级作用域
    • 会有暂时性死区
  2. const
    • 没有变量提升
    • 存在块级作用域
    • 会有暂时性死区
    • 声明后必须马上赋值
    • 赋值后不可更改。对于引用来行来说,不可更改的只是引用地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值