二分查找

2021-07-03

function binarySearch(arr, target) {
    let low = 0, high = arr.length;

    while (low <= high) {
        let mid = Math.floor((high + low) / 2)
        if (arr[mid] === target) return mid;
        else if (arr[mid] < target) low = mid + 1;
        else high = mid - 1;
    }

    return 'not found';
}

展开全文 >>

冒泡排序&插入排序JS实现

2021-07-03

冒泡排序

//冒泡排序思想：
//比较相邻的元素，如果前一个比后一个大，就交换两者的值，对每一对相邻的元素都做该操作，从第一对到最后一对
//每一趟重复执行上述操作，这样每一趟排序后就会有一个最大的数被排到最后面
function bubbleSort(arr){
    let len=arr.length;
    for(let i=0; i<len; i++){
        for(let j=0; j<len-1-i; j++){//为什么这里是j<len-1-i 是因为每一趟排序都有一个最大数沉到了最末尾，那个最大数则不用管了
            if(arr[j]>arr[j+1]){//交换两者值（解构赋值）
                [arr[j], arr[j+1]]=[arr[j+1], arr[j]];
            }
        }
    }
    return arr;
}

插入排序

function insertionSort(arr) {
    let len = arr.length;
    let preIndex, curr;
    for (let i = 1; i < len; i++) {
        preIndex = i - 1;
        curr = arr[i];
        //当前一个元素存在且前一个元素大于当前元素时，将前一个元素的值赋值给当前元素
        while (preIndex >= 0 && arr[preIndex] > curr) {
            arr[preIndex + 1] = arr[preIndex];
            preIndex--;
        }
        //跳出条件后，将curr的值赋值给最小元素
        arr[preIndex + 1] = curr;
    }
    return arr;
}

展开全文 >>

Promise.all()和Promise.race()

2021-06-24

Promise.all()

该方法可以将多个Promise实例包装成一个Promise实例，成功时返回结果数组，失败时返回最先被reject的值

let p1 = Promise.resolve('success');
let p2 = Promise.resolve('success again');
let p3 = Promise.reject('fail');

//Promise.all()成功的时候返回的是一个结果数组
Promise.all([p1, p2]).then(result => {
    //结果数组里的数据顺序和接受的数组里的数据顺序是一致的
    console.log(result);//["success","success again"]
}).catch(error => {
    console.log(error);
});

//Promise.all()失败的时候返回的是最先被reject的值
Promise.all([p1, p2, p3]).then(result => {
    console.log(result);//fail
}).catch(error => {
    console.log(error);
});

Promise.all可以处理多个异步请求，比如等待多个异步请求结果返回后才执行相应的操作
Promise.all成功结果数组里的数据顺序和接受到的数据顺序是一致的

