es6 部分方法总结

部分列子引用的阮一峰ES6教程中的例子

这篇文章主要是自己经常用得一些方法总结, 想全篇学习es6, 可以看阮一峰ES6入门

1: let命令

• let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

• for循环用它声明计数器很好, 因为计数器i只在for循环体内有效，这样这次的i在块级作用域被调用时都是当时的i被保存, 下次生成的又是新的i , 效果类似闭包
• 不存在变量提升, 所以一定要先声明在使用,
• 不同作用域中声明同一函数名; 例如:
  • 函数中用let声明了变量, 如果全局有一个同名变量名, 函数中次变量始终指向函数内的变量, 且在let声明前调用报错,
• **同作用域的同一个变量名: **
  • 不允许在同一作用域使用同一变量名多次声明, 不然会报错
• let新增了块级作用域,效果类似闭包, 单好使多了

变量的空位

[, , ,]数组中,号分隔却没有值, 表示空位

ES5中, 对空位的处理是忽略空位

• forEach(), filter(), every() 和 some()都会跳过空位。
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

ES6 中则是明确将空位转为undefined
接下来的方法中

Array.from方法会将数组的空位，转为undefined
  Array.from(['a',,'b'])
  // [ "a", undefined, "b" ]

扩展运算符（...）也会将空位转为undefined
  [...['a',,'b']]
  // [ "a", undefined, "b" ]

遍历:// entries()
 [...[,'a'].entries()] 
// [[0,undefined], [1,"a"]]
等等, 只要是空位都会被undefined填充 

2: 变量的解构

1: 我的理解就是变量名和值一一对应,

  var [a, b, c] = [1, 2, 3];  相当于 var a = 1;  var b = 2; var c = 3;

  let [foo, [[bar], baz]] = [1, [[2], 3]];foo : 1;   bar : 2;   baz :  3 

2: 我这里没有用很多,还有很多方法, 可以去看下最上面阮一峰的教程

3: 字符串

• 1: 提供了遍历字符串的接口

    for (let codePoint of 'foo') { console.log(codePoint)}
      // "f"
      // "o"
      // "o"
  

• 2:includes(), startsWith() endsWidth()
  返回的是布尔值, 可以做字符串的判断, 包括一些验证

• includes()：返回布尔值，表示是否找到了参数字符串。

• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。

• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

• 3: repeat()重复一个字符串多少次

    w.repeat(3); 
     =>  " www"
  

  • 如果重复次数是小数, 会转换成字符串,
  • 如果重复次数是负数, 0 ~ -1 会转换成 0 , 小于-1会报错
  • 如果重复次数是字符串会转换成数字

• 4: 模板字符串
  模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

  省去了以前前端在js中拼接html的烦扰, 还可以任意添加变量方法等

html的拼接

  $('#list').html(
      `<ul>
         <li>first</li>
         <li>second</li>
      </ul>`
    );

字符串中插入变量

```
  function fn() {
     return " World";
  }
  `Hello ${fn()} lalala` 
  "Hello World  lalala"
```

遇到的问题:
用url往后端传值时, 用字符串模板, 单独写 src=包裹会报错,
最后在变量外包裹了 src={ }才解决

 <iframe className="cdp-map-content-ifram" id="ss" src={`/map/hisTrack.jsp?themeCfgObj=${themeCfgObj}`}/>

4: 数组

• 1: Array.from()主要方法是将两类类似数组的对象转换为真正的数组, 包括可遍历对象
• 1: 所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此任何有length属性的对象，都可以通过Array.from方法转为数组

 这是个类似数组的对象: 
let arrayLike = {
        '0': 'a', 
        '1': 'b',
        '2': 'c', 
        length: 3
   };

     // ES5的写法var arr1 = [].slice.call(arrayLike);
     // ['a', 'b', 'c']
     // ES6的写法let arr2 = Array.from(arrayLike); 
     // ['a', 'b', 'c']

• 常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
• 字符串和Set结构 都可以使用Array.from都可以将它们转为真正的数组。
• 兼容处理:

const toArray = (() =>
     Array.from ? Array.from : obj => [].slice.call(obj)
)();

• Array.from还可以接受第二个参数，作用类似于数组的map
  方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

  Array.from([1, 2, 3], (x) =>
     x * x
)
// [1, 4, 9]

2: Array.of()方法用于将一组值，转换为数组
Array.of() // [] Array.of(undefined) // [undefined] Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
3: find() 和 findIndex()

• 数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

```
    [1, 5, 10, 15].find(function(value, index, arr) { 
            return value > 9;
      }, this) 
      // 10
```

• 上列中可见find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

• find(回调函数, this) 第二个参数是this

• findIndex(回调函数, this); 用法同find() 只不过返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

