ES6

38 阅读1分钟

箭头函数

image.png

image.png

image.png

image.png

// 网络请求的工具函数
function request(url,callbackFn){
    var results = ["aaa", "bbb", "ccc"]
    callbackFn(results)
}
// 实际操作的位置(业务)
var obj = {
    name: [],
    network: function(){
        // 早期
        // var _this = this
        // request("/names", function(res){
        //    _this.names = [].concat(res)
        // })
        
        // 2.箭头函数写法
        request("/names", (res) => {
            this.names = [].concat(res)
        })
    }
}

image.png

ES6字面量的增强

image.png

// 属性的增强
var name = "qxy"
var age = 18
var obj = {
    // name: name
    // age: age
    // 简写
    name,
    age
}
function foo(){
    var message = "Hello World"
    var info = "hahaha"
    // return {message: message, info: info}
    // 简写
    return {message, info}
}
var result = foo()

// 方法的增强
var obj = {
   // running: function(){
   //     console.log(this) // obj
   // }
   // 简写
   running() {
       console.log(this) // obj
   },
   // =====================================
   // 箭头函数,没有this
   eating: () => {
       console.log(this) // window
   }
   // =====================================
}
obj.running()
obj.eating()

// 计算属性的增强
var key = "address" + " city"
var obj = {
    [key]: "广州" //  "address city": "广州"
}

解构

image.png

image.png

// 应用:在函数中(其他类似的地方)
function getPosition({x, y}){
    console.log(x, y)
}
getPosition({x: 10, y: 20})

let/const

image.png

// 赋值引用类型
const info = {
    name: "qxy",
    age: 18
}
info.name = "kobe"

image.png image.png

image.png

image.png

image.png

image.png

模板字符串

image.png

image.png

函数的默认参数

image.png

image.png

function foo(obj = { name: "qxy", age: 18}){
    console.log(obj.name, obj.age) // qxy 18
}
// 简化
function foo({name, age} = {name: "qxy", age: 18}){
    console.log(name, age) // qxy 18
}
// 进一步简化
function foo({name: "qxy", age= 18} = {}){
    console.log(name, age) //qxy 18
}
foo() // qxy 18

image.png

展开语法

image.png

const obj = {
    name: "qxy",
    age: 18
}
const info = {
    ...obj,
    height: 1.88,
    address: "西安"
}

数值的表示

image.png