spread语法解析与使用

作者: soaringEveryday | 来源:发表于2016-11-18 16:55 被阅读45次

    @[spread, javavscript, es6, react]

    Spread语法是ES6中的一个新特性,在需要使用多参数(函数参数)、多元素(数组迭代)或者多变量(解构赋值)的地方使用spread语法,可以让表达式的结果平铺化

    java中的可变参数

    熟悉java的朋友对可变参数应该比较熟悉了,他用来指定方法接受不定个数的参数,参数被传进来后形成一个数组,可供你迭代使用分别取出传进来的参数。

    public int sum(int... input){
        int result;
        for(int i: input){
            result+=i;
        }
        return result;
    }
    

    上述代码就是用来求和的,输入的可变参数的个数是不定的,但是进入方法后,所有的参数变成了一个数组,可以供你迭代。于是这个sum方法可以这样子调用:

    int[] array = [1,2,3,4,5];
    int result = sum(array);// result is 15
    

    当做参数传递

    function myFunction(x, y, z) { }
    var args = [0, 1, 2];
    myFunction(...args);
    

    这里就和java的可变参数有点类似,...(spread操作符?spread语法)用来将args数组展开,分别当做参数传递给了myFunction的x,y,z

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

    这个例子说明spread操作符可以多次使用。0和1分别当做参数赋值给了w和x,最后一个[3]也是一个数组,那么他被spread操作符展开后当然就只有一个结果,即3被赋值给了z

    用于数组的创建和组合

    var parts = ['shoulders', 'knees'];
    var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
    

    以上的例子是parts数组作为lyrics的一部分给赋值进去了

    这里也可以使用数组的push函数:

    var arr = [1,2,3];
    var arr2 = [...arr]; // like arr.slice()
    arr2.push(4); 
    

    arr2的结果是[1,2,3,4],而arr并不受任何影响依然存在

    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2);// arr1 is [0,1,2,3,4,5]
    

    arr2被赋值给了arr1的末尾

    spread只可用于可枚举类型

    var obj = {"key1":"value1"};
    var array = [...obj]; // TypeError: obj is not iterable
    

    以上的代码会报错,obj是一个对象,不可以被枚举,spread并不适用于这种类型

    rest操作符

    rest操作符也是三个点(...),但实际他和spread操作符相反,他是将多个元素组合成一个元素,这里其实就是java的可变参数,但是在js中叫做rest参数

    function fun1(...theArgs) {
      console.log(theArgs.length);
    }
    
    fun1();  // 0
    fun1(5); // 1
    fun1(5, 6, 7); // 3
    

    具体使用方法就不再赘述,和java一样

    spread attributes延展属性

    在写React的代码的时候,spread attributes是最常用的到写法,用来传递一个对象给一个组件的props,然后这个组件有哪些props你却并不完全清楚。这里举个例子说明

    class Student extends React.Component {
    
        constructor(props){
            super(props)
            this.state = {
                name: "",
                age: 0
            }
        }
    
        render(){
            return(
                <div>name is : {this.props.name}, age : {this.props.age}</div>
            )
        }
    }
    
    ReactDOM.render((
        <Student name="xiaoming" age={10}/>
    ), document.getElementById("main"));
    

    这里写了而一个Student组件,他含有两个属性 ,一个是name一个是age。我们渲染他的时候,通过name="xiaoming" age={10}这种key-value方式传入,从而达到了定制组件的目的。想象一下如果Student属性特别多,那么难道要一个个的在这里写上吗?何况当这个Student可能并不似你写的,里面有哪些属性你也并不清楚。这里可以用到spread操作符:

    var args = {
        name: "xiaoming",
        age: 10
    }
    
    ReactDOM.render((
        <Student {...args}/>
    ), document.getElementById("main"));
    

    这段代码和上面的是等价的

    相关文章

      网友评论

      本文标题:spread语法解析与使用

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