威尼斯人线上娱乐

JS获取对象

5 5月 , 2019  

平时在写的代码进度中,平日会碰着对目标Object的数据管理。而在对目的的数量管理中,操作最频仍的是“数据援引”、“值的改换”、“获取首要字(属性)”。日常最烦的也是“获取主要字”,日常忘记怎么去获取,这里做一下收十。

在读别人的代码的时候发掘了利用了Object.keys(obj)的函数,因而记录下用法

类型 和 对象

JS弱类型:变量并不曾一向类型,而值有档期的顺序;(Typescript有等级次序)
7类型:string、number、boolean、null、undefined、symbol、object、
主导项目:除对象以外的6种
通过typeof:能够检测数据类型,除了null(重临的是object)

停放对象(原生函数):String()、Number()、Boolean()、Object()、Funciton()、Array()、Date()、RegExp()、Error()、symbol()
是目的是函数是构造函数

创建的2中方式:
一.文字语法:var a = { key:value };
大约的中坚项目:开创的是字面量

二.构造器语法: var a = new Object(); a.key = value
骨干类型封装对象:透过组织器函数创立的是包装了基本类型值的包装对象

JS获取对象。目标内部的[[Class]]属性:
对象的当中分类,区分分化的靶子(Date对象、String对象…)
访问[[Class]]:Object.prototype.toString(..)

主旨项目封装:基本类型值未有.length等艺术,要求封装成对应的子对象才有所艺术和总体性。
活动封装:运用字面量调用方法时,引擎将电动目的基本类型值举行打包
向来不供给手动封装:浏览器已经对象.length等常见景色进行了优化,直接运用封装对象来”提前优化”反而降低作用
拆封:valueOf()获取对象中的value值

PS: 成立方式上 unll 和
undefined:
唯有文字格局,未有构造函数;Date:唯有对象,未有文字格局
Object、Array、RegExp、Function:文字格局、构造器创制都是目的

字面量和包裹对象 关系:

var str = "I am a string"; // 创建 字符串字面量
var strObject = new String("I am a string"); // 创建 字符串对象

console.log(str) // I am a string
console.log(strObject) // String {"I am a string",等14项...}

console.log(str instanceof String); // false
console.log(strObject instanceof String) // true

console.log(typeof str); // string
console.log(typeof strObject); // object
// 尽管str是字面量,调用方法时会自动转为 对象子类型
console.log(Object.prototype.toString.call(str)); // [object String]
console.log(Object.prototype.toString.call(strObject)); // [object String]

console.log(str.length) // 13
console.log(strObject.length) // 13

既然要”获取首要字”,那么得首先有三个对象才行。创设对象的方法诸多,笔者本身惯用的方法有三种:

Object.keys(obj)会回到二个由传入对象的可枚举属性
组成的数组,数组名的排列顺序和行使for…in…循环遍历该目的回来的各种一致。
区分: for…in….循环还会枚举其原型链上的特性

数组

数组也是目的:能够保留键值对数码,但不会修改length值。(不建议:数组和常见对象都基于用途举办了优化)
Array构造器:八个数字参数为数主管度;几个参数为数组的值
疏散的数组:将填充空白单元

var arr = [1, 2, 3];
arr.a = bar; // 键值对赋值
console.log(arr.a) // bar // 保存成功
console.log(arr.length) // 3  // 但长度并没有变化

var arr2 = new Array(5, 5); // [5, 5]; // 多个参数为数组的值
var arr3 = new Array(10); // Array [ <10 个空的存储位置> ] // 一个数组参数 数组长度

var arr4 = [];
arr4.[3] = 3; //Array [ <3 个空的存储位置>, 3 ]

一、通过原始构造函数 new Object();创立叁个目的,然后赋值;

语法

Object.keys(obj)
obj:传入的目的
重临值:传入对象可枚举属性组成的数组

var testObj= new Object();
testObj.name = "shangguan";
testObj.age= 25;
testObj.action = function () {
    return this.name;
}

例子

//数组
var  a=["a","b","c"]
Object.keys(a)       //输出["0","1","2"]

