价差运算符和其余参数
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
- 英文版 -
有很多页面解释了扩展运算符（也称为三个点）和剩余参数是什么。
我非常喜欢这个运算符，我想和大家分享一下我的一些使用方法。
📓价差交易员
let numbers = [1, 2, 3, 4];
console.log( numbers );
// => [ 1, 2, 3, 4 ] (print as array)
当我们使用扩展运算符时，我们可以独立地获得各个值：
let numbers = [1, 2, 3, 4];
console.log( ...numbers );
// => 1 2 3 4
将一个数组添加到另一个数组中：
let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];
customers.push( ...otherCustomers );
console.log( customers );
// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
连接数组：
let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];
let concatCustomers = [ ...customers, ...otherCustomers ];
console.log( concatCustomers );
// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
这种情况也会发生在物体上：
const userData = {
name: 'Jesús',
surname: 'Cano',
age: 8
}
const userAdrress = {
address: 'C/ Gran Vía',
number: 34
}
const data = { ...userData, ...userAdrress };
console.log( data );
// => (Output)
// {
// name: 'Jesús',
// surname: 'Cano',
// age: 8,
// address: 'C/ Gran Vía',
// number: 34
// }
对对象进行解构：
const userData = {
name: 'Jesús',
surname: 'Cano',
age: 8
}
const userAdrress = {
address: 'C/ Gran Vía',
number: 34
}
let myObject = { ...userData, ...userAdrress };
let { name, address } = { ...myObject };
console.log( 'Name:', name, 'Address:', address );
// => Name: Jesús Adrress: C/ Gran Vía
清理数组中的重复元素：
let numbers = [ 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 6, 7 ];
let mySelect = new Set( numbers );
numbers = [ ...mySelect ];
console.log( numbers );
// => [1, 2, 3, 4, 5, 6, 7]
📓其余参数
扩展运算符也可以用作剩余参数，即传递给 JavaScript 函数并形成数组的剩余参数。
const person = ( name, ...qualities ) => {
console.log(`${name}'s qualities are: `);
qualities.map( quality => {
console.log( quality );
});
}
person( 'Jaime', 'Sympathetic', 'Nice', 'Affective', 'Talkative' );
// => (Output)
// Jaime's qualities are:
// Sympathetic
// Nice
// Affective
// Talkative
如上所示，其余参数必须放在最后，否则会出错。
const sumNumbers = ( ...args ) => {
return args.filter( e => typeof e === 'number' )
.reduce( (prev, curr) => prev + curr );
};
const result = sumNumbers( 1, null, 'fullstack', 5, undefined, 2 );
console.log( result );
// => 8
可能性无穷无尽😃
🔍 推荐阅读
- MDN Web Docs Javascript - 扩展运算符
- 如何在 JavaScript 中使用扩展运算符 (…)
- MDN Web 文档 Javascript - REST 参数
- Javascript.info - 剩余参数 / 扩展
感谢阅读🙏
🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub
- Versión en Español -
该页面有很多解释性的扩展操作符（también conocido como operador de los tres puntos）和剩余参数。
Es un operador que me gusta mucho y me gustaría compartir con vosotros alguna de las situaciones que suelo utilizarlo 😊
📓价差交易员
let numeros = [1, 2, 3, 4];
console.log( numeros );
// => [ 1, 2, 3, 4 ] (se imprime como un array)
使用 Spread Operator 可以获得独立的价值：
let numeros = [1, 2, 3, 4];
console.log( ...numeros );
// => 1 2 3 4
使用其他方法：
let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];
clientes.push( ...otrosClientes );
console.log( clientes );
// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
连接数组：
let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];
let concatenaClientes = [ ...clientes, ...otrosClientes ];
console.log( concatenaClientes );
// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
您可以使用以下对象：
const datosUsuario = {
nombre: 'Jesús',
apellido: 'Cano',
edad: 8
}
const direccionUsuario = {
direccion: 'C/ Gran Vía',
numero: 34
}
const datos = { ...datosUsuario, ...direccionUsuario };
console.log( datos );
// => (Output)
// {
// nombre: 'Jesús',
// apellido: 'Cano',
// edad: 8,
// direccion: 'C/ Gran Vía',
// numero: 34
// }
对象的破坏：
const datosUsuario = {
nombre: 'Jesús',
apellido: 'Cano',
edad: 8
}
const direccionUsuario = {
direccion: 'C/ Gran Vía',
numero: 34
}
let miObjeto = { ...datosUsuario, ...direccionUsuario };
let { nombre, direccion } = { ...miObjeto };
console.log( 'Nombre:', nombre, 'Dirección:', direccion );
// => Nombre: Jesús Dirección: C/ Gran Vía
在数组中重复重复的元素：
let numeros = [ 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 6, 7 ];
let miSeleccion = new Set( numeros );
numeros = [ ...miSeleccion ];
console.log( numeros );
// => [1, 2, 3, 4, 5, 6, 7]
📓其余参数
Spread 运算符可以利用Rest 参数，通过 javascript 函数恢复参数，并形成数组。
const persona = ( nombre, ...cualidades ) => {
console.log(`Las cualidades de ${nombre} son: `);
cualidades.map( cualidad => {
console.log( cualidad );
});
}
persona( 'Jaime', 'Simpático', 'Agradable', 'Afectivo', 'Charlatán' );
// => (Output)
// Las cualidades de Jaime son:
// Simpático
// Agradable
// Afectivo
// Charlatán
在此版本中，其余参数已设置为最终值，但其他操作均无错误。
const sumaNumeros = ( ...args ) => {
return args.filter( e => typeof e === 'number' )
.reduce( (prev, curr) => prev + curr );
};
const resultado = sumaNumeros( 1, null, 'fullstack', 5, undefined, 2 );
console.log( resultado );
// => 8
无限可能 😃
🔍 推荐阅读
- Entendiendo Spread 运算符 - Platzi
- MDN Web 文档 - 展期运算符
- 操作员传播 - Desarrolloweb
- MDN Web 文档 - REST 参数
- W3 Club 文档 - REST 参数
感谢阅读 🙏
🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub