雨落辰潇-文档站

Appearance

对象新增特性 ​

属性简写 ​

使用变量表示属性值，属性名和变量名是同名的，可以简写。

js
const username = '高小乐', age = 19, address = '上海';
function say() {
    console.log('say function');
}
const user = {
    username=username,
    age=age,
    address=address,
    say=say
};
简写为
const user = {
    username,
    age,
    address,
    say
};

私有属性 ​

下划线设置属性，不对外公开

js
var book = {  
    // 下划线设置属性，不对外公开 	_year: 2004,  	edition: 1  
};

方法简写 ​

js
const obj = {
    say: function() {
        console.log('say');
    },
    drink: function() {
        console.log('drink');
    }
    set:() => {}
}
简写为
const obj = {
    say() {
        console.log('say');
    },
    drink() {
        console.log('drink');
    }
    set:() => {}
}

声明对象时用表达式的值作为属性名 ​

声明对象时用表达式的值作为属性名

声明对象时，对表达式套上一个[],代表表达式的值作为对象的属性名。

表达式：运算符组成的语句，或变量

js
const prop = 'homeAddress';
const obj = {
    [10+10]: '高小乐',   // 属性名是 20
    [prop]: '北京',      // 属性名是 homeAddress
}

super 关键字 ​

与this类似，函数的内置对象。

super 关键字表示原型对象时，只能用在简化写法定义的方法中，其他形式定义的方法都会报错。

js
1. this 指向调用该方法的对象； super 指向方法所属的对象的原型 [对象].__proto__

2. super 的指向与谁调用该方法无关，只与定义方法时所在的对象的有关
3. super 只能在简写的对象方法中使用，其他形式的方法一律报错！
js
{
    drink() {
        super;
    }
    eat: function() {
        super; // 报错
    },
    say: ()=>{
        super; // 报错
    }
}
js
// 使用var定义全局变量
var name = 'window';

// 定义对象
const user01 = {
  name: '高小乐',
  say() {
     console.log('this：', this.name);
     console.log('super：', super.name);
  },
// drink: function() {
//     console.log(super);
// }
// drink: () => {
//     super;
// }
}


// 给user01的原型上设置name属性
user01.__proto__.name = '高小乐原型';

/*
    this: 高小乐
    super: 高小乐原型
*/

user01.say(); //
console.log('');


// 定义对象
const user02 = [];
user02.name = '高老乐';
user02.__proto__.name = '高老乐原型';
user02.say = user01.say;
/*
   this: 高老乐
   super： 高小乐原型
*/
user02.say();
console.log('');



const fn = user01.say;
/*
   this: window
   super: 高小乐原型
*/
fn();

对象的扩展运算符 (ES2018) ​

① 把对象拆分为逗号隔开的键值对序列 ​

js
 const user = {
     name: '高小乐',
     age: 45,
     address: '上海',
     say() {},
     drink() {}
 };

// 对象的拷贝
const user01 = {...user};  // 相当于 {name: '高小乐', age: 45, address: '上海', say:function(){}, drink:function(){}}


// 对象的合并
const user02 = {homeAddress:'北京', schollAddress:'广州', address:'纽约'};
const user03 = {...user, ...user02};

② 把键值对序列合并到一个对象中 ​

js
// 用于对象的解构赋值
const {age,address,...data} = user03; 
console.log(age,address); //45 上海
console.log(data);  // 把剩下的键值对保存到rest参数[...data]中

Object 构造函数本身新增的方法 ​

js
Object.is([对象])

Object.is()		          		对两个参数进行判等，返回布尔值，参数是两个对象。
Object.assign()					对象的合并，第二参数以及后面的对象合并到一个对象中。
Object.keys()					返回由对象的属性名组成的数组
Object.values()					返回由对象的属性值组成的数组

Object.entries()				返回由对象的属性名和属性值组成的数组，是二维数组
Object.fromEntries()			是 entries()	的逆运算，返回对象