//对象
var obj={a:1,b:2,c:3}
Object.keys(obj)    //输出["a","b","c"]

//不可枚举属性
var obj1={
    {},
    {getFoo:function(){value:function(){return this.foo}}}
}
obj1.foo="1"
Object.keys(obj1) //输出foo

属相描述符 ie9

赢得属性描述符:Object.getOwnPropertyDescriptor(obj, key)
修改属性描述符(按key值):Object.defineProperty(obj, key, {
修改的习性描述 })
修改属性描述符(整目的):Object.definePropertys(obj, { 修改的个性描述
})
陆个描述符:
value:
writable:是或不是可修改值(只读)
enumerable:是或不是可枚举,(能够被for等循环从操作获取)
configurable:是否可修改属性描述,单向操作不能裁撤!
设置后属性无法去除 严刻形式下删除操作会报错

2、直接新建对象,不经过构造函数(而且平素新建速度比构造器还快一些!)

注意

在ES5中,即使此方法的参数不是四个对象,而是二个原始值,则会抛出TypeError,在ES20一第55中学,非对象的参数会强制调换为三个对象

不改变的值

常量: 不可修改、重定义、删除 —— Writable 和 configurable
设为false
取缔扩大:Object.preventExtensions(obj)——无法增产,可删可改
认清增添状态:Object.isExtensible(obj)
密封:Object.seal(obj)——禁新扩展、删除、配置描述符。可改值
看清密封:Object.isSealed(obj)
冻结: Object.freeze(obj)——不能够修改任何值
看清冻结:Object.isFrozen()

var testObj={};
testObj.name = "shangguan";
testObj.age= 25;
testObj.action = function () {
    return this.name;
};

与for… in..的区别

在上文中对比了Object.keys()和for…in..上面轻便的印证下for..in..的选用

值的访问器 ie九

js通过[[Get]]、[[Put]]方式属相的值。
设置Getter、Setter方法重写 参数的读写操作
单个属性:唯其如此接纳到单个属性上,不能够选用整个对象
只设置了Getter:将忽略Setter(只能读)
会忽略三个属性描述符:value 和 writable的属性

3、重载构造器,让构造器在结构对象时按预约的个性营造。

语法

for(variable in object){...}

值的存在性

定义:检验对象是否在目标以及[[Prototype]]原型链中
注意:检验的是key 值 而不是value
in:会检查测试对象 及原型链
hasOwnPrototype:值检验对象 不检查实验原型链
isPrototypeOf:检验是或不是在原型链上
枚举:
propertyIsEnumerable:检查测试是不是枚举属性
Object.key:回去数组,获取可枚举属性
Object.value:重临数组,获取可枚举的值
Object.getOwnpropertySymbols:回来数组,获取具备符号属性
Object.getOwnPropertyName再次来到数组,获取具备属性包涵不可胜道

var arr = [10, 11];
console.log(10 in arr) // false // arr 只有 变量名:0、1 (下标)

var obj = {a: undefined};
console.log(obj.a); // undefined // 存在的值是undefined
console.log(obj.b); // undefined // 不存在undefined
console.log("a" in obj) // true  //存在
console.log("b" in obj) // false //不存在
obj.hasOwnProperty("a"); // true // 存在
obj.hasOwnProperty("b"); // false // 不存在

// 创建一个对象的构造方法
function newObj(name, age) {
    this.name = name;
    this.age= age;
    this.action = function () {
        return this.name;
    }
}
// 创建一个对象
var testObj= new newObj("shangguan", 25);

参数

variable:每趟迭代时,将不一样的属性名分配给变量
object:需求迭代属性的对象

遍历

for:遍历下标
for in:遍历可枚举属性,包蕴原型链上
逐条难点:
for遍历数组:威尼斯人线上娱乐 ,按i的深浅顺序遍历数组
for in遍历数组:会遍历全数下标,和键值对(不建议注脚键值对)
for in:并不能够担保和书写循序保持一致
ES6 for of:按书写顺序遍历,但不得不对自己有迭代器的对象使用
ES5中的支持迭代器:都是承受回调函数,并将成分应以到函数中,只是回调函数的重回值管理分化
forEach():大要回调函数的重临值
every():遇上回调函数的重临值为false时停下运营
some():相遇回调函数的重回值为true时结束运营

 

