ES6总结

目录

一、数据类型新用法与解构赋值

        1.let、const、var的区别

        2.解构赋值

        3.字符串的用法

        4.数组的用法

二、函数与symbol

        1.数字的用法

        2.对象的用法

        3.函数的使用

        4.拓展运算符

        5.箭头函数

        6.symbol数据类型

三、代理、迭代器与生成器            

        1.Proxy代理

        2.for…of遍历

        3.iterator

        4.generator函数

        5.类

四、set、map与模块化

        1.Set 和 WeakSet用法

        2.Map和WeakMap用法

        3.promise对象

        4.peomise回调地狱

        5.模块化

es5和es6的区别


一、数据类型新用法与解构赋值

        1.let、const、var的区别

             1.var与let的共同点:

                  在全局中声明的变量都是全局变量,在局部作用域中声明的变量都是局部变量

                var与let的不同点:

                  1、let声明的变量不能重新再次声明

                  2、let声明的变量不会发生提升

                  3、let声明的变量只在当前的块作用域内有效

                  4、let声明的变量在块作用内会产生暂时性死区

                块作用:只要在{}内就会产生块作用域

              暂时性死区:在块作作用域内用let声明了变量,如果在块作用域内去操作该变量,只会在当前的块状作用域内查找

                const的特点:

                  1、用const声明的变量是个常量,不能进行重新赋值(只要栈不发生改变即可)

                  2、用const声明的变量必须赋初值

                  与let相同的特点

                  3、const声明的变量不能重新再次声明

                  4、const声明的变量不会发生提升

                  5、const声明的变量只在当前的块作用域内有效

                  6、const声明的变量在块作用内会产生暂时性死区

        2.解构赋值

                解构赋值:将字符串的字符、数组的元素、对象的属性一个个分解开赋值给对应的变量

                用途:

                        1、交换两个变量的值

                        2、提取函数返回的多个值

                        3、定义函数参数

                        4、解决不传参为undefined的问题

        3.字符串的用法

                1、模板字符串: 用反引号``,在拼接中用${变量/表达式/函数的调用}

                2、repeat(n):将目标字符串重复N次,返回一个新的字符串,不影响目标字符串。

                3、includes():判断是否有子字符串,返回布尔类型。任何字符串都包含空字符串

                第二个参数选填,表示开始搜索的位置

                4、startsWith()函数:判断指定的子字符串是否出现在目标字符串的开头位置,返回布尔类型

                第二个参数选填,表示开始搜索的位置

                5、endsWith()函数:判断指定的子字符串是否出现在目标字符串的结尾位置,返回布尔类型

                第二个参数选填,表示针对前N个字符

                6、padStart(n,"str"):如果字符串不满足n位,在前边补str。返回新字符串

                7、padEnd(n,"str"):如果字符串不满足n位,在后边补str。返回新字符串

                8、string.raw():返回字符串最原始的样貌

        4.数组的用法

                1、Array.of() 将一组值转化为数组

                2、Array.from():可以将类似数组的对象或者可遍历的对象转换成真正的数组

                        a、伪数组DOMList

                        b、字符串

                        c、数组   用于数组的深拷贝

                3、find():找出数组中符合条件的第一个元素,返回数组的元素。该方法中的回调函数中参数是数组的元素

                参数是一个匿名函数,数组的每个元素都会进入匿名函数执行,直到结果为true,find函数就会返回value的值

                4、findIndex():返回符合条件的第一个数组成员的位置。该方法中的回调函数中参数是数组的元素

                5、fill(n)用指定的值n,填充到数组。将数组中的元素全部变成n,返回一个新数组,会改变原来的数组

                6、entries()对数组的键值对进行遍历,返回一个遍历器,可以用for..of对其进行遍历

                                键    值         对

                                key   value  

                             字符串  索引  子字符

                              数组    索引   元素

                              对象    属性   属性值

                7、keys() 遍历数组的索引

                8、values() 遍历数组的元素        

