ES6中对象的扩展-学习笔记系列

属性的简洁表示

属性名就是变量名, 属性值就是变量值。

const food = "food";
const house = "house";
const obj = {
food,
house
};

应用场景：在ES6的export语法当中，很适合用这种语法

function fn(){    console.log("fn");}
let obj = {    name: "li"};
module.exports ={    fn,    obj};

属性表达式

可以将表达式作为对象的属性名，即把表达式放在方括号当中

let Key  = "bar";
let obj = {    [Key]:"bar",    ['a'+'c']:"ac"};
console.log(obj.bar,obj.ac);//bar ac
console.log(obj[Key]);//bar

取值函数和存值函数

let obj = {            
_age: 13,            
get age() {                
return this._age;            
},            
set age(age) {                //可以在setter里面进行值的验证                
if (age > 100 || age < 0) {                   
 throw new Error("invalid value");                
} else {                    
this._age = age;                
}            
}        
}        
console.log(obj.age); //13        obj.age = 200; // Uncaught Error: invalid value

扩展运算符 ... 用于对象的解构赋值

let x = 2;let obj1=  {        a:12,        b:34     };let res = {x,...obj1};

解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

let obj = {a:{c:"d"}};
let {...x} = obj;
obj.a.c = "e";
console.log(x.a.c);//e

解构赋值的一个用处，是扩展某个函数的参数，引入其他操作

//扩展某个函数的操作，引入其他操作
function basefn({x,y}){//...}
function otherfn(a,b,...restconfig){
//对a、b参数处理
basefn(restconfig);// 其余参数传给原始函数
}

对象的拷贝

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

完整的克隆一个对象

// 写法一
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};

// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

链判断运算符

在我们的开发当中，如果要读取层层嵌套的对象内部的某个属性，安全的写法是层层判断对象的属性是否存在

//读取msg.user.firstName
//写法一
let firstName = (msg
&& msg.user
&& msg.user.firstName) || 'default';
//写法二：使用三目运算符
const inputVal = input?input.value:undefined'
//使用链判断运算符
let firstName = msg?.user?.firstName||'default';
//在链式调用的时候，直接在链式调用的时候进行判断，左侧的对象如果是null或者undefined，则返回undefined
，否则继续往右运算。

Null判断运算符

//常见的是通过||进行判断，为变量指定一个默认值，但是如果user.name是false或者是0，变量也会被指定为默认值
const name = user.name || 'default';
//使用Null判断运算符 ?? 进行判断，只有当左侧的值为null或undefined时，才会返回右侧的值。
const name = user.name ?? 'default';
//和?.一起配合使用
const name = msg?.user?.name ?? 'default';
//用于判断函数参数是否赋值function fn(param) {    const name = param.name ? ? true;}function fn(param) {    const {        name: name = true    } = param;}