js基础

1、基础数据类型和引用数据类型

基本类型有6种，分别是undefined,null,bool,string,number,symbol(ES6新增)。
虽然 typeof null 返回的值是 object,但是null不是对象，而是基本数据类型的一种。
基本数据类型存储在栈内存，存储的是值。
复杂数据类型的值存储在堆内存，地址（指向堆中的值）存储在栈内存。当我们把对象赋值给另外一个变量的时候，复制的是地址，指向同一块内存空间，当其中一个对象改变时，另一个对象也会变化。 
引用数据类型：array、object、function，引用数据类型也是数据类型

//栈和队列的区别：

栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。

栈是先进后出，队列是先进先出。

栈只允许在表尾一端进行插入和删除，队列只允许在表尾一端进行插入，在表头一端进行删除。

 

//栈和堆的区别：

栈区：由编辑器自动分配释放，存放函数的参数值，局部变量的值等（基本类型值）。

堆区：由程序员分配释放，若程序员不释放，程序结束时可能有OS回收（引用类型值）。

栈（数据结构）：一种先进后出的数据结构。

堆（数据结构）：堆可以被看成是一棵树，如：堆排序。

数组array排序方法：sort（）、reverse()
① sort() 不传参时默认为升序，且是按字符串比较的方式排序；传参时，其参数为函数，且该函数带俩参数
a 和 b，返回值 a - b 为升序，b - a为降序
② reverse() 和 sort() 两函数均会改变原数组，且返回值同样也是改变后的数组

2、数据类型转换

二、类型转换

　　1）显示类型转换：

　　a. Number函数

　　b. String函数

　　c.Boolean函数

      2） 显示类型转换 Number函数

　　当原始类型转换时，分别对应以下情况：

　　　　数值：转换后还是原来的值。

　　　　字符串：如果可以被解析为数值，则转换为相应的数值，否则得到NaN，空字符串转换为0

　　　　布尔值：true转成1， false转成0

　　　　undefined: 转成NaN

　　　　null： 转成0

　　当为对象类型转换时，遵循以下方式：

　　　　a.先调用对象自身的valueOf方法，如果改方法返回原始类型的值（数值/字符串/boolean等），则直接对该值使用　　Number方法，不在进行后续步骤。

            b.如果valueOf方法返回复合类型的值，在调用对象自身的toString方法，如果toString方法返回原始类型的值，则对该值使用Number方法，不在进行后续步骤。

　　　　c.如果toString方法返回的时复合类型的值，则报错.　　　　

　　　　如例： var a = {b: 1}; Number(a); // 输出NaN，按照如上步骤规则，则

　　　　　　首先a.valueOf() 输出{b: 1}, 返回不是原始数据类型，则调用toString方法，返回“[object Object]”, 返回字符串类型，Number('[object, object]') 则输出NaN。

　　　　3）显示类型转换 String函数

　　　　当转换为原始类型数据时，按照如下规则：

　　　　　　数值：转换为相应的字符串

　　　　　　字符串： 转换后还是原来的值

　　　　　　布尔值： true转换为‘true’， false转换为‘false’

　　　　　　undefined： 转换为“undefined”

                  null： 转换为‘null’

　　　　当转换类型为对象类型时，按照如下规则转换：　　　　　

　　　　　　a.先调用toString方法，如果toString返回的时原始数据类型，则对该值使用toString方法，不在进行以下步骤。　　　

　　　　　　b.如果toString方法返回对是复合类型的值，在调用valueOf方法，如果valueOf方法返回的是原始数据类型的值，则对该值使用String方法，不在进行以下步骤。

　　　　　　c.如果valueOf方法返回的是复合类型的值，则报错。

　　　　4）显示类型转换 Boolean函数

　　　　当转换数据为原始数据类型是，按照如下规则转换

　　　　当为null、undifined、NaN、0、‘’,转换为false，其他转换都为true

　　　　5）隐式类型转换，如四则运算/判断语句/Native调用，转换与以上转换规则相同.

输出以下结果：

　　[] + [];

　　[] + {};

　　{} + [];

　　{} + {};

　　true + true;

　　1 + {a: 1};

数字 + boolean/null -> 数字
数字 + undefined -> NaN


[1].toString() === '1'
{}.toString() === '[object object]'
NaN !== NaN 、+undefined 为 NaN　　

