例题集锦

1.分别用es5,es6输出0-9

  //es5
        var funcs = [];
        for(var i=0;i<10;i++){
            funcs.push((function(i){
               return function() {
                console.log(i);
               }
                
            }(i)))
        }
        //es6
        for(let i=0; i<10; i++){
            funcs.push(function(){
                console.log(i);
            })
        }
        funcs.forEach(function(func){
            func()
        })

 2.获取url地址参数值 已键值对方式存入json

 var url="http://vip.qq.com/a.php?a=1&b=3&c=4&d=5"//定义参数可以是无限的
            var arr=url.split("?")[1];           //根据？跟个url
            var arr2=arr[1].split("&");         //根据&重新分割参数
            var jsonarr={};                    //定义一个json对象放置url  参数
            for(var i=0;i<arr2.length;i++){   //循环将参数放到json里面
              jsonarr[arr2[i].substring(0,1)]=arr2[i].substring(2,3);
            }
 

 3.说出以下函数的作用是？空白区域应该填写什么？

// define  
(function (window) {  
    function fn(str) {  
        this.str = str;  
    }  
    fn.prototype.format = function () {  
        var arg = ______;  
        return this.str.replace(_______, function (a, b) {  
            return arg[b] || '';  
        });  
    }  
    window.fn = fn;  
})(window);  
// use  
(function(){  
    var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
    console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') );  
})();

var arg=Array.prototype.slice.call(arguments,0);

return this.str.replace(/{(d+)}/g, function (a, b) {  
    return arg[b] || '';  
});

 4.Promise相关的面试题

1.

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
});
promise.then(() => {
    console.log(3);
});
console.log(4);
　　输出结果为：1，2，4，3。

　　解题思路：then方法是异步执行的。

2.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
    reject('error')
  }, 1000)
})
promise.then((res)=>{
  console.log(res)
},(err)=>{
  console.log(err)
})
　　输出结果：success

　　解题思路：Promise状态一旦改变，无法在发生变更。

3.

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
　　输出结果：1

　　解题思路：Promise的then方法的参数期望是函数，传入非函数则会发生值穿透。

4.

setTimeout(()=>{
  console.log('setTimeout')
})
let p1 = new Promise((resolve)=>{
  console.log('Promise1')
  resolve('Promise2')
})
p1.then((res)=>{
  console.log(res)
})
console.log(1)
　　输出结果：

　　　　Promise1
　　　　1
　　　　Promise2
　　　　setTimeout

　　解题思路：这个牵扯到js的执行队列问题，整个script代码，放在了macrotask queue中，执行到setTimeout时会新建一个macrotask queue。但是，promise.then放到了另一个任务队列microtask queue中。script的执行引擎会取1个macrotask queue中的task，执行之。然后把所有microtask queue顺序执行完，再取setTimeout所在的macrotask queue按顺序开始执行。（具体参考https://www.zhihu.com/question/36972010）

 5.
Promise.resolve(1)
    .then((res) => {
        console.log(res);
        return 2;
    })
    .catch((err) => {
        return 3;
    })
    .then((res) => {
        console.log(res);
    });
　　输出结果：1  2

　　解题思路：Promise首先resolve(1)，接着就会执行then函数，因此会输出1，然后在函数中返回2。因为是resolve函数，因此后面的catch函数不会执行，而是直接执行第二个then函数，因此会输出2。

6.

const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('开始');
resolve('success');
}, 5000);
});
 
const start = Date.now();
promise.then((res) => {
console.log(res, Date.now() - start);
});
 
promise.then((res) => {
console.log(res, Date.now() - start);
});
　　输出结果：

　　　　开始

　　　　success 5002

　　　　success 5002

　　解题思路：promise 的.then或者.catch可以被调用多次，但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用.then 或者.catch都会直接拿到该值。

7.

