ES6的增强写法

Posted nb01

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6的增强写法相关的知识,希望对你有一定的参考价值。

1. ES6的对象属性增强型写法

ES6以前定义一个对象

const name = "zzz";
const age = 18;
const user = {
  name:name,
  age:age
}
console.log(user);

ES6写法

const name = "zzz";
const age = 18;
const user = {
	name,age
}
console.log(user);

2 ES6对象的函数增强型写法

ES6之前对象内定义函数

const obj = {
  run:function(){
     console.log("奔跑");
  }
}

ES6写法

const obj = {
  run(){
     console.log("奔跑");
  }
}

3. 箭头函数

传统定义函数的方式

  const aaa = function (param) {
      
  }

对象字面量中定义函数

const obj = {
    bbb (param) {  },
}

ES6中的箭头函数

//const ccc = (参数列表) => {}
  const ccc = () => {}

4. 箭头函数的参数和返回值

4.1 参数问题

1.放入两个参数

const sum = (num1,num2) => {
    return num1 + num2 
}

2.放入一个参数,()可以省略

const power = num => {
  return num * num
}

4.2 函数内部

1.函数中代码块中有多行代码

const test = () =>{
  console.log("hello zzz")
  console.log("hello vue")
}

2.函数代码块中只有一行代码,可以省略return

// const mul = (num1,num2) => {
//   return num1 * num2
// }
const mul = (num1,num2) => num1* num2
// const log = () => {
//   console.log("log")
// }
const log = () => console.log("log")

4.3 箭头函数的this使用

什么时候使用箭头函数

setTimeout(function () {
	console.log(this)
} , 1000);
setTimeout(() => {
	console.log(this)//这里this找的是window的this
}, 1000);

结论:箭头函数没有this,这里this引用的是最近作用域(aaa函数里的this)的this。

    const obj = {
      aaa(){
        setTimeout(function () {
          console.log(this)//window
         });
         setTimeout(() => {
          console.log(this)//obj
        });
      }
    }
    obj.aaa()

上述中第一个是window对象的this,第二个箭头函数的this是obj的。

    const obj = {
      aaa() {
        setTimeout(function () {
          setTimeout(function () {
            console.log(this) //window
          })
          setTimeout(() => {
            console.log(this) //window
          })
        })
        setTimeout(() => {
          setTimeout(function () {
            console.log(this) //window
          })
          setTimeout(() => {
            console.log(this) //obj
          })
        })
      }
    }
    obj.aaa()

以上是关于ES6的增强写法的主要内容,如果未能解决你的问题,请参考以下文章

ES6:对象增强写法&解构&let/const

es6的一些简洁写法(代码优化)

道可道,非常道——详解promise

ES6躬行记——数字

es6写法

ES6 - 对象扩展(增强字面量)