前言

是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer; 本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络; 包括函数,数组,对象,数据结构,算法,设计模式和 http.

1. 函数

1.1函数的3种定义方法

1.1.1 函数声明

//ES5
function getSum(){}
function (){}//匿名函数
//ES6
()=>{}//如果{}内容只有一行{}和return关键字可省,
复制代码

1.1.2 函数表达式(函数字面量)

//ES5
var sum=function(){}
//ES6
let sum=()=>{}//如果{}内容只有一行{}和return关键字可省,
复制代码

1.1.3 构造函数

const sum = new Function('a', 'b' , 'return a + b')
复制代码

1.1.4 三种方法的对比

1.函数声明有预解析,而且函数声明的优先级高于变量; 2.使用Function构造函数定义函数的方式是一个函数表达式,这种方式会导致解析两次代码，影响性能。第一次解析常规的JavaScript代码，第二次解析传入构造函数的字符串

1.2.ES5中函数的4种调用

在ES5中函数内容的this指向和调用方法有关

1.2.1 函数调用模式

包括函数名()和匿名函数调用,this指向window

function getSum() {
    console.log(this) //这个属于函数名调用，this指向window
 }
 getSum()
 (function() {
    console.log(this) //匿名函数调用，this指向window
 })()
 var getSum=function() {
    console.log(this) //实际上也是函数名调用，window
 }
 getSum()

1.2.2 方法调用

对象.方法名(),this指向对象

var objList = {
   name: 'methods',
   getSum: function() {
     console.log(this) //objList对象
   }
}
objList.getSum()

1.2.3 构造器调用

new 构造函数名(),this指向实例化的对象

function Person() {
  console.log(this); //是构造函数调用，指向实例化的对象personOne
}
var personOne = new Person();

1.2.4 间接调用

利用call和apply来实现,this就是call和apply对应的第一个参数,如果不传值或者第一个值为null,undefined时this指向window

function foo() {
   console.log(this);
}
foo.apply('我是apply改变的this值');//我是apply改变的this值
foo.call('我是call改变的this值');//我是call改变的this值

1.3 ES6中函数的调用

箭头函数不可以当作构造函数使用，也就是不能用new命令实例化一个对象，否则会抛出一个错误 箭头函数的this是和定义时有关和调用无关 调用就是函数调用模式

(() => {
   console.log(this)//window
})()
let arrowFun = () => {
  console.log(this)//window
}
arrowFun()
let arrowObj = {
  arrFun: function() {
   (() => {
     console.log(this)//this指向的是arrowObj对象
   })()
   }
 }
 arrowObj.arrFun();

1.4.call,apply和bind

1.IE5之前不支持call和apply,bind是ES5出来的; 2.call和apply可以调用函数,改变this,实现继承和借用别的对象的方法;

1.4.1 call和apply定义

调用方法,用一个对象替换掉另一个对象(this) 对象.call(新this对象,实参1,实参2,实参3…..) 对象.apply(新this对象,[实参1,实参2,实参3…..])

1.4.2 call和apply用法

1.间接调用函数,改变作用域的this值 2.劫持其他对象的方法

var foo = {
  name:"张三",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"李四"
};
foo.logName.call(bar);//李四
//实质是call改变了foo的this指向为bar,并调用该函数

3.两个函数实现继承

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   
function Cat(name){  
  Animal.call(this, name);  
}    
var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

4.为类数组(arguments和nodeList)添加数组方法push,pop

(function(){
  Array.prototype.push.call(arguments,'王五');
  console.log(arguments);//['张三','李四','王五']
})('张三','李四')

5.合并数组

let arr1=[1,2,3]; 
let arr2=[4,5,6]; 
Array.prototype.push.apply(arr1,arr2); //将arr2合并到了arr1中

6.求数组最大值

Math.max.apply(null,arr)

7.判断字符类型

Object.prototype.toString.call({})

1.4.3 bind

bind是function的一个函数扩展方法，
bind以后代码重新绑定了func内部的this指向,返回一个函数,不会调用方法,不兼容IE8

var name = '李四'
 var foo = {
   name: "张三",
   logName: function(age) {
   console.log(this.name, age);
   }
 }
 var fooNew = foo.logName;
 var fooNewBind = foo.logName.bind(foo);
 fooNew(10)//李四,10
 fooNewBind(11)//张三,11  因为bind改变了fooNewBind里面的this指向
