前端入门（二）js速成与vue脚手架搭建

JS常用API操作

对象操作

对象增删改查

• 创建对象 let obj = {}
• 新增属性 obj.a = 1 、obj[a] = 1
• 修改属性 obj.a = ‘a’
• 查询属性 obj.a 、obj[a]
• 删除属性 delete obj.a

js深拷贝、浅拷贝

js中对象直接使用=赋值拷贝是浅拷贝，即赋值前后的对象是相关关联的，如果修改其中一个的属性，另外一个属性也会变。

js实现深拷贝的方式

• 使用Object.assign(des, src)函数，给目标赋值属性，其中des是目标对象，src是源对象。

let user1 = {};
user1.name = "小米";
user1.age = 18;
user1.sex = "女";

let teacher1 = {};
Object.assign(teacher1, user1);
// 也可合并上边两句为一句
let teacher2 = Object.assign({}, user1);

• 使用jscon序列化对象再parse的方式也是可以实现深拷贝的。

let teacher3 = JSON.parse(JSON.stringify(user1));

安全访问

?

let a = {};
let b = a?.x;  // 如果a是undefined或者null，b则是undefined，不会报错

??

let a = null;
let b = 1;
let c = a ?? b;  // 如果a为null或者undefined则用b赋值，否则用a赋值
console.log(c);  // 打印c为1

例子：从localStorage拿出一个对象，对象可能为空，此时赋值默认值。

let d = localStorage.getItem('user') ?? {};  // 如果没有user字段，则赋值空

||

||类似??，但是??仅在前边是null或者undefined时，返回右边。
而||的含义是，在前边判断逻辑值为false时，返回右边，一般而言，0，null，undefined都是逻辑false。

const x = null;
const y = x ?? "default";
console.log(y); // null

const x = 0;
const y = x ?? 42;
console.log(y); // 0