es6数组扁平化

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。

[1,2,[3,4]].flat() //=>输出[1,2,3,4]

原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

[1,2,[3,[4,5]]].flat() //=>[1,2,3,[4,5]]
[1,2,[3,[4,5]]].flat(2) //=>[1,2,3,4,5]
//参数为2，表示要拉平两层的嵌套数组

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity) //=> [1, 2, 3]

如果原数组有空位，flat()方法会跳过空位

[1,2, ,4,5].flat() //=>[1,2,4,5]

flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map()，然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

//相当于[[2,4], [3,6],[4,8]].flat()
[2,3,4].flatMap((x) => [x, x * 2])
//[2,4,3,6,4,8]

flatMap()只能展开一层数组

去重方法

利用ES6 Set去重

function unique(arr) {
    return Array.from(new Set(arr))
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr)arr)
//[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}]

利用for嵌套for，然后splice去重

function unique(arr) {
    for(var i = 0; i < arr.length; i++) {
        for(var j = 0; j < arr.length; j++) {
            if(arr[i] == arr[j]) {
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", 'a', {……}， {……}] 
//NaN和{}没有去重，两个null直接消失了

利用indexOf去重

function unique(arr) {
    if(!Array.isArray(arr)) {
        console.log('type error')    
        return
    }
    var array = [];
    for(var i = 0; i < arr.length; i++) {
        if(array.indexOf(arr[i]) === -1) {
            array.push(arr[i])
        }
    }
    return array
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {……}, {……}]
//NaN、{}没有去重

利用includes

function unique(arr) {
    if(!Array.isArray(arr)) {
        console.log('type error')
        return
    }
    var array = [];
    for(var i = 0; i < arr.length; i++) {
        if(!array.includes(arr[i])) {
            array.push(arr[i]);
        }
    }
    return array
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {……}, {……}]
//{}没有去重

如何解决数字精度丢失的问题

理论上用有限的空间来存储无限的小数是不可能保证精确的，但可以处理一下得到期望的结果
例如：1.4000000000000001这样的数据要展示时，建议使用toPrecision凑整并parseFloat转成数字后再显示

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 //true

封装成的方法就是：

function strip(num, precision = 12) {
    return +parseFloat(num.toPrecision(precision))
}

最后还可以使用第三方库，如Math.js、BigDecimal.js

this指向

不能放到等号的左边

在全局作用域

this指向window，this和window是同一块空间地址；

//直接在html文件中输出this,指向的window
console.log(this)//window
//下面两个含义是一样的
window.alert();
this.alert();

给元素的事件绑定的函数中的this

指向了当前被点击的那个元素

<div id="box">点我</div>
<div id="box1">点我1</div>
<script>
  box.onclick = function(){
    //这里面的this : 是个对象； 
    console.dir(this===box); // 空间地址相同；
    box.style.color="red";//给文字改变颜色
    this.style.color="red";
    //this=100;// this 不能放到等号的左边；
  }
</script>

看函数执行前有没有’.’

如果要是没有，那么函数中的this指向window，如果有’.’，那么点前面是谁，this就指向谁

var obj = {
  m:1,
  fn:function(){
    console.log(this);
  }
}
var f = obj.fn;
console.log(f==obj.fn);//true
obj.fn();//this==>obj
f();//this==>window

自执行函数中this永远指向window

(function(){
  console.log(this);// window
})();
var obj = {
  fn:(function(){
    console.log(this);// window
    return function(){
      console.log(this); // window
    }
  })()
}
var f= obj.fn;
f();

回调函数中的this一般指向window

setTimeout(function(){
  console.log(this);//window
},1000);

var ary=[1,2,3,4]
ary.map(function(){
  console.log(this);//会输出4个window
})

构造函数中的this指向实例

call,apply,bind可以改变this指向

call方法

调用函数的方式，但是它可以改变this指向，经常做继承

function fun(x, y) {
  console.log(this); //this指向改变,指向obj
  console.log(x + y);
}
var obj = {
  name: '小明'
};
//call()可以调用函数
fun.call();
// call() 可以改变这个函数的this指向 此时这个函数的this 就指向了obj这个对象
fun.call(obj,10,20);

apply方法

调用函数的方式,但是它可以改变this指向;经常跟数组有关系

function fun(x, y) {
  console.log(this); //this指向改变,指向obj
  console.log(x + y);
}
var obj = {
  name: '小明'
};
fun()//this指向window
fun.apply(obj,[10,20]) //this指向对象obj,参数使用数组方式传递

//借助数学对象实现数组最大值和最小值;       
var arr = [1, 10, 20, 15, 5];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);

bind方法

不会调用函数，但是能改变内部this指向，返回的是原函数改变的this之后产生的新函数，若只想改变this指向，并不想调用函数，就用bind()方法。

function fun(x, y) {
  console.log(this); //this指向改变,指向obj
  console.log(x + y);
}
var obj = {
  name: '小明'
};
var ff = fun.bind(obj,10,20) ; //bind返回的是新函数
//调用新函数
ff();  //this指向的是对象obj,参数是逗号隔开

//点击按钮,就禁用这个按钮,3秒钟之后开启这个按钮
<body>
    <button>我最帅</button>
<button>我最帅</button>
<button>我最帅</button>
<button>我最帅</button>
<button>我最帅</button>
<script>
    var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        this.disabled = true;
        setTimeout(function() {
            this.disabled = false;
        }.bind(this), 3000);
    }
}
</script>

call,apply,bind的异同点

共同点

都可以改变this指向

不同点

call和apply会调用函数，并且改变函数内部this指向
call和apply传递参数不同，call传递参数使用逗号隔开，apply使用数组传递
bind不会调用函数，可以改变函数内部this指向

函数的三种定义方式和六种调用

函数的定义

函数声明

function 关键字(命名函数) function fn() {}

函数表达式 (匿名函数)

var fn = function() {}

new Function()

var fn = new Function('参数一', '参数二',... '函数体');
//Function里面参数都必须是字符串格式,这种方式执行效率低,少用,所有函数都是Function的实例,函数也是对象

函数常见六种方式

//1.普通函数
function fn(){
    console.log('我在努力学习js');
}
fn();
//2.对象的方法
var obj = {
    study: function(){
        console.log('我在努力学习js');
    }
}
obj.study();
//3.构造函数
function Person(){ };
new Person()
//4.绑定事件函数,点击按钮就可以调用这个函数
btn.onclick = function(){ }
//5.定时器函数,每隔2秒调用一次这个函数
setInterval(function(){ },2000);
//6.立即执行函数
(function(){
    console.log('我在学习js');
})();

es6之扩展运算符 三个点(…)

对象的扩展运算符

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar };
//等价于
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar);