3、为什么 0.1 + 0.2 != 0.3，如何解决

原因：因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。

解决方法：将浮点数转化成整数计算。因为整数都是可以精确表示的。

4、js判断数据类型的方法

//方法一：typeof ,无法检验出数组、对象或null

typeof   2                  //  number
typeof   null               //   object
typeof   {}                 //   object
typeof   []                 //   object
typeof   (function(){})     //  function
typeof   undefined          //  undefined
typeof   '222'              //   string
typeof   true               // boolean

//方法二：instanceof ，只能用来判断数组和对象，不能判断string和boolean类型，数组也属于对象。

 var o = {'name':'lee'};
 var a = ['reg','blue'];
 
 console.log(o instanceof Object);// true
 console.log(a instanceof Array);//  true
 console.log(o instanceof Array);//  false
//由于数组也属于对象，不能区分是数组还是对象，改进：封装一个方法判断数组和对象

var o = {'name':'lee'};
var a = ['reg','blue'];
 
var getDataType = function(o){
            if(o instanceof Array){
                return 'Array'
            }else if( o instanceof Object ){
                return 'Object';
            }else{
                return 'param is no object type';
            }
       };
 
console.log(getDataType(o));//Object。
console.log(getDataType(a));//Array。

//方法三：constructor方法

var o = {'name':'lee'};
var a = ['reg','blue'];
console.log(o.constructor == Object);//true
console.log(a.constructor == Array);//true

//方法四：toString()判断string和boolean类型

var o = {'name':'lee'};
var a = ['reg','blue'];
 
function c(name,age){
         this.name = name;
         this.age = age;
 }
var c = new c('kingw','27');
console.log(Object.prototype.toString.call(a));//[object Array]
console.log(Object.prototype.toString.call(o));//[Object Object]
console.log(Object.prototype.toString.call(c));//[Object Object]

5、js原型链

每个对象拥有一个原型对象，通过 proto (读音: dunder proto) 指针指向其原型对象，并从中继承方法和属性，
同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.__proto__ 指向的是null)。
这种关系被称为原型链 (prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法。 

6、手动实现继承

1、原型链继承
核心： 将父类的实例作为子类的原型

特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
缺点：

要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
无法实现多继承
来自原型对象的引用属性是所有实例共享的
创建子类实例时，无法向父类构造函数传参
// 定义一个动物类

function Animal (name) {

  // 属性

  this.name = name || 'Animal';

  // 实例方法

  this.sleep = function(){

    alert(this.name + '正在睡觉！');

  }

}

// 原型方法
Animal.prototype.eat = function(food) {
  alert(this.name + '正在吃：' + food);
};

function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
 
//　Test Code
var cat = new Cat();
alert(cat.name);
alert(cat.eat('fish'));
alert(cat.sleep());
alert(cat instanceof Animal); //true
alert(cat instanceof Cat); //true

 

2、借用构造函数继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

特点：

解决了1中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）（不完美，没有父类方法）
缺点：

实例并不是父类的实例，只是子类的实例
只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    alert(this.name + '正在睡觉！');
  }
}

// 原型方法

Animal.prototype.eat = function(food) {

  alert(this.name + '正在吃：' + food);

};

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
 
// Test Code
var cat = new Cat();
alert(cat.name);
alert(cat.sleep());
alert(cat instanceof Animal); // false
alert(cat instanceof Cat); // true

 

3、组合继承
核心：通过调用父类构造函数，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，继承父类属性和方法，实现函数复用

特点：

弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
可以实现多继承（同上）
缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）（仅仅多消耗了一点内存）


// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    alert(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  alert(this.name + '正在吃：' + food);
};

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
 
// Test Code
var cat = new Cat();
alert(cat.name);
alert(cat.sleep());
alert(cat instanceof Animal); // true
alert(cat instanceof Cat); // true

6、寄生组合继承
核心：通过寄生方式，创建空函数，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

特点：

堪称完美
缺点：

实现较为复杂
不能实现多继承（不完美，同上）

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    alert(this.name + '正在睡觉！');
  }
}

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
function aaron(o,y){ 
var Super = function(){}; 
Super.prototype=y.prototype; 
o.prototype=new Super(); 
o.prototype.constructor=o; 
}
aaron(Cat,Animal);
// Test Code
var cat = new Cat();
alert(cat.name);
cat.sleep();
alert(cat instanceof Animal); // true
alert(cat instanceof Cat); //true 

