2021-12-18 学习记录--es6-三点(...)展开运算符

三点(…)展开运算符

1、知识点1 —— 构造字面量数组时使用展开语法

1、展开一个数组👇

	let arr1 = [1,3,5,7,9]
    console.log(...arr1); // 展开一个数组 1 3 5 7 9

2、连接数组👇

	let arr1 = [1,3,5,7,9]
    let arr2 = [2,4,6,8,10]
	let arr3 = [...arr1,...arr2]; // 连接数组
	console.log(arr3); // [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]

2、知识点2 —— 在函数中使用

example：👇

利用 ...展开运算符 和 reduce函数(计算数组元素相加后的总和) 计算数字1到11的和 【面试常问题】

	// example：利用 ...展开运算符 和 reduce函数(计算数组元素相加后的总和) 计算数字1到11的和
    function sum(...numbers) {
      console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
      return numbers.reduce((previousValue,currentValue) => {
        return previousValue + currentValue;
      },0)
    }
    console.log(sum(1,2,3,4,5,6,7,8,9,10,11)); // 66

【补充】example_add：👇

利用 reduce函数(计算数组元素相加后的总和) 计算字符串1到11的和

	// example_add：利用 reduce函数(计算数组元素相加后的总和) 计算字符串1到11的和
    var str = '1,2,3,4,5,6,7,8,9,10,11';
    function getSum(value1,value2) {
      return value1*1 + value2*1; // 因为字符串相加不可能得到数值型，所以需转换成数值型（*1）再相加
    }
    var arr = str.split(',');
    console.log(arr); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]
    var result = arr.reduce(getSum); // reduce里面装一个函数
    console.log(result); // 66

3、知识点3 —— 构造字面量对象时使用展开语法

1、三点运算符没有办法展开一个对象，即展开运算符不能展开一个对象👇

	let person = {name:'tom',age:18}
    console.log(...person); // 报错，因为展开运算符不能展开对象

2、三点运算符实现修改原对象里的某个属性的属性值👇

	let obj = {a:1,b:2};
	let obj2 = {...obj,b:3};
	console.log(obj2) // {a:1,b:3}

3、通过 {...obj} 克隆对象 可实现深拷贝👇

First of all 什么是浅拷贝呢？

浅拷贝-当person里的属性值改变时，person2里的属性值也会跟着改变👇

 	let person = {name:'tom',age:18}
    let person2 = person;
    person.name = 'jerry';
    console.log(person2); // {name: "jerry", age: 18}

Then

通过 {...obj} 克隆对象 可实现深拷贝-当person里的属性值改变时，person2里的属性值并不会跟着改变👇

	let person = {name:'tom',age:18}
    let person2 = {...person};
    person.name = 'jerry';
    console.log(person2); // {name: "tom", age: 18}

【补充知识点】见下图所示👇

4、通过三点运算符实现对象的合并👇

	let person = {name:'tom',age:18}
    let person3 = {...person,name:'jack',address:'地球'}
    console.log(person3); // {name: "jack", age: 18, address: "地球"}

【补充】合并和替换的区别👇

let obj1 = { name: '小杨', sex: '女'}
let obj2 = { hobby: 'eating', name: '杨咩咩' }

// 第一种情况—— obj1和obj2合并 ——result
// { name: '杨咩咩', sex: '女', hobby: 'eating'}

// 第二种情况—— obj1和obj2替换（后者替换掉前者） ——result
// { hobby: 'eating', name: '杨咩咩' }