object 的简化表示

对象属性简化

若是对象属性与值变量名称相同，可简化

//对象属性的常规表达
const obj = {abc: "abc"
};
const obj = {PI //等价于PI:PI 属性与值相同
};
const age = 15;
const obj1 = {age: age
};
//简化写法
const obj1 = {age
};

箭头函数常规语法

const obj = {direct: () => {console.log("when you need to use 'this' key word");}
};

对象函数属性简化

const obj = {//正常写法f1: function () {console.log("this direct is a function");},//Generator 函数写法  注意需要加 *myGenerator: function* () {yield "hello world";}
};
const obj = {//简化写法f1() {console.log("this direct is a function");},//箭头函数常规语法direct: () => {console.log("when you need to use 'this' key word");},//Generator 函数写法 注意需要加 myGenerator() {yield "hello world";}
};

动态属性语法

若对象的属性名称不确定可以使用变量或者表达式，但是动态属性必须放置在[]中

const PI = Math.PI;
const active = "answer";const obj = {abc: "abc",f1() {console.log("this direct is a function");},direct: () => {console.log("when you need to use 'this' key word");},PI, //PI:PI 属性与值相同[active]: 44
};

则输入 obj.active 为 undefined,输入 obj.answer 输出 44

当使用动态属性的时候，不可同时使用简化表达，否则会报错！！！例如，const obj = { [hello]}会报错

终端实战

终端交互

• 在终端输入 node，进入 node 交互模式(REPL)
• 复制以上代码到终端
• 输入对象属性，查看对应值，例如：obj.active

C:\\Users\\username>node
Welcome to Node.js v16.16.0.
Type ".help" for more information.
> const PI=Math.PI;
undefined
> const active="answer";
undefined
>
> const obj={abc:"abc",f1(){console.log("this direct is a function")},direct:()=>{console.log("when you need to use 'this' key word")},PI,//PI:PI 属性与值相同[active]:44
> object.active
Uncaught ReferenceError: object is not defined
> obj.active
undefined
> obj.answer
44

直接运行 js 文件

直接在终端中输入上述内容太过麻烦，如果想要修改就需要重新全部输入

我们在项目中直接编写 js 文件–test.js：

const active = "answer";
const obj = {[active]: 44
};
console.log(obj.answer); //44
console.log(obj.active); //undefined

然后在项目的 package.json 文件的 scripts 脚本中添加命令：

  "scripts": {"demo": "node ./src/test-demo/test.js"}

然后执行 npm run demo,终端输出：

> node ./src/views/test-demo/test.js44
undefined

对象的拓展运算符

拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象

//基本用法
let person = { name: "Amy", age: 15 };
let someone = { ...person };
someone; //{name: "Amy", age: 15}//对象的合并
let age = { age: 15 };
let name = { name: "Amy" };
let person = { ...age, ...name };
person; //{age: 15, name: "Amy"}

拓展运算符后面是 null 或者 undefined，没有效果也不会报错

属性合并的时候，如果出现同名属性会保留靠后(靠右)的属性值

拓展运算符的拷贝属于浅拷贝，如果被拓展的对象是复杂对象，对于复杂属性(对象、数组)仅仅是将指针指向了复杂属性，而简单的属性则是复制了一份

let user = { age: 15, name: "Amy" };
let depart = { depart: { name: "ali", level: "2" }, company: "oil" };
let person = { ...user, ...depart };
person.depart.name = "Test Ali";
person.company = "Test Oil";
console.log(person);
console.log(depart);// 输出person
{age: 15,name: 'Amy',depart: { name: 'Test Ali', level: '2' },company: 'Test Oil'
}
//输出 depart
{ depart: { name: 'Test Ali', level: '2' }, company: 'oil' }

可以发现 depart 中简单属性 company 并没有被改变

对象新增方法

Object.assign(target, source_1,source_2, ···)

Object.assign(target, source_1,source_2, ···)用于将源对象的所有可枚举属性复制到目标对象中

如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性

该函数如果只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回,而 null 和 undefined 不能转化为对象，单独作为参数或者作为第一个参数都会报错；当参数不止一个时，null 和 undefined 不放第一个，即不为目标对象时，会跳过 null 和 undefined ，不报错;

let target = { a: 1 };
let object2 = { b: 2 };
let object3 = { c: 3 };
Object.assign(target, object2, object3);
// 第一个参数是目标对象，后面的参数是源对象
target; // {a: 1, b: 2, c: 3}Object.assign(3); // [Number: 3]
typeof Object.assign(3); // "object"Object.assign(null); // TypeError: Cannot convert undefined or null to object
Object.assign(undefined);
Object.assign(1, undefined); // Number {1}
Object.assign({ a: 1 }, null); // {a: 1}
Object.assign(undefined, { a: 1 }); // TypeError: Cannot convert undefined or null to object

assign 的属性同拓展运算符，拷贝是浅拷贝

let user = { age: 15, name: "Amy" };
let depart = { depart: { name: "ali", level: "2" }, company: "oil" };
let person = Object.assign({}, user, depart);
person.depart.name = "Test Ali";
person.company = "Test Oil";
console.log(person);
console.log(depart);// 输出person
{age: 15,name: 'Amy',depart: { name: 'Test Ali', level: '2' },company: 'Test Oil'
}
//输出 depart
{ depart: { name: 'Test Ali', level: '2' }, company: 'oil' }

注意复杂的属性替换

targetObj = { a: { b: 1, c: 2 } };
sourceObj = { a: { b: "hh" } };
Object.assign(targetObj, sourceObj);
targetObj; // {a: {b: "hh"}}//会将数组处理成对象，所以先将 [2,3] 转为 {0:2,1:3} ，然后再进行属性复制，所以源对象的 0 号属性覆盖了目标对象的 0
Object.assign([2, 3], [5]); // [5,3]

Object.is(value1, value2)

用来比较两个值是否严格相等，与(===)基本类似

Object.is("q", "q"); // true
Object.is(1, 1); // true
Object.is([1], [1]); // false
Object.is({ q: 1 }, { q: 1 }); // false

与(===)的区别

//一是+0 不等于-0
Object.is(+0, -0); //false
+0 === -0; //true
//二是 NaN 等于本身
Object.is(NaN, NaN); //true
NaN === NaN; //false