es6语法总结

es6语法总结

let关键字

作用:

与var类似, 用于声明一个变量
特点:

在块作用域内有效

不能重复声明

不会预处理, 不存在提升

应用:

循环遍历加监听

使用let取代var是趋势

    var btns = document.getElementsByTagName('button');

     for (let i = 0; i < btns.length; i++) {
       debugger
       btns[i].onclick = function () {
         alert(i);
       }
     }

const关键字

作用:

定义一个常量
特点:

不能修改

其它特点同let
应用:

保存不用改变的数据

变量的解构赋值

理解: 从对象或数组中提取数据, 并赋值给变量(多个)
对象的解构赋值 let {n, a} = {n:’tom’, a:12}
数组的解构赋值 let [a,b] = [1, ‘atguigu’];
用途给多个形参赋值

 <script type="text/javascript">
   let person = {
     name: '吴杰',
     age: 20
   }
   // let name = person.name;
   // let age = person.age;

   // console.log(name, age);  name is not defined
   let {name, age} = person;  //解构赋值拆解等号右边的对象，将对象中指定属性的值赋值给等号左边的变量
                           //如果找不到此属性，返回undefined
   console.log(name);
   console.log(age);

   let arr = [1, 2, 3];
   let [a, b, c, d] = arr;
   console.log(a, b, c, d);
 </script>

模板字符串

模板字符串 : 简化字符串的拼接

模板字符串必须用 `` 包含

变化的部分使用${xxx}定义

 <script type="text/javascript">
   var obj = {
     name: '吴杰',
     age: 18,
     info: 'xxxx""'
   }
   console.log('名字：' + obj.name);
   console.log(`名字：${obj.name}  年龄：${obj.age} 'sdsads'`);

 </script>

简化的对象写法

 <script type="text/javascript">
   let a = 123;
   let b = 456;
   /*let obj = {
     a: a,
     b: b,
     setA: function (x) {
       this.a = x;
     }
   }*/
   let obj = {
     a,   //省略同名的变量
     b,
     setA (x) {  //省略function关键字
       this.a = x;
     }
   }
   console.log(obj);
 </script>

箭头函数

箭头函数的特点：

1、简洁

2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

3、扩展理解： 箭头函数的this看外层的是否有函数，

    如果有，外层函数的this就是内部箭头函数的this，

    如果没有，则this是window。

 <script type="text/javascript">
   /*
     创建函数的方式：
       函数表达式
       函数声明
    */
   /*function fn1() {  //函数声明

   }
   let fn2 = function () {  //函数表达式

   }*/
   let fn3 = () => {  //为了省略function

   }
   //没有传参，并且语句只有一条
   let fn4 = () => console.log('hello');
   console.log(fn4());
   //有一个参数，并且语句只有一条
   let fn5 = x => x;
   console.log(fn5(123));
   /*//两个参数和两个以上，并且语句只有一条
   let fn6 = (x, y) => console.log(x, y);
   fn6(123, 456);
   //多条语句
   let fn7 = (x, y) => {
     let result = x + y;
     console.log(result);
   }
   fn7(123, 456);

   let fn8 = () => console.log(this);  //window
   fn8();
   /!*
     箭头函数的this看外层的是否有函数，
         如果有，外层函数的this就是内部箭头函数的this，
         如果没有，则this是window。
    *!/
   let obj = {};
   function foo1() {
     let fn9 = () => console.log(this);  //window
     fn9();
   }
   foo1();

   function foo2() {
     let fn9 = () => console.log(this);  //obj
     fn9();
   }
   foo2.call(obj);
   /!*
     箭头函数是静态的，和它在哪定义有关，和它在哪调用没有关系
    *!/
   let fn10 = () => console.log(this); //window
   function foo3() {
     fn10();
   }
   foo3.call(obj);

   let fn11 = () => {
     console.log(this);  //window
     let fn12 = function () {
       console.log(this);  //obj
       let fn13 = () => {
         console.log(this);  //obj
         let fn14 = () => {
           console.log(this);  //obj
         }
         fn14();
       }
         fn13.call(window)
     }
     fn12.call(obj);
   }
   fn11()

   let obj1 = {
     sayName (name) {
       let fn = () => {
         console.log(this);  //obj1
         console.log(name);
       }
       fn();
     }
   }
   obj1.sayName('bob');*/

   /*var flag = true
   /!*if (flag) {
     console.log(flag);
   }*!/
   if (!flag) console.log(flag);
   else if (flag) console.log(flag);*/
 </script>

3点运算符

用途

rest(可变)参数

用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数

 function fun(...values) {
  console.log(arguments);
  arguments.forEach(function (item, index) {
      console.log(item, index);
  });
  console.log(values);
  values.forEach(function (item, index) {
      console.log(item, index);
  })
 }
 fun(1,2,3);

