前端笔试面试题总结（四）

1.简述数组的pop，push，shift，unshift的区别？

答案：

1：都是数组对象原型上面的方法，任何数组实例化对象都可以进行调用。
2：都可以对数组本身进行改变
3：pop push 都是对数组的最后一项的处理
pop 删除数组的最后一项，pop => 删除的哪一项
push 在数组的最后一项新增一个内容，push => 新增之后的数组长度
4：shift unshift 都是对数组的第一项的操作
shift 将数组的第一项进行删除操作 shift => 删除的数组项
unshift 数组的第一项插入一个值 unshift => 新增之后的数组的长度

2. 说出以下代码的输出结果，并解释原因

const num = {
  a: 8,
  add(){
    return this.a + 2;
  },
  reduce: () => this.a - 2
}
console.log(num.add());
console.log(num.reduce());

解析：

console.log(num.add()); // - 10
console.log(num.reduce()); // - NaN

• 普通函数里面的this跟创建无关，跟调用有关
• 箭头函数的this指向就是创建这个箭头函数的环境上下文

正确答案：10 ； NaN ；

3. 改造下面的代码，使之输出0-9尽量多的写出解决办法的代码

for(var i=0; i<10; i++){
  setTimeout(() => { 
      console.log(i);  
  },1000)
}

答案：

// - 使用第三参数
for(var i=0; i<10; i++){
  setTimeout((i) => { 
      console.log(i);  
  },1000,i)
}

// - 使用let的形式创建块级作用域
for(let i=0; i<10; i++){
  setTimeout(() => {
    console.log(i);
  },1000)
}

// - 创建一个函数作用域，保留当前循环的变量
for(var i=0; i<10; i++){
  (function(i){
    setTimeout(() => {
       console.log(i);
    },1000)
  })(i)
}

注：
setTimeout()有第三参数，例：setTimeout((a,b,c)=>{ console.log(a,b,c); },1000,'aa','bb','cc');

4. 用代码的形式实现一个sleep函数

答案：

// - 利用回调函数的形式实现
const sleepCb = (time,cb) => setTimeout(cb,time);
sleepCb(2000,() => {
  console.log('time end is running');
})
// - 使用promise对象的形式完成
const sleep = time => new Promise(resolve => setTimeout(resolve,time));
sleep(3000).then(res => {
  console.log('time end is running agin');
})

5. 如何把一个字符串的大小写取反，（大写变小写小写变大写）例如‘AbC’变成‘aBc’

答案：

const str = 'AbC';
const newStr = [].map.call(str, item =>{
  return /[a-z]/.test(item) ? item.toUpperCase() : item.toLowerCase();
}).join('');
console.log(newStr);

解析：
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map()方法按照原始数组元素顺序依次处理元素。
test() 方法用于检测一个字符串是否匹配某个模式.
RegExpObject.test(string)：如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

6. 使用proxy的形式实现一个数据的绑定输出

<input type="text" id="model">
<hr/>
<p id="word"></p>
<script>
  const model=document.getElementById("model");
  const word=document.getElementById("word");
</script>

答案：

<input type="text" id="model">
<hr/>
<p id="word"></p>
<script>
  const model=document.getElementById("model");
  const word=document.getElementById("word");
  const obj = {};
  const newObj = new Proxy(obj,{
      get : function(target,key,receiver){
          console.log('getting');
          return Reflect.get(target,key,receiver);
      }
      set : function(target,key,value,receiver){
          console.log('setting');
          if(key === 'text'){
              model.value = value;
              word.innerHTML = value;
          }
      }
  });
  model.addEventListener("keyup",funnction(e){
    newObj.text = e.target.value();
  });
</script>

解析：

• 1. Proxy基本语法：
     const obj = new Proxy(target, handler);
     参数说明如下：
     target: 被代理对象。
     handler: 是一个对象，声明了代理target的一些操作。
     obj: 是被代理完成之后返回的对象。
     但是当外界每次对obj进行操作时，就会执行handler对象上的一些方法。handler中常用的对象方法如下：
  • (1) get(target, propKey, receiver) ：用于拦截某个属性的读取操作
  • (2) set(target, propKey, value, receiver) ：用来拦截某个属性的赋值操作
  • (3) has(target, propKey) : 判断某个目标对象是否有该属性名
  • (4) construct(target, args) : 用来拦截new命令的
  • (5) apply(target, object, args) ：拦截函数的调用的
    如上是Proxy中handler 对象的方法，其实它和Reflect里面的方法类似的。
• 2.1 Reflect.get(target, name, receiver)
  该方法的含义是：用于拦截某个属性的读取操作。它有三个参数，如下解析：
  target: 目标对象。
  propKey: 目标对象的属性。
  receiver: (可选)，该参数为上下文this对象
• 2.2 Reflect.set(target,name,value,receiver)
  target: 我们需要操作的对象。
  name: 我们需要设置该对象的属性名。
  value: 我们要设置的属性值。
  receiver： 可以理解为上下文this对象。如果我们在设置值的时候遇到setter函数，该参数就指向与setter中上下文this对象。
  该函数会返回一个Boolean的值，代表在目标对象上设置属性是否成功。

[详细讲解参见]：深入理解Proxy 及 使用Proxy实现vue数据双向绑定(cnblogs.com)

7. 给定一个数组，将数组中的元素向右移动k个位置，其中k是非负数。
   输入：[1,2,3,4,5,6,7] 和 k = 3
   输出：[5,6,7,1,2,3,4]
   解释：
   向右移动 1 步：[7,1,2,3,4,5,6]
   向右移动 2 步：[6,7,1,2,3,4,5]
   向右移动 3 步：[5,6,7,1,2,3,4]

答案：

const arr = [1,2,3,4,5,6,7];  // - [5,6,7]  concat  [1,2,3,4]
const k = 5;
const move = function(arr, k){
    return arr.splice(-k % arr.length).concat(arr); // - 为了防止k超过数组长度利用模'%'的形式。
}
console.log(arr,k);

解析：先利用splice()从数组的后面截取k个元素，再利用concat()与截取后的数组拼接成一个数组。

8. 说出下列代码的打印结果

var a=20;
setTimeout(function(){
    var a=30;
},0);
console.log(a);

答案：20

9. 说出windows.alert的弹出结果是（）？

function b(x,y,a){
  arguments[2] = 10;
  alert(a);
}
b(1,2,3);

解析：argument：形参对应的对象。
答案：10

10. 说出下列代码的执行结果？

var authorName="山边小溪";
function doSomething() {
    var blogName="梦想天空";
    function  innerSay(){
        console.log(blogName);
    }
    innerSay();
}
console.log(authorName);
doSomething();
console.log(blogName); 
innerSay();

答案：
前两行打印：
山边小溪
梦想天空
后面报错：blogName is not defined 。全局不能访问函数体内部的变量。