京紫元年深圳网站建设,网站开发 确认函,网站内链怎么布局,杭州免费网站建站模板一、对象字面量语法扩展
1、属性简写
当属性名称和属性值的变量名称相同时#xff0c;可以省略冒号的变量名称。
const foo barconst baz { foo }
// 等同于
const baz { foo: foo }baz // { foo: bar }function f(x, y) {return { x, y }
}
// 等同于
function f(x, y)…一、对象字面量语法扩展
1、属性简写
当属性名称和属性值的变量名称相同时可以省略冒号的变量名称。
const foo barconst baz { foo }
// 等同于
const baz { foo: foo }baz // { foo: bar }function f(x, y) {return { x, y }
}
// 等同于
function f(x, y) {return { x: x, y: y }
}f(1, 2) // Object { x: 1, y: 2 }2、方法简写
es6 可以省略冒号和函数关键字
// es5
const o {method: function() {return Hello!}
}// es6
const o {method() {return Hello!}
}let birth 2000/01/01const Person {name: 张三,// 等同于 birth: birthbirth,// 等同于 hello: function ()...hello() { console.log(我的名字是, this.name) }
}CommonJS 模块输出一组变量就非常合适使用简洁写法。
function getItem (key) {return key in ms ? ms[key] : null
}function setItem (key, value) {ms[key] value
}function clear () {ms {}
}module.exports { getItem, setItem, clear }
// 等同于
module.exports {getItem: getItem,setItem: setItem,clear: clear
}3、计算属性名
JavaScript 定义对象的属性有两种方法。但是如果使用字面量方式定义对象使用大括号在 ES5 中只能使用方法一标识符定义属性。
// 方法一标识符作为属性名
obj.foo true// 方法二表达式作为属性名
obj[a bc] 123ES6 允许字面量定义对象时属性名可以计算用方括号表达式法进行计算方括号中的值为表达式最终结果为表达式计算的结果。
let lastWord last wordconst obj {first word: hello,[lastWord]: world,[h ello]() {return hi}
}obj[first word] // hello
obj[lastWord] // world
obj[last word] // world
obj.hello() // hi注意属性名表达式与简洁表示法不能同时使用会报错。
// 报错
const foo bar
const bar abc
const baz { [foo] }// 正确
const foo bar
const baz { [foo]: abc}注意属性名表达式如果是一个对象默认情况下会自动将对象转为字符串 [object Object]这一点要特别小心。
const keyA { a: 1 }
const keyB { b: 2 }const myObject {[keyA]: valueA,[keyB]: valueB
}myObject // Object {[object Object]: valueB}二、super 关键字
我们知道this 关键字总是指向函数所在的当前对象ES6 又新增了另一个类似的关键字 super指向当前对象的原型对象。
const proto {foo: hello
}const obj {foo: world,find() {return super.foo}
}Object.setPrototypeOf(obj, proto)
obj.find() // hello注意super 关键字表示原型对象时只能用在对象的方法之中用在其他地方都会报错。
// 报错super 用在属性里面
const obj {foo: super.foo
}// 报错super 用在一个函数里面然后赋值给 foo 属性
const obj {foo: () super.foo
}// 报错super 用在一个函数里面然后赋值给 foo 属性
const obj {foo: function () {return super.foo}
}上面三种 super 的用法都会报错因为对于 JavaScript 引擎来说这里的 supe r都没有用在对象的方法之中。第一种写法是 super 用在属性里面第二种和第三种写法是 super 用在一个函数里面然后赋值给 foo 属性。目前只有对象方法的简写法可以让 JavaScript 引擎确认定义的是对象的方法。
JavaScript 引擎内部super.foo 等同于 Object.getPrototypeOf(this).foo属性或Object.getPrototypeOf(this).foo.call(this)方法。
const proto {x: hello,foo() {console.log(this.x)}
}const obj {x: world,foo() {super.foo()}
}Object.setPrototypeOf(obj, proto)obj.foo() // world上面代码中super.foo 指向原型对象 proto 的 foo 方法但是绑定的 this 却还是当前对象 obj因此输出的就是 world 。
三、对象的扩展运算符
对象的扩展运算符…用于取出参数对象的所有可遍历属性拷贝到当前对象之中。
拷贝的属性为浅拷贝。即如果一个键的值是复合类型的值数组、对象、函数、那么拷贝的是这个值的引用而不是这个值的副本。
1、基本语法
对象不能直接展开必须在 {} 中展开。
let z { a: 3, b: 4 }
let n { ...z } // { a: 3, b: 4 }数组是特殊的对象所以对象的扩展运算符也可以用于数组。
let foo { ...[a, b, c] }
foo // { 0: a, 1: b, 2: c }如果扩展运算符后面是一个空对象则没有任何效果。
{ ...{}, a: 1 } // { a: 1 }如果扩展运算符后面不是对象则会自动将其转为对象。
// 等同于 { ...Object(1) }
{ ...1 } // {} // 等同于 { ...Object(true) }
{ ...true } // {}// 等同于 { ...Object(undefined) }
{ ...undefined } // {}// 等同于 { ...Object(null) }
{ ...null } // {}如果扩展运算符后面是字符串它会自动转成一个类似数组的对象因此返回的不是空对象。
{ ...hello } // { 0: h, 1: e, 2: l, 3: l, 4: 0 }对象的扩展运算符只会返回参数对象自身的、可枚举的属性这一点要特别小心尤其是用于类的实例对象时。
// m() 方法定义在 C 的原型对象上对实例 c 进行扩展时不会返回 c 的方法 c.m()
class C {p 12m() {}
}let c new C()
let clone { ...c }clone.p // ok
clone.m() // 报错如果想完整克隆一个对象还拷贝对象原型的属性可以采用下面的写法。
// 写法一不推荐__proto__ 属性在非浏览器的环境不一定部署。
const clone1 {__proto__: Object.getPrototypeOf(obj)...obj
}// 写法二
const clone2 Object.assign(Object.create(Object.getPrototypeOf(obj))obj
)// 写法三
const clone3 Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj)
)对象的扩展运算符等同于使用 Object.assign() 方法。
let aClone { ...a }
// 等同于
let aClone Object.assign({}, a)2、用途
1复制对象
const a { x: 1, y: 2 }
const c { ...a }
console.log(c, c a) // { x: 1, y: 2 } false 浅拷贝2合并对象
const apple {color: 红色,shape: 球形,taste: 甜
}const pen {color: 黑色,shape: 圆柱形,use: 写字
}// 新对象拥有全部属性相同属性后者覆盖前者
{ ...apple, ...pen } // { color: 黑色, shape: 圆柱形, taste: 甜, use: 写字 }
{ ...pen, ...apple } // { color: 红色, shape: 球形, use: 写字, taste: 甜 }// 等同于
Object.assign({}, apple, pen)3与解构赋值结合
对象的解构赋值用于从一个对象取值相当于将目标对象自身的所有可遍历的enumerable、但尚未被读取的属性分配到指定的对象上面。所有的键和它们的值都会拷贝浅拷贝到新对象上面。
let { x, y, ...z } { x: 1, y: 2, a: 3, b: 4 }
x // 1
y // 2
z // { a: 3, b: 4 }// 浅拷贝
let obj { a: { b: 1 } }
let { ...x } obj
obj.a.b 2
x.a.b // 2由于解构赋值要求等号右边是一个对象所以如果等号右边是 undefined 或 null就会报错因为它们无法转为对象。
let { ...z } null // 运行时错误
let { ...z } undefined // 运行时错误扩展运算必须是最后一个参数否则会报错。
let { ...x, y, z } someObject // 句法错误
let { x, ...y, ...z } someObject // 句法错误另外扩展运算符的解构赋值不能复制继承自原型对象的属性。
// 对象 o3 复制了 o2但是只复制了 o2 自身的属性没有复制它的原型对象 o1 的属性。
let o1 { a: 1 }
let o2 { b: 2 }
o2.__proto__ o1
let { ...o3 } o2
o3 // { b: 2 }
o3.a // undefined变量 x 是单纯的解构赋值所以可以读取对象 o 继承的属性变量 y 和 z 是扩展运算符的解构赋值只能读取对象 o 自身的属性所以变量 z 可以赋值成功变量y取不到值。
const o Object.create({ x: 1, y: 2 })
o.z 3let { x, ...newObj } o
let { y, z } newObj
x // 1
y // undefined
z // 3// ES6 规定变量声明语句之中如果使用解构赋值扩展运算符后面必须是一个变量名而不能是一个解构赋值表达式。以下写法会报错。
let { x, ...{ y, z } } o
// SyntaxError: ... must be followed by an identifier in declaration contexts解构赋值的一个用处是扩展某个函数的参数引入其他操作。
function baseFunction({ a, b }) {// ...
}
function wrapperFunction({ x, y, ...restConfig }) {// 使用 x 和 y 参数进行操作// 其余参数传给原始函数return baseFunction(restConfig)
}上面代码中原始函数 baseFunction 接受 a 和 b 作为参数函数 wrapperFunction 在 baseFunction 的基础上进行了扩展能够接受多余的参数并且保留原始函数的行为。
四、对象的新增方法
1、Object.is()
ES5 中比较两个值是否相等只有两个运算符
运算符说明相等运算符弱类型相等运算符它比较两个值是否相等如果两个值类型不同会自动进行类型转换后再比较。 缺点会自动转换数据类型。严格相等运算符严格类型相等运算符它比较两个值的类型和值是否都相等如果类型不同或值不同返回 false。 缺点NaN 不等于自身以及 0 等于 -0。
ES 新增的 Object.is 方法与严格相等运算符的行为基本一致并解决了严格相等运算符存在的问题 0 不等于 -0、NaN 等于自身。
Object.is(foo, foo)// true
// 、、Object.is() 在比较引用类型比较时比较的是内存的地址不是内容。
Object.is({}, {}) // false 0 -0 //true
NaN NaN // falseObject.is(0, -0) // false
Object.is(NaN, NaN) // true了解ES5 可以通过下面的代码实现 Object.is 方法。
Object.defineProperty(Object, is, {value: function(x, y) {if (x y) {// 针对 0 不等于 -0 的情况return x ! 0 || 1 / x 1 / y}// 针对 NaN 的情况return x ! x y ! y},configurable: true,enumerable: false,writable: true
})2、Object.assign()
Object.assign() 方法用于对象的合并用于将一个或多个源对象的所有属性复制到目标对象。
语法说明
Object.assign(target, ...sources)参数说明target目标对象接收复制的属性。sources一个或多个源对象从中复制属性到目标对象。
/* 基本用法 */
const target { a: 1 }
const source1 { b: 2 }
const source2 { c: 3 }
Object.assign(target, source1, source2)
target // {a:1, b:2, c:3}/* 同名属性覆盖 */
const target { a: { b: c, d: e } }
const source { a: { b: hello } }
Object.assign(target, source) // { a: { b: hello } }/* 返回值是目标对象如果该参数不是对象则会先转成对象然后返回。*/
const obj { a: 1 }
Object.assign(obj) obj // true
typeof Object.assign(2) // object/* 基本数据类型作为源对象先转换成对象再合并*/
Object.assign({}, str) // { 0: s, 1: t, 2: r }
Object.assign({}, 1) // {}
Object.assign({}, true) // {}
Object.assign({}, undefined) // {}
Object.assign({}, null) // {}/* 数组的处理将数组视为对象 */
Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3] 把数组视为属性名为 0、1、2 的对象源数组的 0 号属性 4 覆盖了目标数组的 0 号属性 1。/* 浅拷贝 */
const obj1 { a: { b: 1 } }
const obj2 Object.assign({}, obj1)
obj1.a.b 2
obj2.a.b // 2/* 不拷贝不可枚举的属性 */
const v1 abc
const v2 true
const v3 10
const obj Object.assign({}, v1, v2, v3)
obj // { 0: a, 1: b, 2: c }/* 不拷贝源对象的原型链上的属性 */
const parent { parentProp: I am from the parent }
// 定义一个子对象并将父对象作为其原型
const child Object.create(parent, { childProp: I am from the child
})
Object.assign({}, child) // { childProp: I am from the child }注意点
Object.assign() 只拷贝源对象的自身属性不拷贝继承属性也不拷贝不可枚举的属性enumerable: false。
如果目标对象已经具有与源对象相同的属性名则会覆盖目标对象的属性值。
Object.assign() 是浅拷贝复制的是引用而不是对象本身。
返回值是目标对象。
常见用途
为对象添加属性
// 通过 Object.assign() 方法将 x 属性和 y 属性添加到 Point 类的对象实例
class Point {constructor(x, y) {Object.assign(this, {x, y})}
}为对象添加方法
Object.assign(SomeClass.prototype, {someMethod(arg1, arg2) { ··· },anotherMethod() { ··· }
})// 等同于下面的写法
SomeClass.prototype.someMethod function (arg1, arg2) {···
}
SomeClass.prototype.anotherMethod function () {···
}克隆对象
// 只能克隆原始对象自身的值不能克隆它继承的值
function clone(origin) {return Object.assign({}, origin)
}合并多个对象
const merge (target, ...sources) Object.assign(target, ...sources)const merge (...sources) Object.assign({}, ...sources) // 合并后返回一个新对象为属性指定默认值
// 默认值由于存在浅拷贝的问题DEFAULTS 对象和 options 对象的所有属性的值最好都是简单类型不要指向另一个对象。
const DEFAULTS {logLevel: 0,outputFormat: html
}function processContent(options) {options Object.assign({}, DEFAULTS, options) // options 对象是用户提供的参数// ...
}3、Object.getOwnPropertyDescriptors()
语法说明
Object.getOwnPropertyDescriptor() 方法
ES5 引入获取单个属性的描述符会返回某个对象属性的描述对象。
Object.getOwnPropertyDescriptors() 方法
ES 2017 引入获取所有属性的数据描述符 返回指定对象所有自身属性非继承属性的描述对象。
// 返回一个对象所有原对象的属性名都是该对象的属性名对应的属性值就是该属性的描述对象。
const obj {foo: 123,get bar() { return abc }
}Object.getOwnPropertyDescriptors(obj)
/* {foo: {value: 123, // 属性的值writable: true, // 属性的值是否可被改变enumerable: true, // 属性的值是否可被枚举configurable: true // 描述符本身是否可被修改属性是否可被删除},bar: {get: [Function: get bar], // 获取该属性的访问器函数getter。如果没有访问器 该值为undefined。set: undefined, // 获取该属性的设置器函数setter。 如果没有设置器 该值为undefinedenumerable: true,configurable: true}
} */
使用 ES5 的 Object.getOwnPropertyDescriptor() 方法实现 Object.getOwnPropertyDescriptors() 方法。
function getOwnPropertyDescriptors(obj) {const result {}for (let key of Reflect.ownKeys(obj)) {result[key] Object.getOwnPropertyDescriptor(obj, key)}return result
}常见用途
拷贝 get 属性和 set 属性
Object.assigns方法无法正确拷贝get属性和set属性。
const source {set foo(value) { // 赋值函数console.log(value)}
}const target1 {}
// Object.assign 方法总是拷贝一个属性的值而不会拷贝它背后的赋值方法或取值方法。
Object.assign(target1, source)Object.getOwnPropertyDescriptor(target1, foo)
/* {value: undefined, // Object.assign 方法拷贝后属性值变为 undefinedwritable: true,enumerable: true,configurable: true
} */Object.getOwnPropertyDescriptors() 方法配合 Object.defineProperties() 方法就可以实现正确拷贝。
const source {set foo(value) { // 赋值函数console.log(value)}
}const target2 {}
// Object.defineProperties() 方法将直接在对象上定义一个或多个新的属性或修改现有属性并返回该对象。
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source))
Object.getOwnPropertyDescriptor(target2, foo)
/* {get: undefined,set: [Function: set foo],enumerable: true,configurable: true
} */// 拷贝方法封装
const shallowMerge (target, source) Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)
)配合 Object.create() 方法将对象属性克隆到一个新对象浅拷贝
/* Object.create(proto, propertiesObject)说明以一个现有对象作为原型创建一个新对象。参数1. proto新创建对象的原型对象。2. propertiesObject 可选如果该参数被指定且不为 undefined则该传入对象可枚举的自有属性将为新创建的对象添加具有对应属性名称的属性描述符。这些属性对应于 Object.defineProperties() 的第二个参数。返回值根据指定的原型对象和属性创建的新对象。
*//* Object.getPrototypeOf()说明返回指定对象的原型即内部 [[Prototype]] 属性的值。返回值要返回其原型的对象。
*/
const clone Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj))// 或着
const shallowClone (obj) Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj)
)实现一个对象继承另一个对象
// 1. __proto__写法
const obj {__proto__: prot,foo: 123,
}// 2. Object.create 写法
const obj Object.create(prot)
obj.foo 123// 3. Object.assign Object.create 写法
const obj Object.assign(Object.create(prot),{ foo: 123 }
)// 4. Object.create Object.getOwnPropertyDescriptors 写法
const obj Object.create(prot,Object.getOwnPropertyDescriptors({foo: 123})
)4、proto 属性Object.setPrototypeOf()Object.getPrototypeOf()
名称说明proto 属性用来读取或设置当前对象的原型对象prototype。内部属性不推荐使用。Object.setPrototypeOf()用来设置一个对象的原型对象prototype返回参数对象本身。Object.setPrototypeOf(object, prototype)Object.setPrototypeOf()用来读取一个对象的原型对象prototype。
__proto__本质上是一个内部属性而不是一个正式的对外的 API只是由于浏览器广泛支持才被加入了 ES6。推荐使用 Object.setPrototypeOf()写操作、Object.getPrototypeOf()读操作、Object.create()生成操作代替。
// __proto__写法
const obj {method: function() { ... }
}
obj.__proto__ someOtherObj// Object.create 写法
var obj Object.create(someOtherObj)
obj.method function() { ... }// Object.setPrototypeOf 写法
Object.setPrototypeOf(obj, someOtherObj)5、Object.keys()Object.values()Object.entries()
方法说明Object.keys返回一个数组成员是参数对象自身的不含继承的所有可遍历enumerable属性的键名。Object.values返回一个数组成员是参数对象自身的不含继承的所有可遍历enumerable属性的键值。Object.entries返回一个数组成员是参数对象自身的不含继承的所有可遍历enumerable属性的键值对数组。
// 基本用法
const person {name: Alex,age: 18
}
// 返回键数组
console.log(Object.keys(person)) // [ name, age ]
// 返回值数组
console.log(Object.values(person)) // [ Alex, 18 ]
// 返回键值二维数组
console.log(Object.entries(person)) // [ [ name, Alex ], [ age, 18 ] ]// 与数组类似方法的区别
console.log([1, 2].keys()) // Object [Array Iterator] {}
console.log([1, 2].values()) // Object [Array Iterator] {}
console.log([1, 2].entries()) // Object [Array Iterator] {}
// 数组的 keys()、values()、entries() 等方法是实例方法返回的都是 Iterator
// 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法返回的是数组// 应用使用 for...of 循环遍历对象
const person {name: Alex,age: 18
}
for (const key of Object.keys(person)) {console.log(key)
}
// name
// age
for (const value of Object.values(person)) {console.log(value)
}
// Alex
// 18
for (const entries of Object.entries(person)) {console.log(entries)
}
// [ name, Alex ]
// [ age, 18 ]
for (const [key, value] of Object.entries(person)) {console.log(key, value)
}
// name Alex
// age 18// Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子这一点和 for in 是一样的
// 如果对遍历顺序有要求那么不能用 for in 以及这种方法而要用其他方法6、Object.hasOwn()
JavaScript 对象的属性分成两种自身的属性和继承的属性。
对象实例有一个 hasOwnProperty() 方法可以判断某个属性是否为原生属性。
ES2022 在 Object 对象上面新增了一个静态方法 Object.hasOwn()也可以判断是否为自身的属性。
const foo Object.create({ a: 123 })
foo.b 456Object.hasOwn(foo, a) // false
Object.hasOwn(foo, b) // trueObject.hasOwn() 的一个好处是对于不继承 Object.prototype 的对象不会报错而 hasOwnProperty() 是会报错的。
// Object.create(null)返回的对象obj是没有原型的不继承任何属性
const obj Object.create(null)obj.hasOwnProperty(foo) // 报错
Object.hasOwn(obj, foo) // false