二、函数与symbol

        1.数字的用法

                1、Number.isNaN():判断是否为非数值,返回布尔类型true是非数值,false是数值。如果参数不是数字类型直接返回false

                2、Number.isFinite():  判断是否是有限的,返回布尔类型true是有限,false是无穷。如果参数不是数字类型直接返回false

                3、Number.parseInt():  遇到非数值或者第一个小数点结束

                4、Number.isInteger():用来判断是否是整数,返回布尔类型true是整数,false是非整数

                5、Math.trunc():用于去除一个数的小数部分,返回整数部分。(注意:是数学对象Math,就意味着会发生隐式转换)

                6、Math.sign():  判断参数是否是正数返回1、负数返回-1、0返回0。其余返回NaN(注意:是数学对象Math,就意味着会发生隐式转换)

        2.对象的用法

                1、ES中新增对象的用法:

                        1、如果对象的属性值是全局变量且变量名与对象的属性名相同可以省略:属性值

                        2、将对象的方法省略:function

                        3、对象的属性名方法名可以是字符串的拼接,但是需要加[]

                2、Object.is():比较两个值是否严格相等,或者说全等。  ===

                3、Object.assign(target,origin):  将源对象origin赋值到目标对象target上,如果遇到属性名重复会发生覆盖

                4、Object.getPrototypeOf(实例化对象):获取实例化对象的原型对象

                5、Object.setPrototypeOf(实例化对象,原型对象):设置实例化对象的原型对象,会覆盖之前的原型对象           className

        3.函数的使用

                1、函数的参数不为undefined

                        1、对象的解构赋值

                        2、赋初值

                        3、用逻辑运算符||  (弊端)                    

                2、rest:  剩余的参数,返回一个数组,rest参数后面不能再跟有其他参数。

                3、扩展运算符...:一般结合数组使用,把数组的元素用逗号分隔开来,组成一个序列

                        

var arr = [10, 20, 30, 40];
    // 1、遍历数组
    console.log(...arr);
    // 2、当做数组的元素
    console.log("哈哈", 10, 20, 30, 40, true);
    console.log(["哈哈", ...arr, true]);
    // 3、用于深拷贝
    var arrNew = [];
    // arrNew = [...arr];
    [...arrNew] = arr;
    console.log(arrNew);
    arr.push(50);
    console.log(arr);
    console.log(arrNew);
    // 4、用于函数的调用
    function demo1(x, y, z, m) {
        console.log(x + y + z + m);
    }
    demo1(arrNew[0], arrNew[1], arrNew[2], arrNew[3]);
    demo1(...arrNew);
    // 5、与解构赋值结合
    var [a, ...arr1] = arrNew;
    // console.log(a, b, c, d);
    console.log(a, ...arr1);
    // 6、转化成真正的数组
    var str = "hello";
    var arrStr = Array.from(str);
    console.log(arrStr);
    console.log(...str);
    console.log([...str]);

        4.拓展运算符

                拓展运算符: ...数组      ...对象

                数组的拓展运算符

                        1、遍历数组

                        2、当做数组的元素(比push()与unshift()作用更大)

                        3、用于深拷贝

                        4、用于函数的调用

                        5、与解构赋值结合

                        6、将类似于数组的转化成真正的数组

                对象的拓展运算符

                        将一个对象的属性和方法添加到另一个对象中

        5.箭头函数

             function函数的this指向的是调用它的地方,箭头函数this指向是定义它的地方的this指向

                箭头函数:将function关键字去掉,在小括号的后边添加=>

                1、将函数声明替换成箭头函数(一般不使用)

                2、将函数表达式替换成箭头函数

                3、将回调函数替换成箭头函数

                         箭头函数的特点:(重点)

                                 1、如果参数只有一个可以省略小括号

                                 2、如果函数体中只有return语句,可以省略花括号和return

                                 3、没有arguments内置对象

                                 4、不能作为构造函数

                                 5、没有原型属性

                                 6、使用call()与apply()可以进行函数的调用但是不会改变this的指向

                                 7、this永远指向父作用域

                                8、箭头函数不能作为Generator函数,不能使用yield关键字

        6.symbol数据类型

                创建symbol类型的变量,不要在Symbol()前边的加new

                Symbol()中的参数是任意的数据类型

                        1、Symbol的特点:独一无二的值

                        2、设计symbol的初衷就是为了解决对象属性名不能重复,Symbol类型的属性名要加[]

                        3、for……in遍历对象,无法遍历symbol类型的属性

                        4、Reflect.ownKeys()可以获取所有类型的对象的属性名 返回一个数组

                        5、Object.getOwnPropertySymbols()获取对象中只有symbol类型的属性名,返回一个数组

                        6、Object.keys()获取对象中所有非symbol类型的属性名,返回一个数组

                        7、Object.values()获取对象中所有非symbol类型的属性值,返回一个数组

                        8、Symbol.for()根据参数名,去全局环境中搜索是否有以该symbol.for()参数为名的symbol值,有就返回它,没有就以该参数名来创建一个新的symbol值

                        9、Symbol.keyFor()返回一个以被登记在全局环境中的symbol值的key,没有就返回undefined

