一、对象的属性简洁表示法
ES6允许在大括号里面直接写入变量和函数直接作为对象的属性和方法。 案例1
<script>
let age=11
let obj={
name:"CUYG",
// age,等价于 age:age,
age,
// intro(){}等价于 intro:function(){}
intro(){
console.log("我叫"+name);
},
}
console.log(obj);
</script>
结果:
案例2、
<script>
function getInFO(name,age){
return{name,age}
}
console.log(getInFO("张三","23"));//Object { name: "张三", age: "23" }
</script>
案例3 commonJS模块化输出一组变量(常用)。
导出使用module.export={getMax,getMin,removeDuplicate}
<script>
// 求最大值
function getMax(arr) {
return Math.max(...arr)
}
// 求最小值
function getMin(arr) {
return Math.min(...arr)
}
// 数组去重
function removeDuplicate(arr) {
return [...new Set(arr)]
}
modules.exports = {
// 等价于getMax:getMax,
getMax,
getMin,
removeDuplicate
}
</script>
导入使用 import {getMax,getMin,removeDuplicate} from "@/xx/xx.js"
案例4、简洁写法用于对象打印
let s1={
name:"张三"
}
let s2={
age:11
}
console.log(s1,s2);//Object { name: "张三" } Object { age: 11 }
console.log({s1,s2});//Object { s1: {name: "张三"}, s2: {age: 11} }
二、对象的属名表达式
let obj={}
//方法一、直接用标识符定义对象属性
obj.name="yt"
//方法二、用表达式定义对象属性/方法名
obj["a"+"ge"]=11
console.log(obj);//Object { name: "yt", age: 11 }
let obj1={
name:"NAME"
}
let obj2={}
obj2[obj1.name]="111"
console.log(obj2);//Object { NAME: "111" }
let obj1={
name:"NAME"
}
let obj2={}
obj2[1+2]="111"
console.log(obj2);//Object { 3: "111" }
三、方法的name属性
let obj={
name:"OBJ",
fn(){
console.log("FN");
}
}
console.log(obj.name.name);//undefined
console.log(obj.fn.name);//fn
四、对象属性的遍历
第一步:遍历所有的数值键,按照数值升序排列。 第二步:遍历所有字符串键,按照加入时间升序排列。 第三步:遍历所有Symbol键,按照加入时间升序排列。
1、for...in
循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。
2、Object.keys(obj)
返回一个数组,包括对象自身(不含继承的)所有可枚举属性(不含Symbol属性)的键名。
3、Object.getOwnPropertyNames(obj)
返回一个数组,包括对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)的键名。
4、Object.getOwnPropertySymbols(obj)
返回一个数组,包含对象自身的所有Symbol属性的键名。
5、Reflect.ownKeys(obj)
返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是Symbol或字符串,也不管是否可枚举。
五、super关键字(只能用到对象的“方法”中)
this的关键字总数指向函数所在的当前对象,super可以使this指向当前对象的原型对象。
let P={
name:"MyFather"
}
let p = {
name:"child",
getName(){
console.log( super.name);
}
}
// 设置p的原型指向P
Object.setPrototypeOf(p,P);
p.getName()//MyFather
六、对象的解构赋值
let { a, b, ...c } = {a:"A",b:"B",c:"C",d:"D",e:"E"}
console.log(a);//A
console.log(b);//B
console.log(c);//Object { c: "C", d: "D", e: "E" }
变量c是解构赋值的所在对象,它获取等号右边的所有尚未读取的键,将它们连同值一起拷贝过来。
由于对象的解构赋值是浅拷贝,所以对于复合数据类型(对象、数组)是引用。
let obj1={a:[1,2,3]}
let {...obj2}=obj1
obj1.a[0]="obj1里的1改变"
console.log(obj2.a);//Array(3) [ "obj1里的1改变", 2, 3 ]
七、对象的扩展运算符 "..."
1、取出参数对象中所有的可遍历属性,拷贝到当前的对象之中。
let obj1={x:1,y:2}
let obj2={...obj1}
console.log(obj2);//Object { x: 1, y: 2 }
2、把数组转为对象形式
let arr =["x","y","z"]
let obj_arr={...arr}
console.log(obj_arr);//Object { 0: "x", 1: "y", 2: "z" }
3、把字符串变为对象
let str ="hello world"
let obj_str={...str}
console.log(obj_str);
//Object { 0: "h", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "w", 7: "o", 8: "r", 9: "l", … }
4、数值、boolean、undefined、null无法变为对象
console.log({...21});//Object { }
console.log({...true});//Object { }
console.log({...false});//Object { }
console.log({...null});//Object { }
console.log({...undefined});//Object { }console.log({...21});//Object { }
console.log({...true});//Object { }
console.log({...false});//Object { }
console.log({...null});//Object { }
console.log({...undefined});//Object { }
5、克隆对象并拷贝对象原型
// 写法一:—__proto__属性在非浏览器的环境不一定部署
const cloneOne = {
__proto__: Object.getPrototypeOf(obj),
...obj
}
// 写法二(推荐)
const cloneTwo = Object.assign(Object.create(Object.getPrototypeOf(obj)),
obj
);
// 写法三(推荐)
const cloneThree =Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)
6、合并两个对象(同名属性会被覆盖掉)
let obj1={name:"yt",age:22}
let obj2={sex:"男",sno:"xxxxx"}
console.log({...obj1,...obj2});
7、对象中扩展运算符可以加表达式
let i=true
let obj ={
...(i?{b:true}:{b:false}),
}
console.log(obj);//Object { b: true }
八、对象的方法
1、比较两个值是否相等:Object.is()
【“==”会自动转换数据类型;“===”会出现NaN不等于自身】
console.log(0=="0");//true
console.log(Object.is(0,"0"));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
2、对象合并:Object.assign(obj1,obj2,obj3)【obj1是目标对象,obj2和obj3等是源对象】
调用Object.assign()方法后obj1会合并有自身和源对象的属性值。 浅拷贝 属性同名替换
let obj1={
a:"A"
}
let obj2={
b:"B"
}
let obj3={
c:"C"
}
Object.assign(obj1,obj2,obj3)
console.log(obj1);//Object { a: "A", b: "B", c: "C" }
应用场景 (1)为对象添加属性和方法
class P {
// 添加属性
constructor(x, y) {
Object.assign(this, { x, y })
}
}
// 添加方法
Object.assign(P.prototype,{
go(){
console.log("GO");
}
})
console.log(P);
(2)克隆对象
把传入的源对象origin拷贝到空对象,但是目标对象无法继承origin的链
function clone(origin)
{
return Object.assign({},origin)
}
console.log(clone({name:"yt"}));//Object { name: "yt" }
把传入的源对象origin和链都拷贝出来
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto),origin)
}
console.log(clone({name:"yt"}));//Object { name: "yt" }
(3)合并多个对象和为属性指定默认值
let obj1={
name:"yt"
}
let obj2={
sex:"男"
}
let obj3={
age:22
}
let obj={}
Object.assign(obj,obj1,obj2,obj3)
console.log(obj);//Object { name: "yt", sex: "男", age: 22 }
3、返回指定对象所有自身属性(非继承性)的描述对象:Object.getOwnProtertyDescriptors()
let obj = {
name:"yt",
get go(){
return "go"
}
}
console.log(Object.getOwnPropertyDescriptors(obj));
4、proto
Object.setPrototypeOf()(写操作)、
Object.getPrototypeOf()(读操作)、
Object.create()(生成操作)
5、遍历对象的键或值:
let obj = {
name: "yt",
age: 11,
sex: "男"
}
console.log(Object.keys(obj));//Array(3) [ "name", "age", "sex" ]
console.log(Object.values(obj));//Array(3) [ "yt", 11, "男" ]
console.log(Object.entries(obj));
//Array(3) [ [ "name","yt",], ["age",11], ["sex","男"] ]
let arr = [["a", "A"], ["b", "B"]]
console.log(Object.fromEntries(arr));
//Object { a: "A", b: "B" }"name","yt",], ["age",11], ["sex","男"] ]