例题集锦

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

 1   //es5
 2         var funcs = [];
 3         for(var i=0;i<10;i++){
 4             funcs.push((function(i){
 5                return function() {
 6                 console.log(i);
 7                }
 8                 
 9             }(i)))
10         }
11         //es6
12         for(let i=0; i<10; i++){
13             funcs.push(function(){
14                 console.log(i);
15             })
16         }
17         funcs.forEach(function(func){
18             func()
19         })

View Code

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

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

View Code

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

 1 // define  
 2 (function (window) {  
 3     function fn(str) {  
 4         this.str = str;  
 5     }  
 6     fn.prototype.format = function () {  
 7         var arg = ______;  
 8         return this.str.replace(_______, function (a, b) {  
 9             return arg[b] || '';  
10         });  
11     }  
12     window.fn = fn;  
13 })(window);  
14 // use  
15 (function(){  
16     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
17     console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') );  
18 })();
19 
20 var arg=Array.prototype.slice.call(arguments,0);
21 
22 return this.str.replace(/{(d+)}/g, function (a, b) {  
23     return arg[b] || '';  
24 });

View Code

4.Promise相关的面试题

  1 1.
  2 
  3 const promise = new Promise((resolve, reject) => {
  4     console.log(1);
  5     resolve();
  6     console.log(2);
  7 });
  8 promise.then(() => {
  9     console.log(3);
 10 });
 11 console.log(4);
 12 　　输出结果为：1，2，4，3。
 13 
 14 　　解题思路：then方法是异步执行的。
 15 
 16 2.
 17 
 18 const promise = new Promise((resolve, reject) => {
 19   setTimeout(() => {
 20     resolve('success')
 21     reject('error')
 22   }, 1000)
 23 })
 24 promise.then((res)=>{
 25   console.log(res)
 26 },(err)=>{
 27   console.log(err)
 28 })
 29 　　输出结果：success
 30 
 31 　　解题思路：Promise状态一旦改变，无法在发生变更。
 32 
 33 3.
 34 
 35 Promise.resolve(1)
 36   .then(2)
 37   .then(Promise.resolve(3))
 38   .then(console.log)
 39 　　输出结果：1
 40 
 41 　　解题思路：Promise的then方法的参数期望是函数，传入非函数则会发生值穿透。
 42 
 43 4.
 44 
 45 setTimeout(()=>{
 46   console.log('setTimeout')
 47 })
 48 let p1 = new Promise((resolve)=>{
 49   console.log('Promise1')
 50   resolve('Promise2')
 51 })
 52 p1.then((res)=>{
 53   console.log(res)
 54 })
 55 console.log(1)
 56 　　输出结果：
 57 
 58 　　　　Promise1
 59 　　　　1
 60 　　　　Promise2
 61 　　　　setTimeout
 62 
 63 　　解题思路：这个牵扯到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）
 64 
 65  5.
 66 Promise.resolve(1)
 67     .then((res) => {
 68         console.log(res);
 69         return 2;
 70     })
 71     .catch((err) => {
 72         return 3;
 73     })
 74     .then((res) => {
 75         console.log(res);
 76     });
 77 　　输出结果：1  2
 78 
 79 　　解题思路：Promise首先resolve(1)，接着就会执行then函数，因此会输出1，然后在函数中返回2。因为是resolve函数，因此后面的catch函数不会执行，而是直接执行第二个then函数，因此会输出2。
 80 
 81 6.
 82 
 83 const promise = new Promise((resolve, reject) => {
 84 setTimeout(() => {
 85 console.log('开始');
 86 resolve('success');
 87 }, 5000);
 88 });
 89  
 90 const start = Date.now();
 91 promise.then((res) => {
 92 console.log(res, Date.now() - start);
 93 });
 94  
 95 promise.then((res) => {
 96 console.log(res, Date.now() - start);
 97 });
 98 　　输出结果：
 99 
