... 运算符,是 ES6 里一个新引入的运算法,也叫 展开/收集 运算符,我们每天都要和它打交道。
基础用法基础用法 1: 展开const b = [1, ...a, 5] b; // [1, 2, 3, 4, 5] 基础用法 2: 收集console.log(a, b, c) } foo(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5] console.log(args) } foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
基础用法 3: 把 类数组 转换为 数组const array = [...nodeList]; console.log(nodeList); //Result: HTMLCollection [ div.test, div.test ] console.log(array); //Result: Array [ div.test, div.test ] function bar() { var args = Array.prototype.slice.call(arguments); // 调用push 加几个元素 args.push(1, 2, 3); // 把args 作为参数传递给foo foo.apply(null, args) } // ES6 时代 function foo(...args) { // 搜集参数到 args args.push(4, 5, 6) console.log(...args) // 展开args } bar(0); // 0 1 2 3 4 5 6 基础用法 4: 增加元素或属性1: 为数组新增成员const charmander = '郑伊健'; const pokedex = [...pokemon, charmander]; console.log(pokedex); //Result: [ 'KK', 'Peter', '郑伊健' ] 2: 为对象新增属性const fullSquirtle = { ...basicSquirtle, species: 'Tiny Turtle', evolution: 'Wartortle' }; console.log(fullSquirtle); //Result: { name: 'Squirtle', type: 'Water', species: 'Tiny Turtle', evolution: 'Wartortle' } 合并数组:const morePokemon = ['Totodile', 'Chikorita', 'Cyndaquil']; const pokedex = [...pokemon, ...morePokemon]; console.log(pokedex); //Result: [ 'Squirtle', 'Bulbasur', 'Charmander', 'Totodile', 'Chikorita', 'Cyndaquil' ] // 对象数组也一样: const pokemon = [ { name: 'Squirtle', type: 'Water' }, { name: 'Bulbasur', type: 'Plant' } ]; const morePokemon = [{ name: 'Charmander', type: 'Fire' }]; const pokedex = [...pokemon, ...morePokemon]; console.log(pokedex); //Result: [ { name: 'Squirtle', type: 'Water' }, { name: 'Bulbasur', type: 'Plant' }, { name: 'Charmander', type: 'Fire' } ] name: 'Squirtle', type: 'Water' }; const squirtleDetails = { species: 'Tiny Turtle Pokemon', evolution: 'Wartortle' }; const squirtle = { ...baseSquirtle, ...squirtleDetails }; console.log(squirtle); //Result: { name: 'Squirtle', type: 'Water', species: 'Tiny Turtle Pokemon', evolution: 'Wartortle' } 1. 复制具有嵌套结构的数据/对象name: 'Squirtle', type: 'Water', abilities: ['Torrent', 'Rain Dish'] }; const squirtleClone = { ...pokemon }; pokemon.name = 'Charmander'; pokemon.abilities.push('Surf'); console.log(squirtleClone); //Result: { name: 'Squirtle', type: 'Water', abilities: [ 'Torrent', 'Rain Dish', 'Surf' ] } 1、复制引用类型的数据name: 'Squirtle', type: 'Water', abilities: ['Torrent', 'Rain Dish'] }; const squirtleClone = { ...pokemon, abilities: [...pokemon.abilities] }; pokemon.name = 'Charmander'; pokemon.abilities.push('Surf'); console.log(squirtleClone); //Result: { name: 'Squirtle', type: 'Water', abilities: [ 'Torrent', 'Rain Dish' ] } 2、深克隆2. 增加条件属性name: 'Squirtle', type: 'Water' }; const abilities = ['Torrent', 'Rain dish']; const fullPokemon = abilities ? { ...pokemon, abilities } : pokemon; console.log(fullPokemon); 3. 短路name: 'Squirtle', type: 'Water' }; const abilities = ['Torrent', 'Rain dish']; const fullPokemon = { ...pokemon, ...(abilities && { abilities }) }; console.log(fullPokemon); ...pokemon, ...{ abilities } } 4. 默认结构和添加默认属性默认结构:id: 1, name: 'Squirtle' }; const { type, name } = pokemon; console.log(name); //Result: Squirtle console.log(type); //Result: undefined //Assigning default value to the type variable const { type = 'Water', name } = pokemon; console.log(type); //Result: Water 添加默认属性name: 'Squirtle', type: 'Water' }; // 给abilities默认赋值 const { abilities = [], ...rest } = pokemon; const fullSquirtle = { ...rest, abilities }; console.log(rest); //Result: { name: 'Squirtle', type: 'Water' } console.log({ fullSquirtle }); //Result: { name: 'Squirtle', type: 'Water', abilities: [] } { name: 'Charmander', type: 'Fire' }, { name: 'Squirtle', type: 'Water', abilities: ['Torrent', 'Rain Dish'] }, { name: 'Bulbasur', type: 'Plant' } ]; function setDefaultAbilities(object) { const { abilities = [], ...rest } = object; return { ...rest, abilities }; } // Applying the setDefaultAbilities function to all the pokemon in the array: const normalizedPokemon = pokemon.map(pokemon => setDefaultAbilities(pokemon)); console.log(normalizedPokemon); //Result: [ { name: 'Charmander', type: 'Fire', abilities: [] }, { name: 'Squirtle', type: 'Water', abilities: [ 'Torrent', 'Rain Dish' ] }, { name: 'Bulbasur', type: 'Plant', abilities: [] } ] |
|