Object.assign方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象(target)。
Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

利用上述特性就可以很方便修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数，reducer中的state对象要求不能直接修改，可以通过扩展运算符把修改路径的对象都复制一遍，然后产生一个新的对象返回。
扩展运算符对对象实例的拷贝属于一种浅拷贝

数组的扩展运算符

扩展运算符同样可以运用在对数组的操作中

可以将数组转换为参数序列

function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

可以复制数组

如果直接通过下列的方式进行数组复制是不可取的

const arr1 = [1, 2];
const arr2 = arr1;
arr2[0] = 2;
arr1 // [2,2]
//用扩展运算符
const arr1 = [1, 2];
const arr2 = [...arr1];

扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里参数对象是个数组，数组里面的所有对象都是基础数据类型，将所有基础数据类型重新拷贝到新的数组中。

与解构赋值结合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

const [...rest, last] = [1, 2, 3, 4, 5];
//报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
//报错

可以将字符串转为真正的数组

[...'hello']
//["h", "e", "l", "l", "o"]

es6箭头函数

基本形式

let func = (num) => num;
let func = () => num;
let sum = (num1, num2) => num1 + num2;
[1, 2, 3].map(x => x * x);

基本特点

this为父作用域的this，不是调用时的this

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call,apply,bind。
普通函数的this指向调用它的那个对象。

let person = {
    name:'jike',
    init:function(){
        //为body添加一个点击事件，看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？
        }
    }
}
person.init();

init是function，以person.init调用，其内部this就是person本身，而onclick回调是箭头函数，其内部的this，就是父作用域的this，就是person，能得到name。

let person = {
    name:'jike',
    init:()=>{
        //为body添加一个点击事件，看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？                  
        }
    }
}
person.init();

init为箭头函数，其内部的this为全局window，onclick的this也就是init函数的this，也是window，得到的this.name就为undefined。

