美文网首页
延展操作符和解构赋值

延展操作符和解构赋值

作者: persistlu | 来源:发表于2019-01-15 14:46 被阅读34次

来自:https://www.jianshu.com/p/947e2a7771bd

延展操作符(Spread operator)

这个 … 操作符(也被叫做延展操作符 - spread operator)已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=['Wayou','John','Sherlock'];

//sayHello函数本来接收三个单独的参数人妖,人二和人三

function sayHello(people1,people2,people3){

console.log(Hello ${people1},${people2},${people3});

}

//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数

sayHello(...people);//输出:Hello Wayou,John,Sherlock

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法

sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock

而在 React 中,延展操作符一般用于属性的批量赋值上。在JSX中,可以使用…运算符,表示将一个对象的键值对与ReactElement的props属性合并。

var props = {};

props.foo = x;

props.bar = y;

var component = ;

//等价于

var props = {};

props.foo = x;

props.bar = y;

var component = ;

它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:

var props = { foo: 'default' };

var component = ;

console.log(component.props.foo); // 'override'

数组去重用延展操作符:

延展操作符:

相关文章

  • ES6新特性

    类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符(展开操作符) 对象属性简写 Promise...

  • 延展操作符和解构赋值

    来自:https://www.jianshu.com/p/947e2a7771bd 延展操作符(Spread op...

  • ES6解构赋值

    1 数组的解构赋值 赋值还能解构?到底是个什么东东? ...操作符的解构赋值 2 对象的解构赋值 在结构对应的前提...

  • ES6十个常用新特性

    参考文章-类-模块化-箭头函数-函数参数默认值-模板字符串-解构赋值-延展操作符-对象属性简写-Promise-L...

  • Android:ReactNative语法基础(上)

    ES6特性 类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符 对象属性简写 Promise ...

  • 让代码更优雅——解构赋值、扩展操作符

    为了加深对解构赋值和扩展操作符概念的理解,今天随我来归纳总结一番 解构赋值 解构赋值可以快速的取得数组或对象中的元...

  • ES6之后的新语法

    ES6 类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符 对象属性简写 Promise Le...

  • 深入理解ES6五

    对象解构 对象解构的语法:在赋值操作符(=)左边放置一个对象字面量 对象的解构赋值:由于代码块语句不允许出现在赋值...

  • ES6,ES7,ES8,ES9,ES10新特性

    ES6新特性 一些常用新特性 类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符 对象属性简写...

  • es6 及 es6+ 的能力集,你最常用的,这其中最有用的,都解

    我最常用的 ES6 的特性是使用最多的,包括类、模块化、箭头函数、函数参数默认值、模板字符串、解构赋值、延展操作符...

网友评论

      本文标题:延展操作符和解构赋值

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