复制代码

1.4.4 call,apply和bind原生实现

call实现:

Function.prototype.newCall = function(context, ...parameter) {
 if (typeof context === 'object' || typeof context === 'function') {
    context = context || window
} else {
    context = Object.create(null)
}
  context[fn] = this  
  const res =context[fn](...parameter)
  delete context.fn;
  return res
}
let person = {
  name: 'Abiel'
}
function sayHi(age,sex) {
  console.log(this.name, age, sex);
}
sayHi.newCall (person, 25, '男'); // Abiel 25 男

apply实现:

Function.prototype.newApply = function(context, parameter) {
  if (typeof context === 'object' || typeof context === 'function') {
    context = context || window
  } else {
    context = Object.create(null)
  }
  let fn = Symbol()
  context[fn] = this
  const res=context[fn](...parameter);
  delete context[fn]
  return res
}
    let person = {
    name: "Abiel"
  };
    function sayHi(age, sex) {
    console.log(this.name, age, sex);
  }
    sayHi.newApply (person,[ 25, '男']) //Abiel 25 男

call 和 apply 封装对比:其实核心代码是一样的,只不过 call 需要对第二个形参解构
bind实现:

Function.prototype.bind = function (context,...innerArgs) {
  var me = this
  return function (...finnalyArgs) {
    return me.call(context,...innerArgs,...finnalyArgs)
  }
}
let person = {
  name: 'Abiel'
}
function sayHi(age,sex) {
  console.log(this.name, age, sex);
}
let personSayHi = sayHi.bind(person, 25)
personSayHi('男')

1.4.5 三者异同

同:都是改变this指向,都可接收参数 异:bind和call是接收单个参数,apply是接收数组

1.5.函数的节流和防抖

节流:

1.5.1 节流

// html 部分
    <style>
    *{padding:0;margin:0;}
    .scroll-box{
        width : 100%;
        height : 500px;
        background:blue;
        overflow : auto;
    }    
    .scroll-item{
        height:1000px;
        width:100%;
    }
    </style>
    <body>
    <div class="scroll-box">
        <div class="scroll-item"></div>
    </div>
    </body>
    // js 部分
    let throttle = function (func, delay) {
    let timer = null;
    return function(){
      if (!timer) {
        timer = setTimeout(() => {
          func.apply(this, arguments);
          // 或者直接 func()
          timer = null;
        }, delay);
      }
    };
    };
      // 处理函数
      function handle() {
      console.log(arguments)
      console.log(Math.random());
      }
    // 测试用例
    document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle,3000));

1.5.2 防抖

// html 部分同上
    // js 部分
    let debounce = function (fn, wait) {
    let timeout = null;
    return function () {
      if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
      timeout = setTimeout(() => {
        fn.apply(this, arguments);
        // 或者直接 fn()
        timeout = null;
      }, wait);
    };
    }
     // 处理函数
  function handle() {
    console.log(arguments)
    console.log(Math.random());
  }
  // 测试用例
  document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));

1.6.原型链

1.6.1 定义

对象继承属性的一个链条

1.6.2构造函数,实例与原型对象的关系

var Person = function (name) { this.name = name; }//person是构造函数
var o3personTwo = new Person('personTwo')//personTwo是实例
复制代码

原型对象都有一个默认的constructor属性指向构造函数

1.6.3 创建实例的方法

1.字面量

let obj={'name':'张三'}

2.Object构造函数创建

let Obj=new Object()
Obj.name='张三'

3.使用工厂模式创建对象

function createPerson(name){
 var o = new Object();
 o.name = name;
 return o; 
}
var person1 = createPerson('张三');

4.使用构造函数创建对象

function Person(name){
 this.name = name;
}
var person1 = new Person('张三');

1.6.4 new运算符

1.创了一个新对象;
2.this指向构造函数;
3.构造函数有返回,会替换new出来的对象,如果没有就是new出来的对象
4.手动封装一个new运算符

var new2 = function (func) {
    var o = Object.create(func.prototype);//创建对象
    var k = func.call(o);//改变this指向，把结果付给k
    if (k && k instanceof Object) {//判断k的类型是不是对象
        return k; //是，返回k
    } else {
        return o;//不是返回返回构造函数的执行结果
    }
}

1.6.5 对象的原型链