箭头函数不能作为构造函数，不能使用new

//构造函数如下：
function Person(p){
    this.name = p.name;
}
//如果用箭头函数作为构造函数，则如下
var Person = (p) => {
    this.name = p.name;
}

箭头函数没有arguments，caller，callee

本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。箭头函数中要想接收不定参数，应该使用rest参数…解决。

let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

通过call和apply调用，不会改变this指向，只会传入参数

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m, n)
    }
};
console.log(obj2.b(1)); //11
console.log(obj2.c(1)); //11

箭头函数没有原型属性

var a = () => {
    return 1;
}
function b() {
    return 2;
}
console.log(a.prototype);//undefined
console.log(b.prototype);//{constructor: f}

箭头函数不能作为Generator函数，不能使用yield关键字

箭头函数返回对象时，要加一个小括号

var func = () => ({foo : 1})//正确
var func = () => {foo : 1} //错误

箭头函数在es6 class中声明的方法为实例方法，不是原型方法

//deom1
class Super{
    sayName(){
        //do some thing here
    }
}
//通过Super.prototype可以访问到sayName方法，这种形式定义的方法，都是定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //true
//所有实例化之后的对象共享prototypy上的sayName方法
//demo2
class Super{
    sayName =()=>{
        //do some thing here
    }
}
//通过Super.prototype访问不到sayName方法，该方法没有定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //false
//实例化之后的对象各自拥有自己的sayName方法，比demo1需要更多的内存空间

在class中尽量少用箭头函数声明方法

多重箭头函数就是一个高阶函数，相当于内嵌函数

const add = x => y => y + x;
//相当于
function add(x) {
    return function(y) {
        return y + x;    
    }
}

箭头函数常见错误

let a = {
    foo: 1,
    bar: () => console.log(this.foo)
}
a.bar()

bar函数中的this指向父作用域，而a对象没有作用域，因此this不是a，打印结果为undefined

function A() {
  this.foo = 1
}
A.prototype.bar = () => console.log(this.foo)
let a = new A()
a.bar()  //undefined

原型上使用箭头函数，this指向是其父作用域，并不是对象a，因此得不到预期结果。

数据类型检测

typeof

返回一个字符串，字符串中包含了对应的数据类型
不能检测null
不能检测对象数据类型(引用数据类型)

instanceof

是检测实例是否属于某个类的方法
只要当前类的原型在当前实例的原型链上，都返回true；(局限性，校验不准)
只要改变了当前实例的原型链，检测结果就不再准确了
不能检测字面量方式创建的基本数据类型值

var num = new Number(1);
console.log(num instanceof Number)

constructor(构造器)

原型中天生自带一个属性名
不能检测基本数据类型的null或undefined；(检测这两个报错)
如果原型扩展以及继承都有可能导致原型链指向发生改变，结果不准确

var ary = [];
console.log(ary.constructor === Array) // true
console.log(ary.constructor === Object) // false
var obj = {};
console.log(obj.constructor === Array);
var num = 1;
console.log(num.constructor === Number);
function A() {}
A.prototype = {} //这种的原型扩展会导致原型上的constructor丢失
var a = new A;
a.constructor === A
//如果原型扩展以及继承都有可能导致原型链指向发生改变，结果不准确
console.log(a.constructor === A);

Object.prototype.toString.call()

通过call改变了toString中的this，call找到自己属性上的方法，检测的是谁，call就指向谁

常用数组操作

concat()

用于连接两个或多个数组，不会改变现有的数组，仅会返回被连接数组的一个副本

var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr1); //[1,2,3]
console.log(arr3); //[1,2,3,4,5]

join()

用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分割的，默认使用’,’分割，不改变原数组

var arr = [2,3,4];
console.log(arr.join()); //2,3,4
console.log(arr); //[2,3,4]

push()

可向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组。

var a = [2,3,4];
var b = a.push(5);
console.log(a); //[2,3,4,5]
console.log(b); //4
//push方法可以一次添加多个元素push(data1,data2,……)

pop()

用于删除并返回数组的最后一个元素，返回最后一个元素，会改变原数组

var arr = [2,3,4];
console.log(arr.pop()); //4
console.log(arr); //[2,3]

shift()

用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。

var arr = [2,3,4];
console.log(arr.shift()); //2
console.log(arr); //[3,4]