const wake = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${time / 1000}s后醒来`);
        }, time);
    });
}

let w1 = wake(2000), w2 = wake(3000);
Promise.all([w1, w2]).then(res => {
    console.log(res);//["2s后醒来","3s后醒来"]
}).catch(error => {
    console.log(error);
});

Promise.race()

该方法获取接受的参数中，哪个最先获得结果，就返回该结果，不管是成功还是失败

let p4 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success');
    }, 2000);
});
let p5 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail');
    }, 3000);
});

//接受的数组里哪个结果最先获得，就返回那个结果，无论是成功还是失败
Promise.race([p4, p5]).then(res => {
    console.log(res);//success
}).catch(error => {
    console.log(error);
});

展开全文 >>

执行栈和事件队列，宏任务和微任务

2021-06-13

执行栈和事件队列

js遇到异步代码时不会马上执行，而是会将该异步任务挂起，继续执行执行栈中的同步任务。当异步任务返回结果后，js会将该事件放入到事件队列中。
当执行栈中的所有任务都执行完毕，主线程为空闲状态，主线程会查看事件队列中是否有任务，如果有任务，则取出排在第一个的任务放到执行栈中执行。
js会不断重复主线程从事件队列中拿取任务并执行的这一过程，该过程称为事件循环（Event Loop）

宏任务和微任务

异步任务之间并不相同，其执行优先级也会有区别
异步任务有两类：宏任务和微任务
在一个事件循环中，异步任务返回结果后，该事件会被分配到对应的宏任务队列或微任务队列中去。
当执行栈为空时，主线程会去微任务队列查看是否有微任务存在，如果不存在，主线程会从宏任务队列中取出最前的一个事件放到执行栈中执行，如果存在微任务，则主线程会依次执行微任务队列中的事件，直至微任务队列为空，然后从宏任务中取出最前的一个事件放到执行栈中执行，如此重复

总的来说：当执行栈执行完毕后会立刻先处理微任务队列中的所有微任务，然后再去宏任务队列中取出一个执行。同一次事件循环中，微任务永远在宏任务之前执行

常见的宏任务：

script(整体代码)
setTimeout()
setInterval()
postMessage
I/O
UI交互事件

常见的微任务：

new Promise().then(回调)

展开全文 >>

JS 判断数据类型

2021-05-21

本文简述下判断js数据类型的四种方式

typeof

typeof 返回一个值的类型，对于基本数据类型，除了null都会返回正确的结果（null返回Object）
当用typeof判断引用数据类型时，对于函数会返回Function，其余的会返回Object

instanceof

instanceof 只能用来判断对象，它判断某一个对象是否是某个构造函数的实例
例如：

const obj={};
const arr=[];
console.log(obj instanceof Object);//true
console.log(arr instanceof Array);//true

Object.prototype.toString

toString()是Object的原型方法，调用该方法，默认返回当前对象的 [[Class]]。这是一个内部属性，其格式为[object xxx]，其中xxx就是对象的类型
该方法既可以判断简单数据类型，也可判断引用数据类型

console.log(Object.prototype.toString.call('hello world'));//[object String]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(function () { }));//[object Function]
console.log(Object.prototype.toString.call({}));//[object Object]

使用constructor来判断数据类型

简单数据类型和引用数据类型都可以使用该方法判断

let num = 2;
console.log(num.constructor);//Number
console.log(num.constructor === Number);//true

let arr = [], obj = {}, fn = () => { }
console.log(arr.constructor, obj.constructor, fn.constructor);//Array Object Function

展开全文 >>

简述cookie, session和token

2021-05-15

token

token的引入：
token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，token便应运而生。
token的定义：
token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个token便将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。
使用token的目的：
使用token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

会话（session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是cookie与session。cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份。

由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是cookie的工作原理。

cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该cookie一同提交给服务器。服务器检查该cookie，以此来辨认用户状态。服务器还可以根据需要修改cookie的内容。

session

session是另一种记录客户状态的机制，不同的是cookie保存在客户端浏览器中，而session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是session。客户端浏览器再次访问时只需要从该session中查找该客户的状态就可以了。

如果说cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么session机制就是通过检查服务器上的“客户明细表”来确认客户身份。session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

总结

token：服务端生成并返回给客户端的一串字符串，客户端只需带上token来请求数据，无需再次带上用户名和密码。这样一来服务端就不用频繁查询用户名和密码用于验证，有助于减轻服务端压力
cookie：由服务端发送给客户端，客户端请求时带上cookie，服务端就可以通过cookie来识别客户端身份了
session：存储在服务端，保存的是客户端的状态相关数据

展开全文 >>

ES5和ES6中的继承

2021-05-05

在ES5中是利用构造函数的形式来实现面向对象的，ES6新增了类（class）的概念，是ES5中构造函数形式的语法糖，其本质也是函数
以下分别是ES5和ES6中的继承例子：

ES5中的继承

ES5中的继承有多种方式，这里以组合继承为例

// 父类
function Father(name) {
    this.name = name;
    this.colors = ['red', 'pink', 'purple'];
}
// 父类的函数
Father.prototype.sayName = function () {
    console.log(this.name);
}
Father.prototype.showHobby = function () {
    console.log('my hobby is watching TV');
}

// 子类
function Son(name, age) {
    // 继承父类的name属性
    Father.call(this, name);
    // 定义子类自己的属性age
    this.age = age;
}
// 继承父类的方法
Son.prototype = new Father();
Son.prototype.constructor = Son;
// 定义自己的方法
Son.prototype.sayAge = function () {
    console.log(this.age);
}

ES6中的继承

class Father {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHi() {
        console.log('hello I am ' + this.name);
    }
    say() {
        return '我是父亲';
    }
}


class Son extends Father {
    constructor(name, age, hobby) {
        // super实现继承父类构造函数
        super(name, age);
        // 子类独有的属性hobby，需要单独写
        this.hobby = hobby;
    }
    sayHi() {
        // super调用父类普通函数
        console.log(super.say() + '的儿子');
        console.log('hello, my name is ' + this.name);
    }
}

展开全文 >>

简述JS浅拷贝和深拷贝

2021-05-03

数据类型

基本数据类型
数据直接存储到栈中
引用数据类型
数据的引用存放在栈中，真实的数据存放在堆内存中

浅拷贝和深拷贝

浅拷贝和深拷贝是只针对引用数据类型而言的，基本数据类型无所谓浅拷贝和深拷贝

浅拷贝
当两个引用数据类型浅拷贝时，拷贝的只是引用，改变其中一个数据的值，另一个也会随之改变。两个数据的变化是联动的。
深拷贝
创建另一个一摸一样的对象，新对象和原来的对象不共享内存，两个对象数据的变化不会联动

深拷贝实现

基本思路：
如果是原始数据类型，无需拷贝，直接返回
如果是引用数据类型，创建一个新的对象，遍历需要深拷贝的对象，将该对象的属性进行深拷贝后依次添加到新对象上，返回这个新对象

function deepClone(target) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        for (const key in target) {
            cloneTarget[key] = deepClone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
}

个人觉得对于数组的深拷贝，还可以这样实现：

1
2
3

function deepCloneArray(arr) {
    return arr.map(item => item)
}

附上Github上的30-seconds-of-code仓库中深拷贝的实现：

const deepClone = obj => {
    if (obj === null) return null;
    let clone = Object.assign({}, obj);
    Object.keys(clone).forEach(
        key =>
            (clone[key] =
                typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
    );
    if (Array.isArray(obj)) {
        clone.length = obj.length;
        return Array.from(clone);
    }
    return clone;
};

展开全文 >>

JS 反转数组的几种方法

2021-05-03

let arr = [1, 2, 3, 4, 5];

// 方法1，影响原数组
// console.log(arr.reverse());

// 方法2，不影响原数组
let reverseArr = arr.slice().reverse();
console.log(arr);
console.log(reverseArr);

// 方法3，不影响原数组
let reverseArr2 = [...arr].reverse();
console.log(arr);
console.log(reverseArr2);

// 方法4，不使用reverse实现反转数组
let reverseArr3 = [];
for (let i = arr.length - 1; i >= 0; i--) {
    reverseArr3.push(arr[i]);
}
console.log(arr);
console.log(reverseArr3);

展开全文 >>

简述函数节流和防抖

2021-05-02

为什么需要函数节流和防抖

频繁执行dom操作，资源加载等行为，可能会导致UI卡顿或浏览器崩溃
如果每次执行事件就会触发函数，这样的做法不仅没有意义，还会浪费资源

函数节流

每隔一定的时间才能调用函数，而不是每次触发事件就执行一次，这样会减少资源的浪费
（连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。）

函数防抖

当事件触发完一定时间后，在这个时间间隔内没有事件再次触发，就认为该事件触发完成了，此时可以执行函数
（触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。）

code

节流：

function throttle(fn, delay) {
    let lastTime = 0;
    return function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            fn.apply(this);
            lastTime = Date.now();
        }
    }
}

防抖：

function debounce(fn, delay) {
    let timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this)
        },delay);
    }
}

展开全文 >>