let p1 = new Promise((resolve,reject)=>{
  let num = 6
  if(num<5){
    console.log('resolve1')
    resolve(num)
  }else{
    console.log('reject1')
    reject(num)
  }
})
p1.then((res)=>{
  console.log('resolve2')
  console.log(res)
},(rej)=>{
  console.log('reject2')
  let p2 = new Promise((resolve,reject)=>{
    if(rej*2>10){
      console.log('resolve3')
      resolve(rej*2)
    }else{
      console.log('reject3')
      reject(rej*2)
    }
  })
　　return p2
}).then((res)=>{
  console.log('resolve4')
  console.log(res)
},(rej)=>{
  console.log('reject4')
  console.log(rej)
})
　　输出结果：

　　　　reject1
　　　　reject2
　　　　resolve3
　　　　resolve4
　　　　12

　　解题思路：我们上面说了Promise的先进之处在于可以在then方法中继续写Promise对象并返回。

8.重头戏！！！！实现一个简单的Promise
function Promise(fn){
  var status = 'pending'
  function successNotify(){
      status = 'fulfilled'//状态变为fulfilled
      toDoThen.apply(undefined, arguments)//执行回调
  }
  function failNotify(){
      status = 'rejected'//状态变为rejected
      toDoThen.apply(undefined, arguments)//执行回调
  }
  function toDoThen(){
      setTimeout(()=>{ // 保证回调是异步执行的
          if(status === 'fulfilled'){
              for(let i =0; i< successArray.length;i ++)    {
                  successArray[i].apply(undefined, arguments)//执行then里面的回掉函数
              }
          }else if(status === 'rejected'){
              for(let i =0; i< failArray.length;i ++)    {
                  failArray[i].apply(undefined, arguments)//执行then里面的回掉函数
              }
          }
      })
  }
  var successArray = []
  var failArray = []
  fn.call(undefined, successNotify, failNotify)
  return {
      then: function(successFn, failFn){
          successArray.push(successFn)
          failArray.push(failFn)
          return undefined // 此处应该返回一个Promise
      }
  }
}

 5.js数组排序,去重

1.数组排序
  1)  var ary = [1, 3, 5, 7, 9, 2, 4, 6, 8, 0];
        console.log(ary.sort(fn));
        function fn(a, b) {
            return b - a;  //降序
        }
2)var arr = [1,2,3,4,5];  // 数组存储的数据
        for (var i = 0; i < arr.length - 1; i++) {  // 比较的次数
            for (var j = 0; j < arr.length - 1 - i; j++) { // 前后交换的次数
                if (arr[j] < arr[j + 1]) {  // 判断大小
                    var temp = arr[j];  // 若判断的结果为真，则交换两个变量，若为假，直接进行下次比较
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
2.数组去重
1)遍历数组法
var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
     }
  }
  return hash;
}
2)优化遍历数组法（推荐）
function unique4(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
    for (var j = i+1; j < arr.length; j++) {
      if(arr[i]===arr[j]){
        ++i;
      }
    }
      hash.push(arr[i]);
  }
  return hash;
}
3) function unique5(arr){
  var x = new Set(arr);
 return [...x];
}
3.数组重复值最多
// 不用reduce时： 
    var arr = ["apple","orange","apple","orange","pear","orange"]; 
    function getWordCnt(){ 
        var obj = {}; 
        for(var i= 0, l = arr.length; i< l; i++){ 
            var item = arr[i]; 
            obj[item] = (obj[item] +1 ) || 1; 
        } 
        return obj; 
    }
    console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
    // 用reduce时： 
    var arr = ["apple","orange","apple","orange","pear","orange"]; 
    function getWordCnt(){ 
        return arr.reduce(function(prev,next){ 
            prev[next] = (prev[next] + 1) || 1; 
            return prev; 
        },{}); 
    } 
    console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
2)es6
let ary = ['赵', '钱', '孙', '孙', '李', '周', '李', '周', '李'];

ary.forEach(k => !d[k] ? d[k] = 1 : d[k]++);

const max = Object.keys(d).sort((a, b) => d[b] - d[a])[0];

console.log(max)