es6标准入门读书笔记.md

Author Avatar
YAN7 6月 12, 2017

es6标准入门读书笔记

ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现.

第一章 let和const

  1. ECMAScript从草案到正式标准，一共有从stage0到stage4五个阶段， 所以babel的babel-preset-stage-0表示的支持最新的ECMAScript标准（p9。）

第二章 let和const

两者共同点

  1. 不存在变量提升；
  2. 都有暂时性死区：只要块级作用域存在let或者const命令，它所声明的变量就不再受外部影响，并且在声明之前使用会报错；
  3. 不允许重复声明；
  4. 都有块级作用域，外层作用域无法读取内部作用域的变量，内层作用域可以定义外层作用域的同名变量；
  5. 声明的全局变量不属于全局对象的属性（p17。）

const

  1. const一旦声明常量，就必须立即初始化；
  2. 对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址，const只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以把一个对象声明为常量后该对象依然可以改变数据。要将一个对象完成声明为常量，可以使用Object.freeze（）方法。

第三章 变量的解构赋值

ES6允许按照一定模式，从数据和对象中提取值，对变量进行赋值，这被称为结构。

数组的解构赋值

  1. 如果解构不成功，变量的值就等于undefined；
  2. 变量可以设置默认值，默认值生效的前提是该变量对应的数组成员严格等于undefined；

对象的解构赋值

  1. 对象的解构与数组的一个重要不同是：数组的元素是按次序排列的，变量的取值由它的位置决定，而对象的属性是没有次序的，变量必须与属性同名，才能取到正确的值；

  2. 对象的解构赋值的内部机制，是先找到同名属性，然后在赋给对应的变量。真正被赋值的是后者，而不是前者。

     // 对象的赋值是以下形式的简写
 var { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' }
 // 真正被赋值的是变量baz，而不是模式foo
 var { foo: baz } = { foo: 'aaa', bar: 'bbb' }
 baz // 'aaa'
 foo // error: foo is not defined
  3. 对象的解构也支持默认值，默认值生效的条件是，对象的属性值严格等于undefined；

字符串的解构赋值

  1. 对字符串进行解构赋值时字符串被转换成了一个类似数组的对象。

数值和布尔值的解构赋值

  1. 如果等号右边时数值或者布尔值，则先转为对象。

函数参数的解构赋值

  1. 函数参数是一个数组或者对象时，可以解构赋值：

     function add([x,y]) {
     return x+y;
 }
 add([1, 2]) // 3

 function move({x, y}) {
     return [x, y]
 }
 move({x:1, y:2}) // [1, 2]

    上面的例子就是函数参数的解构赋值，但是这其实是简写的，上面第一个例子的意思是，add函数需要传入一个参数，然后[x,y]对这个参数进行解构赋值，因为需要赋值的是一个数组[x, y],所以这里解构赋值的规则和数组的规则一样。
    同理，对move()的函数的解构赋值也是一样的。只是这里需要赋值的是一个对象，所以这里解构的规则就和对象的解构赋值一样。

  2. 函数参数的解构也可以使用默认值

     function move1({x = 0, y = 0}) {
     return [x, y]
 }
 function move2({x,y} = {x: 0, y:0}) {
     return [x, y]
 }
    • 上面的例子使用的默认值分别表示不同的意思。
    • move1函数给要赋值的x，y使用了默认值，表示当解构不成功，即x，y对应的传入的参数的x或者y属性为undefined时，则使用默认值。
    • move2函数是给要穿入的参数使用了默认值，只有传入的参数为undefined或者不传参数时，才会使用参数的默认值。
    • 一般来说第一种写法更符合一般业务代码的需求，即给要用到的变量一个默认值。

用途

  1. 交换变量的值： [x, y] = [y, x]

从函数返回多个值

  1. 对于返回对象或者数组的函数，可以用解构赋值来接收函数的返回值。

     function example(...args) {
     return [1,2,3,4,5];
 }
 const [a,b,c,d,e] = example();
 a //1
 b //2

  2. 提取JSON数据

    const jsonDate = {
  id: 1,
  name: 'YAN7',
  msg: {
      a: 'aaa',
      b: 'bbb'
  }
}

const {id, name, msg} = jsonData;
console.log(id, name, msg)  // 1, YAN7, {a: 'aaa', b: 'bbb'}
// react中经常用这个方法提取props或者state的值

  3. 函数参数的默认值

     funtion add({x=1, y=2}) {
     return x + y;
 }
  4. 遍历Map结构（Map数据结构不熟，暂先略过）

第四章 字符串的扩展

4.1 字符的Unicode表示法

对于编码，字符之类暂先略过。

4.2 codePointAt()

  1. 这个方法能够正确的处理4个字符储存的字符，返回一个字符的码点

4.3 String.fromCodePoint(str)

  1. 传入一个码点，返回对应的字符。

4.4 at()

  1. 返回字符串给定位置的字符。

     'abc'.at(0) // a

4.5 includes(), startsWith(), endsWith()

  1. inlcudes: 返回布尔值，表示是否找到了参数字符串。
  2. startsWith: 返回布尔值，表示参数字符串是否在源字符串的头部。
  3. endsWith： 返回布尔值，表示参数字符串是否在源字符串的尾部。
  4. indexOf：ES5的方法，返回参数字符串在源字符串的index值，如果不在源字符串中，则返回-1。

4.6 repeat()

  1. repeat返回一个新字符串，表示将源字符串重复n次。
  2. 参数如果是小数，会向下取整。
  3. 参数如果是负数或者Infinity，会报错。
  4. 参数如果是0到-1之间的小数，则等同于0，参数NaN同样相当于0。
  5. 参数如果是字符串，则先转成字符串。

4.7 padStart(), padEnd()

  1. 这两个方法用来补全字符串，会在头部或者尾部补全。
  2. 这两个方法接收两个参数，第一个表示要补全的字符串的最小长度，第二个表示填充的字符串。
  3. 如果省略了第二个参数，则会用空格填充。

4.8 模板字符串

  1. 模版字符串用反引号作为标识，如果用变量则用${变量}表示。

第六章 数值的扩展

5.1 二进制和八进制数值表示法

  1. ES6中分别用前缀0b(或0B)和0o(或0O)来表示二进制和八进制。

5.2 Number.isFinite()和Number.isNaN()

  1. Number.isFinite()用来检查一个数值是否非无穷，(注意，是检查非无穷)；
  2. Nunber.iaNaN()用来检查一个值是否是NaN.

5.3 Number.isinteger()

  1. Number.isInteger()用来检查一个值是否为整数.

5.4 Number.EPSILON

  1. 这是一个极小的常量，由于js中对浮点数的计算并不精确，所以ES6认为只要计算的得出的结果与正确结果相差小于这个常量，那么就认为计算结果是精确的。

5.5 Math对象的扩展

  1. Math.trunc(): 用于去除一个数的小数部分，返回整数部分；
  2. Math.sign(): 用于判断一个数到底是正数，负数，还是零；
  3. Math.cbrt(): 用于计算一个数的立方根；
  4. Math.clz32(): 返回一个数的32位无符号整数形式有多少个前导0；
  5. Math.imul(): 返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的符号整数，大多数情况下，这个函数返回的结果和两个参数直接相乘的结果是相同的(超出32位的部分溢出)；
  6. Math.fround(): 返回一个数的单精度浮点数形式；

第七章 数组的扩展

7.1 Array.from()

  1. 这个方法用于将两类对象转位真正的数组：类似数组的对象和可遍历对象；
  2. 类数组是一个带有length属性的对象；