美文网首页1024ES6JavaScript 进阶营
9.ES6函数可变参数和对象扩展

9.ES6函数可变参数和对象扩展

作者: 圆梦人生 | 来源:发表于2019-02-12 15:18 被阅读2次

    1、ES6中函数参数支持可变(...)三个点表示,表示参数个数不固定,参数以数组方式存储,参数必须是最后一个
    2、ES6数组和对象都可以(...)三个展开(解构)
    3、ES6函数参数默认值

    案例

    <html>
        <head>
            <title>对象的扩展</title>
            <script>
                // 1. 函数参数的可变参数
                // 函数参数使用 ... 表示可变参数
                let showVal = function(obj1, obj2, ...args){
                    //  a, b , ["c", "d", "e",  {title: 't1', name: 'n2'}, [1, 2, 3] ]
                    console.log(obj1, obj2, args);
                    // args 长度为 5
                    console.log(args.length);
                }
                
                showVal('a', 'b', 'c', 'd', 'e', {title: 't1', name: 'n2'}, [1, 2, 3]);
                
                // 2. 将可变参数作为参数传入方法中
                let showVal2 = (...args)=>{
                    // 传入方法3, 展开参数
                    showVal3(...args)
                }
                let showVal3 = (a, b) => {
                    console.log('a + b = %o', a + b)
                }
                // 结果:a + b = 9
                showVal2(4, 5) 
                
                // 3.数组的展开
                let array1 = [1, 2, 3]
                let array2 = [4, 5,6]
                let array3 = [...array1, ...array2, 7, 8, 9]
                // [1, 2, 3, 4, 5, 6, 7, 8, 9]
                console.log(array3);
                
                // 4.对象的扩展
                let obj = {
                    a: 'aVal',
                    b: 'bVal',
                    arr1: ['a', 'b', 'c']
                }
                let obj1 =  [ ...obj.arr1 ]; //将obj.arr1值复制到obj1中
                // ["a", "b", "c"]
                console.log(obj1);
                // 字符串的扩展
                let str = 'abcdefg';
                let str2 = [...str];
                // ["a", "b", "c", "d", "e", "f", "g"]
                console.log(str2);
              
                // 5.函数参数默认值,调用函数传入了参数值使用传入的,否则使用默认的
                let showVal4 = (a, b = 5, c =12)=>{
                    console.log(a, b, c);
                }
                // 1 5 12
                showVal4(1);
                // 1 2 3
                showVal4(1, 2, 3);
            </script>
        </head>
        <body>
            
        </body>
    </html>
    
    

    相关文章

      网友评论

        本文标题:9.ES6函数可变参数和对象扩展

        本文链接:https://www.haomeiwen.com/subject/kplkeqtx.html