三、代理、迭代器与生成器            

        1.Proxy代理

                1.代理的作用:

                        去进行对象的拦截操作和设置获取操作

                2.代理的创建

                        new Proxy(目标对象target,拦截操作对象)

                3.目的:

                        在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写

                4.target:目标对象

                  property:目标对象的属性名

                  value:目标对象的属性值

                5.获取代理属性: get(target, property)target 被代理的对象,property要获取的属性名

                6.设置代理属性: set(target, property, value)

                7.过滤代理属性: ownKeys(target):拦截过滤Object.ownKeys()对对象的属性遍历

                8.判断代理属性: has(target, property):拦截key in object的操作,结果会返回一个布尔值        has( )方法用于是判断是否含有指定的键值对,有,就返回true。否则返回false。

                9、函数的拦截:apply()

                10、取消代理:proxy.revocable()        它会返回一个对象,对象中含有一个proxy属性,它就是Proxy的代理实例对象;还有一个revoke属性,它是一个方法,用于取消代理。

        2.for…of遍历

                1.遍历数组的方式

                        1、for循环

                              弊端:代码不够简洁

                        2、forEach

                              弊端:不能跳出或者终止循环

                        3、拓展运算符

                              弊端:无法获取索引

                        4、for……in

                              弊端:索引是字符串类型

                2.for……of遍历数组的优点:

                        1、可以跳出或者终止循环

                        2、代码简洁

                        3、结合keys( )获取到循环的索引,并且是数字类型,而不是字符串类型;结合values()遍历元素,结合entries()遍历索引和元素                                                                                                                                                                                                               

                3.for……of遍历

                        1、遍历伪数组

                        2、遍历字符串

                        3、不能遍历对象

        3.iterator

                函数调用的结果就是函数的返回值

                1.为什么对象不能被for……of所遍历?

                        对象的构造函数的原型中没有symbol类型的iterator方法

                2.可遍历的对象:能被for……of遍历的数据类型称之为可遍历的对象

                3.iterator迭代器:可遍历的对象的原型中拥有symbol类型的iterator方法,该方法调用完成后返回的对象就是iterator迭代器

                4.for……of遍历的底层原理:

                        可遍历的对象调用构造函数的原型中的Symbol类型的Symbol.iterator方法返回一个iterator迭代器对象

                        iterator迭代器对象不断的执行next()方法,返回值也是一个对象拥有value和done属性,value的属性值就是

                        遍历出的值,done的属性值是布尔类型。直到当done的属性值为true的时候,遍历结束。

                5.for……of如何遍历对象呢?

                        让对象的构造函数的原型中有symbol类型的iterator方法

        4.generator函数

                1.generator函数的作用:可以实现异步操作

                2.generator函数的特点:

                        1、通过function* 函数名  声明生成器函数

                        2、调用的结果返回一个生成器是iterator迭代器对象,再次执行该对象下的next()方法才能完全调用generator函数

                        3、yield关键字后的变量或者值是next()方法返回的对象中的value的属性值

                        4、yield关键字后的代码必须调用next()函数才会执行

                        5、generator函数是异步的

                        6、next()方法的参数是上一个yield的返回值 (重点)

                        7、在生成器函数中调用另一个生成器函数用yield*

                3.return与yield的区别:

                        1、return结束执行函数体,其后的值就是函数的返回值

                        2、yield暂停执行函数体,其后的值就是next()方法返回中的对象中的value的属性值

        5.类

                1.类与对象的关系: 类是对象的模板,对象是类的实例化

                2.创建类:   class 类名 {}      注意:类名的首字符要大写

                3.类的一些特点:

                        1、任何一个类都有constructor方法(有且只有一个),我们称之为构造方法

                        2、实例化对象   new Animal(实参1,实参2,……)

                        3、构造方法constructor中的属性和方法都可以被实例化对象所继承,且constructor中方法this指向实例化对象

                        4、自定义方法可以被实例化对象所调用,且该方法中的this指向实例化对象

                        5、静态方法: static 方法名(){}  可以被类所调用,且该方法中的this指向类

                        6、类的继承: class 子类 extents 父类{}

                        7、类的继承中通过super关键字去继承

                        8、子类可以继承父类构造方法中的所有属性和方法也可以继承父类中自定义方法、静态方法

                4.

                         1.引用==地址,super是父类的地址,子类通过super可以访问父类,意味着可以继承父类的属性和方法

                         2.先调用super(),才可以使用this(地址的改变)

                定义变量用let

                定义字符串用模板字符串,

                字符串的拼接用模板字符串${}

                函数用箭头函数

                对象的属性和方法要简写

                循环要用for……of

                定义对象要用类

                函数返回多个值用解构赋值...

