Es6-对象的展开运算符

481 阅读1分钟

一 对象的展开运算符

1.展开对象

对象不能直接展开,必须在{}中展开

const apple={
    color:'红色',
    shape:'球型',
    taste:'甜'
};
console.log({...apple});
console.log({...apple}===apple);
//对象的展开:把属性罗列出来,用逗号分隔,放到一个{}中,构成新对象
console.log({...apple});

2.合并对象

const apple={
    color:'红色',
    shape:'球型',
    taste:'甜'
};
const pen={
    color:'黑色',
    shape:'圆柱形',
    use:'写字'
};
console.log({...pen});
console.log({...pen,...apple});
console.log({...apple,...pen});
console.log({pen,apple});
console.log({...pen,apple});

二 对象展开运算符的注意事项

1.空对象的展开

如果展开一个空对象,则没有任何效果

console.log({...{}});
console.log({...{},a:1});

2.非对象的展开

如果展开的不是对象,则自动将其转为对象,再将其属性罗列出来

console.log({...1});
console.log(new Object(1));
console.log({...undefined});
console.log({...null});
console.log({...true});

如果展开运算符后面是字符串,他会自动转成一个类似数组的对象,因此返回的不是空对象

console.log({...'alex'});
console.log([...'alex']);
console.log(...'alex');
console.log({...[1,2,3]});

3.对象中对象属性的展开

不会展开对象中的对象属性

const apple={
    feature:{
        taste:'甜'
    }
}
const pen={
    feature:{
        color:'黑色',
        shape:'圆柱形'
    },
    use:'写字'
}
console.log({...apple});
console.log({...apple,...pen});

三 对象展开运算符的应用

1.复制对象

const a={x:1,y:2};
const c={...a};
console.log(c,c===a);

2.用户参数和默认参数

add(1,2)
const logUser=({
    username="Zhangsan",
    age=0,
    sex='male'
}={})=>{
    console.log(username,age,sex);
}
const logUser = (userParam) => {
  const defaultParam = {
    username: "Zhangsan",
    age: 0,
    sex: "male",
  };
  // const { username, age, sex } = { ...defaultParam, ...userParam };
  // console.log(username, age, sex);
  const param={...defaultParam,...userParam}
  console.log(param.username);
};
logUser()