摘要:一对象初始化创建对象的两种方法对象初始化器或对象字面量参数成对的名称字符串与值任何值,其中名称通过冒号与值分隔之后简化了字面量写法写法以构造函数形式来调用参数任何值访问对象属性对象属性可以用下标小圆点标记或者方括号标记访问从开始,对象初始化
一、对象初始化 创建对象的两种方法:
1.对象初始化器或对象字面量:{[nameValuePair1[, nameValuePair2[, ...nameValuePairN]]]}
参数:nameValuePair1, nameValuePair2, ... nameValuePairN
成对的名称(字符串)与值(任何值),其中名称通过冒号与值分隔
es2015之后简化了字面量写法
let a = "foo", b = 42, c = {}; let object1 = { a: a, b: b, c: c }; //es2015写法 let object2 = { a, b, c }; console.log(object1.a === object2.a); //true
2.以构造函数形式来调用:new Object([value])
参数:value 任何值
let object = new Object({"foo": 123}); console.log(object.foo); //123访问对象属性
对象属性可以用下标小圆点标记或者方括号标记访问
let object = new Object({"b": 42}); console.log(object["b"]); // 42 object.b = "baz"; console.log(object.b); //"baz"
从ECMAScript 2015开始,对象初始化语法开始支持计算属性名,允许在[]中放入表达式,计算结果可以当做属性名
let i = 0; let object1 = { ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i }; console.log(object1.foo1); // 1 console.log(object1.foo2); // 2 console.log(object1.foo3); // 3 let param = "size"; let object2 = { [param]: 12, ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4 }; console.log(object2); // { size: 12, mobileSize: 4 }二、Object静态方法 1.Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象
语法:Object.defineProperty(obj, prop, descriptor)
参数:
obj 要在其上定义属性的对象
prop 要定义或修改的属性的名称
descriptor 将被定义或修改的属性描述符
configurable t当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false
enumerable 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false
value 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。默认为 undefined.
writable 当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false
get 作为该属性的 getter 函数,如果没有 getter 则为undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象。默认为 undefined
set 作为属性的 setter 函数,如果没有 setter 则为undefined。当属性值修改时,触发执行该方法,该方法将接受唯一参数,即该属性新的参数值。默认为 undefined
返回值:传递给函数的对象
(1)writable决定一个属性能否被赋值
let object = {}; Object.defineProperty(object,"a",{ value: 30, writable: true }); console.log(object.a); //30 object.a = 15; console.log(object.a); //15 Object.defineProperty(object,"b",{ value: 30, writable: false }); console.log(object.b); //30 object.b = 15; //TypeError: Cannot assign to read only property "b" of object "#
(2)enumerable决定该属性是否能被枚举
let object = {}; Object.defineProperty(object,"a",{ value: 15, writable: true, enumerable: true }); Object.defineProperty(object,"b",{ value: 16, writable: true, enumerable: false }); Object.defineProperty(object,"c",{ value: 17, writable: true, enumerable: true }); for (let i in object) { console.log(i+"=",object[i]); //a=15 c=17 } console.log(Object.keys(object)); //["a", "c"] console.log(object.propertyIsEnumerable("a")); // true console.log(object.propertyIsEnumerable("b")); // false console.log(object.propertyIsEnumerable("c")); // true
(3)configurable
let object = {}; Object.defineProperty(object,"a",{ get: () => { return 10; }, configurable: false }); Object.defineProperty(object,"a",{ value: 15 }); //TypeError: Cannot redefine property: a console.log(object.a); //10 object.b = 5; //等同于 Object.defineProperty(object,"b",{ value: 5, writable: true, configurable: true, enumerable: true }); Object.defineProperty(object,"d",{ value: 5 }); //等同于 Object.defineProperty(object,"b",{ value: 5, writable: false, configurable: false, enumerable: false });
(4)set/get
function Test() { let x = null; let arr = []; Object.defineProperty(this,"x",{ get: () => { console.log("get"); return x; }, set: (value) => { console.log("set"); x = value; arr.push(x); } }); this.getTest = function () { return arr; } } let test = new Test(); test.x; //get test.x = 25; //set test.x = 30; //set console.log(test.getTest()); //[25, 30]2.Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象
语法:Object.defineProperties(obj, props)
参数:
obj 要在其上定义属性的对象
props 要定义其可枚举属性或修改的属性描述符的对象
返回值:被传递给函数的对象
let object = {}; Object.defineProperties(object, { "property1": { value: true, writable: true }, "property2": { value: "Hello", writable: false } });3.Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符,自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性
语法:Object.getOwnPropertyDescriptor(obj, prop)
参数:
obj 需要查找的目标对象
prop 目标对象内属性名称(String类型)
返回值:如果指定的属性存在于对象上,则返回其属性描述符对象(property descriptor),否则返回 undefined
let object = { bar: 42, get foo() { return 17; } }; let foo = Object.getOwnPropertyDescriptor(object, "foo"); // { // configurable: true, // enumerable: true, // get: /*the getter function*/, // set: undefined // } let bar = Object.getOwnPropertyDescriptor(object, "bar"); // { // configurable: true, // enumerable: true, // value: 42, // writable: true // } Object.defineProperty(object, "baz", { value: 8675309, writable: false, enumerable: false }); let baz = Object.getOwnPropertyDescriptor(object, "baz"); // { // configurable: false, // enumerable: false, // value: 8675309, // writable: false // }4.Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符
语法:Object.getOwnPropertyDescriptors(obj)###
参数:
obj 任意对象
返回值:所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象
let object = { bar: 42, get foo() { return 17; } }; Object.getOwnPropertyDescriptors(object); //{ // bar: {value: 42, writable: true, enumerable: true, configurable: true}, // foo: {get: ƒ, set: undefined, enumerable: true, configurable: true} // } function SuperClass() {} SuperClass.prototype = { x: 15, y: 20 }; let superClass = new SuperClass(); superClass.a = 50; superClass.b = 100; function SubClass() {} SubClass.prototype = Object.create(SuperClass.prototype, Object.getOwnPropertyDescriptors(superClass)); let subClass = new SubClass(); console.log(subClass.a); //505.Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组
语法:Object.getOwnPropertyNames(obj)
参数:
obj 一个对象,其自身的可枚举和不可枚举属性的名称被返回
返回值:在给定对象上找到的属性对应的字符串数组
let arr = ["a", "b", "c"]; console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"] // 类数组对象 let object = { 0: "a", 1: "b", 2: "c"}; console.log(Object.getOwnPropertyNames(object).sort()); // ["0", "1", "2"]6.Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组
语法:Object.getOwnPropertySymbols(obj)
参数:
obj 要返回 Symbol 属性的对象
返回值:在给定对象自身上找到的所有 Symbol 属性的数组
let object = {}; let a = Symbol("a"); let b = Symbol.for("b"); object[a] = "localSymbol"; object[b] = "globalSymbol"; let objectSymbols = Object.getOwnPropertySymbols(object); console.log(objectSymbols.length); // 2 console.log(objectSymbols); // [Symbol(a), Symbol(b)] console.log(objectSymbols[0]); // Symbol(a)7.Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
语法:Object.create(proto, [propertiesObject])
参数:
proto 新创建对象的原型对象
propertiesObject 可选,这些属性对应Object.defineProperties()的第二个参数。
返回值:一个新对象,带着指定的原型对象和属性
function Father() { this.x = 0; this.y = 0; } Father.prototype.move = function (x,y) { this.x += x; this.y += y; }; function Son() { Father.call(this); //调用父类构造函数 } Son.prototype = Object.create(Father.prototype); Son.prototype.constructor = Son; let son = new Son(); console.log(son instanceof Son); //true console.log(son instanceof Father); //true8.Object.getPrototypeOf() 方法返回指定对象的原型
语法:Object.getPrototypeOf(object)
obj 要返回其原型的对象
返回值:给定对象的原型,如果没有继承属性,则返回 null
let proto = {}; let object = Object.create(proto); Object.getPrototypeOf(object) === proto; // true let reg = /a/; Object.getPrototypeOf(reg) === RegExp.prototype; // true9.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
语法:Object.assign(target, ...sources)
参数:
target 目标对象
sources 源对象
返回值:目标对象
let obj = { a: 1 }; let copy = Object.assign({}, obj); console.log(copy); // { a: 1 }
此方法是浅拷贝,Object.assign()拷贝的是属性值,如果源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值
let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.b.c = 3; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} console.log(JSON.stringify(obj2)); // { a: 1, b: { c: 3}}
如何实现深拷贝
let obj1 = { a: 0 , b: { c: 0}}; let obj2 = JSON.parse(JSON.stringify(obj1)); obj1.b.c = 4; console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
合并两个对象
let obj1 = { a: 1, b: 1, c: 1 }; let obj2 = { b: 2, c: 2 }; let obj3 = { c: 3 }; let newObj = Object.assign({}, obj1, obj2, obj3); console.log(newObj); // { a: 1, b: 2, c: 3 }10.Object.is()方法判断两个值是否是相同的值
语法:Object.is(value1, value2);
参数:
value1 需要比较的第一个值
value2 需要比较的第二个值
返回值:表示两个参数是否相同的Boolean
以下情况返回true:
两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其它同一个数字
console.log(NaN === NaN); //false console.log(NaN == NaN); //false console.log(Object.is(NaN,NaN)); //true console.log(0 == false); //true console.log(0 === false); //false console.log(Object.is(0,false)); //false console.log(-0 == 0); //true console.log(-0 === 0); //true console.log(Object.is(-0,0)); //false11.Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)
语法: Object.isExtensible(obj)
参数:
obj 需要检测的对象
返回值:表示给定对象是否可扩展的一个Boolean
语法:Object.isSealed(obj)
参数:
obj 要被检查的对象
返回值:表示给定对象是否被密封的一个Boolean
语法:Object.isFrozen(obj)
参数:
obj 被检测的对象
返回值:表示给定对象是否被冻结的Boolean
语法:Object.preventExtensions(obj)
参数:
obj 将要变得不可扩展的对象
返回值:已经不可扩展的对象
描述:不可扩展对象不能再添加新的属性,但是原有的属性仍然可被编辑、删除
非空对象(其属性的configurable为true,writable为true):
let object = { a:1, b:2 }; console.log(Object.isExtensible(object)); // true Object.preventExtensions(object); console.log(Object.isExtensible(object)); //false console.log(Object.isSealed(object)); // false console.log(Object.isFrozen(object)); // false ob.b = 20; //可以赋值 console.log(ob.b); //20 delete ob.b; //可以删除 console.log(ob); //{a: 1} Object.defineProperty(ob,"c",{ // 不可以添加属性 value: 3, writable: true }); //Cannot define property c, object is not extensible
非空对象(其属性的configurable为false,writable为true):
let empty = {}; Object.defineProperty(empty,"foo",{ value: "baz", writable: true }); Object.preventExtensions(empty); console.log(Object.isExtensible(empty)); // false console.log(Object.isSealed(empty)); // true console.log(Object.isFrozen(empty)); // false
非空对象(其属性的configurable为true,writable为false):
let empty = {}; Object.defineProperty(empty,"foo",{ value: "baz", writable: false, configurable: true }); Object.preventExtensions(empty); console.log(Object.isExtensible(empty)); // false console.log(Object.isSealed(empty)); // false console.log(Object.isFrozen(empty)); // false
非空对象(其属性的configurable为false,writable为false):
let empty = {}; Object.defineProperty(empty,"foo",{ value: "baz" }); Object.preventExtensions(empty); console.log(Object.isExtensible(empty)); // false console.log(Object.isSealed(empty)); // true console.log(Object.isFrozen(empty)); // true
空对象:
let empty1 = {}; console.log(Object.isExtensible(empty1)); // true Object.preventExtensions(empty1); console.log(Object.isExtensible(empty1)); //false console.log(Object.isSealed(empty1)); // true console.log(Object.isFrozen(empty1)); // true15.Object.seal()方法封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变
语法:Object.seal(obj)
参数:
obj 将要被密封的对象
返回值:被密封的对象
描述:密封一个对象会让这个对象变的不能添加新属性,且所有已有属性会变的不可配置
空对象:
let empty = {}; Object.seal(empt); console.log(Object.isExtensible(empty)); // false console.log(Object.isSealed(empty)); // true console.log(Object.isFrozen(empty)); // true
非空对象:
let object = { foo: "bar" }; Object.seal(object); object.foo = "baz"; //可编辑 console.log(object.foo); //baz delete object.foo; //TypeError: Cannot delete property "foo" of #16.Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的
语法:Object.freeze(obj)
参数:
obj 要被冻结的对象
返回值:被冻结的对象
描述:被冻结对象自身的所有属性都不可能以任何方式被修改,如果一个属性的值是个对象,则这个对象中的属性是可以修改的,除非它也是个冻结对象
let object1 = { property1: 42 }; Object.freeze(object1); console.log(Object.isExtensible(object1)); // false console.log(Object.isSealed(object1)); // true console.log(Object.isFrozen(object1)); // true object1.property1 = 33; // TypeError: Cannot assign to read only property "property1" of object "#17.Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致
语法:Object.entries(obj)
参数:
obj 可以返回其可枚举属性的键值对的对象
返回值:给定对象自身可枚举属性的键值对数组
const object1 = { foo: "bar", baz: 42 }; console.log(Object.entries(object1)); // [ ["foo", "bar"], ["baz", 42] ] // array like object const object2 = { 0: "a", 1: "b", 2: "c" }; console.log(Object.entries(object2)); // [ ["0", "a"], ["1", "b"], ["2", "c"] ] // array like object with random key ordering const object3 = { 100: "a", 2: "b", 7: "c" }; console.log(Object.entries(object3)); // [ ["2", "b"], ["7", "c"], ["100", "a"] ]18.Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致
语法:Object.keys(obj)
参数:
obj 要返回其枚举自身属性的对象
返回值:一个表示给定对象的所有可枚举属性的字符串数组
let arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // ["0", "1", "2"] // array like object let object = { 0: "a", 1: "b", 2: "c" }; console.log(Object.keys(object)); // ["0", "1", "2"]19.Object.values()方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同
语法:Object.values(obj)
参数:
obj 被返回可枚举属性值的对象
返回值:一个包含对象自身的所有可枚举属性值的数组
let arr = ["a", "b", "c"]; console.log(Object.values(arr)); // ["a", "b", "c"] // array like object let object = { 0: "a", 1: "b", 2: "c" }; console.log(Object.values(object)); // ["a", "b", "c"]三、Object实例方法 1.hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性
语法:obj.hasOwnProperty(prop)
参数:
prop 要检测的属性 字符串 名称或者 Symbol
返回值:用来判断某个对象是否含有指定的属性的 Boolean
描述:这个方法可以用来检测一个对象是否含有特定的自身属性;和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性
let object = new Object(); object.prop = "exists"; console.log(object.hasOwnProperty("prop")); // true console.log(object.hasOwnProperty("toString")); // false console.log(object.hasOwnProperty("hasOwnProperty")); // false console.log("toString" in object); // true console.log("prop" in object); // true console.log("hasOwnProperty" in object); // true2.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上
语法:prototypeObj.isPrototypeOf(object)
参数:
object 在该对象的原型链上搜寻
返回值:Boolean,表示调用对象是否在另一个对象的原型链上
function Foo() {} function Bar() {} function Baz() {} Bar.prototype = Object.create(Foo.prototype); Baz.prototype = Object.create(Bar.prototype); let baz = new Baz(); console.log(Baz.prototype.isPrototypeOf(baz)); // true console.log(Bar.prototype.isPrototypeOf(baz)); // true console.log(Foo.prototype.isPrototypeOf(baz)); // true console.log(Object.prototype.isPrototypeOf(baz)); // true3.propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举
语法:obj.propertyIsEnumerable(prop)
参数:
prop 需要测试的属性名
返回值:用来表示指定的属性名是否可枚举的Boolean
let o = {}; let a = []; o.prop = "is enumerable"; a[0] = "is enumerable"; o.propertyIsEnumerable("prop"); // 返回 true a.propertyIsEnumerable(0); // 返回 true4.toString() 方法返回一个表示该对象的字符串
语法:object.toString()
返回值:表示该对象的字符串
let object = new Object(); console.log(object.toString()); //[object Object] function Animal(name,age,color,sex) { this.name = name; this.age = age; this.color = color; this.sex = sex; } Animal.prototype.toString = function () { let string = this.name + "是一个" + this.age + "岁的" + this.color + "的" + this.sex + "动物"; return string; }; let animal = new Animal("小可爱",1,"灰色","雌性"); console.log(animal.toString()); //小可爱是一个1岁的灰色的雌性动物5.valueOf() 方法返回指定对象的原始值
语法:object.valueOf()
返回值:返回值为该对象的原始值
function Animal(name,age,color,sex) { this.name = name; this.age = age; this.color = color; this.sex = sex; } let animal = new Animal("小可爱",1,"灰色","雌性"); console.log(animal.valueOf()); //{name: "小可爱", age: 1, color: "灰色", sex: "雌性"}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97484.html
摘要:原文链接一个变量可以存放两种类型的值,基本类型的值和引用类型的值。引入了一种新的原始数据类型,表示独一无二的值。 原文链接 一个变量可以存放两种类型的值,基本类型的值(primitive values)和引用类型的值(reference values)。 ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:Un...
摘要:前提知识在实现克隆函数之前你需要明白以下一些概念如果你已经明白了请直接阅读实现部分什么是值类型引用类型很多新手可能会对值类型引用类型原始类型基本类型等等名称感到困惑这里就解释一下这些概念一个事物是可以有多种区分形式的比如猫我们可以说它是猫科 前提知识 在实现克隆函数之前,你需要明白以下一些概念,如果你已经明白了,请直接阅读 实现 部分. 什么是值类型、引用类型? 很多新手可能会对 值类...
摘要:原始类型和引用类型原始类型存储简单数据值,引用类型存储对象,其本质是指向内存位置的应用。保存指向内存中实际对象所在位置的指针鉴别引用类型操作符以一个对象和一个构造函数为参数。这些特殊引用类型的存在使得原始引用类型用起来和对象一样方便。 原始类型和引用类型 1.原始类型存储简单数据值,引用类型存储对象,其本质是指向内存位置的应用。 注:其他编程语言用栈存储原始类型,用堆存储引用类型。Ja...
摘要:值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上,我们用其检测出来的结果都是。但检测与不一样,还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中...
摘要:值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上,我们用其检测出来的结果都是。但检测与不一样,还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中...
摘要:值的比较只进行值的比较会进行数据类型的转换。只要在当前实例的原型链上,我们用其检测出来的结果都是。但检测与不一样,还可以处理基本数据类型的检测。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中...
阅读 3169·2021-11-23 09:51
阅读 1507·2021-11-22 09:34
阅读 2814·2021-10-27 14:15
阅读 2233·2021-10-12 10:17
阅读 1869·2021-10-12 10:12
阅读 896·2021-09-27 14:00
阅读 1981·2021-09-22 15:19
阅读 986·2019-08-30 10:51