ES6 拾遗

[evantianx]

let & const

• 在 for 循环中，设置循环变量的区域为父区域，循环体内部为子区域

  for (let i = 0; i < 10; i++) {
   let i = 'haha'
   console.log(i)
  }
  // 输出 10 次 'haha'

• const 变量必须初始化，且初始化后不得再次赋值

• 彻底冻结对象：

  var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
  }; 

[evantianx]

变量的解构赋值

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。

• 只要是拥有 iterator 接口的数据都可以用来解构赋值

• 只有等号右边某个值不存在或者严格等于 undefined 的时候，解构赋值的值会等于 undefined 或者默认值：

  let [ x ] = [ undefined, 2 ]
  // x 为 undefined
  let [ x = 1 ] = [ null, 2 ]
  // x 为 null 

• 对象的解构赋值和数组的解构赋值不同点在于：

  对象的结构赋值必须和属性名一一对应，除非你想更换属性名，可以这样写：

  let { foo: foo1, bar } = { foo: 1, bar: 2 }
  // foo1 为 1
  // 过程是这样的： 先找到同名属性 foo ,再将值赋给 foo1

• 字符串也可以解构赋值，此时字符串被转换为一个类数组对象

  let [ a, b, c, d ] = 'jack'

[evantianx]

字符串新增

• includes() / startsWith() / endsWith()

  这三个方法分别用来判断字符串是否包含某个字段，是否以某个字段开头和是否以某个字段结尾。返回值均为布尔值

  const testStr = 'Hello, world!'
  
  testStr.includes('o')  // true
  testStr.startsWith('Hello')  // true
  testStr.endsWith('!')  // true 

• repeat()

  重复某个字段并返回得到的字符串。

  'a'.repeat(2)  // 'aa'

• padStart() / padEnd()

  用于字符串补全，接受两个参数，第一个补全后长度，第二个是用什么补全。若省略第二个参数，则用空格补全。

• 标签模版

  这个即是 styled component 的核心。

  const username = 'jack'
  const welcome = 'bye'
  tag`hello, ${username},  ${welcome}`
  // 相当于调用 tag 这个函数
  // tag(['hello,', ', ', ''], 'jack', 'bye')

  用途一般有三种： 处理字符串模版； 过滤 html 内容； 国际化

[evantianx]

数值新增

• 八进制／二进制表示法

  ES5 严格模式下不允许用前导 0 表示八进制数值， ES6 中进一步明确要用 0o 来表示八进制数值；

  二进制数值用 0b 或者 0B 来表示。

• Number.isFinite() ／ Number.isNaN()

  两种方法用来判断是否为有限数字和 NaN。

  与全局方法 isFinite() 和 isNaN() 不同的是，ES6 新增方法不会将要检测的对象转换为数字，如果要检测的对象为非数字则直接返回 false。

这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

[evantianx]

函数新增

• 指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。

• 利用函数默认值，在未传参时抛出错误：

  function throwIfMissing() {
  throw new Error('Missing parameter');
  }
  
  function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
  }
  
  foo()  // Error: Missing parameter

• rest 参数

  可以用做不确定参数个数的传参

  function add(...values) {
   let sum = 0;
  
  for (var val of values) {
    sum += val;
  }
  
  return sum;
  }

  必须写在最后一个参数的位置，否则报错

• name 属性

  匿名函数赋给一个变量时：

  var f = function () {};
  
  // ES5
  f.name // ""
  
  // ES6
  f.name // "f"

  将一个具名函数赋值给一个变量时， ES5 和 ES6 都返回原函数名字：

  const bar = function baz() {};
  
  // ES5
  bar.name // "baz"
  
  // ES6
  bar.name // "baz"

• 箭头函数

  • 返回一个对象时，要在对象外加括号

    const test = () => ({ foo:1, bar: 2 })

• 尾调用优化

  什么是尾调用？

  尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

  function f(x){
  return g(x);
  }

  函数调用会形成一个调用桢，若存在尾调用，完全可以进行尾调用优化。即最后一步调用时删除之前的调用桢。