由 Rest参数 和 Spread扩展运算符想到的...

ES2018 为对象解构提供 rest 参数和spread扩展运算符。

1. 合并俩对象:

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

2. 对象的值如果是undefined 或者 null

let obj1 = {a: 1, b: 2}, obj2={c: undefined, d: null}
console.log({...obj1, ...obj2}) //{a: 1, b: 2, c: undefined, d: null}

3. 对象的属性是不可枚举的:

let obj1 = Object.defineProperty({}, ‘f‘, {value: 1}) //defineProperty 枚举属性默认为false
let obj2 = {g: 2}
console.log({...obj1, ...obj2})// {g: 2} 不复制不可枚举的属性
console.log(Object.assign(obj1, obj2)) //{g: 2, f: 1}

题外话:如何判断一个对象的某个属性是否可枚举...啊,还是甩链接吧...

属性的可枚举性和所有权

4. spread 是浅拷贝:这意味着在多维数组、嵌套对象中会出问题:

//先看数组: 官网的例子
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift()
console.log(a) //[[], [2], [3]]
console.log(b) //[[2], [3]]

//再看对象:
let o1 = {a:{aa: 1}, b:{bb: 2}}
let o2 = {...o1}
o2.a.aa=3
console.log(o2) // {a: {aa: 3}, b: {bb: 2}}
console.log(o1) // {a: {aa: 3}, b: {bb: 2}}  克隆对象o2的a属性值,指向o1.a。o2.b = 4
console.log(o2) // {a: {aa: 3}, b: 4}
console.log(o1) // {a: {aa: 3}, b: {bb: 2}}  
 let obj2 = {g: 2} let obj3 = {...obj2} obj3.g = 4 console.log(obj2) //{g: 2} 

对于prototype还是说不出个所以然...先这样..

原文地址:https://www.cnblogs.com/dodocie/p/9494485.html

时间: 2024-08-30 14:53:57

由 Rest参数 和 Spread扩展运算符想到的...的相关文章

rest 参数与扩展运算符

rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10 上面代码的add函数是一个求和函数,利用

... 扩展运算符

1  含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. [javascript] view plain copy console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]

es6 扩展运算符 三个点(...)

1  含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. function push(

day46homework常量字符串拼接结构赋值扩展运算符for-of循环map函数默认值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定义常量.html</title> <!--常量--> <script> //常量:1.一旦定义 不能更改 const PI = 3.14;  // console.log(PI); // PI = 3.1415; error 

ES6的扩展运算符和rest参数

1.扩展运算符(spread)是三个点(...).它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. 比如 var list=['大家好']: list.length=1.list[0]=大家好: var list2=[...'大家好']: list2.length = 3:list2[0]=大:list2[1]=家:list2[2]=好: 扩展运算符最有用之一是:Math.max(...arr);比较数组中的最大值. 2.rest参数 rest参数(形式为"...变量名"

es6 默认参数、rest参数、扩展运算符

1.默认值 现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了. function sayHello(name){ //传统的指定默认参数的方式 var name = name||'hubwiz'; document.write('Hello '+name); } //运用ES6的默认参数 function sayHello2(name='hubwiz'){ document.write(`Hello ${name}`); } sayHello();  //

ES6躬行记(2)——扩展运算符和剩余参数

扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对象(iterable).虽然两者之间有诸多类似,但它们的功能和应用场景却完全不同.扩展运算符能把整体展开成个体,常用于函数调用.数组或字符串处理等:而剩余参数正好相反,把个体合并成整体,常用于函数声明.解构参数等.此处的整体可能是数组.字符串或类数组对象等,个体可能是字符.数组的元素或函数的参数等.

...扩展运算符妙用 - ES5中push方法的参数不能是数组

含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. array.push(...ite

ES6 rest参数和扩展运算符

rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0; for(var val of values){ sum+=val; } return sum; } add(1,2,3)//6 值得注意的是rest参数之后不能再有其他参数(只能是最后一个参数)否则会报错. 例: function rest(a,...b,c){ }//报错 函数的length属