JS中如何区分变量是数组还是对象

总结:

这里提供三种方法:

javascript 复制代码
var arr=[]
var arr2={}

1、constructor:
    数组的constructor是function Array(){};
    对象的constructor是function Object(){}

2、instanceof:
    数组 instanceof Array:为true;
    对象 instanceof Array: 为false;

3、Object.prototype.toString.call([数组]) 返回的字符串可以判断是否是数组
    //正常使用toString 方法是 obj.toString;toString方法里面的this,谁调用的就是谁

    Object.prototype.toString=function (){
        //识别 this
        //返回相应的结果
    }
    obj.toString();
    //obj.toString();这里obj调用的this指向的就是obj,所以想要改变this指向就可以使用call函数

详解:

先了解一些概念:

对象的查询属性的两种方法:

javascript 复制代码
var obj = {
    name: '张三',
    age: 18,
    sex: 'man',
    testName1: '1111',
    testName2: '22222',
    testName3: '333333'
}

1:obj.name

javascript 复制代码
其实第一种和第二种是一样的,只不过第一种在其内部做了隐式转换;

obj.name----->在内部做了obj['name']的操作

所以也就是第一中的速度会比第二种方法更慢

2:obj['name']

javascript 复制代码
对象名加[], 然后加属性名字的字符串形式:obj['age'];

使用字符串的形式可以进行字符串拼接,更加灵活;obj['testName'+num],根据num的值;可以得到不同的值

如果是变量则不需要加引号:obj[param], param是变量可以是name,也可以是age

对象的枚举:

对象枚举共有四个重要的方法

javascript 复制代码
1、for in 循环遍历
2、hasOwnProperty
3、in   
4、instanceof

for in 用法

javascript 复制代码
var obj = {
    name: 'wq',
    age: 12,
    sex: 'man'
}

1、
for (const objKey in obj) {
    console.log(objKey)
}  
//打印的是obj的属性名

2、
for (const objKey in obj) {
    console.log(obj.objKey)
} 
//打印的全部是undefined;为什么呢
//上面说了obj.objKey相当于内部隐式的使用了obj['objKey']去获取;
//obj里面没有objKey这个属性所有打印的全部是undefined;所以不能使用这种方式

3、
for (const objKey in obj) {
console.log(obj[objKey])
} 
//这样才能打印出属性的值,这里objKey相当于一个变量

hasOwnProperty用法

javascript 复制代码
var obj = {
    name: 'wq',
    age: 12,
    sex: 'man',
    __proto__:{
        last:'a'
    }
}

Object.prototype.abc=123;
for (const objKey in obj) {
    console.log(obj[objKey])
}

打印结果:

你会发现打印出来的东西里面既然会有 原型上的属性 ,本来这个原型上的属性你是不想打印的,结果有,那该怎么办?

这里就可以使用hasOwnProperty方法,这方法可以判断该属性是你自己的还是原型上的;返回值是Boolean值。可以使用以下代码:

javascript 复制代码
这里就可以使用hasOwnProperty方法,这方法可以判断该属性是你自己的还是原型上的;返回值是Boolean值
for (const objKey in obj) {
    if(obj.hasOwnProperty(objKey)){
        console.log(obj[objKey])
    }
}

instanceof用法:A instanceof B

官方解释: A对象 是不是 B构造函数构造出来的

自己理解:看A对象的原型链上 有没有B的原型,既A是不是B的孩子,或者孙子或者重孙

javascript 复制代码
function Person() {}
var obj={}
var person = new Person();
//person instanceof Person   person是不是由Person构造出来的
相关推荐
拾光拾趣录1 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区12 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠41 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构