ES6新语法

标签：第一个   get   解构赋值   构造函数   设计   管理   type   tag   hang   

let/const

1. let不存在变量提升(变量不允许在声明之前使用)
2. let不允许重复声明
3. 在全局作用域中let变量不是window属性，和它没关系
4. typeof 未被声明的变量不是undefined而是报错(暂时性死区)
5. let会形成块级作用域

解构赋值

按照一个数据结构，快速解析获取到其中的内容（一般是数组和对象）

• 数组的解构赋值

let ary=[1,2,3];
let [a,b,c,d=0,e]=ary;
console.log(a, b, c, d);//1,2,3,0,undefined

• 对象的解构赋值

let obj={name:'xxx',age:25,sex:0};
let {age:ageAA}=obj;//给解构的属性名起别名作为变量
console.log(age);//报错
console.log(ageAA);//25

...拓展、展开、剩余运算符

let ary=[1,2,3]
Math.max(...arg);//=>3
let ary1=[...arguments];//=>类数组转数组

箭头函数

x => (x,y) => x+y;
//相当于
function (x) {
    return function (x,y){
         return x * x;
    }
}

1. 没有arguments（可以基于...arg获取实参集合）
2. 没有自己的this，this是继承上下文中的this，箭头函数this不能被改变

``模板字符串

• ${}大括号内可以放入任意的JavaScript表达式。

• 模板字符串之间可以进行嵌套

• 标签模板

  var a = 5, b = 10;
  
  function tag(strings, ...values) {
      console.log(strings[0]);    // "Hello "
      console.log(strings[1]);    // " world"
      console.log(strings[2]);    // ""
      console.log(values[0]);     // 15
      console.log(values[1]);     // 50
  
      return "Anything";
  }
  
  tag`Hello ${a + b} world ${a * b}`;
  //=>tag(['Hello ',' world', ''], 3, 2);

Promise(async/await)

它是ES6中新增加的类 (new Promise)，目的是为了管理JS中的异步编程的(它本身是同步的)，所以我们也把它称为“Promise设计模式”

new Promise(() => {
    //=>执行一个异步的任务（new Promise的时候，创建Promise的一个实例，立即会把当前函数体中的异步操作执行） =>“Promise是同步的，它可以管理异步操作”
    setTimeout(() => {

    }, 1000);
    console.log(1);//=>先输出1
}).then();
console.log(2);//=>再输出2

• pending: 初始状态，既不是成功，也不是失败状态。

• fulfilled: 意味着操作成功完成。

• rejected: 意味着操作失败。

  new Promise((resolve, reject) => {
      //=>resolve：当异步操作执行成功，我们执行resolve方法
      //=>reject：当异步操作执行失败，我们执行reject方法
      setTimeout(() => {
          resolve(100);
      }, 1000);
  }).then((res) => {
      //=>第一个传递的函数是resolve
      console.log('ok', res);
  }, () => {
      //=>第二个传递的函数是reject
      console.log('no');
  });

  用Promise处理AJAX异步:

  let pro = new Promise((resolve, reject) => {
      //=>执行一个异步操作
      let xhr = new XMLHttpRequest();
      xhr.open('get', 'js/1.js', true);
      xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
              val = xhr.responseText;
              resolve(val);
          }
          if (xhr.status !== 200) {
              //=>失败
              reject();
          }
      };
      xhr.send(null);
  });
  pro.then((res) => {
      console.log(res);
      //=>数据绑定
      return 100;//=>它返回的结果传递给第二个THEN了...
  }, () => {
      console.log('no');
  }).then((res) => {
      //=>当第一个THEN中的函数执行完，会执行第二个
      console.log(res);
  }, () => {
  
  }).then(() => {
      //=>当第二个THEN中的函数执行完，会执行第三个
  }, () => {
  
  });

class(ES6中创建类的)

class A{
    constructor(){//构造函数 
    }
    a(){//定义在A原型上的方法
    }
}

interator(for of循环)

Map/Set

ES6新语法

标签：第一个   get   解构赋值   构造函数   设计   管理   type   tag   hang   

原文地址：https://www.cnblogs.com/wangshouren/p/11615853.html