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 ...
随机推荐
- docker镜像文件的导入与导出（docker镜像迁移）
1.查看镜像ID # docker images [root@localhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE myto ...
- Android通过包名启动其他应用，若该应用已启动，则直接将应用切到前台
CommUtil.startActivityForPackage(mContext, "com.autonavi.minimap");//打开高德 CommUtil.java /* ...
- vue 创建单文件组件 注册组件 以及组件的使用
<template> <div id="app"> <v-home></v-home> <hr > <br> ...
- Centos 6.5(64位) vim 8.0 安装
转自:https://blog.csdn.net/sdoyuxuan/article/details/78825912 1 先得安装nurses库 yum list | grep "ncur ...
- RAC集群安装校验输出信息
RAC集群安装校验输出信息 作者:Eric 微信:loveoracle11g [grid@rac-node1 grid]$ [grid@rac-node1 grid]$ ./runcluvfy.sh ...
- cocos源码分析--绘制顺序LocalZOrder、GlobalZOrder、OrderOfArrival
使用规则 节点的渲染顺序跟节点的三个成员变量有关(_localZOrder._globalZOrder._orderOfArrival)分别对应三个设置函数setLocalZOrder.setGlob ...
- three.js学习：初学three.js，从立方体开始
目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看).好了,根据W ...
- 提示：pip install --upgrade pip
安装模块时报错了,提示我需要更新pip,如下所示: 但是使用pip install --upgrade pip时依然报这个错,原来是命令应该这样写: python -m pip install -U ...
- 零基础学习python_生成器（49课）
一个生成器函数的定义很像一个普通的函数,除了当它要生成一个值的时候,使用yield关键字而不是return.如果一个def的主体包含yield,这个函数会自动变成一个生成器(即使它包含一个return ...
- android 开发 实现一个app的引导查看页面(使用ViewPager组件)
我们安装完app后第一次打开app,通常都会有一个翻页图片形式的app引导简介说明.下面我们来实现这个功能.ViewPager这个组件与ListView和RecyclerView在使用上有很高的相似处 ...