unshift()

可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。

var arr = [2,3,4,5];
console.log(arr.unshift(3,6)); //6
console.log(arr); //[3,6,2,3,4,5]
//tip：该方法可以不传参数，不传参数就是不增加元素

slice()

返回一个新的数组，包含从start到end(不包括该元素)的arrayObject中的元素。返回选定的元素，该方法不会修改原数组。

var arr = [2,3,4,5];
console.log(arr.slice(1,3)); //[3,4]
console.log(arr) //[2,3,4,5]

splice()

可删除从index处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从arrayObject中删除了元素，则返回的是含有被删除的元素的数组。splice()方法会直接对数组进行修改。

var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a); //[5,9,6,7,8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3)); //[6,7]
console.log(b); //[5,3,8]

subString()和substr()

相同点：如果只是写一个参数，两者的作用都一样：都是截取字符串从当前下标以后直到字符串最后的字符串片段。substr(startIndex);subString(startIndex);

var str = '123456789';
console.log(str.substr(2)); // "3456789"
console.log(str.subString(2)); // "3456789"

不同点：第二个参数
substr(startIndex, length)：第二个参数是截取字符串的长度(从起始点截取某个长度的字符串)；
subString(startIndex, endIndex)：第二个参数是截取字符串最终的下标(截取2个位置之间的字符串，含头不含尾)

console.log("123456789".substr(2,5)) // 34567
console.log("123456789".substring(2,5)) // 345

sort排序

按照unicode code位置排序，默认升序

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]

reverse()

用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。

var arr = [2,3,4];
console.log(arr.reverse()); //[4,3,2]
console.log(arr); // [4,3,2]

indexOf和lastindexOf

都接受两个参数：查找的值、查找起始位置不存在，返回-1；存在，返回位置。
indexOf是从前往后查，lastindexof是从后往前查

//indexOf
var a = [2, 9, 9];
a.indexOf(2); //0
a.indexOf(7); //-1
if(a.indexOf(7) === -1) {
    //不存在
}
//lastindexof
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); //0
numbers.lastIndexOf(2, -1); // 3

every

对数组的每一项都运行给定的函数，每一项都返回true，则返回true

function isBigEnough(element, index, array){
    return element < 10:
}
[2,5,8,3,4].every(isBigEnough);//true

some

对数组的每一项都运行给定的函数，任意一项都返回true，则返回true

function compare(element, index, array){
    return element > 10;
}
[2,5,8,1,4].some(compare); // false
[12,5,8,1,4].some(compare); // true

filter

对数组的每一项都运行给定的函数，返回结果为true的项组成的数组

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
    return word.length > 6;
})
//Filtered array longWords is ["exuberant", "destruction", "present"]

map

对数组的每一项都运行给定的函数，返回每次函数调用的结果组成一个新数组

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x){
    return x * 2;
})
// doubles is now [2, 10, 20, 30];
// numbers is still [1, 5, 10, 15]

forEach数组遍历

const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
    copy.push(item);
})

ES6新增操作数组方法

find()

传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

findIndex()

传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索

const arr = [1, "2", 3, 3, "2"];
console.log(arr.findIndex(n => typeof n === "number"); // 0

fill()

用新元素替换掉数组内的元素，可以指定替换下标范围

arr.fill(value, start, end)

copyWithin()

选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围

//arr.copyWithin(target, start, end);
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))
//[1,2,3,1,2]从下标为3的元素开始，复制数组，所以4,5被替换成1,2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3,1))
//[1,2,3,2,3]从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4,5被替换成2,3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))
//[1,2,3,2,5]从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2

from

将类似数组的对象(array-like object)和可遍历(iterable)的对象转为真正的数组

const bar = ["a", "b", "c"];
Array.from(bar); // ["a", "b", "c"]
Array.from('foo'); //["f", "o", "o"]

of

用于将一组值，转换为数组。这个方法的主要目的， 是弥补数组构造函数Array()的不足。因为参数的个数不同会导致Array()的行为有差异

Array() //[]
Array(3) // [, , ,]
Array(3, 11, 8) //[3, 11, 8];
Array.of(7) // [7]
Array.of(1, 2, 3) //[1, 2, 3]
Array(7) //[, , , , , , ,]
Array(1, 2, 3) //[1, 2, 3]

