美文网首页
es6 基础知识

es6 基础知识

作者: autumn_3d55 | 来源:发表于2022-03-23 18:00 被阅读0次

    前言

    ECMAScript 6.0(简称ES6)是 JavaScript 语言的下一代标准。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

    1.let const

    在es6之前,定义变量都是使用var,但是var存在一些问题,比如可以重复声明仅支持函数作用域问题。所以es6设计了let和const来弥补不足的地方。let和const具备哪些特性?

    let

    • 在块作用域内有效
    • 不能重复声明
    • 不会预处理, 不存在提升
    • 应用:循环遍历加监听

    const

    • 不能重复声明
    • 块级作用域
    • 不可修改const变量的值
    • 注意事项:一定要赋初始值,一般常量要大写(潜规则)
      对于数组和对象的元素修改,不算做常量的修改,不会报错

    2.块作用域

    es5只有全局作用域和函数作用域,没有块级作用域:

    var temp = new Date();
    
    function f() {
      console.log(temp);
      if (false) {
        var tmp = "hello world";
      }
    }
    
    f(); // undefined
    
    • es6的块级作用域:
    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }
    
    • es6的块级作用域声明函数只在使用大括号的情况下成立:
    // 不报错
    'use strict';
    if (true) {
      function f() {}
    }
    
    // 报错
    'use strict';
    if (true)
      function f() {}
    

    3.扩展运算符

    将一个数组转化为逗号分隔的参数序列

    console.log(...[1, 2, 3])               
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)         
    // 1 2 3 4 5
    
    [...document.querySelectorAll('div')]   
    // [<div>, <div>, <div>]
    
    {...{a: 1}, ...{a: 2, b: 3}}            
    // {a: 2, b: 3}
    
    [...[1], ...[2, 3]]                     
    // [1, 2, 3]
    
    const arr = [1]
    arr.push(...[2, 3])                     
    // arr:[1, 2, 3]
    

    4.模板字符串

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

    • 模板字符串必须用 `` 包含
    • 变化的部分使用${xxx}定义
    var str = `abcdefgh`;
    console.log(str);
    let name = "小明";
    function a() {
        return "ming";
    }
    console.log(`我的名字叫做${name},年龄${17+2}岁,性别${'男'},游戏ID:${a()}`);
    

    5.变量的解构赋值

    ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值

    //1数组的结构
    const F=['你','好']
    let [ni,hao]=F
    console.log(ni)
    console.log(hao)
    //2对象的结构
     const zhap={
         name:'篮球'
     }
     let {name}=zhap;
     console.log(name)
    

    6.箭头函数

    不能作为构建实例化对象
    不能使用arguments变量

    //  声明一个函数
     let f=function f(){
      console.log("一般函数")
     }
    // 箭头函数
    let jia=()=>{
        console.log("箭头函数")
    }
    // 箭头函数的简写
    //   当只有一个参数的时候,省略小括号
    let t= n =>{
        return n+1
    }
    console.log(t(1))
    //省略花括号,当代码体只有一句语句的时候,此时return必须省略,而且语句的执行结果就是函数的返回值
    let pow =(n)=> n*n;
    console.log(pow(2))
    

    7.函数参数默认值

    ES6中允许函数参数赋值初始值

    //形参初始值,具有默认参数一般靠后
     function add(a,b,c=10){
           return a+b+c
       }
       let result=add(1,2)
       console.log(result) //13
    

    8.rest参数

    用于获取函数的实参,代替ES5中的arguments

    • ES5 arguments对象
    function data1(a,b) {
          console.log(arguments[2]);//3  //打印第三个参数 
        }
        data1(1,2,3,4)
    
    • ES6 ...args
    function data(a,b,...args) {
          console.log(args); //3,4
        }
        data(1,2,3,4);
    

    9.Set 数据结构

    类似于数组,但是成员变量都是唯一的,没有重复,Set本身是一个构造函数。

    const s = new Set([1,2,2,3,4]);
    console.log([...s]);//1,2,3,4
    //可用于数组去重
    
    • Set 实例的属性和方法
    1. size 数据的长度
    2. add() 添加某个值,返回 Set 结构本身。
    3. delete() 删除某个值,返回一个布尔值,表示删除是否成功。
    4. has() 查找某条数据,返回一个布尔值。
    5. clear() 清除所有成员,没有返回值。
    const s = new Set();
    s.add('zs'); //s:['zs]
    s.size(); //1
    s.has('zs); //true
    s.delete('zs); 
    
    • Set 遍历操作
    1. keys(): 返回键名的遍历器。
    2. values(): 返回键值。
    3. entries: 返回键值对。
    4. forEach(): 使用回调函数遍历每个成员。
    //遍历
        const s = new Set([1,3,5]);
        for( let i of s.keys()){
          console.log(i); //1,3,5
        }
        for( let i of s.values()){
          console.log(i); //1,3,5
        }
        for( let i of s.entries()){
          console.log(i); //[1:1],[3:3],[5:5]
        }
        s.forEach((value,key)=>{
          console.log(value); //1,3,5
        })
    

    10.Map()

    类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以作为键。

    • Set 实例的属性和方法
    1. size 数据的长度
    2. add() 添加某个值,返回 Set 结构本身。
    3. delete() 删除某个值,返回一个布尔值,表示删除是否成功。
    4. has() 查找某条数据,返回一个布尔值。
    5. clear() 清除所有成员,没有返回值。
    6. get(key)
      7.set(key,value)
    const map = new Map();
    map.set("name","zhangsan")
    map.get("name");
    

    11.symbol

    ES6引入的一种新的原始类型Symbol,表示独一无二的值,他是javascript语言的第七种数据类型,是一种类似字符串的数字类型(已有的原始数据类型:String, Number, boolean, null, undefined, Object).

    • Symbol的特点:
    1. Symbol属性对应的值是唯一的,解决命名冲突问题。
    2. Symbol值不能与其它数据进行计算,包括同字符串拼串。
    3. for in,for of 遍历不会遍历Symbol属性。
    // 创建Symbol
     let s=Symbol('你哈哈')
     console.log(s)
     let s2=Symbol('你哈哈')
     console.log(s===s2)//flase
     //为对象添加Symbol属性
     let youxi={
       name:'狼人杀',
       [Symbol('say')]:function(){
         console.log("我可以发言")
       },
       [Symbol('look')]:function(){
          console.log("我可以自爆")
       }
     }
    

    12.迭代器(iterator)

    迭代器是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署了iterator接口,就可以完成遍历操作。

    作用:

    • 为各种数据,提供一个统一的、简便的访问接口。
    • 使得数据结构的成员能够按某种次序排列。
    • es6 创造了一种新的遍历命令 for of 循环,iterator接口主要提供for of 消费。
    • 原生具备iterator接口的数据(可用for of遍历)
      1、Array
      2、arguments
      3、set容器
      4、map容器
      5、String
      6、TypedArray
      7、NodeList
    let iter = 'hello';
        let itera = iter[Symbol.iterator]();
    
        console.log(itera.next()); //{value: 'h', done: false}
        console.log(itera.next());//{value: 'e', done: false}
        
        console.log(itera.next());//{value: 'l', done: false}
        for(let i of itera){
          console.log(i); // l o
        }
    

    13.Generator 生成器函数

    函数使用 * 。

    • es6 提供的解决异步编程的方案之一。
    • Generator函数是一个状态机,内部封装了不同状态的数据。
    • 用来生成遍历器对象。
    • 可暂停函数(惰性求值),yield可暂停,next方法可启动,每次返回的是yield后的表达式结果。
    //yield函数代码分隔符
        function * gen() {
          console.log('函数开始执行');
          yield console.log('1');
          console.log('函数暂停后再次启动');
          yield console.log('2');
        }
        //利用next方法来向下执行
        let iterator = gen();
        iterator.next(); //函数开始执行 1
        iterator.next(); //函数暂停后再次启动 2
    

    14.Promise

    1、含义
    异步编程的解决方案,可以将异步的操作以同步的流程表达出来,避免了层层的回调函数(“回调地狱”)
    ES6中promise是一个构造函数,用来生成promise实例
    2、promise对象的两大特点:
    对象的状态不受外界的影响,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),只有异步操作能决定当前哪一种状态一旦状态改变,就不会在改变,任何时候都是这种结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生了,状态就固定了,不会在变了,称为resolved(已定型)。

    var promise = new Promise((resolve, reject) => {
        var success = true;
        if (success) {
            resolve('成功');
        } else {
            reject('失败');
        }
    }).then((data) => { console.log(data)}
    ).catch(err=>{
    console.log(err)
    })
    

    15. async await

    • async

    async其实就是对 Generator的封装,只不过async可以自动执行next()。

    async返回值

    1.默认返回一个Promise,如果return不是一个Promise对象,就会被转化为立即resolve的Promise,可以在then函数中获取返回值。
    2.async 必须等到里面所有的await 执行完, async 才开始 return ,返回的Promise 状态才改变,除非遇到return 和错误。

    async function fn () {
        await console.log('100');
        await console.log('200');
        return 300
    }
    fn().then(res => {
        console.log(res) // 300
    })
    //打印顺序 100 200 300
    
    • await

    1.await也是默认返回 Promise 对象,如果 await 后面不是一个 Promise 对象,就会转为立即 resolve 的 Promise。
    2.如果一个await 后面的 Promise 如果为 reject, 那么整个async 都会中断执行,后面的await都不会执行,并且抛出错误,可以在 async 的 catch 总捕获错误。

    async function f() {
      await Promise.reject('error');
      await Promise.resolve('hello world'); // 不会执行
    }
    f().then(res =>{
    
    }).catch(err=>{
        console.log(err)  // error
    })
    

    16.class

    ES6 提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

    如何定义一个class类:

    class User {
        constructor(name) {          // 构造器,相当于es5中的构造函数
            this.name = name         // 实例属性
        }
        showName(){                  // 定义类的方法,不能使用function关键字,不能使用逗号分隔
            console.log(this.name)   
        }
    }
    var foo = new User('foo')
    
    • constructor

    1.ES 6 中class 类专用的构造器,相当于之前定义的构造函数,每个类都必须有constructor,如果没有则自动添加一个空的 constructor 构造器。
    2.创建实例的时候自动执行 constructor 函数
    3.constructor 中的 this 指向实例,并且默认返回 this(实例)。

    • class 类的 prototype

    其中class 的基本类型就是函数(typeof User = ‘function’),既然是函数,那么就会有prototype属性。

    类的所以方法都是定义在prototype上:

    class User {
      constructor() {
        // ...
      }
    
      toString() {
        // ...
      }
    
      toValue() {
        // ...
      }
    }
    User.toValue()             // err User.toValue is not a function
    User.prototype.toValue()   // 可以调用toValue方法
    
    // 等同于
    
    User.prototype = {
      constructor() {},
      toString() {},
      toValue() {},
    };
    
    • 类的实例
    1. 类的实例只能通过 new 来创建
    2. 除了静态方法,定义在类上的所有的方法都会被实例继承
    3. 除非定义在类的 this 对象上才是实例属性,否则都是定义在类的原型(prototype)上。
    //定义类
    class Point {
    
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    
    var point = new Point(2, 3);
    
    point.toString() // (2, 3)
    
    point.hasOwnProperty('x') // true
    point.hasOwnProperty('y') // true
    point.hasOwnProperty('toString') // false
    point.__proto__.hasOwnProperty('toString') // true
    
    • 静态方法

    如果在类中定义一个方法的前面加上 static 关键字,就表示定义一个静态方法,静态方法不会被实例继承,但会被子类继承,所以不能通过实例使用静态方法,而是通过类直接调用

    class User {
        constructor(name){
            this.name = name
        }
        static show(){
            console.log('123')
        }
    }
    class VipUser extends User{}
    VipUser.show()                    // 123
    User.show()                       // 123
    var foo = new User('foo')
    foo.show()                        // foo.show is not a function
    
    • 静态属性
    1. class 的静态属性指的是 Class 本身的属性,目前只能通过 Class.propName 定义静态属性
    2. 静态属性可以被子类继承,不会被实例继承。
    class User{}
    User.name = 'foo' // 为class定义一个静态属性
    
    class VipUser extends User{}
    console.log(VipUser.name)         // foo
    
    var foo = new User()
    console.log(foo.name)             // undefined
    

    相关文章

      网友评论

          本文标题:es6 基础知识

          本文链接:https://www.haomeiwen.com/subject/qtlggltx.html