4.es6对象的新增的静态方法:创建一个带有指定原型对象的新对象
7.es6对象的新增一组静态方法:将对象的不同属性以数组的形式返回
对象的扩展
1.对象的简洁表示法
(1)es5写法:
const uname = "aa"; const gender = 0;
const obj = {
uname:uname,gender:gender,
sayHi:function(){
alert(`I am ${this.uname}`) } }
(2)es6写法
const obj = {
uname, gender,sayHi(){alert(`I am ${this.uname}`) } }
2.存取器:属性的赋值器setter和取值器getter
存取器:将属性封装在对象的内部,仅对外提供公共的访问方法,对属性的访问进行拦截,起到保护作用
js约定:以下划线开头的属性,一般表示私有属性
es5:
es6:
3.属性表达式
es5定义对象的属性有两种方法:
(1)直接用操作符作为属性名
const beauty={
name:"aa", gender:1}
(2)用表达式作为属性名
beauty.heigth = 180 beauty["heigth"] = 180
es6允许字面量定义对象
let propKey = "bbb"
let pretty={ [propKey]:50, ['nick'+'name']:"xaa"
["say"+"Hi"](){ `I am ${this.uname}` } }
注意:(1)属性名表达式与简洁表示发不能同时使用,会报错
(2)属性名表达式如果是一个对象,默认情况下会自动将对象转为i字符串[object Object]
4.方法name和length属性
函数的name属性,返回函数名,对象方法也是函数,因此也有name属性.
函数的length属性,返回函数形参的个数,不包括可变参数.对象方法也是函数,因此也有length属性
5.方法的扩展
1.es6对象的新增的静态方法:获取属性描述符
Object.getOwnPropertyDescriptor(obj,prop)
Object.getOwnPropertyDescriptors(obj)
Object.getOwnPropertyDescriptor(obj,prop)作用:
如果属性存在,返回指定对象某个自有属性的属性描述符(自有属性指的是直接赋予该对象的属性,私有属性,不需要从原型链上进行查找的属性),否则返回undefined,一次只获取一个属性描述符
Object.getOwnPropertyDescriptors(obj)作用:
获取所有的属性描述符
属性描述符:
属性描述符是个对象,默认包括四个选项:
value:描述该属性对应的值 ; configurable:true可删除 ;
enumerable:true,可枚举(可被for ..in 遍历出来); writable:true可修改
2.es6对象的新增的静态方法:给对象/数组定义属性
Object.defineProperty(obj/arr,prop/index,descriptor)作用:
给对象/数组定义属性(一次只能定义一个属性),目的是对属性做限制和约束
Object.defineProperties(obj/arr,descriptor)作用:
给对象/数组定义属性,一次可以定义多个属性,数组的属性就是数组的下标
属性描述符是一个配置对象,可包括的配置选项:
Object.defineProperty(obj,prop,{
value:默认值为undefined
configurable:属性能否被删除,默认值为false
enumerable:属性是否可枚举,默认值为false,不可被for...in出来
writable:属性能否被修改,默认false
get(){ }
set(){ }
} )
注意:添加value和writable属性了,就不能添加getter和setter存取器,二者不能共存
3.es6对象的新增的静态方法:获取属性描述符
JS静态对象的方法:
Object.getPrototypeOf(obj)作用:
获取指定对象的原型(对象),等同于obj,__proto__ === 构造函数.prototype
Object.setPrototypeOf(obj,prototype)作用:
设置指定对象的原型(对象),等同于obj,__proto__ === prototype
const obj={
name:"aa" ; age:10 }
获取obj对象的原型对象:获取指定对象的原型,更方便
console.log(obj.__proto__)
console.log(Object.getPrototypeOf(obj))
console.log(Object.getPrototypeOf(obj) === obj.__proto__) //true是一个值
console.log(Object.prototype === obj.__proto__) //true是一个值
设置obj对象的原型对象为字符串对象
Object.setPrototypeOf(obj,new String()) 相当于 obj.__proto__=new String()
设置前后对比
获取: console.log(Object.getPrototypeOf(obj))
如果不想让obj对象的原型对象[只想任何一个对象,可以设置其原型为null
Object.setPrototypeOf(obj,null) 相当于 obj.__proto__=null
console.log(Object.getPrototypeOf(obj))
4.es6对象的新增的静态方法:创建一个带有指定原型对象的新对象
Object.creat(proto,[proppertiesObject])作用:
创建一个带有指定原型对象的新对象,使用现有的对象来提供新创建对象的__proto__
参数:1.proto:新创建对象的原型对象
2.proertiesObject: 可选,需要传入一个对象,
该对象的属性参数类型参照Object.defineProperties()的第二个参数.value / configurable / enumerable / writable / get / set 这个参数的值会作为创建出来新对象的属性
返回值:返回一个新对象,带着指定的原型对象和属性
注意:如果proto参数不是null或者非原始包装对象,则抛出一个TypeError异常
5.es6对象的新增的静态方法:比较两个值是否严格相等
Object.is(value1,value2) 作用:
比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致
es5比较两个值是否相等有两个运算符:
相等运算符(==)和严格星等运算符(===),缺点:
==会自动转换数据类型,===的NaN不等于自身,以及+0等于-0问题
es6提出同值相等(same-value equality)算法,用来解决es5的缺点
返回值:布尔类型:两个值一样:true , 两个值不一样:false
6.es6对象的新增的静态方法:合并和拷贝 !!
Object.assign(target , sorce1, sorce2,...){ }作用:
用于对象的合并,将源对象(sorce)的所有可枚举属性,复制到目标对象(target)上
参数:target:要合并或复制的对象,从第二个位置起可以传任意多个源对象
将多个源对象合并到一个目标对象上
特点:
(1)如果多个目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性
(2)Object.assign()方法实行的是浅拷贝,而不是深拷贝,也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用.
应用:
浅拷贝对象 / 对象的合并
const o1 = { name:"001" , height:100 }
const o2 = { name:"002" , gender:1 }
合并:将o2合并到o1上,o2作为源对象,o1会变化,o2不变
Object.assign(o1,o2) //o2name替换o1name
console.log(Object.is(target,o1)) //返回true
console.log(o1,o2) //o1会改变,o2不会改变
合并:o1,o2属性合并,且o1,o2不改变,空对象作为源对象
console.log( Object.assign( {} , o1 , o2 ) )
浅拷贝(复制):将obj复制,将空对象作为源对象
const obj = { a:1 , b:2, c:{ d:3 , e:4 } }
const clone = Object.assign( {} ,obj )
console.log( obj == clone ) //值相等
验证是深拷贝还是浅拷贝:
改变clone的c中的d属性 clone.c.d = 100;
console.log(obj)
打印obj,obj的d属性还是原来的属性值3,就证明是深拷贝 ;
obj的d属性的值为改变后的值就是浅拷贝,原因:
浅拷贝只会复制对象第一层值,对象A中还套有对象B,浅拷贝只是将对象B的值指向复制后的值,并不是真正的赋值,后期进行赋值会改变其中的内容
7.es6对象的新增一组静态方法:将对象的不同属性以数组的形式返回
Object.keys(obj):把对象的 (可枚举) 属性 (键) 以数组的形式返回
Object.values(obj):把对象的属性值 (键值) 以数组的形式返回
Object.entries(obj):把对象的键值对以二维数组的形式返回
const obj = { name:"001" , height:100 , gender:0 }
所有键组成的数组
const keys = Object.keys(obj) console.log(keys) //[ "name" , "heigth" , "gender" ]
提供了遍历对象的简洁方式:
Object.keys(obj).forEach(key => { console.log( obj[key] ) })
所有值组成的数组
const values = Object.values(obj) console.log(values)
所有键值对组成的数组 => 返回二维数组
const entries = Object.values(obj) console.log(entries)
8.es6对象的新增静态方法:将键值对转为对象
Object.fromEntirse(二维数组):把一个键值对数组转换为对象
应用场景:(1)将键值(属性和属性值)对转换为数组
(2)解析application/x-www-form-urlencoded字符串查询参数,得到一个对象
键值对和数组的来回转换
const obj = { name:"001" , gender:1 , height:100 }
const entrise = Object.entrise(obj)
=>键值对组成的二位数组 [ ['name','001'] , ["gender","1"] , ["height","100"] ]
即 const entrise = [ ['name','001'] , ["gender","1"] , ["height","100"] ]
console.log( Object.fromEntrise(entrise) ) //输出 { name:"001" , gender:1 , height:100 }
转换ajax字符串查询参数
const url = " userld = 10086&token=yyds "
const params = Object.fromEnteries(new URLSearchParams(url))
console.log(params) 打印
9.es6对象的新增一组静态方法:冻结
Object.freeze(obj.arr) 作用:
冻结一个对象/数组,返回冻结后的对象/数组,和源对象/数组是同一个对象/数组,
一旦对象/数组被冻结了之后,有如下特点:
(1)属性/下标元素不可删除
(2)属性/下标元素不可修改
(3)不可扩展(新增)新属性.元素,只能获取属性/指定下标的元素
Object.isFrozen():判断一个对象/数组是否被冻结了
Object.isExtensiable():判断一个对象/数组是否是可扩展的(是否可以在它上面添加新元素)
应用场景:定义枚举,枚举是一个有限集合,比如:性别/订单状态/星期等
const obj = { name:"001" , gender:"1" }
const o = Object.freeze(obj)
console.log(o) //和object相同{ name:"001" , gender:"1" }
console.log(object) //true
修改object: obj.name = "002" //会报错,冻结之后属性不可修改
删除 : delete obj.name 新增: obj.nickname = "003" //会报错,
冻结之后原对象不可修改,不可新增,不可删除
console.log( obj.name , obj.gender )
冻结之后,原对象可以获取属性,可以遍历
10.es6对象的新增一组静态方法:密封
Object.seal(obj/arr) 作用:
密封一个对象/数组,返回密封后的对象/数组,和源对象/数组是同一个对象/数组,
一旦对象/数组被密封了之后,有如下特点: 比Object.freeze()能力稍微i弱一点
(1)属性/下标元素不可删除
(2)不可扩展(新增)新属性/元素
(3)属性的值只要原来是可修改(写入)的就可以改变 / 下标元素可修改
(4)只能获取(读取)属性/下表元素 (只读性)
Object.isSealed():判断一个对象/数组是否被解封
Object.isExtensible():判断一个对象/数组是否是可扩展的
(密封了对象和数组是不可扩展的,级是不可以在它上面添加新的属性/元素的)