1.7 继承的方式

JS是一门弱类型动态语言,封装和继承是他的两大特性

1.7.1 原型链继承

将父类的实例作为子类的原型 1.代码实现 定义父类:

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

子类:

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
// Test Code
var cat = new Cat();
console.log(cat.name);//cat
console.log(cat.eat('fish'));//cat正在吃：fish  undefined
console.log(cat.sleep());//cat正在睡觉！ undefined
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

2.优缺点 简单易于实现,但是要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行,无法实现多继承

1.7.2 构造继承

实质是利用call来改变Cat中的this指向 1.代码实现 子类:

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
复制代码

2.优缺点 可以实现多继承,不能继承原型属性/方法

1.7.3 实例继承

为父类实例添加新特性，作为子类实例返回 1.代码实现 子类

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

2.优缺点 不限制调用方式,但不能实现多继承

1.7.4 拷贝继承

将父类的属性和方法拷贝一份到子类中 1.子类:

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

2.优缺点 支持多继承,但是效率低占用内存

1.7.5 组合继承

通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用 1.子类:

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

1.7.6 寄生组合继承

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

1.7.7 ES6的extends继承

ES6 的继承机制是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this

//父类
class Person {
    //constructor是构造方法
    constructor(skin, language) {
        this.skin = skin;
        this.language = language;
    }
    say() {
        console.log('我是父类')
    }
}
//子类
class Chinese extends Person {
    constructor(skin, language, positon) {
        //console.log(this);//报错
        super(skin, language);
        //super();相当于父类的构造函数
        //console.log(this);调用super后得到了this，不报错，this指向子类，相当于调用了父类.prototype.constructor.call(this)
        this.positon = positon;
    }
    aboutMe() {
        console.log(`${this.skin} ${this.language}  ${this.positon}`);
    }
}
//调用只能通过new的方法得到实例,再调用里面的方法
let obj = new Chinese('红色', '中文', '香港');
obj.aboutMe();
obj.say();
复制代码

1.8.高阶函数

1.8.1定义

函数的参数是函数或返回函数

1.8.2 常见的高阶函数

map,reduce,filter,sort

1.8.3 柯里化

1.定义:只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数

fn(a,b,c,d)=>fn(a)(b)(c)(d)
复制代码

2.代码实现:

const currying = fn => {
const len = fn.length
return function curr (...args1) {
    if (args1.length >= len) {
         return fn(...args1)
    }
    return (...args2) => curr(...args1, ...args2)
    }
}
复制代码

1.8.4 反柯里化

1.定义:

obj.func(arg1, arg2)=>func(obj, arg1, arg2)
复制代码

2.代码实现:

Function.prototype.uncurrying = function() {
  var that = this;
  return function() {
    return Function.prototype.call.apply(that, arguments);
  }
};
function sayHi () {
  return "Hello " + this.value +" "+[].slice.call(arguments);
}
let sayHiuncurrying=sayHi.uncurrying();
console.log(sayHiuncurrying({value:'world'},"hahaha"));
复制代码

1.8.5偏函数

1.定义:指定部分参数来返回一个新的定制函数的形式 2.例子:

function foo(a, b, c) {
  return a + b + c;
}
function func(a, b) {
  return foo(a,b,8);
}
复制代码

2.对象

2.1.对象的声明方法

2.1.1 字面量

var test2 = {x:123,y:345};
console.log(test2);//{x:123,y:345};
console.log(test2.x);//123
console.log(test2.__proto__.x);//undefined
console.log(test2.__proto__.x === test2.x);//false
复制代码

2.1.2 构造函数

var test1 = new Object({x:123,y:345});
console.log(test1);//{x:123,y:345}
console.log(test1.x);//123
console.log(test1.__proto__.x);//undefined
console.log(test1.__proto__.x === test1.x);//false
复制代码

new的作用: 1.创了一个新对象; 2.this指向构造函数; 3.构造函数有返回,会替换new出来的对象,如果没有就是new出来的对象

2.1.3 内置方法

Obejct.create(obj,descriptor),obj是对象,describe描述符属性(可选)

let test = Object.create({x:123,y:345});
console.log(test);//{}
console.log(test.x);//123
console.log(test.__proto__.x);//3
console.log(test.__proto__.x === test.x);//true
复制代码

2.1.4 三种方法的优缺点

