[技巧]深入了解强大的 ES6 「 ... 」 运算符
...
运算符,是 ES6
里一个新引入的运算法,也叫 展开/收集运算符,我们每天都要和它打交道。
Spread syntax allows an iterable, such as an array expressionor string, to be expanded in places where 0 or more argumentsor elementsare expected or an object expressionto be expanded in places where 0 or more key-value pairs (for object literals) are expected.
基础用法
基础用法 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]
“A function’s last parametercan be prefixed with ... which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array. Only the last parameter can be a rest parameter.”
Remember that the rest parameter must be the last parameter, or an errorwill occur.
基础用法 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: [] } ]
[技巧]深入了解强大的 ES6 「 ... 」 运算符相关推荐
- 解决Apple Watch 更新时出现红色感叹号「!」的问题
5 月 25 日凌晨, 除 iOS 14.6 与 iPadOS 14.6 正式版外 ,苹果还发布了 watchOS 7.5 正式版更新,版本号为 18T567. 许多朋友是不是迫不及待的想要更新自己的 ...
- simplexml php,PHP 使用 SimpleXML 遇到冒号「:」的解法
PHP 使用 SimpleXML 来解析 XML 很方便,解析 RSS 也是轻松愉快,不过要解析 WordPress 的 RSS 时,遇到 XML Tag 的名称有「:」,造成解析不到,要怎么解决呢? ...
- 「あるいは」 「もしくは」 「または」 「それとも」的区别
「もしくは」:若しくは (接続詞)二つの中からどちらか一つを選択する. 私鉄-地下鉄が便利です/私营铁路列车或者地铁方便. お申し込みは電話-ファックスでどうぞ/报名请用电话或传真. 「あるいは」:或 ...
- 日语学习 「そっと」 和 「こっそり」 的区別
http://blog.hjenglish.com/seton/archive/2010/11/22/1648666.html 「そっと」は人に迷惑をかけずに?远虑しながらといったニュアンスがあり. ...
- 日语学习 「バージョン」 version と 「リビジョン」 revision
来源:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q128337172 「バージョン」は「版」と言う意味で.ソフトウェアの機能が異な ...
- 总结一下强大的ES6符号
总结一下强大的ES6符号 空值合并运算符 '??' 第一个参数不是 null/undefined,则 ?? 返回第一个参数.否则,返回第二个参数. result = a ?? b,可以理解为这样: r ...
- 日本語 紜本「えほん」中国語 3-4
3.スプーンちゃん [読み聞かせ]「よみきかせる」 读给别人听 小西英子「こにしえこ」 さく 「作品」 スプーンちゃん プリン たべのる プリリン リン 「布丁 吃 P ...
- 柯桥日语培训:语法 | 「あまり 」知识解析
语法 | 「あまり 」知识解析 あまり 译文:过于...太... 接续:用言/助动词连体形/体言の+あまり 例句: 子供こどもに期待きたいするあまり.小言こごとが多おおくなってしまったと反省はんせい ...
- 「ことから」と「ことだから」
動詞・形容詞:普通形<ナ形ーな> + ことから [ことから]由表"根据"或"理由"的「から」派生而成.比如例1,2表"判断的根据或理由&q ...
- 【日本語勉強】「モデレート」とはどういう意味になるのでしょうか
仕事でパソコンを操作していると.またひとつちょっと気になるカタカナ英語を目にしました. 「モデレートしてください」 もでれーと... この「モデレート」とはどういう意味になるのでしょうか? ちょっと気 ...
最新文章
- 【Qt】ubuntu14.04+qt5.6+opencv2.4编程注意事项
- javascript中作用域,优先级等等问题, 求助中。。。。。。。。
- ios purelayout--基础使用--进阶使用--看这就够了
- LVM使用手册简化命令
- 蛋白质折叠的霰弹枪方法
- 中国互联网+政务建设发展现状及市场规模预测报告2022-2027年版
- Java中四种访问修饰符的区别
- keras入门之手写字识别python代码
- .NET或将引入类型类和扩展
- idea 配置jdk版本_JDK 11 安装过程(同时已安装了JDK 8)以及Intellij IDEA 配置
- 用Unity的Animation播放Animator动画Clip
- 最近两周的前后端交互
- 树莓派 4b 可执行文件 无法双击运行_树莓派01 - 树莓派系统安装
- NETDOM的几个用法
- 认识接口(Interface)设计
- chrome控制台如何把vw显示成px_Python + selenium + Chrome 模拟登陆QQ邮箱,批量下载附件,本地重命名
- c51单片机时钟c语言程序设计,51单片机C编程(六、定时器时钟显示时分秒)
- WIN10企业版未激活如何解决
- XMind 8 安装与激活
- Python安装包(3.6和3.8)及Pycharm安装及汉化包
热门文章
- 搜狗站长工具【post请求模拟登录】代码分享总结【批量提交搜狗收录网址】
- win10声音输出设备选择声卡步骤
- Windows注册表详解
- 魂斗罗进化革命 塞班JAVA版_魂斗罗之进化革命_JAVA游戏免费版下载_7723手机游戏[www.7723.cn]...
- 又一名程序员猝死,送给996的程序员一份身体健康指南电子书!
- 杭州电子科技大学计算机学院院长,杭州电子科技大学计算机学院导师教师师资介绍简介-彭勇...
- 『开发』小程序通过易班接口登陆并请求数据
- latex中脚注内容不显示
- 强强联合!蚂蚁金服与新炬网络战略合作,共同致力于国产数据库的技术推广和生态建设...
- Data Binding 详解(一)-从零开始