100 　　　　开始
101 
102 　　　　success 5002
103 
104 　　　　success 5002
105 
106 　　解题思路：promise 的.then或者.catch可以被调用多次，但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用.then 或者.catch都会直接拿到该值。
107 
108 7.
109 
110 let p1 = new Promise((resolve,reject)=>{
111   let num = 6
112   if(num<5){
113     console.log('resolve1')
114     resolve(num)
115   }else{
116     console.log('reject1')
117     reject(num)
118   }
119 })
120 p1.then((res)=>{
121   console.log('resolve2')
122   console.log(res)
123 },(rej)=>{
124   console.log('reject2')
125   let p2 = new Promise((resolve,reject)=>{
126     if(rej*2>10){
127       console.log('resolve3')
128       resolve(rej*2)
129     }else{
130       console.log('reject3')
131       reject(rej*2)
132     }
133   })
134 　　return p2
135 }).then((res)=>{
136   console.log('resolve4')
137   console.log(res)
138 },(rej)=>{
139   console.log('reject4')
140   console.log(rej)
141 })
142 　　输出结果：
143 
144 　　　　reject1
145 　　　　reject2
146 　　　　resolve3
147 　　　　resolve4
148 　　　　12
149 
150 　　解题思路：我们上面说了Promise的先进之处在于可以在then方法中继续写Promise对象并返回。
151 
152 8.重头戏！！！！实现一个简单的Promise
153 function Promise(fn){
154   var status = 'pending'
155   function successNotify(){
156       status = 'fulfilled'//状态变为fulfilled
157       toDoThen.apply(undefined, arguments)//执行回调
158   }
159   function failNotify(){
160       status = 'rejected'//状态变为rejected
161       toDoThen.apply(undefined, arguments)//执行回调
162   }
163   function toDoThen(){
164       setTimeout(()=>{ // 保证回调是异步执行的
165           if(status === 'fulfilled'){
166               for(let i =0; i< successArray.length;i ++)    {
167                   successArray[i].apply(undefined, arguments)//执行then里面的回掉函数
168               }
169           }else if(status === 'rejected'){
170               for(let i =0; i< failArray.length;i ++)    {
171                   failArray[i].apply(undefined, arguments)//执行then里面的回掉函数
172               }
173           }
174       })
175   }
176   var successArray = []
177   var failArray = []
178   fn.call(undefined, successNotify, failNotify)
179   return {
180       then: function(successFn, failFn){
181           successArray.push(successFn)
182           failArray.push(failFn)
183           return undefined // 此处应该返回一个Promise
184       }
185   }
186 }

View Code

5.js数组排序,去重

 1 1.数组排序
 2   1)  var ary = [1, 3, 5, 7, 9, 2, 4, 6, 8, 0];
 3         console.log(ary.sort(fn));
 4         function fn(a, b) {
 5             return b - a;  //降序
 6         }
 7 2)var arr = [1,2,3,4,5];  // 数组存储的数据
 8         for (var i = 0; i < arr.length - 1; i++) {  // 比较的次数
 9             for (var j = 0; j < arr.length - 1 - i; j++) { // 前后交换的次数
10                 if (arr[j] < arr[j + 1]) {  // 判断大小
11                     var temp = arr[j];  // 若判断的结果为真，则交换两个变量，若为假，直接进行下次比较
12                     arr[j] = arr[j + 1];
13                     arr[j + 1] = temp;
14                 }
15             }
16         }
17 2.数组去重
18 1)遍历数组法
19 var arr=[2,8,5,0,5,2,6,7,2];
20 function unique1(arr){
21   var hash=[];
22   for (var i = 0; i < arr.length; i++) {
23      if(hash.indexOf(arr[i])==-1){
24       hash.push(arr[i]);
25      }
26   }
27   return hash;
28 }
29 2)优化遍历数组法（推荐）
30 function unique4(arr){
31   var hash=[];
32   for (var i = 0; i < arr.length; i++) {
33     for (var j = i+1; j < arr.length; j++) {
34       if(arr[i]===arr[j]){
35         ++i;
36       }
37     }
38       hash.push(arr[i]);
39   }
40   return hash;
41 }
42 3) function unique5(arr){
43   var x = new Set(arr);
44  return [...x];
45 }
46 3.数组重复值最多
47 // 不用reduce时： 
48     var arr = ["apple","orange","apple","orange","pear","orange"]; 
49     function getWordCnt(){ 
50         var obj = {}; 
51         for(var i= 0, l = arr.length; i< l; i++){ 
52             var item = arr[i]; 
53             obj[item] = (obj[item] +1 ) || 1; 
54         } 
55         return obj; 
56     }
57     console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
58     // 用reduce时： 
59     var arr = ["apple","orange","apple","orange","pear","orange"]; 
60     function getWordCnt(){ 
61         return arr.reduce(function(prev,next){ 
62             prev[next] = (prev[next] + 1) || 1; 
63             return prev; 
64         },{}); 
65     } 
66     console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
67 2)es6
68 let ary = ['赵', '钱', '孙', '孙', '李', '周', '李', '周', '李'];
69 
70 ary.forEach(k => !d[k] ? d[k] = 1 : d[k]++);
71 
72 const max = Object.keys(d).sort((a, b) => d[b] - d[a])[0];
73 
74 console.log(max)

View Code

例题集锦

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

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

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

5.js数组排序,去重

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