原生JS面试题3

六、面向对象和面向过程各有什么的优点？

面向过程：
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源。
缺点：没有面向对象易维护、易服用、易扩展。
面向对象（OOP）：
优点：易维护、易复用、易扩展。由于面向对象有封装、继承、多态的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护。
缺点：性能比面向过程低。

有人这么形容OP和OO的不同：用面向过程的方法写出来的程序是一份蛋炒饭，而用面向对象写出来的程序是一份盖浇饭。
　盖浇饭的好处就是"菜"“饭"分离，从而提高了制作盖浇饭的灵活性。饭不满意就换饭，菜不满意换菜。用软件工程的专业术语就是"可维护性"比较好，“饭”
和"菜"的耦合度比较低。蛋炒饭将"蛋”“饭"搅和在一起，想换"蛋”"饭"中任何一种都很困难，耦合度很高，以至于"可维护性"比较差。

七、用原生 js 实现懒加载

1、 懒加载的概念：在图片非常多的应用场景，为了提高也没面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。

2、为什么要懒加载：懒加载（ LazyLoad ）是前端优化的一种有效方式，极大的提升用于体验，图片一直是页面加载的流量大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求过来10张图片的地址，而且一次性把10张图片都加载出来，肯定是不合理的，后果是：
1）、会显示的很慢，多加载1秒都会引起用户的流失，这对靠流量的网站来说绝对是噩梦；
2）、用户如果只是随便看看，没想全部看，这无疑是浪费了用户很多流量。
3、懒加载的实现原理：
原理很简单，先把img的src指向空或者一个小图片，图片真实的地址存储在img的一个自定义的属性里，比如data-xx = “ 图片的真实地址 ”。添加滚动条事件，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx 的值赋给 src。

八、ES6具体指的是什么？列举并解释你常用的ES6新方法及其作用

ES6是ECMAScript 的第6个版本，2015年发布

总结：
1、块级作用域 ： const，let命令，
const声明一个只读的常量。一旦声明，常量的值就不能改变。这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

注意： const的作用域与let命令相同：只在声明所在的块级作用域内有效。
let 有块级作用域，只在 let 命令所在的代码块内有效。
注意：let、const 不存在变量、常量提升

2、模板字符串
用 反引号。 在${ } 中写变量

3、 箭头函数
箭头函数通俗点讲就是匿名函数。 箭头函数没有this，他的this和js普通函数中 .bind( this )差不多，都是指向定义时所在的环境

4、解构赋值
1）数组的解构赋值

2）对象的解构赋值

5、ES6 标准的 Promise

6、for .. of .. 遍历

for in是ES5标准，遍历key. ==
for of是ES6标准，遍历value.

遍历数组通常使用for循环，ES5的话也可以使用 forEach ，ES5具有遍历数组功能的还有map( forEach没有返回值，map有返回值，）、fiter（过滤关键字）、some（判断数组中是否有符合条件的元素，如大于10）、every（判断是否所有的元素都符合条件）、reduce（累加器）等。只不过他们的返回结果不一样，但是使用 foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

Array.prototype.method = function(){
    console.log(this.length)
}

var myArray = [1,2,3,4,5,6,7]
myArray.name = "数组"
for(var index in myArray){
    console.log(myArray[index])
}

使用 for in 也可以遍历数组，但是会 存在以下问题

1.index索引为字符串型数字，不能进行运算几何运算
2. 遍历顺序有可能不是按照数组的内部顺序
3. 使用 for in 会遍历数组所有的可枚举属性，包括原型。例如上例的原型方法method和name属性

所以for in更适合遍历对象，不要使用for in 遍历数组
那么除了使用for 循环，如何更简单的正确的遍历数组达到完美的期望呢（即不遍历 method和name）。ES6中的 for of 更胜一筹

var myArray = [1,2,3,4,5,6,7]
for(let value of myArray){
    console.log(value)
}

记住，for in 遍历的是数组的索引， 而 for of遍历的是数组元素的值

for of 遍历的只是数组内的元素，而不包括数组的原型属性 method 和索引 name

遍历对象，通常用 for in 来遍历对象的键名

Object.prototype.method = function(){
    console.log(this)
}
var myObject = {
    a:1,
    b:2,
    c:3
}

for(let key in myObject){
    console.log(key)
}

for in 可以遍历到 myObject的原型方法 method，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，hasOwnPropery方法可以判断某属性是否是该对象的实例属性

7、Class 类

8、 Module 模块 ： import 导入模块， export 导出模块

9、拓展的对象功能
1）对象初始化简写。
es5如果出现键值对重名的，可以简写

2）es6通过省略冒号与 function 关键字，为对象添加方法：

9、展开运算符
ES6 中一个好玩的特性就是 展开运算符 也是三个点儿 …

10、Set 和 Map 数据结构
1） Set
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成数据结构。
Set 函数可以接受一个数组 作为参数，用来初始化

利用扩展运算符 [ …set ] 可以将 set 类数组数据，转换成一个真正的数组

上述代码也展示了一种去除数组重复成员的方法。

扩展：

Set 实例的属性和方法

Arra. from 方法也可以 将 Set 结构 转为 数组

扩展运算符 ( … ) 和 Set 结构相结合， 就 可以去除数组的重复成员。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
Babel的配置文件是.babelrc，存放在项目的根目录下。