扩展运算符和rest运算符
扩展运算符
扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
一、拆分数组
扩展运算符可以直接把数组拆分成用逗号隔开的值
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
val: [1, 2, 3]
};
},
methods: {
get() {
// 之前的写法
this.change(this.val[0], this.val[1], this.val[2]);
console.log('-----');
// 扩展运算符写法
this.change(...this.val);
},
change(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
}
};
</script>
二、数组深拷贝
可以使用扩展运算符特性进行数组的深拷贝
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
val: [1, 2, 3]
};
},
methods: {
get() {
let arr1 = [1, 2, 3];
let arr2 = arr1;
let arr3 = [...arr1];
console.log(arr1 === arr2); // true, 说明arr和arr2指向同一个数组
console.log(arr1 === arr3); // false, 说明arr3和arr指向不同数组
}
}
};
</script>
三、数组合并
扩展运算符可以进行数组的合并,把其他的东西合并成一个新的数组
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
val: [1, 2, 3]
};
},
methods: {
get() {
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2);
}
}
};
</script>
四、字符串转数组
扩展运算符可以直接把字符串拆分用逗号分隔开的数组
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
val: [1, 2, 3]
};
},
methods: {
get() {
let str = 'love';
let arr = [...str];
console.log(arr);
}
}
};
</script>
rest运算符
rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组
一、直接合并成数组
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
get() {
this.show(1, 2, 3, 4);
},
show(...val) {
console.log(val);
}
}
};
</script>
二、部分合并成数组
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
get() {
this.bar(1, 2, 3, 4);
},
bar(a, ...b) {
console.log(a);
console.log(b);
}
}
};
</script>
三、利用解构来合成数组
<template>
<section class="p-10">
<el-button type="danger" @click="get()">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
get() {
let [a, ...b] = [1, 2, 3, 4];
console.log(a);
console.log(b);
}
}
};
</script>
小结:
等号表达式是典型的赋值形式,函数传参和for循环的变量都是特殊形式的赋值。解构的原理是赋值的两边具有相同的结构,就可以正确取出数组或对象里面的元素或属性值,省略了使用下标逐个赋值的麻烦。
对于三个点号,三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符,或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符。
一点经验:
- 在调用第三方函数的时候,如果该函数接受多个参数,并且你要传入的实参为数组,则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。
- rest运算符使用场景应该稍少一些,主要是处理不定数量参数,可以避免arguments对象的使用。
嗯,就酱~~
参考: http://www.cnblogs.com/chrischjh/p/4848934.html
扩展运算符和rest运算符的更多相关文章
- ES6系列_4之扩展运算符和rest运算符
运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁. 运算符有两种:对象扩展运算符与rest运算符. 1.对象扩展( spread)运算符(...) (1)解决参数个数 ...
- Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)
0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...
- ES6-扩展运算符和rest运算符
es6-扩展运算符和rest运算符 扩展运算符:不确定他的参数个数时使用运算扩展符 // 声明一个方法 但不确定他的参数个数时使用对象运算扩展符 function ananiha(...arg){ c ...
- js之运算符其它运算符(三元运算符,逗号运算符,void运算符,typeof,delete运算符)
Javascript支持很多其它的运算符,具体如下: 一.条件运算符(?:) 条件运算符是Javascript中唯一的三个操作数的三元运算符,有时会直接称做是“三元运算符”. 基本格式:conditi ...
- 窥探Swift之需要注意的基本运算符和高级运算符
之前更新了一段时间有关Swift语言的博客,连续更新了有6.7篇的样子.期间间更新了一些iOS开发中SQLite.CollectionViewController以及ReactiveCocoa的一些东 ...
- Java的算数运算符、关系运算符、逻辑运算符、位运算符
JAVA的运算符,分为四类: 算数运算符.关系运算符.逻辑运算符.位运算符 算数运算符(9):+ - * / % ++ -- 关系运算符(6):== != > >= & ...
- PHP中的运算符---位运算符、递增递减运算符、三元运算符、字符串运算符、数组运算符、类型运算符、错误控制运算符
1.位运算符 位运算符用来对整型数的指定位进行置位,如果被操作数是字符串,则对该字符串的ASCII码值进行操作. 运算类型 运算符 举例 结果 按位与 & $a & $b 将$a 与 ...
- PHP运算符:算数运算符、逻辑运算符、三目运算符、位运算符、字符串运算符。
赋值运算符 PHP 赋值运算符用于向变量写值. PHP 中基础的赋值运算符是 "=". 这意味着右侧复制表达式会为左侧运算数设置值. _______________________ ...
- tips instanceof运算符和typeof运算符的区别
tips instanceof运算符和typeof运算符的区别 一.instanceof运算符: 此运算符可以判断一个变量是否是某个对象(类)的实例,返回值是布尔类型的(true和fal ...
- JAVA元运算符,一元运算符,二元运算符,三元运算符
一元运算符: 序号 一元运算符 说明 1 i++ 给i加1 2 i-- 给i减1 3 ++i 给i加1 4 --i 给i减1 i++;/*例:int i=1;i++;//先将i的值1赋值给i,然后i再 ...
随机推荐
- YII用户注冊和用户登录(五)之进行session和cookie分析 ,并在前后区分session和cookie
5 进行session和cookie分析 ,并在前后区分session和cookie: 记住登录状态 这样下次再登录站点的时候.就不用反复输入username和password. 是浏览器的cooki ...
- Zabbix触发器函数(取前后差值)
获取最新值last zabbix触发器方法last用于获取item最新值或者第几个值以及某个时间的哪一个值. Last (most recent) T value is > N Last (mo ...
- lucene 异常 Lock obtain timed out 解决方法
http://terje.blog.163.com/blog/static/119243712008102122316595/ 一般都是索引建立的过程中,不正常操作影响了IndexWriter ...
- Sql Server2005 Synonyms
1. 同义词(SYNONYM)是SQL Server 2005中新特性 它是一种对已有的或潜在的新对象给予的别名.可以在同一个数据库或者跨数据中中使用这个别名,这个别名替代了原有对象.可以建别名的对象 ...
- Shift Register
/*************************************************** / Shift Register module / Programing by seong ...
- OCR 即 光学字符识别
OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形状翻译 ...
- dp解Codeforces Round #260 (Div. 2)C. Boredom
#include<iostream> #include<map> #include<string> #include<cstring> #include ...
- mysql的binlog和slow_log慢日志
redo undo 锁 ----------------------------------------- 日志管理 log-error=/var/log/mysql.log 二进制日志的“总闸” 作 ...
- Linux 总结2
cd pwd mkdir ...
- fedora上安装sun jdk
系统被来就有openjdk,但是开发工具需要sun的jdk,于是下载一个压缩包并解压到一个位置.使用alternative命令切换 alternatives --.0_79/jre/bin/java ...