扩展运算符

  let arr1 = [1,3,5];
  let arr2 = [2,...arr1,6];
  arr2.push(...arr1);

  <script type="text/javascript">

    function fn(...args) {
      // console.log(a, b, c);
      // console.log(arguments);
      // console.log(arguments.callee);
      /*let args = []
      for (var i = 0; i < arguments.length; i++) {
        args.push(arguments[i]);
      }*/
      console.log(...args);
      args.forEach(function (item) {
        console.log(item);
      })
    }
    fn(1, 2, 3, 4, 5);

    let arr1 = [1, 2, 3];
    let arr2 = [4, ...arr1, 5];
    console.log(arr2);

  </script>

形参默认值

形参的默认值—-当不传入参数的时候默认使用形参里的默认值

 <script type="text/javascript">
   function Point(x = 1,y = 2) {
     this.x = x;
     this.y = y;
   }
   let p = new Point(3, 4);
   console.log(p);

   let fn = (x = 1, y = 2) => x + y;
   console.log(fn());  //3
 </script>

Promise对象

理解: Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)

有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)

ES6的Promise是一个构造函数, 用来生成promise实例

  <script type="text/javascript">
     const title = document.getElementById('title');
     const content = document.getElementById('content');
     const list = document.getElementById('list');

     function getNews(url) {
       const promise = new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.open('GET', url);
         xhr.send();
         xhr.onreadystatechange = function () {
             if (xhr.readyState === 4) {
                 if (xhr.status === 200) {
                     //请求成功并返回数据
                     let data = xhr.responseText;
                     data = JSON.parse(data);
                     console.log(data);
                     resolve(data);
                 } else {
                     //请求失败
                     reject('error');
                 }
             }
         }
     })
       return promise;
     }

     getNews('http://localhost:3000/news?id=1')
       .then((result) => {
         console.log(result);
         //获取到数据，显示新闻内容
         title.innerText = result.title;
         content.innerText = result.content;
         //发送请求，请求评论内容
         const url = `http://localhost:3000${result.commentsUrl}`;
         return getNews(url);
       }, (error) => {
         console.log(error);
       })
       //链式调用
       .then((result) => {
         //显示评论信息
         let html = '';
         result.forEach(item => html += '<li>' + item.content + '</li>');
         setTimeout(function () {
           list.innerHTML = html;
         }, 2000)
       }, (error) => {
         console.log(error);
       })

   </script>

Symbol

前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境

Symbol：

  概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)

  特点：

    1、Symbol属性对应的值是唯一的，解决命名冲突问题

    2、Symbol值不能与其他数据进行计算，包括同字符串拼串

    3、for in, for of遍历时不会遍历symbol属性。

  使用：

    1、调用Symbol函数得到symbol值

          let symbol = Symbol();
          let obj = {};
          obj[symbol] = 'hello';

    2、传参标识

          let symbol = Symbol('one');
          let symbol2 = Symbol('two');
          console.log(symbol);// Symbol('one')
          console.log(symbol2);// Symbol('two')

    3、内置Symbol值

          * 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
          - Symbol.iterator
           * 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲)

 <script type="text/javascript">
     window.onload = function () {
       let symbol = Symbol();
       console.log(typeof symbol);
       console.log(symbol);

       // 用作对象的属性(唯一)
       let obj = {username: 'kobe', age: 39};
       obj[symbol] = 'hello';
       obj[symbol] = 'symbol';
       console.log(obj);
       for(let i in obj){
         console.log(obj[i]);
       }
     }
 </script>

async函数

async函数(源自ES2017)

概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作

本质： Generator的语法糖

语法：

        async function foo(){
          await 异步操作;
          await 异步操作；

特点：

  1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行

  2、返回的总是Promise对象，可以用then方法进行下一步操作

  3、async取代Generator函数的星号*，await取代Generator的yield

  4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

 async function sendXml(url) {
      return new Promise((resolve, reject) => {
        $.ajax({
          url,
          type: 'GET',
          success: data =>  resolve(data),
          error: error => reject(error)
        })
      })
    }

class

通过class定义类/实现类的继承
在类中通过constructor定义构造方法
通过new来创建类的实例
通过extends来实现类的继承
通过super调用父类的构造方法
重写从父类中继承的一般方法

  <script type="text/javascript">
      class Person {
          //调用类的构造方法
          constructor(name, age){
              this.name = name;
              this.age = age;

          }
          //定义一般的方法
          showName(){
              console.log(this.name, this.age);
          }
      }
      let person = new Person('kobe', 39);
      console.log(person, person.showName());

      //定义一个子类
      class StrPerson extends Person{
          constructor(name, age, salary){
              super(name, age);//调用父类的构造方法
              this.salary = salary;
          }
          showName(){//在子类自身定义方法
              console.log(this.name, this.age, this.salary);
          }
      }
      let str = new StrPerson('weide', 38, 1000000000);
      console.log(str);
      str.showName();
  </script>

es6语法总结

es6语法总结

let关键字

const关键字

变量的解构赋值

模板字符串

简化的对象写法

箭头函数

3点运算符

形参默认值

Promise对象

Symbol

async函数

class

Similar Posts

Comments