7、call，apply，bind的区别？ 

call 和 apply 的功能相同，区别在于传参的方式不一样:

1)、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）

 2)、call和apply不会产生新的函数，只是在调用时，绑定一下而已。

 3)、call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（是函数的所有参数），call把apply的第二个参数单列出来。

8、闭包，应用场景，优缺点？

概念：
闭包根据函数定义的位置决定是否形成闭包
能够读取其他函数内部变量的函数。
或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。

闭包用途
1、读取函数内部的变量
2、让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。
3、方便调用上下文的局部变量。利于代码封装。
原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。

闭包缺点
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。
解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），
把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

 闭包应用场景之setTimeout

//setTimeout传递的第一个函数不能带参数
setTimeout((param) => {
    alert(param)
}, 1000);


//通过闭包可以实现传参效果
function func(param) {
    return function() {
        alert(param)
    }
}
var f1 = func('汪某');
setTimeout(f1, 1000)//汪某

9、垃圾回收？什么算法？ 

JS 有自动垃圾回收机制，那么这个自动垃圾回收机制的原理是什么呢？
其实很简单，就是找出那些不再继续使用的值，然后释放其占用的内存。
大多数内存管理的问题都在这个阶段。
在这里最艰难的任务是找到不再需要使用的变量。
不再需要使用的变量也就是生命周期结束的变量，是局部变量，局部变量只在函数的执行过程中存在，
当函数运行结束，没有其他引用(闭包)，那么该变量会被标记回收。


垃圾回收算法主要依赖于引用的概念。
在内存管理的环境中，一个对象如果有访问另一个对象的权限（隐式或者显式），叫做一个对象引用另一个对象。
例如，一个Javascript对象具有对它原型的引用（隐式引用）和对它属性的引用（显式引用）。
在这里，“对象”的概念不仅特指 JavaScript 对象，还包括函数作用域（或者全局词法作用域）。

//引用计数垃圾收集
这是最初级的垃圾回收算法。
引用计数算法定义“内存不再使用”的标准很简单，就是看一个对象是否有指向它的引用。
如果没有其他对象指向它了，说明该对象已经不再需了。

上面这种JS写法再普通不过了，创建一个DOM元素并绑定一个点击事件。
此时变量 div 有事件处理函数的引用，同时事件处理函数也有div的引用！（div变量可在函数内被访问）。
一个循序引用出现了，按上面所讲的算法，该部分内存无可避免的泄露了。
为了解决循环引用造成的问题，现代浏览器通过使用标记清除算法来实现垃圾回收。

//标记清除算法
标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
简单来说，就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。
凡是能从根部到达的对象，都是还需要使用的。
那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。
从这个概念可以看出，无法触及的对象包含了没有引用的对象这个概念（没有任何引用的对象也是无法触及的对象）。
但反之未必成立。
工作流程：

垃圾收集器会在运行的时候会给存储在内存中的所有变量都加上标记。
从根部出发将能触及到的对象的标记清除。
那些还存在标记的变量被视为准备删除的变量。
最后垃圾收集器会执行最后一步内存清除的工作，销毁那些带标记的值并回收它们所占用的内存空间。 

内存泄漏

//堆栈溢出有什么区别？ 内存泄漏? 那些操作会造成内存泄漏？怎么样防止内存泄漏？


堆栈溢出：就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数据越界，结果覆盖了别的数据。经常会在递归中发生。

内存泄露是指：用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存单元。直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。

//造成内存泄漏：
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
//防止内存泄露：
1、不要动态绑定事件；
2、不要在动态添加，或者会被动态移除的dom上绑事件，用事件冒泡在父容器监听事件；
3、如果要违反上面的原则，必须提供destroy方法，保证移除dom后事件也被移除，这点可以参考Backbone的源代码，做的比较好；
4、单例化，少创建dom，少绑事件。

10、对象遍历　　

//1、Object.keys()获取键名数组

//2、Object.getOwnPropertyNames()获取键名数组

//3、Object.entries()获取键值对数组

//4、Object.values()获取对象的属性值数组

