ES6新语法

Posted 2022-12-10 wangshouren

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