Object.getPrototypeOf()			返回对象的原型，参数是对象
Object.setPrototypeof() 		修改对象的原型，参数是对象[原对象][新对象]
Object.getOwnPropertyDescriptors()	返回该对象所有属性的描述信息，参数是对象
Object.getOwnPropertyNames();	返回指定对象所有属性名，参数是对象。
Object.hasOwn()					判断属性是否属于对象自身，参数是[对象][属性名]
方法名描述
Object.is()判断两个值是否相等。
Object.assign()将一个或者多个源对象复制到目标对象，并返回修改后的目标对象。
Object.setPrototypeOf()修改指定对象的原型。
Object.getPrototypeOf()返回指定对象的原型。
Object.keys()返回由对象的属性名组成的数组。
Object.values()返回由对象的属性值组成的数组。
Object.entries()返回由对象的属性名和属性值组成的数组，是二维数组。
js
Object.is(100, 100);  // true
Object.is(100, '100'); // false
Object.is(NaN, NaN);  // true
Object.is(+0, -0);   // false
+0 === -0;			 // true
js
// 判等
console.log(Object.is(100, '100'));
console.log(Object.is(100, 100));
console.log(Object.is(NaN, NaN));   // true
console.log(Object.is(+0, -0));     // false
console.log(+0 === -0);             // true
console.log('');

// 创建一个对象
const user = {
    name: '高小乐',
    age: 45,
    address: '上海',
    say() {},
    drink() {}
};
console.log(Object.keys(user));
console.log(Object.values(user));
const user01 = Object.entries(user);
console.log(user01);
const user02 = Object.fromEntries(user01);
console.log(user02);
console.log('');


console.log(Object.getPrototypeOf(user));
console.log(user.__proto__);
console.log('');


const arr = [10,20,30,40];
// 修改arr的原型
Object.setPrototypeOf(arr, user);
console.log(arr.address);
console.log(arr.push);
console.log('');


console.log(Object.getOwnPropertyDescriptors(user));
console.log('');


// 判断属性是否是对象自身的
console.log(Object.hasOwn(user, 'address'));
console.log(Object.hasOwn(user, 'constructor'));


// 合并对象
const user = {
    name: '高小乐',
    age: 45,
    address: '上海',
    say() {},
    drink() {}
};

const data = {
    homeAddress: '伦敦',
    schollAddress: '纽约',
    address: '北京'
};

const nums = [10,20,30,40,50,60]


// 合并对象
// Object.assign(user, data, nums);
const user01 = Object.assign({}, user, data, nums);
console.log(user01);
console.log('');


// 复制对象
const user02 = Object.assign({}, user);
user02.name = '高老乐';
console.log(user.name);
console.log(user02.name);
console.log('');

// 解构赋值 扩展运算符  对象的复制
const {...arr} = user;
console.log(arr);

const {...arr01} = nums;
console.log(arr01);

Object.is() 全等 ​

它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是 +0 不等于 -0 ，二是 NaN 等于自身。

js
Object.is('foo', 'foo');    // true
Object.is({}, {});            // false
Object.is(+0, -0);            // false
Object.is(NaN, NaN);        // true

Object.assign() 合并对象 ​

Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

js
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target);    // {a:1, b:2, c:3}

注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

js
const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target);    // {a:1, b:2, c:3}


 // 合并对象
// Object.assign(user, data, nums);
const user01 = Object.assign({}, user, data, nums);
console.log(user01);
console.log('');

该方法的常见用途如下：

1）克隆对象

js
// 用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值
function clone(origin) {
  return Object.assign({}, origin);
}

// 想要保持继承链，可以采用下面的写法
function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}


 // 复制对象
/把user复制到{}空对象中
const user02 = Object.assign({}, user);
user02.name = '高老乐';
console.log(user.name);
console.log(user02.name);
console.log('');

// 解构赋值 扩展运算符  对象的复制
const {...arr} = user;
console.log(arr);

const {...arr01} = nums; //把数组解构为对象{0:item,1:item,2:item...}
console.log(arr01);

2）合并多个对象

3）为属性指定默认值

js
const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

Copyright © 2024 雨落辰潇