2018-02-12

3.1 这里有一个 url https://baijiahao.baidu.com/s?id=1583617694892288463&wfr=spider&for=pc 写一个函数 获取 query 的参数和值存放在一个对象中。

function getQuery(url){
    let query = { }
    let i = url.indexOf('?')+1
    let l = url.slice(i,url.length).split('&')
    l.forEach((val,index)=>{
        var arr = val.split('=')
        query[arr[0]] = arr[1]
    })
    return query
}
var url = 'https://baijiahao.baidu.com/s?id=1583617694892288463&wfr=spider&for=pc'
getQuery(url)

引用，浅拷贝，深拷贝

深拷贝
JSON.parse(JSON.stringify(obj))
或各个层级浅拷贝
浅拷贝
开辟新的存储空间，如Object.assign，slice，concat等等他们只深拷贝顶层的数组或对象，所以我觉得他们应该叫浅拷贝。
引用
直接赋值

快速排序

好久没写= =

function QuickSort(arr){
    var leftArr = []
    var rightArr = []
    if(arr.length >= 1){
        for(var i = 1 ; i < arr.length ; i++){
            if(arr[i]<=arr[0]){
                leftArr.push(arr[i])
            }else{
                rightArr.push(arr[i])
            }
        }
    }else{
        return arr
    }
    return [].concat(QuickSort(leftArr),arr[0],QuickSort(rightArr))
}
QuickSort([3,2,1,8,9,84,5,16,5])

Promise

promise.png
结果是4,3,2,1
解析一下，每次new一个新的Promise对象，传入的函数都立即执行，进入函数后调用了resolve(1)，但是resolve的promise是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务（这也是为什么调用resolve、reject不会终结Promise的原因），所以再往下，设置的Promise.resolve().then(()=>console.log(2))相当于

new Promise(resolve=>resolve()).then(()=>console.log(2))

同理也是立即执行，resolve()执行，但是then方法将在当前脚本所有的同步任务执行完才会执行，所以此时输出2的then进入事件队列，单线程的js还是需要执行剩下的同步代码，然后下一行执行console.log(4)，此时resolve(1)的事件循环结束，输出1的then进入事件队列，再然后，继续执行当前脚本同步任务，输出3，然后根据事件队列先进先出的原则，2先进，输出2，最后输出1.
知识点如下

1，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

2，调用resolve或reject并不会终结 Promise 的参数函数的执行。

3，resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

4， 任务队列优先级：promise.Trick()>promise的回调>setTimeout>setImmediate

// 能知道下面代码答案上面的你就懂了[滑稽]
var promise = new Promise(resolve=>{
    console.log(3)
    setTimeout(()=>{
        console.log(4)
        resolve(1)
    },0)
}).then(t=>{
    console.log(t)
})  
console.log(2)
setTimeout(()=>{
    console.log(5)
},0)

类数组对象

JavaScript 类数组对象的定义：

可以通过索引访问元素，并且拥有 length 属性；
没有数组的其他方法，例如 push ， forEach ， indexOf 等。

var obj = {0:'asd',1:'zxc',length:2}
Array.prototype.map.call(obj,function(val){
    console.log(val)
    return val
})
Array.from(obj)
> asd
> zxc
> (2) ["asd", "zxc"]

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

多个异步操作顺序执行

function test2(arr){
    arr.reduce((First,Second)=>{
        return First.then(()=>{
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log(Second)
                    resolve()
                },(6-Second)*1000)
            })
        })
    },Promise.resolve())
}
var arr = [1,2,3,4,5,6]
test2(arr)

改写成async await模式

async function test3(){
        // 用forEach和map会报错，会创建多个async函数，异步操作无法顺序执行
    for(var val of arr){
          await new Promise((resolve,reject)=>{
              setTimeout(()=>{
                      console.log(val)
                      resolve()
                  },(6-val)*1000)
          })
    } 
}
var arr = [1,2,3,4,5,6]
test3(arr)

async/await 和 Promise

async function async1() {
    console.log("a");
    await  async2(); //执行这一句后，await会让出当前线程，继续执行函数后面的同步代码,再将后面的代码加到任务队列中
    console.log("b");

}
async function async2() {
   console.log( 'c');
}
console.log("d");
setTimeout(function () {
    console.log("e");
},0);
async1();
new Promise(function (resolve) {
    console.log("f");
    resolve();
}).then(function () {
    console.log("g");
});
console.log('h');
// d a c f h g b e