//5、Object.getOwnPropertySymbols()获取Symbol属性名

//Object.keys()获取键名数组
//使用Object.keys()可以获取到对象实例的所有可枚举属性，其返回值为一个数组，数组元素为对象的键名：

    let father = {
        fatherAttr: 1
    };

    // 以father为原型创建对象实例instance
    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    Object.defineProperty(instance, 'd', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of Object.keys(instance)) {
        console.log(key);
    }

    // a
    // b
    // c 

//Object.getOwnPropertyNames()获取键名数组
//此方法跟keys方法表现一样，所不同的是，其返回的数组包含了对象的不可枚举属性：

    let father = {
        fatherAttr: 1
    };

    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    Object.defineProperty(instance, 'd', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of Object.getOwnPropertyNames(instance)) {
        console.log(key);
    }

    // a
    // b
    // c
    // d

 

//Object.entries()获取键值对数组
    let father = {
        fatherAttr: 1
    };

    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    Object.defineProperty(instance, 'd', {
        writable: true,
        value: 1,
        enumerable: false,
        configurable: true
    });

    for (let key of Object.entries(instance)) {
        console.log(key);
    }

    // ["a", 1]
    // ["b", 1]
    // ["c", 1]


//所以当使用一个对象初始化一个Map实例时，可以使用这个方法：
    let obj = { a: 1, b: 1, c: 1 },
        map = new Map(Object.entries(obj));
    
    console.log(map.get('a'));
    console.log(map.get('b'));
    console.log(map.get('c'));

    // 1
    // 1
    // 1

//Object.values()获取对象的属性值数组

 

//Object.getOwnPropertySymbols()获取Symbol属性名
//上面提到的几个方法都无法获取到对象实例的Symbol类型的属性名，如果需要遍历这个玩意，需要使用Object.getOwnPropertySymbols()方法：

    let father = {
        fatherAttr: 1
    };

    let instance = Object.create(father);

    instance.a = 1;
    instance.b = 1;
    instance.c = 1;

    instance[Symbol('I am a handsome boy!')] = 1;

    for (let key of Object.keys(instance)) {
        console.log(key);
    }

    // a
    // b
    // c

    for (let key of Object.getOwnPropertySymbols(instance)) {
        console.log(key);
    }

    // Symbol(I am a handsome boy!)

 

11、给定一个对象，如何遍历获取里面的属性和值？

var obj = {name0: "11", name1: "22", name2: "33"};
for (var key in obj){
    console.log(key +':'+ obj[key])
} 

forEach、map、filter、reduce区别

//1.相同点：

都会循环遍历数组中的每一项；
map()、forEach()和filter()方法里每次执行匿名函数都支持3个参数，参数分别是：当前元素、当前元素的索引、当前元素所属的数组；
匿名函数中的this都是指向window；
只能遍历数组。
//2.不同点：

map()速度比forEach()快；
map()和filter()会返回一个新数组，不对原数组产生影响；forEach()不会产生新数组，返回undefined；
reduce()函数是把数组缩减为一个值(比如求和、求积)；reduce()有4个参数，第一个参数为初始值。

 手写实现filter()

Arrar.prototype.myFilter = function (fn) {
  let arr = [];
  for(let i=0; i<this.length;i++) {
     let item = this[i]
     if(fn(item,i,this)) {
        arr.push(this[i])     
     }
  }
  return arr
}
//利用 myFilter实现数组去重
let  arr1 = [1,2,3,4,5,1,2,3,4,5];
let  res = arr1.myFilter((item,index,arr) => {
    return arr.indexOf(item) === index            
})

手写实现map()

Array.prototype.myMap = function (fn) {
  let arr = [];
  for(let i=0; i<this.length;i++) {
     let item = fn(this[i],i,this) {
         arr.push(item)
    }
  }
  return arr
}

给定1个URL数组，分别实现并发及顺序依次执行请求，手写实现fetch(url)

