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

举例说明

解构赋值

我们先自己定义一个常量

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