doubleyong
管理员
管理员
  • 最后登录2024-03-15
  • 发帖数1164
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:2387回复:0

[javascript]【收藏】es6 知识点总结

楼主#
更多 发布于:2021-02-24 10:56
es6 的应用越来越广泛

面试中,对于es6 的知识的掌握,要求也越来越高

本文,带你快速了解es6 相关知识点(配视频讲解)


视频地址:https://www.bilibili.com/video/BV1ht4y1S7xN
作者:郝哥


目录

1、课程介绍
2、什么是ES6
3、let、const
4、解构赋值
5、字符串
6、数组
7、函数
8、rest运算符
9、对象
10、class (视频必看)
11、新的数据类型
12、新的数据解构
13、模块化 (视频必看)
14、promise (视频必看)
15、generator
16、async



【课程介绍】

    作为现阶段的前端程序员ES6已经到了必须掌握的地步。各大框架的使用也都需要ES6的语法的支持


    本课程对ES6的语法知识进行详细的介绍


    需要有javascript基础的同学才可以进行学习。




【什么是es6】

    javascript 咱们所学的js这个语言


   ECMAScript
        javascript分为几个大块包含ECMAScript、DOM、BOM,ECMAScript就是js的核心语法
        ECMA-262 国际标准化组织中的第262条标准
    ECMA    国际标准化组织


    ECMA他是国际标准化机构,在这里面有很多标准,其中第262条标准就是ECMA-262就是ECMAScript。ECMAScript就是javascript的核心语法。


   es6
        ECMAScript6
    ECMA的版本历史
        1997年 ECMAScript 1.0
        1998 年 6 月  ECMAScript 2.0
        1999 年 12 月 ECMAScript 3.0  在业界得到广泛支持,成为通行标准。
        2000 年,ECMAScript 4.0 开始酝酿,发生了严重分歧
        2008 年 7 月 发布为 ECMAScript 3.1 Harmony(和谐),ECMAScript 3.1 就改名为 ECMAScript 5。
        2015 年 6 月,ECMAScript 6 正式通过  所以ES6也叫ES2015


    因为ES6更改的内容过多,所以需要分批次进行更改,可能一年改一些。正常应该叫6.1、6.2,后面就叫ECMA2016、ECMA2017,以年份命名而这些也是都是ES6的内容。当然这样版本太多我们很多时候也叫ESNext。




【let、const】


    声明变量的方式增加了let和const


   let和var的区别
        1、增加块级作用域
            在es6之前,js只有一种作用域叫做函数作用域。
        2、没有预解析,不存在变量提升
        3、不能重复定义
        4、var声明的变量属于window,let不是


   const 和var的区别
        与let和var的一样


   const 和 let的区别
        1、初始化的时候必须赋值
        2、一旦赋值无法改变


    以后在使用的时候,尽量不用var了。变量用let。常量用const。




【解构赋值】
    
ES6 允许按照一定模式,对变量进行赋值,这被称为解构.


   数组模式
        let [a,b,c]=[1,2,3]


   对象模式
        let {a,b,c}={a:1,b:2,c:3}


   字符串模式
        let [a,b,c]='aaa'


    结构不成功
        undefined


    默认值
        let [a=0,b,c]=[1,2,3]




【字符串】


   字符串模板
        ``  可以支持换行
        ${} 里面放变量


   标签模板


    字符串的便利:for...of


   方法
    includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
    repeat方法返回一个新字符串,表示将原字符串重复n次。
    padStart() 用于头部补全
    padEnd() 用于尾部补全
    trimStart() 去除头部空格
    trimEnd()  去除尾部空格




【数组】


   Array.from()
        方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象
        类数组有两类arguments,通过获取元素得到的类数组.本质特征只有一点,即必须有length属性,和下标
  
 Array.of()
        用于将一组值,转换为数组。
  
  copyWithin()
        在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
      
  Array.prototype.copyWithin(target, start = 0, end = this.length)
        target(必需):从该位置开始替换数据。如果为负值,表示倒数。
        start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
        end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
  
 find() 和 findIndex()
        find(回调函数)   返回的是一个符合条件的值  没有符合条件undefined
        findIndex(回调函数) 返回的是一个符合条件的下标  没有符合条件返回-1
  
  fill()
        fill(替换的内容)  全部替换
        fill(替换的内容,开始位置)
        fill(替换的内容,开始位置,结束位置)


    includes()
        查看是否有这个数据,返回true,false


   flat()
        数组的成员有时还是数组,用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响