• 4: 数组的遍历
  数组都可以使用 for...of循环来遍历数组, for ( ... of ...) {}
  keys() , values(), entries();

  • key() 遍历结果为数组的键名
  • value()遍历的结果为数组的键值
  • entries()遍历的结果为数组的键值对
    for (let index of ['a', 'b'].keys()) {
    console.log(index)
    ;}
    // 0 // 1
    for (let elem of ['a', 'b'].values()) {
    console.log(elem)
    ;}
    // 'a' // 'b'
    for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem)
    ;}
    // 0 "a" // 1 "b"

• 5: es7的includes()
  array.includes(x) 数组中是否有值x;
  方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

    [1, 2, 3].includes(2);  // true
    [1, 2, 3].includes(4);  // false
    [1, 2, NaN].includes(NaN); // true
  

  其还有第二个参数:
  表示搜索的起始位置，默认为0。
  如果第二个参数为负数，则表示倒数的位置，
  如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
  

5: 函数

• 1: ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

  function log(x, y = 'World') {
     console.log(x, y);
  }

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

• 2: ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数

    function add(...values) { 
      let sum = 0;
      for (var val of values) { 
        sum += val; 
      } 
      return sum;
  }
  
  add(2, 5, 3) // 10
  

  • 注意，rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错

      // 报错
      function f(a, ...b, c) {  // ...}
    

  • 函数的length属性，不包括rest参数。

      (function(a) {}).length  // 1
      (function(...a) {}).length  // 0
      (function(a, ...b) {}).length  // 1
    

• 3: 扩展运算符
  扩展运算符（spread）是三个点（...）将一个数组转为用逗号分隔的参数序列。

    (...[1, 2, 3])
    // 1 ,2 ,3
  

  • 可以替代数组的apply , 将数组转为函数的参数

      es5: 
        var args = [0, 1, 2];
        f.apply(null, args);
    
     es6: 
        var args = [0, 1, 2];
        f(...args);
    

        ES5的写法
            Math.max.apply(null, [14, 3, 77])
    
        ES6的写法
            Math.max(...[14, 3, 77])
    

  • 扩展运算符的运用:

    • 1: 合并数组

        var arr1 = ['a', 'b'];
        var arr2 = ['c'];
        var arr3 = ['d', 'e'];
      
      // ES5的合并数组
      arr1.concat(arr2, arr3);
      // [ 'a', 'b', 'c', 'd', 'e' ]
      
      // ES6的合并数组
      [...arr1, ...arr2, ...arr3]
      // [ 'a', 'b', 'c', 'd', 'e' ]
      

    • 2: 与解构赋值结合

        const [first, ...rest] = [1, 2, 3, 4, 5];
        first // 1
        rest  // [2, 3, 4, 5]
      

      • 注意:如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
    • 3: 字符串
      扩展运算符还可以将字符串转为真正的数组。

        [...'hello']
      // [ "h", "e", "l", "l", "o" ]
      

    • 其他方法: 详细见页头阮一峰es6入门教程

• 5: 箭头函数
  ES6允许使用“箭头”（=>）定义函数。

      var f = v => v;
  
    等同于: 
    var f = function (v) {
         return v 
    }
  
    第一个等号后面的为function的参数(v);
    第二个箭头等号指的是返回值, return v
  

  参数位写法: 第一个等号后 ( = ),

  • 如果参数为空, 第一个等号后面是 () 例如: var f = () => 5;
  • 如果参数只有1个, 第一个等号后面是这个参数, 例如: var f = v => v;
  • 如果参数有多个, 第一个等号后面是(x,y,z,....) , 例如: var sum = (num1, num2) => { return num1 + num2; }

  箭头等号( => )后代码块写法:

  • 如果返回的代码块只有一条语句直接写: var f = () => 5;
  • 如果返回的代码块多于一句，加上{ }: var sum = (num1, num2) => { return num1 + num2; }
  • 如果返回是个对象怎么办(对象有已一个{}), 再加一个{}, var getTempItem = id => ({ id: id, name: "Temp" });　因为{ } 被解析成代码块

  箭头函数使用起来简化了es5函数

    // 正常函数写法
      [1,2,3].map(function (x) {
         return x * x;
      });
  
    // 箭头函数写法
    [1,2,3].map(x => x * x);
  

  箭头函数使用注意事项 :

  • 1: 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象, 即作用域始终绑定定义时所在的作用域，而不是指向运行时所在的作用域。

  • 2: 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  • 3: 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
  • 4: 不可以使用yield命令，因此箭头函数不能用作Generator函数。

  关于箭头函数的this, 始终固化为终绑定定义时所在的对象
  指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

这次先到这, 还有一些没有总结, 下次继续