es6 展开运算符

news/2024/7/11 1:28:59 标签: es6, 展开运算符

展开运算符与对象展开运算符
展开运算符(spread operator)允许一个表达式在某处展开。
展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。
iterables的实现是依靠[Symbol.iterator]函数,
而目前只有Array,Set,String内置[Symbol.iterator]方法,
而Object尚未内置该方法,因此无法使用展开运算符
不过ES7草案当中已经加入了对象展开运算符特性。

以前使用apply方法来将一个数组展开成多个参数:
function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);

如上,将args数组当作实参传递给了a,b,c,这边正是利用了Function.prototype.apply的特性。
ES6中就可以更加简洁地来传递数组参数:
function test(a,b,c) { }
var args = [0,1,2];
test(...args);
直接使用...展开运算符就可以把args直接传递给test()函数。
在ES6的中,可以直接将一个数组合并到另外一个数组当中:
var arr1=['a','b','c'];
var arr2=[...arr1,'d','e'];
合并结果 => ['a','b','c','d','e']
展开运算符也可以用在push函数中,可以不用再用apply()函数来合并两个数组:
var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); 
合并结果 => ['a','b','c','d','e']
用于解构赋值
解构赋值也是ES6中的一个特性,而这个展开运算符可以用于部分情景:
let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,将多个数组项组合成了一个新数组。
不过要注意,解构赋值中展开运算符只能用在最后
重点在:赋值

ES7草案中的对象展开运算符
对象的 Rest 解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。
所有的键和它们的值,都会拷贝到新对象上面。

ES7中的对象展开运算符符可以更快捷地操作对象:
let {x,y,...z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}

如上,可以将一个对象当中的对象的一部分取出来成为一个新对象赋值给展开运算符的参数。
同时,也可以像数组插入那样将一个对象插入另外一个对象当中:
let z={a:3,b:4};
let n={x:1,y:2,...z};
n => {x:1,y:2,a:3,b:4}
可以合并两个对象:
let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
ab => {x:1,y:2,z:3}
用于对象解构赋值的时候,对象展开运算符只能放在最后。

需要注意的是:
通过对象解构获取的属性值,当原对象的属性值发生改变是,曾经通过对象解构获取的属性值也会随之发生改变
Rest 解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、
那么 Rest 解构赋值拷贝的是这个值的引用,而不是这个值的副本。

示例:
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b => 2
对象的解构只针对自身初始化的属性
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let o3 = { ...o2 };
o3 =>  { b: 2 }
此时o3中没有o2通过解构获取的o1的属性
对象o3是o2的拷贝,但是只复制了o2自身的属性,没有复制它的原型对象o1的属性。

 


http://www.niftyadmin.cn/n/1162573.html

相关文章

vuex状态树state与辅助函数mapState

State 单一状态树 Vuex 用一个对象就包含了全部的应用层级状态。 作为唯一数据源,每个应用将仅仅包含一个 store 实例。 单状态树、模块化、状态、状态变更事件分布 由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中…

SpringMVC 第二章 RequestMapping

Spring MVC 使用RequestMapping注解为控制器指定可以处理哪些URL请求 在控制器的类型定义及方法定义处都可以进行标注 -类定义处:提供初步的请求映射信息,相对于web应用的根目录 -方法处:提供进一步的细分映射信息,相对于…

vue filters 过滤器

过滤器 Vue.js允许自定义过滤器&#xff0c;可被用于一些常见的文本格式化。 过滤器可以用在两个地方&#xff1a; 双花括号插值和v-bind表达式。 过滤器应该被添加在 JavaScript 表达式的尾部&#xff0c;由“管道”符号指示&#xff1a; 格式&#xff1a; <!-- 在…

vuex getters

Vuex允许在store中定义“getter”&#xff08;可以认为是 store 的计算属性&#xff09;。就像计算属性一样&#xff0c;getter 的返回值会根据它的依赖被缓存起来。且只有当它的依赖值发生了改变才会被重新计算。store 中的getters可以作为公共函数或者公共过滤器使用 实例使…

vuex mutation与mapMutations

Mutation 通俗的理解mutations,里面装着一些改变数据方法的集合&#xff0c; 这是Veux设计很重要的一点&#xff0c;就是把处理数据逻辑方法全部放在mutations里面&#xff0c;使得数据和视图分离。 切记&#xff1a;Vuex中store数据改变的唯一方法就是mutation&#xff01; V…

vue 使用 Clipboard 复制文本到剪切板

安装&#xff1a; npm install clipboard --save引用&#xff1a; import Clipboard from clipboard触发复制事件的dom: <p id"copyObj">复制对象</p> // data-clipboard-text 是放置需要复制的数据 // 引用文本 :data-clipboard-text"引用的文本&q…

SpringMVC 第三章 不同风格的URL

Ant风格的资源地址支持3种匹配符&#xff1a; &#xff1f;&#xff1a;匹配文件名中的一个字符 * &#xff1a;匹配文件名中的任意字符 ** &#xff1a; **匹配多层路径 RequestMapping还支持Ant风格的URL /user/*/createUser: 匹配 /user/aaa/createUser; /…

SpringMVC 第四章 REST风格架构

REST&#xff1a; 即Representational State Transfer.&#xff08;资源&#xff09;表现层状态转化。 资源&#xff1a;代表网络上的一个实体&#xff0c;在服务器端真是存在的资源&#xff0c;每种资源对应一个特定的url 表现层&#xff1a;资源呈现在客户端的具…