描述

for..in..枚举只遍历可枚举的质量,循环将迭代对象的享有可枚举属性和从她的构造函数的prototype承接而来

1、目的放置属性方法:Object.keys();该办法再次来到3个数组,数组内包括目的内可枚举属性以及艺术名称。数组中属性名的排列顺序和动用 for...in 遍历该对象时回来的次第二致。

注意

for
in不应有用于迭代多少个下标很重大的Array,无法有限扶助重返的坐以待毙是服从循序的目录,可是她会回去全数可枚举的性能,包蕴非整数名称和后续的

  // 通过调用Object.keys()方法,获取对象四月定义(可枚举)的品质和艺术

例子

var a={a:'1',b:'2',c:'3'}
function test(){this.color='red'}
test.prototype=a
var obj=new test()
var obj=new test()  //输出 color  a  b  c
Object.keys(obj)    //输出["color"]
  var keys= Object.keys(testObj);
  console.log(keys); // 输出 keys ["name", "age", "action"]

  威尼斯人线上娱乐 1 

  注意:在ES5里,倘诺此方法的参数不是目标(而是四个原始值),那么它会抛出 TypeError。而在ES2016中,非对象的参数将被强制转变为贰个目的。

  Object.keys("testObj");
  // TypeError: "testObj" is not an object (ES5 code)
  Object.keys("testObj");
  //["name", "age", "action"]              (ES2015 code)

2、Object.getOwnPropertyNames():办法重临3个点名对象装有自个儿性质的属性名(包括千千万万属性但不包涵Symbol值作为名称的属性)组成的数组

  该数组是 obj本身持有的枚举或不计其数属性名称字符串集结。 数组中枚举属性的顺序与通过 for...in 循环(或 Object.keys())迭代该对象属性时一致。数组中多如牛毛属性的种种未定义。

  var keys = Object.getOwnPropertyNames(testObj);
  console.log(keys);  // 输出 keys ["name", "age", "action"]

   威尼斯人线上娱乐 2

3、当然除了上述八个外,还有最原始的 for…in 巡回(推断是平常循环用的多了,反倒是这么些有点用!)

  var keys =[];
  for(var i in testObj){
      keys.push(i);
  }
  console.log(keys);   // keys ["name", "age", "action"]

  威尼斯人线上娱乐 3

上面通过一个实例,直观表达3者之间的区分:

var testObj = Object.create({}, {
    getFoo: {
        value: function () {
            return this.foo;
        },
        enumerable: false
    }
});
testObj.name = "shangguan";
testObj.age = 25;
testObj.action = function(){
  return this.name;
};
function getKeys() {
    // 获取对象可枚举和不可枚举的属性
    console.log(Object.getOwnPropertyNames(testObj));   //输出:["getFoo", "name", "age", "action"]
    // 获取对象可枚举的属性
    console.log(Object.keys(testObj));  //输出:["name", "age", "action"]
    // 获取对象可枚举的属性
    for (var i in testObj) {
        console.log(i);     //输出 name,age,action
    }
    //返回直接定义在该对象上的可枚举属性,非继承。通过hasOwnProperty()方法可以将那些属性是对象自身(非继承)属性筛选出来,从而将不可枚举属性排除出去
    //obj.hasOwnProperty(prop): prop要检测的属性,字符串 名称或者 Symbol。     返回值:用来判断某个对象是否含有指定的属性 的Boolean值
    for (var i in testObj) {
        if(testObj.hasOwnProperty(i)) {
            console.log(i);
        }    //输出 name,age,action
    }
}

  威尼斯人线上娱乐 4

  总计:借使只须要猎取可枚举属性,那么Object.keys()for...in循环迭代就可以(Object.getOwnPropertyNames()也可以获取到原型链上的可枚举属性,可是需求经过hasOwnProperty()办法过滤掉成千成万属性)。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图