1.功能:都能实现对象的声明,并能够赋值和取值
2.继承性:内置方法创建的对象继承到proto属性上
3.隐藏属性:三种声明方法会默认为内部的每个成员（属性或方法）生成一些隐藏属性，这些隐藏属性是可以读取和可配置的,属性分类见下面
4.属性读取:Object.getOwnPropertyDescriptor()或getOwnPropertyDescriptor()
5.属性设置:Object.definePropertype或Object.defineProperties

2.2.对象的属性

2.2.1 属性分类

1.数据属性4个特性: configurable(可配置),enumerable(可枚举),writable(可修改),value(属性值)
2.访问器属性2个特性: get(获取),set(设置)
3.内部属性 由JavaScript引擎内部使用的属性; 不能直接访问,但是可以通过对象内置方法间接访问,如:[[Prototype]]可以通过 Object.getPrototypeOf()访问; 内部属性用[[]]包围表示,是一个抽象操作,没有对应字符串类型的属性名,如[[Prototype]].

2.2.2 属性描述符

1.定义:将一个属性的所有特性编码成一个对象返回 2.描述符的属性有:数据属性和访问器属性 3.使用范围: 作为方法Object.defineProperty, Object.getOwnPropertyDescriptor, Object.create的第二个参数,

2.2.3 属性描述符的默认值

1.访问对象存在的属性

所以通过上面三种声明方法已存在的属性都是有这些默认描述符 2.访问对象不存在的属性

2.2.3 描述符属性的使用规则

get,set与wriable,value是互斥的,如果有交集设置会报错

2.2.4 属性定义

1.定义属性的函数有两个:Object.defineProperty和Object.defineProperties.例如: Object.defineProperty(obj, propName, desc)
2.在引擎内部,会转换成这样的方法调用: obj.[DefineOwnProperty]

2.2.5 属性赋值

1.赋值运算符(=)就是在调用[[Put]].比如: obj.prop = v;
2.在引擎内部,会转换成这样的方法调用: obj.[Put]

2.2.6 判断对象的属性

2.3.Symbol

2.3.1概念

是一种数据类型; 不能new,因为Symbol是一个原始类型的值，不是对象。

2.3.2 定义方法

Symbol(),可以传参 var s1 = Symbol(); var s2 = Symbol(); s1 === s2 // false

// 有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");
s1 === s2 // false
复制代码

2.3.3 用法

1.不能与其他类型的值进行运算; 2.作为属性名

let mySymbol = Symbol();
// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
var a = {
  [mySymbol]: 'Hello!'
};
// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上写法都得到同样结果
a[mySymbol] // "Hello!"
复制代码

3.作为对象属性名时，不能用点运算符,可以用[]

let a = {};
let name = Symbol();
a.name = 'lili';
a[name] = 'lucy';
console.log(a.name,a[name]); 
复制代码

4.遍历不会被for…in、for…of和Object.keys()、Object.getOwnPropertyNames()取到该属性

2.3.4 Symbol.for

1.定义:在全局中搜索有没有以该参数作为名称的Symbol值，如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值 2.举例:

var s1 = Symbol.for('foo');
var s2 = Symbol.for('foo');
s1 === s2 // true
复制代码

2.3.5 Symbol.keyFor

1.定义:返回一个已登记的Symbol类型值的key 2.举例:

var s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"
var s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined 
复制代码

2.4.遍历

2.4.1 一级对象遍历方法

总结:1.只有Object.getOwnPropertySymbols(obj)和Reflect.ownKeys(obj)可以拿到Symbol属性 2.只有Reflect.ownKeys(obj)可以拿到不可枚举属性

2.4.2 多级对象遍历

数据模型:

var treeNodes = [
    {
     id: 1,
     name: '1',
     children: [
       {
        id: 11,
        name: '11',
        children: [
         {
          id: 111,
          name: '111',
          children:[]
          },
          {
            id: 112,
            name: '112'
           }
          ]
         },
         {
          id: 12,
          name: '12',
          children: []
         }
         ],
         users: []
        },
      ];
复制代码

递归:

var parseTreeJson = function(treeNodes){
      if (!treeNodes || !treeNodes.length) return;
       for (var i = 0, len = treeNodes.length; i < len; i++) {
            var childs = treeNodes[i].children;
            console.log(treeNodes[i].id);
            if(childs && childs.length > 0){
                 parseTreeJson(childs);
            }
       }
    };
    console.log('------------- 递归实现 ------------------');
    parseTreeJson(treeNodes);
