s 6拡張演算子3点(...)

83230 ワード
javascript思考
1 意味
拡張演算子は3つの点です.これは、restパラメータの逆演算のように、1つの配列をコンマで区切られたパラメータ系列に変換します.
  1. console.log(...[ 1, 2, 3])
  2. // 1 2 3
  3. console.log( 1, ...[ 2, 3, 4], 5)
  4. // 1 2 3 4 5
  5. [...document.querySelectorAll( 'div')]
  6. // [
    ,
    ,
    ]

    。

    1. function push(array, ...items) {
    2. array.push(...items);
    3. }
    4. function add(x, y) {
    5. return x + y;
    6. }
    7. var numbers = [ 4, 38];
    8. add(...numbers) // 42
    ，array.push(...items) add(...numbers) ， ， 。 ， 。

    ， 。

    1. function f(v, w, x, y, z) { }
    2. var args = [ 0, 1];
    3. f( -1, ...args, 2, ...[ 3]);


    2   apply

    ， apply ， 。

    1. // ES5
    2. function f(x, y, z) {
    3. // ...
    4. }
    5. var args = [ 0, 1, 2];
    6. f.apply( null, args);
    7. // ES6
    8. function f(x, y, z) {
    9. // ...
    10. }
    11. var args = [ 0, 1, 2];
    12. f(...args);

    apply ， Math.max ， 。

    1. // ES5
    2. Math.max.apply( null, [ 14, 3, 77])
    3. // ES6
    4. Math.max(...[ 14, 3, 77])
    5. //
    6. Math.max( 14, 3, 77);
    ， JavaScript ， Math.max ， ， 。 ， Math.max 。

    push ， 。

    1. // ES5
    2. var arr1 = [ 0, 1, 2];
    3. var arr2 = [ 3, 4, 5];
    4. Array.prototype.push.apply(arr1, arr2);
    5. // ES6
    6. var arr1 = [ 0, 1, 2];
    7. var arr2 = [ 3, 4, 5];
    8. arr1.push(...arr2);

    ES5 ，push ， apply push 。 ， push 。
    。

    1. // ES5
    2. new ( Date.bind.apply( Date, [ null, 2015, 1, 1]))
    3. // ES6
    4. new Date(...[ 2015, 1, 1]);


    3  

    （ 1 ）

    。

    1. // ES5
    2. [ 1, 2].concat(more)
    3. // ES6
    4. [ 1, 2, ...more]
    5. var arr1 = [ 'a', 'b'];
    6. var arr2 = [ 'c'];
    7. var arr3 = [ 'd', 'e'];
    8. // ES5
    9. arr1.concat(arr2, arr3);
    10. // [ 'a', 'b', 'c', 'd', 'e' ]
    11. // ES6
    12. [...arr1, ...arr2, ...arr3]
    13. // [ 'a', 'b', 'c', 'd', 'e' ]


    （ 2 ）

    ， 。

    1. // ES5
    2. a = list[ 0], rest = list.slice( 1)
    3. // ES6
    4. [a, ...rest] = list
    5. 。
    6. const [first, ...rest] = [ 1, 2, 3, 4, 5];
    7. first // 1
    8. rest // [2, 3, 4, 5]
    9. const [first, ...rest] = [];
    10. first // undefined
    11. rest // []:
    12. const [first, ...rest] = [ "foo"];
    13. first // "foo"
    14. rest // []
    ， ， 。

    1. const [...butLast, last] = [ 1, 2, 3, 4, 5];
    2. //
    3. const [first, ...middle, last] = [ 1, 2, 3, 4, 5];
    4. //

    （ 3 ）

    JavaScript ， ， 。 。

    1. var dateFields = readDateFields(database);
    2. var d = new Date(...dateFields);
    ， ， Date。

    （ 4 ）

    。

    1. [... 'hello']
    2. // [ "h", "e", "l", "l", "o" ]
    ， ， 32 Unicode 。

    1. 'x\uD83D\uDE80y'.length // 4
    2. [... 'x\uD83D\uDE80y'].length // 3
    ， JavaScript 32 Unicode ， 2 ， 。 ， ， 。

    1. function length(str) {
    2. return [...str].length;
    3. }
    4. length( 'x\uD83D\uDE80y') // 3
    32 Unicode ， 。 ， 。

    1. let str = 'x\uD83D\uDE80y';
    2. str.split( '').reverse().join( '')
    3. // 'y\uDE80\uD83Dx'
    4. [...str].reverse().join( '')
    5. // 'y\uD83D\uDE80x'
    ， ， reverse 。

    （ 5 ） Iterator

    Iterator ， 。

    1. var nodeList = document.querySelectorAll( 'div');
    2. var array = [...nodeList];
    ，querySelectorAll nodeList 。 ， 。 ， ， NodeList Iterator 。

    Iterator ， 。

    1. let arrayLike = {
    2. '0': 'a',
    3. '1': 'b',
    4. '2': 'c',
    5. length: 3
    6. };
    7. // TypeError: Cannot spread non-iterable object.
    8. let arr = [...arrayLike];
    ，arrayLike ， Iterator ， 。 ， Array.from arrayLike 。

    （ 6 ） Map Set ， Generator

    Iterator ， Iterator ， ， Map 。

    1. let map = new Map([
    2. [ 1, 'one'],
    3. [ 2, 'two'],
    4. [ 3, 'three'],
    5. ]);
    6. let arr = [...map.keys()]; // [1, 2, 3]
    Generator ， ， 。

    1. var go = function*(){
    2. yield 1;
    3. yield 2;
    4. yield 3;
    5. };
    6. [...go()] // [1, 2, 3]
    ， go Generator ， ， ， ， 。
    iterator ， ， 。

    1. var obj = { a: 1, b: 2};
    2. let arr = [...obj]; // TypeError: Cannot spread non-iterable object

・
JavaScriptのフォームの中でonblureがフォーカスを失うイベント
JavaScriptは秒数をhh:mm:ssの形に変換します.