entries()

返回迭代器：返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
    console.log(v)
}
//[0, 'a'] [1, 'b'] [2, 'c']
//set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
    console.log(v)
}
//[a, 'a'] [b, 'b'] [c, 'c']
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
    console.log(v)
}
//[a, 'a'] [b, 'b']

values()

返回迭代器：返回键值对的value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
    console.log(v)
}
//'a', 'b', 'c'
//set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
    console.log(v)
}
//'a', 'b', 'c'
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
    console.log(v)
}
//[a, 'a'] [b, 'b']

keys()

返回迭代器：返回键值对的key

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
    console.log(v)
}
//0,1,2
//set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
    console.log(v)
}
//'a', 'b', 'c'
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
    console.log(v)
}
// 'a' 'b'

includes

判断数组中是否存在该元素，参数：查找的值、起始位置、可以替换ES5的indexOf判断方式。indexOf判断元素是否为NaN，会判断错误。

var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); //false

数组去重

let arr = [1, 1, 2, 2, 3, 4, 3, 4, 5, 5];
//indexOf
let newArr = [];
for(let i = 0; i < arr.length; i++) {
    if(newArr indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr); //[1, 2, 3, 4, 5]
//ES6的Set
let newArr = [...new Set(arr)];
console.log(newArr);
//filter()函数
let newArr = arr.filter(function(ele, index, self) {
    return self.indexOf(ele) === index;
})
console.log(newArr); //[1, 2, 3, 4, 5]
//ES6的includes
let newArr = [];
for(let n of arr) {
    if(!newArr.includes(n)) {
        newArr.push(n)
    }
}
console.log(newArr); // [1, 2, 3, 4, 5]
//Array.from方法可以将Set结构转为数组
function dedupe(array) {
    return Array.from(new Set(array))
}
console.log(dedupe(arr)); //[1, 2, 3, 4, 5]
//jQuery的inArray
let newArr = [];
for(let i = 0; i < arr.length; i++) {
    if($.inArray(arr[i].newArr) == -1) {
        newArr.push(arr[i])
    }
}
console.log(dedupe(arr)); //[1, 2, 3, 4, 5]

浅拷贝和深拷贝的区别和实现方式

基本数据类型

名字和值都会储存在栈内存

var a = 1;
b = a;//栈内存会开辟一个新的内存空间，此时b和a都是相互独立的
b = 2;
console.log(a); // 1

当然，这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据

引用数据类型

名字存在栈内存，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值
比如浅拷贝：

当b=a进行拷贝时，其实想复制的是a的引用地址，而并非堆里面的值。

而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不是达到深拷贝的效果了

实现浅拷贝的方法

for…in只循环第一层

// 只复制第一层的浅拷贝
function simpleCopy(obj1) {
    var obj2 = Array.isArray(obj1) ? [] : {};
    //for in 之前需要判断一下是否是引用类型，如果是数组和对象，需要在进行自调用
    for(let i in obj1) {
        obj2[i] = obj1[i];
    }
    return obj2;
}
var obj1 = {
    a: 1,
    b: 2,
    c: {
        d: 3
    }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

object.assign方法

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign(obj);
obj1.a = 3;
console.log(obj.a) // 3

直接用=赋值

let a = [0, 1, 2, 3, 4];
b = a;
console.log(a === b); // false
a[0] = 1;
console.log(a, b); // [1, 1, 2, 3, 4] [1, 1, 2, 3, 4]

实现深拷贝的方法

采用递归去拷贝所有层级属性

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === "object") {
        for(key in obj) {
            if(obj.hasOwnProperty(key)) {
                //判断obj子元素是否为对象，如果是，递归复制
                if(obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，简单复制
                    objClone[key] = obj[key]
                }
            }
        }
    }
    return objClone;
}
let a = [1, 2, 3, 4];
        b = deepClone(a);
a[0] = 2;
console.log(a, b)

通过JSON对象来实现

function deepClone2(obj) {
    var _obj = JSON.stringify(obj),
            objClone = JSON.parse(_obj);
    return objClone;
}

缺点： 无法实现对对象中方法的深拷贝，会显示为undefined

通过jQuery的extend方法实现

var array = [1, 2, 3, 4];
var newArray = $.extend(true, [], array); //true为深拷贝， false为浅拷贝

