Vue中...（三个点）的意思及作用(扩展运算符)

扩展运算符。
对数组和对象而言，就是将运算符后面的变量里东西每一项拆下来。

（一）操作数组

// 1.把数组中的元素孤立起来
let iArray = ['1', '2', '3'];
console.log(...iArray);
// 打印结果  1 2 3// 2.在数组中添加元素
let iArray = ['1', '2', '3'];
console.log(['0', ...iArray, '4']);
// 打印结果  ["0", "1", "2", "3", "4"]// 3.在数组中删除元素（取出一个元素）
// 与结构赋值的结合
// 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);　　// 打印结果 1
console.log([...rest]);　　// 打印结果 [2, 3, 4, 5]const [one, ...last] = ["foo"];
console.log(one);　　// 打印结果 foo
console.log([...last]);　　// 打印结果 []// 4.数组的合并
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
console.log(arr1); // 打印结果 [0, 1, 2, 3, 4, 5]
// 推荐使用写法
console.log([...arr1, ...arr2]); // 打印结果 [0, 1, 2, 3, 4, 5]// 5.将字符串转成数组
let iString = 'zhongguoren';
console.log([...iString]); // 打印结果 ["z", "h", "o", "n", "g", "g", "u", "o", "r", "e", "n"]// 6.Map 和 Set 结构， Generator 函数
let map = new Map([[1, 'one'],[2, 'two'],[3, 'three'],
]);
let arr = [...map.keys()];
console.log(arr);
// 打印结果 [1, 2, 3]// 7.当做参数传递和直接传数组的区别
iClick4() {let iArray = ['1', '2', '3'];//注意传的时候，就要三个点this.hanshu(...iArray);
},
hanshu(...iArray) {let ooo = 1;console.log(...iArray);// 打印结果 1 2 3
},// 8.求出最大值
let iArray = [1, 2, 3, 99, 44, 66, 21, 85, 77];
let ooo = Math.max(...iArray);
console.log(ooo);
// 打印结果 99// 9.如果对没有iterator接口的对象，使用扩展运算符，将会报错。
let obj = {name: 'zhh',age: '20'
}
console.log([...obj]);

（二）操作对象

// 1.添加一个属性
let a = {age: 18, id: 10};
let c = {name: 'zhh', ...a};
console.log(c);
// 打印结果  {name: "zhh", age: 18, id: 10}// 2.修改一个属性
let a = {name: 'zhh', age: 18, id: 10};
let c = {...a, name: 'zhh1'};
console.log(c);
// 打印结果  {name: "zhh1", age: 18, id: 10}// 3.删除一个属性（拿出属性或者对象）
let a = {name: 'zhh', age: 18, id: 10};
let {name, ...c} = a;
console.log(name, c);
// 打印结果 zhh {age: 18, id: 10}

Vue中...（三个点）的意思及作用(扩展运算符)相关推荐

vue data为什么是函数_由 Vue 中三个常见问题引发的深度思考
(给前端大全加星标,提升前端技能) 作者: 前端序公号 / SimonWoo (本文来自作者投稿) 前言工作中我们通过搜索引擎或者官方文档很容易就会知道一个语法怎么使用,但是你知道其中的原理吗?我 ...
VUE 中 keep-alive 的 --是什么-- 使用场景-- 作用-- 新增属性--动态组件--理解
KBK对keep-alive的一些见解(有不对之处,尽请告知,嘻嘻) Keep-alive是什么是Vue的内置组件包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. Keep-alive的使 ...
python三个点是什么意思_Python 3 中 ... 三个点的省略号的作用
表示函数没有实现任何代码,跟 pass 的作用类似 >>> def some_function(): ... ... ... >>> some_function() ...
vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
JS中出现三个点（...）的作用是什么
三个点(...)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开:还可以在构造字面量对象时将对象表达式按照key-value的方式展 ...
js ... es6中三个点是什么意思真名叫扩展运算符
前言:求真求实东西实现了居然不知道怎么做完的有点恐怖背景 js去重 let inCmpGroup = [...new Set(this.selectedData.map(x => x. ...
JS中三个点（...）
我们在看js代码时经常会出现(-)三个点的东西,它究竟是什么意思?又有何用处? 下面我就给大家分享一下三个点的那些事什么意思? 三个点(-)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调 ...
JavaScript中三个点(...)的意思
我们在看js代码时经常会出现(-)三个点的东西,三个点(-)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开:还可以在构造字面量对象 ...

Vue中...（三个点）的意思及作用(扩展运算符)

（一）操作数组

（二）操作对象

Vue中...（三个点）的意思及作用(扩展运算符)相关推荐

最新文章

热门文章