Javascript 这三个点的作用是什么?
Javascript 这三个点的作用是什么?,javascript,reactjs,spread-syntax,Javascript,Reactjs,Spread Syntax,…在这个React(使用JSX)代码中做了什么?它叫什么 <Modal {...this.props} title='Modal heading' animation={false}> 那太好了。它是在ES2018中添加的(阵列/iterables的扩展更早,ES2015),但它在React项目中通过transfilation得到了很长时间的支持(作为“”,尽管您也可以在其他地方进行,而不仅仅是属性) {…this.props}将props中的“自己的”可枚举属性作为正在创建的M
…
在这个React(使用JSX)代码中做了什么?它叫什么
<Modal {...this.props} title='Modal heading' animation={false}>
那太好了。它是在ES2018中添加的(阵列/iterables的扩展更早,ES2015),但它在React项目中通过transfilation得到了很长时间的支持(作为“”,尽管您也可以在其他地方进行,而不仅仅是属性)
{…this.props}
将props
中的“自己的”可枚举属性作为正在创建的Modal
元素上的离散属性展开。例如,如果this.props
包含a:1
和b:2
,则
<Modal {...this.props} title='Modal heading' animation={false}>
。首先{
颜色:绿色;
}
.第二{
颜色:蓝色;
}
JavaScript中的三个点是扩展/rest操作符 扩展运算符 允许在需要多个参数的位置展开表达式
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
休息参数
this.props =
{
firstName: 'Dan',
lastName: 'Abramov',
city: 'New York',
country: 'USA'
}
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
var games = [...shooterGames, ...racingGames];
console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout']
var myCrush = {
firstname: 'Selena',
middlename: 'Marie'
};
var lastname = 'my last name';
var myWife = {
...myCrush,
lastname
}
console.log(myWife); // {firstname: 'Selena',
// middlename: 'Marie',
// lastname: 'my last name'}
参数语法用于参数数目可变的函数
function(a, b, ...theArgs) {
// ...
}
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
中介绍了阵列的扩展/静止运算符。对象排列/静止属性有状态2
TypeScript还支持扩展语法,并可以使用minor将其转换为旧版本的ECMAScript。三个点(…)
称为扩展运算符,这在概念上类似于ES6数组扩展运算符JSX
利用这些受支持和正在开发的标准,以便在JSX中提供更清晰的语法
对象初始值设定项中的扩展属性复制自己的可枚举项
属性从提供的对象复制到新创建的对象上
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }
参考资料:
…
称为扩展属性,其名称表示允许扩展表达式
var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
在这种情况下(我将简化它)
这:
等于
<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
简而言之,我们可以说,这是一条简洁的捷径。这是ES6的一个特性,它也用于React。请看下面的示例:
function Sum(x, y, z) {
return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6
如果我们最多有三个参数,这种方法就可以了。但是,如果我们需要添加,例如,110个参数呢。我们是否应该定义它们并逐个添加它们
当然,还有一种更简单的方法,称为扩展。
而不是传递您编写的所有这些参数:
function (...numbers){}
我们不知道我们有多少参数,但我们知道有很多参数
基于此,我们可以将上述函数重写如下,并使用它们之间的扩展和映射,使其变得非常简单:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45
对于那些来自Python世界的人来说,JSX扩展属性相当于 (Python
**
-运算符)
我知道这是一个JSX问题,但使用类比有时有助于加快速度。这只是在JSX中以不同的方式定义道具 它在ES6中使用了
…
数组和对象操作符(对象一还不完全支持),因此基本上,如果您已经定义了道具,您可以通过这种方式将其传递给元素
因此,在您的情况下,代码应该是这样的:
function yourA() {
const props = {name='Alireza', age='35'};
<Modal {...props} title='Modal heading' animation={false} />
}
function HelloUser() {
const props = {Name: 'ABC', City: 'XYZ'};
return <Hello {...props} />;
}
函数yourA(){
const props={name='Alireza',age='35'};
}
因此,您定义的道具现在已分离,如果需要,可以重复使用
等于:
function yourA() {
<Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}
函数yourA(){
}
以下是React团队在JSX中对spread operator的引用:
JSX扩展属性
如果您知道要放置在零部件上的所有特性
提前使用JSX很容易:
var组件=;
变异道具不好如果您不知道要设置哪些属性,您可能会在以后尝试将它们添加到对象中:
var组件=;
component.props.foo=x;//坏的
component.props.bar=y;//也不好
这是一个反模式,因为这意味着我们无法帮助您检查
正确的道具类型,直到以后。这意味着你的道具类型
错误以一个神秘的堆栈跟踪结束
这些道具应该被认为是不可变的。改变道具对象
在其他地方可能会造成意想不到的后果,所以理想情况下它会
此时将成为冻结对象
扩展属性现在您可以使用JSX的一个新功能,称为扩展属性:
var-props={};
props.foo=x;
props.bar=y;
var分量=;
传入的对象的特性将复制到
组件的道具
可以多次使用此属性,也可以将其与其他属性组合使用。
规格顺序很重要。稍后的属性覆盖
以前的
var-props={foo:'default'};
var分量=;
console.log(component.props.foo);/'覆盖'
奇怪的是什么。。。符号?表示。。。ES6中的阵列已支持运算符(或扩展运算符)。还有 对象静止和排列属性的ECMAScript建议。我们是 利用这些支持和开发的标准 在JSX中提供更清晰的语法 这是和声中的一个新功能。它被称为扩展运算符
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // Output: Alex
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
它允许您分离数组/对象的组成部分,或者获取多个项/参数并将它们粘合在一起。
以下是一个例子:
let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array
并使用对象/键:
// Let’s pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// This is equal to <MyComponent myKey=5 myOtherKey=7 />
用于以简单方式传递多个属性的排列属性
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var [first, ...remaining] = shooterGames;
console.log(first); //Call of Duty
console.log(remaining); //['Far Cry', 'Resident Evil']
function fun1(...params) {
}
{…this.props}持有this.props的属性
将{…}扩展运算符与下面的道具一起使用
this.props =
{
firstName: 'Dan',
lastName: 'Abramov',
city: 'New York',
country: 'USA'
}
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
var games = [...shooterGames, ...racingGames];
console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout']
var myCrush = {
firstname: 'Selena',
middlename: 'Marie'
};
var lastname = 'my last name';
var myWife = {
...myCrush,
lastname
}
console.log(myWife); // {firstname: 'Selena',
// middlename: 'Marie',
// lastname: 'my last name'}
没有{…}排列
带有{…}排列
<ChildComponent username={this.props.username} email={this.props.email} />
let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7, 8, ...a];
console.log(b);
console.log(c);
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
var games = [...shooterGames, ...racingGames];
console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout']
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var [first, ...remaining] = shooterGames;
console.log(first); //Call of Duty
console.log(remaining); //['Far Cry', 'Resident Evil']
var myCrush = {
firstname: 'Selena',
middlename: 'Marie'
};
var lastname = 'my last name';
var myWife = {
...myCrush,
lastname
}
console.log(myWife); // {firstname: 'Selena',
// middlename: 'Marie',
// lastname: 'my last name'}
function fun1(...params) {
}
const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)
const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)
var component = <Component foo={x} bar={y} />;
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;
var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';
var ab = { ...a, ...b }; // merge(a, b)
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
const SomeStyle = {
margin: 10,
background: #somehexa
}
let hello={name: '',msg:''}
let hello1={...hello}
function HelloUser() {
return <Hello Name="ABC" City="XYZ" />;
}
function HelloUser() {
const props = {Name: 'ABC', City: 'XYZ'};
return <Hello {...props} />;
}
React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)
let person= {
name: 'Alex',
age: 35
}
person1 = person;
person1.name = "Raheel";
console.log( person.name); // Output: Raheel
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // Output: Alex
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
doStuff(...args);
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
const [myState, setMyState] = useState({
variable1: 'test',
variable2: '',
variable3: ''
});
setMyState({...myState, variable2: 'new value here'});
const user = {
"name"=>"Joe",
"age"=>"50"
"test"=>"test-val"
};
<UserTag name="Supun" gender="male" {...user} age="66" />
<UserTag name="Joe" gender="male" test="test-val" age="66" />
var peaks = ["Tallac", "Ralston", "Rose"]
var canyons = ["Ward", "Blackwood"]
var tahoe = [...peaks, ...canyons]
console.log(tahoe.join(', ')) // Tallac, Ralston, Rose, Ward, Blackwood
var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]
var [first, ...rest] = lakes
console.log(rest.join(", ")) // "Marlette, Fallen Leaf, Cascade"
function directions(...args) {
var [start, ...remaining] = args
var [finish, ...stops] = remaining.reverse()
console.log(start, finish)
}
var morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
...morning,
dinner
}
console.log(backpackingMeals) // {breakfast: "oatmeal", lunch: "peanut butter and jelly", dinner: "mac and cheese"}
//Passing elements of the array as arguments to the Math Object
const arr = [1,2,500,-1,.20,0,-10];
console.log(Math.min(...arr));
console.log(Math.max(...arr));