对象与数组的解构赋值和访问器属性

对象与数组的解构赋值和访问器属性

一. 实例演示对象与数组的解构赋值

一）数组解构

1.代码如下

// 一）数组解构
[uname,email]=['杨过','123@qq.com'];
console.log(uname,email);
console.log('-----------------');
// 更新
[uname,email]=['小龙女','456@qq.com'];
console.log(uname,email);
console.log('-----------------');
// 1.参数过多
;[uname,email,gender='女']=['潘金莲','789@qq.com'];
console.log(uname,email,gender);
console.log('-----------------');
// 应用场景：交换两个数
let x = 10
let y = 20
console.log(`x = ${x},y = ${y}`)
;[y,x]=[x,y]
console.log(`x=${x},y=${y}`)
console.log('-----------------');

2.演示的效果图

二）对象解构

1.代码如下

// 二）对象解构（变量名===属性名）
let {num,price}={num:2,price:5000}
console.log(num,price)
console.log('-----------------');
;({num,price}={num:5,price:6000})
console.log(num,price)
console.log('-----------------');
// 应用场景1.克隆对象
let lesson ={name:'ES6',score:88}
console.log(lesson)
console.log('-----------------');
let {...obj}=lesson
console.log(obj)
console.log(obj===lesson)
console.log('-----------------');
console.log('-----------------');
// 应用场景2.结构传参
show =function({uname,email}){
        return `${uname}:(${email})`
}
let user={uname:'朱老师',email:'498668472@qq.com'}
console.log(show(user));
console.log('-----------------');

2.演示的效果图

二. 实例演示访问器属性,并描述与普通属性之间的区别与联系

一）访问器属性如下图可以基本全部看出

二）访问器属性与数据属性的区别与联系

1.数据属性

1）value: 实际存储属性值的特性
2）writable: 表示能否修改属性的value值。默认为true。如果设置为false则为只读属性
3）enumerable: 表示是否能通过for…in循环遍历到该属性。默认为true
4）configurable: 表示是否能通过delete删除该属性，或者能否修改其他特性。默认为true，如果改为false，则属性的其他特性一旦定义就不可修改
5）数据属性的特性无法直接访问。使用Object.getOwnPropertyDesciptor方法可以查看指定对象、指定属性的特性

2.访问器属性

1）访问器属性没有value和writable特性
2）get：读取属性时自动调用的函数。如果不提供，表示不可读取受保护的属性值
3）set: 写入属性值自动调用的函数。如果不提供，表示受保护的属性为只读属性
4）enumerable: 表示是否能通过for…in循环遍历到该属性。默认为true
5)configurable: 表示是否能通过delete删除该属性，或者能否修改其他特性。默认为true，如果改为false，则属性的其他特性一旦定义就不可修改