[js高手之路] es6系列教程 - 不定參數與展開運算符(...)

三個點(...)在es6中，有兩個含義:

• 用在形參中， 表示傳遞給他的參數集合， 類似於arguments, 叫不定參數. 語法格式:  在形參面前加三個點( ... )
• 用在數組前面，可以把數組的值全部打散，展開，叫展開運算符. 語法格式:  在數組面前加三個點( ... )

求不定參數的和，以前可以用arguments來做，現在可以用不定參數來做，如下:

        function add( ...values ){
            console.log( values ); // [10, 20, 30]
            let sum = 0;
            for( let i = 0, len = values.length; i < len; i++ ){
                sum += values[i];
            }
            return sum;
        }
        var res = add( 10, 20, 30 );
        console.log( res ); //60

        function add( ...keys, last ) { //報錯，不定參數只能放在最后面

        }

        // function add( ...key1, ...key2 ){ //報錯，一個函數不能出現多個不定參數

        // }

篩選拷貝對象的屬性，之前我們是這樣子做的:

        function pick( src ){
            let target = Object.create( null );//創建一個空對象,跟new Object不同
            for( let i = 1, len = arguments.length; i < len; i++ ){
                target[arguments[i]] = src[arguments[i]];
            }
            return target;
        }
        let user = {
            name : 'ghostwu',
            age : 22,
            sex : 'man',
        };
        var obj = pick( user, 'name', 'age' ); //拷貝user對象的name和age屬性
        console.log( obj ); //{name: "ghostwu", age: 22}

這樣做沒有什么問題，讀取屬性我們始終要記得從1開始， 因為arguments對象的索引0 被 src這個參數占據了. 用不定參數修改如下:

        function pick( src, ...keys ){
            console.log( keys ); //['name','age'];
            let target = Object.create( null );
            for( let i = 0, len = keys.length; i < len; i++ ){
                target[keys[i]] = src[keys[i]];
            }
            return target;
        }

        let user = {
            name : 'ghostwu',
            age : 22,
            sex : 'man',
        };

        var obj = pick( user, 'name', 'age' );
        console.log( obj );

以上方式，更符合數組操作習慣， 拿來就用，不要老是記着從1開始

不定參數與arguments類似，當初設計的目的就是為了取代arguments，那不定參數會不會影響arguments呢？

        function show( ...keys ){
            console.log( keys.length ); //3
            console.log( arguments.length ); //3
            keys[0] = 1000;
            console.log( keys[0], keys[1], keys[2] ); // 1000,20,30
            console.log( arguments[0], arguments[1], arguments[2] ); //10,20,30
        }
        show( 10, 20, 30 );

不定參數修改之后，arguments並不會受到影響

展開運算符:

        let a = 10, b = 20;
        console.log( Math.max( a, b ) ); //20

        let arr = [ 1, 3, 0, -1, 20, 100 ];
        console.log( Math.max( arr ) );//NaN, max不能接收數組參數

我們可以借助apply的語法，把數組傳遞進去

let arr = [ 1, 3, 0, -1, 20, 100 ];
console.log( Math.max.apply( Math, arr ) );//100

有了展開運算符之后，更簡單

        let arr = [ 1, 3, 0, -1, 20, 100 ];
        console.log( Math.max( ...arr ) ); //100 ...: 把數組展開
        console.log( Math.max( ...arr, 1000 ) ); //1000