复制代码

2.5.深度拷贝

2.5.1 Object.assign

1.定义:将源对象（source）的所有可枚举属性，复制到目标对象（target） 2.用法:

合并多个对象
var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
复制代码

3.注意: 这个是伪深度拷贝,只能拷贝第一层

2.5.2 JSON.stringify

1.原理:是将对象转化为字符串,而字符串是简单数据类型

2.5.3 递归拷贝

function deepClone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
      if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      }else{ // 如果不是，就直接赋值
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}  
复制代码

2.6.数据拦截

定义:利用对象内置方法,设置属性,进而改变对象的属性值

2.6.1 Object.defineProterty

1.ES5出来的方法; 2.三个参数:对象(必填),属性值(必填),描述符(可选); 3.defineProterty的描述符属性

数据属性:value,writable,configurable,enumerable
访问器属性:get,set
注:不能同时设置value和writable,这两对属性是互斥的
复制代码

4.拦截对象的两种情况:

let obj = {name:'',age:'',sex:''  },
    defaultName = ["这是姓名默认值1","这是年龄默认值1","这是性别默认值1"];
  Object.keys(obj).forEach(key => {
    Object.defineProperty(obj, key, {
      get() {
        return defaultName;
      },
      set(value) {
        defaultName = value;
      }
    });
  });
  console.log(obj.name);
  console.log(obj.age);
  console.log(obj.sex);
  obj.name = "这是改变值1";
  console.log(obj.name);
  console.log(obj.age);
  console.log(obj.sex);
  let objOne={},defaultNameOne="这是默认值2";
  Object.defineProperty(obj, 'name', {
      get() {
        return defaultNameOne;
      },
      set(value) {
        defaultNameOne = value;
      }
  });
  console.log(objOne.name);
  objOne.name = "这是改变值2";
  console.log(objOne.name);
复制代码

5.拦截数组变化的情况

let a={};
bValue=1;
Object.defineProperty(a,"b",{
    set:function(value){
        bValue=value;
        console.log("setted");
    },
    get:function(){
        return bValue;
    }
});
a.b;//1
a.b=[];//setted
a.b=[1,2,3];//setted
a.b[1]=10;//无输出
a.b.push(4);//无输出
a.b.length=5;//无输出
a.b;//[1,10,3,4,undefined];
复制代码

结论:defineProperty无法检测数组索引赋值,改变数组长度的变化; 但是通过数组方法来操作可以检测到
多级嵌套对象监听

let info = {};
  function observe(obj) {
    if (!obj || typeof obj !== "object") {
      return;
    }
    for (var i in obj) {
      definePro(obj, i, obj[i]);
    }
  }
  function definePro(obj, key, value) {
    observe(value);
    Object.defineProperty(obj, key, {
      get: function() {
        return value;
      },
      set: function(newval) {
        console.log("检测变化", newval);
        value = newval;
      }
    });
  }
  definePro(info, "friends", { name: "张三" });
  info.friends.name = "李四";
复制代码

6.存在的问题

不能监听数组索引赋值和改变长度的变化
必须深层遍历嵌套的对象,因为defineProterty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择
复制代码

2.6.2 proxy

1.ES6出来的方法,实质是对对象做了一个拦截,并提供了13个处理方法
2.两个参数:对象和行为函数