【函数】
    
   函数参数默认值
        function(a=1,b=2){
        }
  
   length
        指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。
        也就是说,指定了默认值后,length属性将失真。


    name 属性
        函数的name属性,返回该函数的函数名。
        这个属性早就被浏览器广泛支持,但是直到 ES6,才将其写入了标准


   箭头函数
        (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
        (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
        (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
        (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。




【rest运算符】


    又叫...运算符,剩余参数运算符,扩展运算符


    1、把非数组变成数组
    2、把数组变成一堆数据
    3、复制数组
    4、合并数组
    5、配合解构赋值
    6、对象中使用
    7、复制对象
    8、合并对象




【对象】
  
  ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
 
  Object.assign() 对象合并
        重名的属性,后面的覆盖前面的
        Object.assign()拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。
        Object.assign()可以用来处理数组,但是会把数组视为对象。
  
  Object.is()
        判断两个东西是否相等




【class】
  
class的写法
        class 类名{
            age=18;
            constructor(name){
                this.name=name
            }
            fn(){
            }
        }


   继承
        class 子类 extends 父类 {
          constructor() {
            super(要继承的属性);
          }
        }


   实例属性的新写法
        class 类名 {
          属性=xxx;
        }


   静态方法
        类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。


        父类的静态方法,可以被子类继承。


   静态属性
        静态属性指的是 Class 本身的属性,而不是定义在实例对象上的属性
        目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。现在有一个提案提供了类的静态属性,写法是在实例属性的前面,加上static关键字。


   私有方法和私有属性
        私有方法和私有属性,是只能在类的内部访问的方法和属性,外部不能访问。这是常见需求,有利于代码的封装,但 ES6 不提供,只能通过变通方法模拟实现


   检查是否继承
        Object.getPrototypeOf(子类) === 父类




【新的数据类型】

    Symbol


    ES6之前对象属性名都是字符串,这容易造成属性名的冲突,为了保证每个属性的名字都是独一无二ES6引入Symbol


    Symbol是一种新的原始数据类型,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。


    Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。


    Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。


    Symbol.description


    Symbol 作为属性名,遍历对象的时候,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。




【新的数据结构】


1、Set 它类似于数组,但是成员的值都是唯一的,没有重复的值。


   声明方式
        let s = new Set();
        s.add(1)


        或者


        let s = new Set([1, 2, 3, 4, 4]);


   set相关方法
        add() 向Set结构加入成员
        delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
        has(value):返回一个布尔值,表示该值是否为Set的成员。
        clear():清除所有成员,没有返回值


   变成真正的数组
        [...set]


   长度
    set.size


   去重
        [...new Set(array)]


   遍历
        forEach
        for-of
            keys() 返回键名的遍历器
            values() 返回键值的遍历器
            entries() 返回键值对的遍历器


2、Map 键可以是任何数据类型的对象


   声明方式
        const m = new Map();
        const o = {p: 'Hello World'};
        m.set(o, 'content')


   方法
        set()
        get()
        has()
        delete()
        size
        clear()


   遍历
        forEach
        for-of
            keys() 返回键名的遍历器
            values() 返回键值的遍历器
            entries() 返回键值对的遍历器




【模块化】(重点)


    导出  export
        一个js文件就是一个模块


    引入 import

   default

   动态引入

   es6模块化
        1、必须放在服务器环境中
        2、import 'xxx' 直接写路径,相当于引入文件
        3、关于路径 可以写相对也可以写绝对
        4、多次引入相同的模块,只相当于一次
        5、引入模块的时候,会预加载提升到开头
        6、模块化的写法必须是严格模式,es6所有都是严格模式


    es6模块化好处
        1、一个模块一个js文件
        2、可以安需求加载,如果不需要可以不加载
        3、模块小,便于维护、减少冗余
        4、每个模块都有自己的作用域,变量都是私有变量




【Promise】


    在ES6以前,解决异步的方法回调函数。


    promise就是为了解决异步请求


    promise是一个对象,是一个容器,装的就是异步的操作(未来才会产生的事情)


    var p1=new Promise((resolve,reject)=>{
        //resolve  异步操作成功时需要执行的
        //reject   异步操作失败时需要执行的
        if(a){ //a是异步操作的结果
            resolve('成功')
        }else{
            reject('失败');
        }
    });
    p1.then((res)=>{
        //成功时需要执行的
        console.log(res)
    },(err)=>{
        //失败时需要执行的
        console.log(err);
    })


   整个promise对象是有三种状态
    pending  等待
    resolved  成功后
    rejected    失败后


   promise的特点:
        状态不受外界的影响,
        状态的变化只有两种可能
            pending--resolved
            pending--rejected


    Promise.all([p1,p2,p3])。then((res)=>{
        //res 是一个数组  接受的是p1,p2,p3返回的数据
    })


   all的特点必须,所有异步操作全部执行完毕,才会执行then


    then 可以一直往下走   可以多个


    catch 错误执行的代码  只能有一个






【generator】


    generator也是函数,普通函数一路到底,中间不会停,generator可以暂停


    function * 函数名(){


    }


   yield
        暂停   分成n段需要n-1和yield,需要n个next
        能传中间参数   第一个next不能传参
        能返回中间结果




【async】
    async是Generator函数的语法糖。


    async function 函数名() {
        let a1 = await 操作;
        let a2 = await 操作;
        return 结果;
    }


视频地址:https://www.bilibili.com/video/BV1ht4y1S7xN


作者:郝哥

最新喜欢:

小达人小达人
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号