ECMAScript 6常用语法

2019-06-13  本文已影响0人  zhouhao_180

一、let(变量) 与 const(常量)

1. 之前定义变量,用 var 关键字;有如下主要缺点:
2. let 主要特性:
3. const 主要特性:

二、变量的解构赋值

定义:所谓的解构赋值,就是把 某个对象中的属性,当作变量,给解放出来,这样,今后就能够当作变量直接使用了;不影响原对象。点语法耗费性能,可以用此方法保存变量,减少点的使用

  // 变量的解构赋值
  const { name : name123, age, gender } = person
  console.log(name123)
  var [a,b,c] = [1,2,3]; // 数组解构
  // 交换变量
  var a = 100;
  var b = 200;
  [a,b] = [b,a]

三、箭头函数

1. 语法:
function show() {    
    console.log('这是普通 function 定义的 show 方法') 
}
(形参列表) => { 函数体代码 }
2. 箭头函数,本质上就是一个匿名函数;
3. 箭头函数的特性: 箭头函数内部的 this, 永远和 箭头函数定义时的外部的 this 保持一致(无法用bind、call、apply改变this指向);
document.getElementById('btn').onclick = function() {
    // 箭头函数内部的this,永远指向箭头函数定义时外层的this
    setTimeout(() => {
        console.log(this)
        this.style.backgroundColor = 'red'
    }, 1000)
}
4. 变体(不推荐):
// 推荐写法 
var add = (x, y) => { return x + y } 
console.log(add(1, 2))
// 变体1 
var add = x => { return x + 10 } 
console.log(add(1))
// 变体2 
var add = (x, y) => x + y 
console.log(add(1, 2))
// 变体3 
var add = x => x + 20 
console.log(add(3))
5. 注意: 如果我们省略了 右侧函数体的 { },那么,默认会把 右侧函数体中代码的执行结果,当作箭头函数的调用结果 return 出去;

四、对象中 定义方法 和 定义属性 的便捷方式

var person = {
    name,
    age,
    show,
    say() {
        console.log('ok')
    }
}

五、模板字符串

` ` 包裹字符串

var age = 18;
var name = "张三";
console.log("我叫" + name + ",我今年" + age + "岁了");
console.log(`我叫 ${name} ,我今年 ${age} 岁了`);

六、未完成

promise
async await
import export
...

上一篇下一篇

猜你喜欢

热点阅读