function sendRequest(urls, max, callback) {
        let allUrls = [...urls],
            i = 0,
            fetchArr = [];
        
        function doFetch() {
            // 处理边界的情况
            if (i === allUrls.length) {
                return Promise.resolve();
            }
            //每次调用出去 一个 url， 放入fetch中
            let one = fetch(allUrls[i++]);
            // 将此promise的状态保存在fetchArr中， 执行完之后 从数组中删除。
            let result = one.then(() => fetchArr.splice(fetchArr.indexOf(result), 1));
            result.push(fetchArr);

            // 数量不够就重复调用doFetch， 够了的话就比较
            let p = Promise.resolve();
            if (fetchArr.length >= max) {
                p = Promise.race(fetchArr);
            }
            return p.then(() => doFetch())
        }
        // 最后用all 处理剩余数组中的，等处理完再执行callback
        return doFetch().then(() => Promise.all(fetchArr)).then(() => {
            callback();
        })
    }

 

12、数组遍历

//JavaScript 的 4 种数组遍历方法： for 、 forEach() 、 for/in 、 for/of、map遍历、filter遍历

//1、使用for和for/in，我们可以访问数组的下标，而不是实际的数组元素值：
for (let i = 0; i < arr.length; ++i) {
    console.log(arr[i]);
}

for (let i in arr) {
    console.log(arr[i]);
}
//2、使用for/of，则可以直接访问数组的元素值：
for (const v of arr) {
    console.log(v);
}
//3、使用forEach()，则可以同时访问数组的下标与元素值：
arr.forEach((v, i) => console.log(v));

//要点： for/in与forEach会跳过空元素
for，for/in与for/of会保留外部作用域的this。

//对于forEach， 除非使用箭头函数，它的回调函数的 this 将会变化。

//简单地说，for/of是遍历数组最可靠的方式，它比for循环简洁，并且没有for/in和forEach()那么多奇怪的特例。

//for/of的缺点是我们取索引值不方便，而且不能这样链式调用forEach(). forEach()。


//4、map遍历
//有返回值，可以return出来

//map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,ary ) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]；  原数组并未发生变化


//5、filter()遍历
不会改变原始数组,返回新数组

var arr = [73,84,56, 22,100]
var newArr = arr.filter(item => item>80)   //得到新数组 [84, 100]
console.log(newArr,arr)；

//6.every遍历

every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr.every( function( item, index, array ){ 
        return item > 3; 
    })); 
false
　

//7.some遍历

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
   
    console.log( arr.some( function( item, index, array ){ 
        return item > 3; 
    })); 
true
　　

//8.reduce

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10
reduce接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});


reduce还有第二个参数，我们可以把这个参数作为第一次调用callback时的第一个参数，
上面这个例子因为没有第二个参数，所以直接从数组的第二项开始，如果我们给了第二个参数为5，那么结果就是这样的：

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
},5);
　

第一次调用的previousValue的值就用传入的第二个参数代替，

//9.reduceRight

reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。
如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。
如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。

var arr = [0,1,2,3,4];
 
arr.reduceRight(function (preValue,curValue,index,array) {
    return preValue + curValue;
}); // 10
回调将会被调用四次，每次调用的参数及返回值如下：



如果提供一个初始值initialValue为5:

var arr = [0,1,2,3,4];
 
arr.reduceRight(function (preValue,curValue,index,array) {
    return preValue + curValue;
}, 5); // 15
回调将会被调用五次，每次调用的参数及返回的值如下：



同样的，可以对一个数组求和，也可以使用reduceRight()方法:

var arr = [1,2,3,4,5,6];
 
console.time("ruduceRight");
Array.prototype.ruduceRightSum = function (){
    for (var i = 0; i < 10000; i++) {
        return  this.reduceRight (function (preValue, curValue) {
            return preValue + curValue;
        });
    }
}
arr.ruduceRightSum();
console.log('最终的值：' + arr.ruduceSum()); // 21
console.timeEnd("ruduceRight"); // 5.725ms
//10.find

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined 

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]

function getStu(element){
   return element.name == '李四'
}
 
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}
//ES6方法

stu.find((element) => (element.name == '李四'))
 

//11.findIndex

对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。
只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。

findIndex 不会改变数组对象。

[1,2,3].findIndex(function(x) { x == 2; });
// Returns an index value of 1.
1
2
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.


//12.keys，values，entries

 //ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。
它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

13、如何判断一个变量是不是数组

//方法一： 使用instanceof方法
//instanceof判断原理：通过arr的原型链(__proto__)一层层往上进行查询，能否找到对应的构造函数的原型对象(prototype)，如果找到了就返回true，反之false。

