ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

es6的解构赋值 和扩展运算符 ... 的区别

2021-07-31 15:32:08  阅读:153  来源: 互联网

标签:es6 console log 解构 运算符 obj arr2 arr1 const


举例说明

解构赋值

我们先自己定义一个常量

const obj = {
  prop1: 1,
  prop2: 2
}
console.log(obj, 'vvvvvvvvvvvvv')
const re = obj
console.log(re, 're')

在这里插入图片描述

上图可以看出就是一个正常的赋值

然后对比解构赋值的数据

const firstProp = obj.prop1;
const secondProp = obj.prop2;
console.log(firstProp, secondProp, '.....................');

const {prop1, prop2} = obj;
console.log(prop1, prop2, obj, '解构赋值');

在这里插入图片描述
这里看出就是取值

然后看一下数组的形式是怎么样的

const arr = [{name: '1', age:' 2'}, {name: '3', age:' 4'}]
console.log(arr)
const [name, age] = arr;
console.log(name, age, arr, '解构赋值arr');

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
可以看出那么就是取得数组的第一个对象元素,age取得是第二个对象元素

…扩展运算符

我们用例子来编写

定义两个全局变量

var arr1 = [1,2];
var arr2 = [3,4];
我们打印结果肯定是 [1,2] [3,4]

我们定义个空数组

var arg = [];

ES5的写法 就是用push的方法

arg.push(arr1,arr2)
console.log(arg,'//')

// ES6,… 扩展运算

console.log([...arr1,...arr2]) //[1,2,3,4]

在这里插入图片描述

如果我们用apply 函数结合es5那么

var arr1 = [1,2];
var arr2 = [3,4];
console.log(arr1, arr2)

var arg = [];
// ES5的写法 就是用哪个push的方法
arg.push.apply(arr1,arr2)
console.log(arr1, arg)//[1,2,3,4], []
//这里的arr1竟然把arr1和arr2合并到一起了

// ES6,
console.log([...arr1,...arr2]) //[1,2,3,4, 3,4]

在这里插入图片描述
apply() 方法见下一个,写的不对的请指教,谢谢。

https://blog.csdn.net/lzfengquan/article/details/119276254

标签:es6,console,log,解构,运算符,obj,arr2,arr1,const
来源: https://blog.csdn.net/lzfengquan/article/details/119275436

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有