es6 学习笔记

Posted 2020-09-04 逆光飞翔23

 

　　1、let、const

　　let和const作用类似于var，区别是const声明的是一个制度的变量，一单声明之后，常量的值就不能变。

　　比如：

　　　　

　　这样的话，a能正常输出，但是b会报错

　　let和var的区别：

　　　　 　 　

　　　　　

　　因为，在var的场景中，if和for的声明的是全局变量，而在let的场景下，只会在声明的代码快里面有效

2、str.repeat(n) 返回一个新的字符串， 将元字符串重复n次

　　 　　

3、拼接字符串

　　模版字符，拼接字符串使用${}来引用变量， 用`来标记起始， 所有的空格和缩进都会都会被保留下来，并输出。

　　　　

4、String.raw

　　使用String.raw作为模版字符的前缀，则该模板是原始的，反斜线不再是特殊字符，\\n也不会被解释成换行符。

　　 　　

5、Number

　　Number.isFinite(): 用来检测一个数值是不是非无穷的

　　Number.isNaN(): 用来检测一个字符是不是NaN

　　Number.isInteger()： 用来检测一个数值是不是整数，

　　　　　　　　但是这个方法的Number.isInteger(23)等价于Number.isInteger(23.0)

6、Math

　　Math.trunc(): 去除数值的小数部分，返回整数

　　Math.sign(): 判断一个数是正数、负数还是零，

　　　　　　　返回值：整数:1，负数：-1，0：0，-0：-0，其他值：NaN

　　Math.cbrt(): 计算一个值的立方根

　　Math.fround()：返回一个值的单精度浮点数，某个数的有效数字位数超过7位，超出的部分会自动四舍五入

　　Math.hypot(): 返回所有参数的平方和的平方根  

　　Math.expm1(x): ex - 1

　　Math.log1p(x): 返回1 + x的自然对数，如果x小于-1， 返会NaN

　　Math.log10(x): 返回以10为底的x的对数，如果x小于0，则返回NaN

　　Math.log2(x)：返回以2为底的x的对数。如果x小于0，则返回NaN

　　 Math.sinh(x): 返回x的双曲正弦

　　 Math.cosh(x): 返回x的双曲余弦

 　　Math.tanh(x): 返回x的双曲正切

 　　Math.asinh(x): 返回x的双曲asinh

　　 Math.acosh(3): 返回x的反双曲余弦

　　 Math.atanh(3): 返回x的反双曲正切

7、Array.from 用于将类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）转为真正的数组

　　 

　　其中，Array.from()将字符串转化成数组之后，返回字符串的长度。

　　Array.from(string).length;

8、Array,of() 将值转换成数组

　　　

9、arr.find(callback()) 找出第一个符合条件的数组成员和位置，可以发现NaN

　　它的参数是一个回调函数，所有数组成员依次执行该回调函数，回调函数接受三个参数，（当前的值、当前的位置和原数组）。直到找出第一个返回值为true的成员，然后返回该成员,找到了就不再继续往下查找了。如果没有符合条件的成员，则返回undefined，

　　 

10、arr.findIndex(callback()) 找出第一个符合条件的数组成员的位置，如果都不符合，返回-1，可以发现NaN

　　 

11、fill() 使用给定的值，填充一个数组

　　　　

　　除此之外，fill()接受第二个和第三个参数， 用于指定填充的起始位置

12、entries() 、keys() 、 values()

　　用于遍历数组，返回的是一个遍历器，可以使用for-of循环进行遍历。

　　entire()是对键值对的遍历

　　keys()是对键名的遍历

　　values()是对键值的遍历

　　 

　　

　　待解决，不懂为什么values()的方法报错

13、object

　　(1) destructuring 解构

　　我们平常的话，可以这样写对象

　　 

　　使用es6的话，如下：

　　　

　　也可以反过来，如下：

　　 

　　(2) 属性名表达式

　　　　在原本中，给对象赋值，可以使用标识符作为属性名，也可以使用表达式作为属性名（将表达式放在[]中），也可以痛多对向字面量，用标识符作为属性名。

　　　　但是，在es6中，允许字面量定义对象的时候，用[]放置表达式作为属性名

　　　　　　

　　(3) Object.is() 用来比较两个值是否严格相等，与===相似，区别在于在===里，=0 === -0 是对的， NaN === NaN 是错的，但是在Object.is中，Object.is(+0, -0) 是错的， Object.is(NaN, NaN)是对的

　　(4) Object.assign() 用来讲源对象（source)的所有可枚举的属性，复制到目标对象（target)，他至少需要两个对象作为参数，第一个参数是target, 后面的参数都是source, 只要有其中一个参数不是对象，就会抛出TypeError

　　  

　　注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

　　　　

　　除此之外：

　　Object.assign也可以用来处理数组，数组位置相同的地方将被覆盖

　　

　　可以用来为对象添加属性

　　

 

　　可以用来为对象添加方法

　　 

　　克隆对象

　　在JS里子类利用Object.getPrototypeOf去调用父类方法,用来获取对象的原型。用它可以模仿Java的super

　　

14、function

　　(1) 使用默认参数

　　　　 

　　(2) rest参数， 格式为(...变量名)，也叫做不定参数，用于获取函数的多余参数，这样就不需要使用arguments对象了

　　　　rest参数搭配的变量是一个数组，将该变量的多余参数放入数组中。

　　　　　　

　　(3) 扩展运算符， 是三个点（...）, 它就好比是rest参数的你运算，讲一个数组转为用（，）分隔的参数序列，该运算符主要用于函数调用，它允许传递数组或者类数组直接作为函数的参数而不用通过apply

　　   

　　(4) 箭头函数: =>

　　　　

　　　　

　　　　箭头函数有几个使用注意点。
　　　　　　1.函数体内的this对象，即绑定定义时所在的对象，而不是使用时所在的对象.并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。
　　　　　　2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
　　　　　　3.不可以使用arguments对象，该对象在函数体内不存在。
　　　　　　上面三点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。　　

 15、Set： 数据结构Set类似于数组，但是成员的值都是唯一的，没有重复的值

　　(1) 基本用法

　　  

　　(2) 实例的属性

　　　　Set.prototype.constructor: 构造函数，默认就是Set函数

　　　　Set.prototype.size: 返回Set实例的成员总数

　　　　　　

　　(3) 实例的方法

　　　　add(value): 添加某个值，返回Set结构本身

　　　　delete(value): 删除某个值，返回一个布尔值，表示删除成功

　　　　has(value): 返回一个布尔值，表示是否为Set的成员

　　　　clear(): 清除所有成员，没有返回值

　　　　 　　

　　　(4) 遍历操作

　　　　keys(): 返回一个键名的遍历器
　　　　values(): 返回一个键值的遍历器
　　　　entries(): 返回一个键值对的遍历器
　　　　forEach(): 使用回调函数遍历每个成员

 　　　　由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以key方法和value方法的行为完全一致。

 　　　　　　

16、WeakSet: 和Set一样，不存储重复的值，但是WeakSet的成员只能是对象，不能是其他类型的值。

　　方法:

　　　　add(value)

　　　　delete(value)

　　　　has(value)

　　因为WeakSet没有size的属性，没有办法遍历它的成员

17、Map: 是一个“超对象”，其 key 除了可以是 String 类型之外，还可以为其他类型（如：对象）他的方法和 Set 差不多：

　　(1)方法：

　　　　size：返回成员总数，该方法返回的是Map本身，因此可以采用链式写法
　　　　set(key, value)：设置key所对应的键值，返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
　　　　get(key)：设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
　　　　has(key)：返回一个布尔值，表示某个键是否在Map数据结构中。
　　　　delete(key)：删除某个键，返回true。如果删除失败，返回false
　　　　clear()：清除所有成员，没有返回值。

　　(2)遍历器

　　　　keys()：返回键名的遍历器。
　　　　values()：返回键值的遍历器。
　　　　entries()：返回所有成员的遍历器。

 　　　   　

　　　　如果没有使用rest参数的话，就使用for-of去遍历

18、WeakMap: WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。

　　WeakMap与Map在API上的区别主要是两个:

　　一是没有遍历操作（即没有key()、values()和entries()方法），也没有size属性；
　　二是无法清空，即不支持clear方法。这与WeakMap的键不被计入引用、被垃圾回收机制忽略有关。
　　因此，WeakMap只有四个方法可用：get()、set()、has()、delete()。

19、Iterator: 遍历器

　　 (1)Iterator的作用有三个：

　　　　1/是为各种数据结构，提供一个统一的、简便的访问接口；

　　　　2/使得数据结构的成员能够按某种次序排列；

　　　　3/是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

　　 (2) Iterator的遍历过程是这样的。

　　　　创建一个指针，指向当前数据结构的起始位置。也就是说，遍历器的返回值是一个指针对象。
　　　　第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
　　　　第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
　　　　调用指针对象的next方法，直到它指向数据结构的结束位置。

　　(3)迭代数组结构度必须实现一个名为Symbol.iterator的方法，该方法返回一个该结构元素的迭代器

 　　　　　　

　　(4) 结构赋值

　　　　对数组和Set结构进行解构赋值时，会默认调用iterator接口

　　　　　　

20、Generator

　　该函数是一个函数内部状态的遍历器，也就是说该函数是一个状态机。形式上，它是一个普通函数，但是有两个特征：

　　(1) function命令与函数名之间有*

　　(2) 内部使用yield语句，定义遍历器的每个成员，即不同的内部状态

　　(3) yield*: 表明返回的是一个遍历器

21、Class 　　

　　constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。
上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
　　super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。
这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。