console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

//方法二：使用Array.prototype.isPrototypeOf()方法
//利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false。

console.log(Array.prototype.isPrototypeOf(arr)); // true
console.log(Array.prototype.isPrototypeOf(obj)); // false

//方法三：使用constructor方法
//constructor构造函数指向的是创建它的构造函数。

console.log(arr.constructor === Array); // true
console.log(obj.constructor === Array);  // false

//方法四：使用Array.isArray()方法 (ES6最新方法)

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

//方法五：使用Object.prototype.toString.call()方法（推荐）
//使用Object.prototype上的原生toString()方法判断数据类型

console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
console.log(Object.prototype.toString.call(obj) === '[object Object]'); // true

//这里思考为什么不直接使用toString()方法呢？
//因为toString为Object的原型方法，而Array ，function等类型作为Object的实例，都重写了toString方法，示例如下：

let array =  [1,2,3];

arr.toString(); // 已经被重写输出：1,2,3 
Object.prototype.toString.call(arr); // 最原始的输出："[object Array]"

14、instanceof原理了解吗？

//在 MDN 上是这样描述 instanceof 的：

//instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象原型链中的任何位置

//换句话说，如果A instanceof B，那么 A 必须是一个对象，而 B 必须是一个合法的 JavaScript 函数。在这两个条件都满足的情况下：

//判断 B 的 prototype 属性指向的原型对象(B.prototype)是否在对象 A 的原型链上。

//如果在，则为 true；如果不在，则为 false。

下面我们举一个例子一步步来说明：

function Person() {} 
const p1 = new Person();
 
p1 instanceof Person; // true

//第一步：每一个构造函数都有一个 prototype 属性。

//第二步：这个 prototype 属性指向这个构造函数的原型对象

//第三步：通过 new 关键字，可以创建一个构造函数的实例(这里是 p1)，而实例上都有一个 __proto__ 属性

//第四步：实例上的 __proto__ 属性也指向构造函数的原型对象，这样我们就可以得到一张完整的关系图了

//第五步：p1 instanceof Person ，检查 B(Person) 的 prototype 属性指向的原型对象，是否在对象 A(p1) 的原型链上。

//经过我们的一步步分解，发现 B(Person) 的 prototype 所指向的原型对象确实在 A(p1) 的原型链上，所以我们可以确定 p1 instanceof Person 一定是为 true 的。
//我们再深入一点会发现，不仅仅 p1 instanceof Person 为 true ，p1 instanceof Object 也为 true ，这又是为什么呢？
//其实，Person 的原型对象上也有一个 __proto__ 属性，而这个属性指向 Object 的 prototype 属性所指向的原型对象，我们可以在控制台打印一下：

既然有这个关系，那我们再完善一下上面的图：

//通过 Person 的例子，我们知道构造函数 Object 上的 prototype 属性会指向它的原型对象：

//现在，我们要判断 p1 instanceof Object 的真假，还记得上面的定义么？我们再来一遍：

//判断 B 的 prototype 属性指向的原型对象(B.prototype)是否在对象 A 的原型链上。
//如果在，则为 true；如果不在，则为 false。

//此时，我们发现 B(Object) 的 prototype 属性所指向的原型对象依然在 A(p1) 的原型链上，所以结果为 true 。


//所有 JavaScript 对象都有 __proto__ 属性，只有 Object.prototype.__proto__ === null ；
构造函数的 prototype 属性指向它的原型对象，而构造函数实例的 __proto__ 属性也指向该原型对象；

15、js事件捕获和时间冒泡 

事件流分为两种，捕获事件流和冒泡事件流。

捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点。

冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点。

DOM事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段。

阻止冒泡（捕获）

     w3c标准：event.stopPropagation

     IE:event.cancelBunnle=true

阻止默认行为

    W3C标准.event.preventDefault()   

    IE event.returnValue = false 

16、js事件委托或事件代理

简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，
通过判断事件发生元素DOM的类型，来做出不同的响应。e.target监听点击是哪个元素节点


举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。


好处：

• • 添加到页面上的事件数量会影响页面的运行性能，如果添加的事件过多，会导致网页的性能下降。采用事件代理的方式，可以大大减少注册事件的个数。

  • 事件代理的当时，某个子孙元素是动态增加的，不需要再次对其进行事件绑定。

  • 不用担心某个注册了事件的DOM元素被移除后，可能无法回收其事件处理程序，我们只要把事件处理程序委托给更高层级的元素，就可以避免此问题。

