使用 ES6 的展开运算符简化传递 props 数据的过程|学习笔记

简介: 快速学习使用 ES6 的展开运算符简化传递 props 数据的过程

开发者学堂课程【React 入门与实战使用 ES6 的展开运算符简化传递 props 数据的过程】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8089


使用 ES6 的展开运算符简化传递 props 数据的过程


一、ES6 展开运算符

1.举例一

const dog = {

name:’大黄’,

age:3,

gender:’

}

//3.调用 render 函数渲染 jsx XML HTML 严格多了

ReactDOM.render(

123

{/*直接把 组件的名称,以标签的形式,放到页面即可 */}

{/*  */ }

,document.getElementById(‘app’))

image.png

2.举例二

var o2 = (

age:22,

address:’中国北京

phone:’13999’,

}

var o1 = {

name: ‘zg’,

...o2

}

console.log(o1)

相关文章
|
6月前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
42 5
|
6月前
【建议】强烈推荐ES6函数自由传参的写法,针对方法体的可扩展性很有帮助
【建议】强烈推荐ES6函数自由传参的写法,针对方法体的可扩展性很有帮助
ES6学习(3)模板字符串、简化对象和函数写法
ES6学习(3)模板字符串、简化对象和函数写法
|
4月前
ES6 扩展运算符 ...【详解】(含使用场景、实战技巧和范例、实现原理、错误用法)
ES6 扩展运算符 ...【详解】(含使用场景、实战技巧和范例、实现原理、错误用法)
50 5
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
57 1
|
6月前
|
JavaScript
js开发:请解释什么是ES6的扩展运算符(spread operator),并给出一个示例。
ES6的扩展运算符(...)用于可迭代对象展开,如数组和对象。在数组中,它能将一个数组的元素合并到另一个数组。例如:`[1, 2, 3, 4, 5]`。在对象中,它用于复制并合并属性,如`{a: 1, b: 2, c: 3}`。
46 3
|
6月前
|
存储 小程序 程序员
嵌套的方式构建
嵌套的方式构建
27 0
|
6月前
|
JavaScript 前端开发 网络架构
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
71 1
|
JavaScript 前端开发
如何把传统写法改成框架形式 es6
如何把传统写法改成框架形式 es6
50 0
|
Web App开发 JSON JavaScript
前端技术ES6新特性解构字符串扩展表达式箭头函数对象拓展运算符map 和 reduce Promise 模块化export import及Node.js
ECMAScript 6.0(以下简称 ES6,ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本程序设计语言)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了,并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是 ECMAScript6。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
84 0