es6 初级之展开运算符
1.1 先看一个求最大值的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
let val1 = 70,
val2 = 20;
console.log(Math.max(val1, val2)); // 70
</script>
</head>
<body>
</body>
</html>
1.2. 传入一个数组求最大值呢？
let arr = [1, -2, 3, 0, 44];
console.log(Math.max(arr)); //NaN, max函数不支持数组参数
1.3 伪装成数组来使用呢，调用apply或者call ，两者都可以达到伪装的目的，只是参数不同，apply 参数是数组或者arguments；call的参数是一个一个的参数，这里是数组，所以使用apply
let arr = [1, -2, 3, 0, 44];
// 把arr传递给Math对象，然后调用Math.max()函数，这样实现对数组最大值的查找
console.log(Math.max.apply(Math, arr));
1.4 使用es6 展开运算符：也可以达到目的，而且还简单一点，不用去伪装
let arr = [1, -2, 3, 0, 44];
console.log(Math.max(...arr));
2.1 数组计算：（arguments 是传入参数的一个类数组）
function add() {
var sum = 0;
for (var i = 0, len = arguments.length; i < len; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20, 30));
2.2 数组计算改写成数组展开运算符：
function add(...values) {
console.log(values); // [10, 20, 30, 40]
let sum = 0;
for (let i = 0, len = values.length; i < len; i++) {
sum += values[i];
}
return sum;
}
var res = add(10, 20, 30, 40);
console.log(res); //
3. 展开运算符：不定参数的位置定义
3.1 不定参数只能放在最后面
function add(...keys, last) { //报错
}
3.2 不定参数可以和其他参数搭配使用
function add(last, ...keys) { //不定参数一定要放在最后面
console.log(last, keys);
console.log(last);
console.log(keys);
}
add(10, 20, 30, 40);
3.2.2 多个参数
function add(first, last, ...keys) { //不定参数一定要放在最后面
console.log(last, keys);
console.log(first);
console.log(last);
console.log(keys);
}
add(10, 20, 30, 40);
3.3 不定参数只能有一个
function add(...keys1, ...keys2) { //报错 不定参数 不能出现2个(包含2个)
}
4. 过滤性拷贝一个对象的属性（使用arguments）
一个对象有很多属性，有的时候，我们只想知道其中的部分属性，别的并不关心，所以就只需要传入关心的属性就可以了
思路：
4.1 建立一个对象，包含无数属性和方法，例如下面的user
4.2 写一个方法，对属性过滤的过程进行定义，例如下面的函数 pick()
4.2.1 建立一个新对象target
4.2.2 对传入的arguments 进行循环，从第一个参数开始（因为第0个参数是对象本身，所以去除）
4.2.3 把传入参数的对应对象的属性值，挨个的保存到新创建的对象target中
4.2.4 最后返回target 对象
备注：这里src 是把传入的arguments 当做一个对象，而这个对象的属性分别是arguments 中的值，对象调用属性src--->arguments[i]，然后得到属性值src[ argument[ i ] ]，然后把这个值src[ argument[ i ] ]赋值给对象target ，此时顺便把target的属性也一并创建了，因为值是挂在对象的属性上的。当循环完毕，target 也成了一个完整的有实体属性的对象了，返回这个新建的对象，就达到了顾虑的目的了
//过滤性的拷贝一个对象的属性
function pick(src) {
let target = Object.create(null); //创建一个空对象,跟new Object不同
for (let i = 1, len = arguments.length; i < len; i++) {
target[arguments[i]] = src[arguments[i]];
}
return target;
}
let user = {
name: 'huanying2015',
hobit: 'running',
age: 25,
sex: 'man',
};
var obj = pick(user, 'name', 'age'); //拷贝user对象的name和age属性
console.log(obj); //{name: "huanying2015", age: 25}
5. 过滤性拷贝一个对象的属性（使用展开运算符）：与上面的效果相同，只是这里就不能使用arguments了，使用keys 更方便，直接从第0个开始遍历
function pick(src, ...keys) {
console.log(keys); //['name','age'];
let target = Object.create(null);
for (let i = 0, len = keys.length; i < len; i++) {
target[keys[i]] = src[keys[i]];
}
return target;
}
let user = {
name: 'huanying2015',
hobit: 'running',
age: 25,
sex: 'man',
};
var obj = pick(user, 'name', 'age');
console.log(obj); //{name: "huanying2015", age: 25}
6. arguments 和 keys 的差异：（仅针对本页面）
6.1 初始状态：
function show(...keys) {
console.log(keys.length); //
console.log(arguments.length); //
console.log(keys[0], keys[1], keys[2]); // 10,20,30
console.log(arguments[0], arguments[1], arguments[2]); //10,20,30
}
show(10, 20, 30);
6.2 在函数中改变keys 的值
function show(...keys) {
console.log(keys.length); //
console.log(arguments.length); //
keys[0] = 1000; //不定参数的修改，不会影响arguments
console.log(keys[0], keys[1], keys[2]); // 1000,20,30
console.log(arguments[0], arguments[1], arguments[2]); //10,20,30
}
show(10, 20, 30);
7. 关于new Object() 和 Object.create(null) 的差异
var obj = new Object(); //不要天真的以为，他就是空对象， 他有Object原型上的东西
console.log(obj); var obj = Object.create(null);
console.log(obj); //create传了null, 什么也没有的空对象
es6 初级之展开运算符的更多相关文章
- ES6中的展开运算符和解构对象
let obj = { a:1 b:2 } let obj2 = { ...obj c:3 d:4 } console.log(obj2)//1,2,3,4,对象展开 //常考题目 let a = 1 ...
- ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用
展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...
- ES6之展开运算符
本文介绍ES6新增的展开运算符(spread operator). 由上图可得,展开运算符负责拼装数组和对象,与之相反,解构赋值负责分解数组和对象. 由上图可得,展开运算符能和解构赋值一起发挥成更大的 ...
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- [转] ES6展开运算符
语法 用于函数调用 myFunction(...iterableObj); 用于数组字面量 [...iterableObj, 4, 5, 6] 函数传参 目前为止,我们都是使用Function.pro ...
- javascript es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- es6展开运算符
数组的展开合并 现在有两个数组[1, 2, 3, 4]和[5, 6, 7],想要将两个函数拼接成一个新的函数. //es5的写法 let arr1 = [1, 2, 3, 4]; let arr2 = ...
- ES6展开运算符数组合并，函数传参
定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...
- ES6箭头函数与展开运算符
箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...
随机推荐
- FTP的应用
创建共享文件,并删除 cd /var/ftp/---------------------(切换到ftp目录下) mkdir aaaaa-------------------(创建aaaaa目录) ll ...
- [UE4]Tool Tip - 提示信息
一.每一个Widget都有Tool Tip,在运行时鼠标移动到UI上,就会显示填写的Tool Tip文字 二.Toop Tips的字体样式和大小不可更改.但是可以Tool Tip可以绑定到一个Wi ...
- centos 7 修改host文件
centos7与之前的版本都不一样,修改主机名在/ect/hostname 和/ect/hosts 这两个文件控制 首先修改/etc/hostname vi /etc/hostname 打开之后的内容 ...
- 对象生命周期中至少被GC一次后存活
Finalize调用流程:GC时,当对象变成(GC Roots)不可达时,若该对象覆盖(重写)了finalize方法并且未执行过finalze方法,则将其放入F-Queue队列,由一低优先级线程执行该 ...
- Unicode String to a UTF-8 TypedArray Buffer in JavaScript
https://coolaj86.com/articles/unicode-string-to-a-utf-8-typed-array-buffer-in-javascript/
- OOP学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android收发短信
效果:点击发送短信开始发送短信 收到短信时将短信的内容显示出来 代码如下: 一.权限声明 <uses-permission android:name="android.permissi ...
- opencv 基础数据结构
头文件:cxcore/include/cxtypes.h CvPoint: CvPoint:(构造cvPoint) CvPoint2D32f: CvPoint3D32f: CvSize: CvSize ...
- MySQL存储过程 事务transaction
MySQL 中,单个 Store Procedure(SP) 不是原子操作,而 Oracle 则是原子的.如下的存储过程,即使语句2 失败,语句 1 仍然会被 commit 到数据库中: create ...
- cas server
Tomcat: V8.5.x Java: 1.8 x64 MySQL: 5.5.x OS: Win10 x64 I. war 0. clone git clone https://github.com ...