四、set、map与模块化

        1.Set 和 WeakSet用法

                基本类型:数字、字符串、布尔、空型、未定义、Symbol

                引用类型:数组、函数、对象、set、map

                1、创建set类型的变量,其参数必须是可遍历的对象

                2、set中的属性和方法

                        size属性:获取成员的个数。

                       add():添加成员

                       delete()方法:删除Set结构中的指定值,删除成功返回:true,删除失败返回:fasle。

                       clear()方法:清除所有成员。

                       has( )方法:判断set结构中是否含有指定的值。如果有,返回true;如果没有,返回fasle。

                       entries( )方法:返回一个键值对的遍历器。

                                             键   值   对

                                      key  value  对

                               数组:  索引  元素

                               对象: 属性名 属性值

                               字符串:索引  子字符

                        keys()方法:返回键名

                        values()方法:返回键值

                        forEach()

                3、set的特点:

                        1、Set结构是键名和键值是同一个值,都是其成员

                        2、Set结构的成员是唯一的

                4、set的用途:(重点)

                         数组去重 let arrNew = Array.from(new Set(arr))

                5、WeakSet结构 (了解)

                         1、实例化WeakSet结构时参数必须是数组,数组中的元素必须是引用类型

                         2、是不可遍历的对象

                         3、WeakSet结构也提供了add( )方法,delete( )方法,has( )方法给开发者使用,作用与用法跟Set结构完全一致,不支持clear()方法,不会有keys()方法,values()方法,entries()方法,forEach()等方法和size属性

        2.Map和WeakMap用法

                1、创建Map类型的变量,其参数是一个数组中包含数组(内含键值对)的形式(key键名类型不再局限于字符串类型)

                2、Map中的属性和方法

                        size属性:获取成员的实例数

                        set()方法:给实例设置一对键值对

                        get()方法:获取指定键名的键值,返回键值;否则返回undefined

                       delete()方法:删除指定的键值对,删除成功返回:true,删除失败返回:fasle。

                       clear()方法:删除所有键值对

                       has( )方法:判断Map结构中是否含有指定的键值对。如果有,返回true;如果没有,返回fasle。

                       entries( )方法:返回实例的键值对的遍历器

                        keys()方法:返回键名

                        values()方法:返回键值

                        forEach()

                3、WeakMap结构 (了解)

                         1、WeakMap的键名只支持引用数据的数据

                         2、是不可遍历的对象

                         3、WeakMet结构也提供了get( )方法,delete( )方法,has( )方法给开发者使用,作用与用法跟Map结构完全一致,不支持clear方法,也不支持遍历,所以不会有keys()方法,values()方法,entries()方法,forEach()等方法和size属性

        3.promise对象

                1.promise的设计初衷:

                        1、实现异步操作

                        2、解决回调地狱

                2.回顾之前的异步操作

                        1、定时器函数

                        2、事件函数

                        3、网络请求

                        4、generator (next方法是异步的)

                        5、promise (then方法和catch是异步的)

                        6、asyac/await

                3.promise对象的创建

                        new Promise((resolve,reject)=>{})

                4.执行promise对象

                         promise对象.then((res)=>{}) res就是成功之后resolve的参数

                              注意:如果连续的.then((res)=>{})其参数是上一个then()中回调函数的返回值

                         promise对象.catch((err)=>{}) err就是失败之后reject的参数

                5.

                        resolve:成功之后执行

                        reject:失败之后执行

                        三种状态

                                pedding初始状态        fulfilled成功        rejected失败

                                开始 -> 成功  调用resolve()方法

                                开始 -> 失败  调用reject()方法

                                注意:不能逆向    

        4.peomise回调地狱

        5.模块化

                1.使用ES6模块化的准备工作(在后期的Vue项目和小程序项目,因为环境)

                        1、vscode安装live sever

                        2、<script type="module">将script标签中的type的类型换成module,告诉浏览器我们要使用es6的模块化了

                2.注意事项

                        1、导入的变量只可读不可写

                        2、导入的变量名可以改变,在导入过程中  old as new

                        3、在定义变量中可以直接导出  exprot let/var 变量名 = 值

                        4、默认导出  exprot default 值。默认导入 import  随意的变量 from'./moduleA.js

                        5、整体导入  import * as obj from "js的地址"

es5和es6的区别

ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化ECMAScript6,即ES6,是ECMAScript的第六次修订,于2015年完成,也称ES2015ES6是继ES5之后的一次改进,相对于ES5更加简洁,提高了开发效率ES6新增的一些特性:

1)let声明变量和const声明常量,两个都有块级作用域ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明

2)箭头函数ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义

3)模板字符串模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串

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

5)for of循环for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串 6)import、export导入导出ES6标准中,Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用

7)set数据结构Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数

8)... 展开运算符可以将数组或对象里面的值展开;还可以将多个值收集为一个变量

9)修饰器 @decorator是一个函数,用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

10)class 类的继承ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念

11)async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成

12)promisePromise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大

13)SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的

14)Proxy代理使用代理(Proxy)监听对象的操作,然后可以做一些相应事情

                           

                

                                

                

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值