lodash函数库实现深拷贝

let result = _.cloneDeep(test)

reflect

//代理法
function deepClone(obj) {
    if(!isObject(obj)) {
        throw new Error('obj不是一个对象')
    }
    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })
    return cloneObj
}

手动实现深拷贝

let obj1 = {
    a: 1,
    b: 2
}
let obj2 = {
    a: obj1.a,
    b: obj1.b
}
obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3

object.assign

var obj = {
    a: 1,
    b: 2
}
var obj1 = object.assign({}, obj); // obj赋值给一个空{}
obj1.a = 3;
console.log(obj.a); // 1

用slice实现对数组的深拷贝

// 当数组里面的值是基本数据类型，比如string、number、Boolean属于深拷贝
// 当数组里面的值是引用数据类型，比如Object、Array时，属于浅拷贝
var arr1 = ["1", "2", "3"];
var arr2 = arr1.slice(0);
arr2[1] = "9";
console.log("数组的原始值：" + arr1);
console.log("数组的新值：" + arr2);

用concat实现对数组的深拷贝

// 当数组里面的值是基本数据类型，比如string、number、Boolean属于深拷贝
var arr1 = ["1", "2", "3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log("数组的原始值：" + arr1);
console.log("数组的新值：" + arr2);
// 当数组里面的值是引用数据类型，比如ObjectdArray时，属于浅拷贝
var arr1 = [{a:1},{b:2},{c:3}];
var arr2 = arr1.concat();
arr2[0].a = "9";
console.log("数组的原始值：" + arr1[0].a); //数组的原始值: 9
console.log("数组的新值：" + arr2[0].a); //数组的原始值: 9

var newObj = Object.create(oldObj)

function deepClone(initalObj, finalObj) {
    var obj = finalObj || {};
    for(var i in initalObj) {
        var prop = initalObj[i];
        if(prop === obj) {
            continue;
        }
        if(typeof prop === 'object') {
            obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
        } else {
            obj[i] = prop;
        }
    }
    return obj;
}

扩展运算符

// 当value是基本数据类型，比如string、number、Boolean时，是可以使用拓展运算符进行深拷贝
// 当value是引用数据类型，比如Object、Array,引用类型进行深拷贝也只是拷贝了引用地址，所以属于浅拷贝
var car = {brand: "BMW", price: "380000", length: "5米"}
var car1 = { ...car, price: "500000" }
console.log(car1); // {brand: "BMW", price: "380000", length: "5米"}
console.log(car); //{brand: "BMW", price: "380000", length: "5米"}

promise

异步编程的一种解决方案，比传统的解决方案(回调函数和事件)更合理和强大

promise对象特点

对象的状态不受外界影响

promise对象有三种状态：pending、fulfilled、rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是promise这个名字的由来，其他手段无法改变状态。

一旦状态改变就不会再变，任何时候都能得到这个结果

promise对象的状态改变只有两种状态：从pending变成fulfilled，从pending变成rejected。只要这两种情况发生，状态就凝固不会再变了，这时就称为resolved。如果改变已经发生，再对promise对象添加回调函数，也会立即得到这个结果。这与事件完全不同。事件的特点是，如果你错过了它，再去监听是得不到结果的。
有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调。此外，promise对象提供统一的接口，使得控制异步操作更加容易。

缺点

无法取消promise，一旦新建就会立即执行，无法中途取消。其次，如果不设置回调函数，promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知得知目前进展到哪一个阶段。

基本用法

promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JS引擎提供
resolve函数的作用是，将promise对象的状态从pending变为fulfilled，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
reject函数的作用是，将promise对象的状态从pending变为rejected，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。promise.then(function(val) {}, function(err) {})

let promise = new Promise(function(resolve, reject) {
    console.log('Promise');
    resolve();
})
promise.then(function() {
    console.log('resolved');
})
console.log('Hi');
// Promise
// Hi!
// resolved
// Promise新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，比如像下面这样

const p1 = new Promise(function(resolve, reject) {
    //……
})
const p2 = new Promise(function(resolve, reject) {
    //……
    resolve(p1j)
})
//p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作
//p1的状态就会传递给p2，也就是说，p2自己的状态无效，由p1的状态决定p2的状态，p2后面的then语句都变成针对p1的。如果p1自己的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。