Vue官方文档中本菜鸟没见过的ES6内容

Vue官方文档中本菜鸟没见过的ES6内容

对象的扩展

见上面代码块

箭头函数

• 按参数分一分捏~

  • 当参数只有一个时，括号可以省略

    var f = v => v;
    // 等同于
    var f = function (v) {
      return v;
    };
    

  • 不需要参数，括号不可省略

    var f = () => 5;
    // 等同于
    var f = function () { return 5 };
    

  • 需要多个参数，括号不可省略

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
      return num1 + num2;
    };
    

  • 可变参数

    var f = (a, b, ...args) => {}
    // 等同于
    var f = function(a, b, ...args) {}
    

• 相当于匿名函数，并简化了函数定义

• 箭头函数有两种格式

  • 只包含一个表达式（函数体中只有一句代码，代码执行结果就是返回值），可以省略大括号{...}和return

    () => return 'hellow'
    (a, b) => a + b
    

  • 包含多条语句，不能省略大括号{...}和return

    (a) => {
      a = a + 1
      return a
    }
    

• 箭头函数没有 this。如果访问 this，则会从外部获取

• 如果返回一个对象，需要特别注意

解构

对象解构

let password = '123456';
let user = {
    username: '张三',
    password
};

// let {username,password} = user // SyntaxError: Identifier 'password' has already been declared
let {username} = user
console.log(username) // 张三

let user = {
    username: '张三',
    password: '123456',
    eat(){
        console.log("I'm eating!")
    }
};

let {username,password} = user
console.log(username) // 张三
console.log(password) // 123456

let {eat} = user
eat() // I'm eating!

数组解构

let [a,b,c,d] = [1,2,3,4]
console(a) // 1
console(b) // 2
console(c) // 3
console(d) // 4

let [a,...d] = [1,2,3,4]
console(a) // 1
console(d) // [2,3,4]

模块化

// b.js
let user = {
    username: '张三',
    password: '123456',
    login(){
        console.log('login success!')
    }
}

// b.js需要导出
// 只能有一个默认，默认导出的内容在导入的地方可以随意命名
export default user;
export let a = 'xxx';

// a.js
// 模块化，这里想使用b.js的内容  需要在package.json中设置"type": "module"
import user from './b.js'
// import a from './b.js' // 导入的和上面一样
import {a} from './b.js' // 从导出的内容解构出a
console.log(user) // { username: '张三',password: '123456',login: [Function: login] }
console.log(a) // xxx