spread语法解析与使用

@[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"));

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

    原文作者:soaringEveryday
    原文地址: https://www.jianshu.com/p/7b442c95342a
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