addEventListener绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

17、js数组操作方法

https://juejin.im/post/5b0903b26fb9a07a9d70c7e0#heading-25

 

基于原生JS封装数组原型上的sort方法

Array.prototype.mySort = function(fn){
    if(Object.prototype.toString.call(fn)==='[object Function]'){
        //如果传进来参数的是函数
        for(var i = 0;i<this.length-1;i++){
            //遍历数组,将前后两项作为实参传给fn
            if(fn.call(this,this[i],this[i+1])>0){
                //如果fn执行之后的返回值大于0.就调用swap方法交换位置
                var a = this[i],b=this[i+1];
                this[i] = swap(a,b).a;
                this[i+1] = swap(a,b).b;
                //交换之后，如果当前项不是第一项，则当前项(索引为i的项)继续跟前面的项进行比较
                if(i>0){
                    for(var j = i-1;j>=0;j--){
                            if(fn.call(this,this[j],this[j+1])>0){
                                var a = this[j],b=this[j+1];
                                this[j] = swap(a,b).a;
                                this[j+1] = swap(a,b).b;
                            }
                        }
                }
            }
        }
    }else{
        //如果不是函数，则按正常排序
        //遍历数组，将前后两项进行比较
        for(var i = 0;i<this.length-1;i++){
            var cur = this[i];//当前项
            var next = this[i+1];//下一项
            if(comASCII(cur,next)){
                //当返回true的时候交换，并且交换完成之后，当前项继续往前比较
                this[i] = swap(cur,next).a;
                this[i+1] = swap(cur,next).b;
                //当前项继续向前比较
                if(i>0){
                    for(var k = i-1;k>=0;k--){
                        var cur = this[k];
                        var next = this[k+1];
                        if(comASCII(cur,next)){
                            this[k] = swap(cur,next).a;
                            this[k+1] = swap(cur,next).b;
                        }
                    }
                }
            }
        }
    }
    //封装一个交换位置的函数
    function swap(a,b){
        return {
            a:b,
            b:a
        }
    }
    //如果不传参的情况下比较ASCII码
    function comASCII(cur,next){
        //全部转换为字符串、逐项比较ASCII码
        cur = cur.toString();
        next = next.toString();
        //取长度最大值
        var len = cur.length>next.length?next.length:cur.length;
        //当前后两项都不是不是{}类型的数据时，进行比较
        if(cur!=='[object Object]'&&next!=='[object Object]'){
            for(var j = 0;j){
                if(!isNaN(cur.charCodeAt(j))&&!isNaN(next.charCodeAt(j))){
                    //如果二者的ASCII码都是有效数字
                    if(cur.charCodeAt(j)>next.charCodeAt(j)){
                        //如果前一项比后一项当前的ASCII码大，则返回true，交换位置
                        return true;
                    }else if(cur.charCodeAt(j)==next.charCodeAt(j)){
                    //如果相等直接进入下一轮循环
                            continue;
                        }else{
                        //前项比后项小，直接返回false
                            return false;
                        }
                }
            }
            if(!isNaN(cur.charCodeAt(len))&&isNaN(next.charCodeAt(len))&&(cur.charCodeAt(len-1)==next.charCodeAt(len-1))){
                //比较完之后，如果前一项ASCII还是有效数字，说明前项比后项大，交换
                return true;
            }
        }
        //如果上述条件不满足，则不交换
        return false;
    }
    //返回当前数组
    return this;
};

 

 

18、数组的哪些API会改变原数组

数组的哪些API会改变原数组？
改变的有：
splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不改变的有：
slice/map/forEach/every/filter/reduce/entries/find 

19、js获取属性节点

https://microzz.com/2017/04/06/jsdom/

 

document.querySelector(selectors)   //接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。
document.querySelectorAll(selectors)  //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。
document.getElementsByTagName(tagName)  //返回所有指定HTML标签的元素
document.getElementsByClassName(className)   //返回包括了所有class名字符合指定条件的元素
document.getElementsByName(name)   //用于选择拥有name属性的HTML元素（比如
、、、、和