let handler = {
    get(target, key, receiver) {
      console.log("get", key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log("set", key, value);
      return Reflect.set(target, key, value, receiver);
    }
  };
  let proxy = new Proxy(obj, handler);
  proxy.name = "李四";
  proxy.age = 24;
复制代码

涉及到多级对象或者多级数组

//传递两个参数，一个是object, 一个是proxy的handler
//如果是不是嵌套的object，直接加上proxy返回，如果是嵌套的object，那么进入addSubProxy进行递归。 
function toDeepProxy(object, handler) {
    if (!isPureObject(object)) addSubProxy(object, handler); 
    return new Proxy(object, handler);
//这是一个递归函数，目的是遍历object的所有属性，如果不是pure object,那么就继续遍历object的属性的属性，如果是pure object那么就加上proxy
    function addSubProxy(object, handler) {
        for (let prop in object) {
            if ( typeof object[prop] == 'object') {
                if (!isPureObject(object[prop])) addSubProxy(object[prop], handler);
                object[prop] = new Proxy(object[prop], handler);
            }
        }
        object = new Proxy(object, handler)
    }
//是不是一个pure object,意思就是object里面没有再嵌套object了
    function isPureObject(object) {
        if (typeof object!== 'object') {
            return false;
        } else {
            for (let prop in object) {
                if (typeof object[prop] == 'object') {
                    return false;
                }
            }
        }
        return true;
    }
}
let object = {
    name: {
        first: {
            four: 5,
            second: {
                third: 'ssss'
            }
        }
    },
    class: 5,
    arr: [1, 2, {arr1:10}],
    age: {
        age1: 10
    }
}
//这是一个嵌套了对象和数组的数组
let objectArr = [{name:{first:'ss'}, arr1:[1,2]}, 2, 3, 4, 5, 6]
//这是proxy的handler
let handler = {
    get(target, property) {
        console.log('get:' + property)
        return Reflect.get(target, property);
    },
    set(target, property, value) {
        console.log('set:' + property + '=' + value);
        return Reflect.set(target, property, value);
    }
}
//变成监听对象
object = toDeepProxy(object, handler);
objectArr = toDeepProxy(objectArr, handler);
//进行一系列操作
console.time('pro')
objectArr.length
objectArr[3];
objectArr[2]=10
objectArr[0].name.first = 'ss'
objectArr[0].arr1[0]
object.name.first.second.third = 'yyyyy'
object.class = 6;
object.name.first.four
object.arr[2].arr1
object.age.age1 = 20;
console.timeEnd('pro')
复制代码

3.问题和优点 reflect对象没有构造函数 可以监听数组索引赋值,改变数组长度的变化, 是直接监听对象的变化,不用深层遍历

2.6.3 defineProterty和proxy的对比

1.defineProterty是es5的标准,proxy是es6的标准;
2.proxy可以监听到数组索引赋值,改变数组长度的变化;
3.proxy是监听对象,不用深层遍历,defineProterty是监听属性;
3.利用defineProterty实现双向数据绑定(vue2.x采用的核心) 4.利用proxy实现双向数据绑定(vue3.x会采用)

3.数组

数组基本上考察数组方法多一点,所以这里就单纯介绍常见的场景数组的方法,还有很多场景后续补充;
本文主要从应用来讲数组api的一些骚操作;
如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等；
上面这些应用场景你可以用一行代码实现？

3.1 扁平化n维数组

1.终极篇

[1,[2,3]].flat(1) //[1,2,3]
[1,[2,3,[4,5]]].flat(2) //[1,2,3,4,5]
[1,[2,3,[4,5]]].toString()  //'1,2,3,4,5'
[1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n]
复制代码

Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大
2.开始篇

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
flatten([1,[2,3]]) //[1,2,3]
flatten([1,[2,3,[4,5]]) //[1,2,3,4,5]
复制代码

实质是利用递归和数组合并方法concat实现扁平

3.2 去重

1.终极篇

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]
复制代码

set是ES6新出来的一种一种定义不重复数组的数据类型 Array.from是将类数组转化为数组 …是扩展运算符,将set里面的值转化为字符串 2.开始篇

Array.prototype.distinct = function() {
    const map = {}
    const result = []
    for (const n of this) {
        if (!(n in map)) {
            map[n] = 1
            result.push(n)
        }
    }
    return result
}
[1,2,3,3,4,4].distinct(); //[1,2,3,4]
复制代码

取新数组存值,循环两个数组值相比较

3.3排序

1.终极篇

[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认是升序
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序
复制代码

sort是js内置的排序方法,参数为一个函数 2.开始篇 冒泡排序:

Array.prototype.bubleSort=function () {
    let arr=this,
        len = arr.length;
    for (let outer = len; outer >= 2; outer--) {
      for (let inner = 0; inner <= outer - 1; inner++) {
        if (arr[inner] > arr[inner + 1]) {
          //升序
          [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
          console.log([arr[inner], arr[inner + 1]]);
        }
      }
    }
    return arr;
  }
[1,2,3,4].bubleSort() //[1,2,3,4]    
复制代码

选择排序

Array.prototype.selectSort=function () {
        let arr=this,
            len = arr.length;
        for (let i = 0, len = arr.length; i < len; i++) {
    for (let j = i, len = arr.length; j < len; j++) {
      if (arr[i] > arr[j]) {
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }
  }
    return arr;
  }
  [1,2,3,4].selectSort() //[1,2,3,4] 
复制代码

3.4最大值

1.终极篇

Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4
[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
 return Math.max(prev,cur);
},0) //4
复制代码

Math.max()是Math对象内置的方法,参数是字符串; reduce是ES5的数组api,参数有函数和默认初始值; 函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)
2.开始篇 先排序再取值

3.5求和

1.终极篇

[1,2,3,4].reduce(function (prev, cur) {
   return prev + cur;
 },0) //10 
复制代码

2.开始篇

function sum(arr) {
  var len = arr.length;
  if(len == 0){
    return 0;
  } else if (len == 1){
    return arr[0];
  } else {
    return arr[0] + sum(arr.slice(1));
  }
}
sum([1,2,3,4]) //10
复制代码

利用slice截取改变数组,再利用递归求和

3.6合并

1.终极篇

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
let arrA = [1, 2], arrB = [3, 4]
Array.prototype.push.apply(arrA, arrB))//arrA值为[1,2,3,4]
复制代码

2.开始篇

let arr=[1,2,3,4];
  [5,6].map(item=>{
   arr.push(item)
 })
 //arr值为[1,2,3,4,5,6],注意不能直接return出来,return后只会返回[5,6]
复制代码

3.7判断是否包含值

1.终极篇

[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1
复制代码

includes(),find(),findIndex()是ES6的api
2.开始篇

[1,2,3].some(item=>{
  return item===3
}) //true 如果不包含返回false
复制代码

3.8类数组转化

1.终极篇

Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]
复制代码

类数组:表示有length属性,但是不具备数组的方法
call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法
Array.from是将类似数组或可迭代对象创建为数组
…是将类数组扩展为字符串,再定义为数组
2.开始篇

Array.prototype.slice = function(start,end){  
      var result = new Array();  
      start = start || 0;  
      end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键  
      for(var i = start; i < end; i++){  
           result.push(this[i]);  
      }  
      return result;  
 } 
复制代码

3.9每一项设置值

1.终极篇

[1,2,3].fill(false) //[false,false,false] 
复制代码

fill是ES6的方法 2.开始篇

[1,2,3].map(() => 0)
复制代码

3.10每一项是否满足

[1,2,3].every(item=>{return item>2}) //false
复制代码

every是ES5的api,每一项满足返回 true

3.11有一项满足

[1,2,3].some(item=>{return item>2}) //true
复制代码

some是ES5的api,有一项满足返回 true

3.12.过滤数组

[1,2,3].filter(item=>{return item>2}) //[3]
复制代码

filter是ES5的api,返回满足添加的项的数组

3.13对象和数组转化

Object.keys({name:'张三',age:14}) //['name','age']
Object.values({name:'张三',age:14}) //['张三',14]
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox输出{name:'张三',age:14}
复制代码

3.14 对象数组

[{count:1},{count:2},{count:3}].reduce((p, e)=>p+(e.count), 0)
复制代码

4.数据结构篇

数据结构是计算机存储、组织数据的方式,算法是系统描述解决问题的策略。了解基本的数据结构和算法可以提高代码的性能和质量。 也是程序猿进阶的一个重要技能。 手撸代码实现栈,队列,链表,字典,二叉树,动态规划和贪心算法

4.1 栈

栈的特点：先进后出

class Stack {
    constructor() {
      this.items = [];
    }
    // 入栈
    push(element) {
      this.items.push(element);
    }
    // 出栈
    pop() {
      return this.items.pop();
    }
    // 末位
    get peek() {
      return this.items[this.items.length - 1];
    }
    // 是否为空栈
    get isEmpty() {
      return !this.items.length;
    }
    // 长度
    get size() {
      return this.items.length;
    }
    // 清空栈
    clear() {
      this.items = [];
    }
  }
  // 实例化一个栈
  const stack = new Stack();
  console.log(stack.isEmpty); // true
  // 添加元素
  stack.push(5);
  stack.push(8);
  // 读取属性再添加
  console.log(stack.peek); // 8
  stack.push(11);
  console.log(stack.size); // 3
  console.log(stack.isEmpty); // false
复制代码