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

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

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

通过使用ES5提供的Object.defineProperty()方法为person对象增加了一个不可枚举的名为 test 的属性，它的值为 ‘testVal’。Object.keys()在获得了一个对象的可枚举属性之后，接下来的操作就变成了在数组中查找符合条件的元素。在上述代码中使用了数组内置的includes()方法，对于旧版浏览器可能需要改用 indexOf()等方法。

综上所述，判断对象是否存在某个属性的处理逻辑如下：

// true表示为空对象，false为非空对象


###  最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

导过不少同行后辈。帮助很多人得到了学习和成长。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。