Vue进阶(幺贰贰):ES6 判断是否为空对象及属性包含_es6 判断数据是否为{}(1)

var data = {};
var b = (JSON.stringify(data) == "{}");
alert(b);//true
2.3 for in 循环判断
var obj = {};
var b = function() {
  for(var key in obj) {
    return false;
  }
 return true;
}
alert(b());//true
2.4 jquery isEmptyObject()

此方法是jquery将方法3 (for in)进行封装,使用时需要依赖jquery

var data = {};
var b = $.isEmptyObject(data);
alert(b);//true
2.5 Object.getOwnPropertyNames()

此方法是使用Object对象的getOwnPropertyNames方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的length来判断此对象是否为空。

注意:此方法不兼容ie8,其余浏览器没有测试。

var data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0);//true

三、属性识别

3.1 应用 !==

最简单的方法,就是使用"!=="进行判断,这种方法在工作中很常见,可以根据该方法可以判断继承来的属性。

let obj = { x: 1 };
obj.x !== undefined;   // true 有x属性
obj.y !== undefined;   // false 无y属性
obj.toString !== undefined;   // true 从Object继承toString属性
3.2 使用 in 运算符

in 的语法是: attr in obj , 同样,该表达式也返回一个布尔值。

let obj = { x: 1 };
'x' in obj;             // true
'y' in obj;             // false
'toString' in obj;      // true

in运算符语法很简单,效果跟undefined是相同的,与undefined不同的是,in可以区分存在但值为undefined的属性。

let obj = { x: undefined };
obj.x !== undefined;            // false
'x' in obj;                     // true

可以看出,如果属性的值为undefined的时候,使用 !== 的方法就不奏效了,所以在工作中需要注意一下这一块。

3.3 应用 hasOwnProperty()

应用对象的 hasOwnProperty() 方法也可以检测指定属性名是否在对象内,同样返回是布尔值, 当检测属性为自有属性(非继承)的时候返回true

let obj = { x: 1, abc: 2 };
let a = 'a';
let b = 'bc';
obj.hasOwnProperty('x');               // true 包含
obj.hasOwnProperty('y');               // false 不包含
obj.hasOwnProperty('toString');        // false 继承属性
obj.hasOwnProperty(a + b);             // true 判断的是属性abc

in 运算符和 hasOwnProperty() 的区别就在于 in 运算符可以判断来自继承的属性,而hasOwnProperty() 不能。针对这一点在工作中加以运用还是很有帮助的。

3.4 应用 propertyIsEnumerable()

propertyIsEnumerable()hasOwnProperty() 的增强版,用法与hasOwnProperty()相同,但当检测属性是自有属性(非继承)且这个属性是可枚举的,才会返回true

那么什么是可枚举属性 ?通俗的讲就是可以通过for...in遍历出来的属性就是可枚举属性。通常由JS代码创建出来的属性都是可枚举的。

let obj = Object.create({x: 1});   // 通过create()创建一个继承了X属性的对象obj
obj.propertyIsEnumerable('x');     // false x是继承属性
obj.y = 1;                        // 给obj添加一个自有可枚举属性y
obj.propertyIsEnumerable('y');    // true
Object.prototype.propertyIsEnumerable('toString'); // false 不可枚举
3.5 Object.keys()

会返回一个对象自身的可枚举属性的名字,类型为一个数组。

let obj = { x: 1 };
Object.defineProperty(obj, 'test', {
    value: 'testVal',
    enumerable: false,
    writable: true,
    configurable: true
});
let arr = Object.keys(obj);
arr.includes('x');  // true
arr.includes('test');  //false

跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。

面试准备

面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰6 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询