阿里前端面试题整理

1.restful协议规范

2.border 线： 

border-style:dotted solid double dashed; 

 

• 上边框是点状
• 右边框是实线
• 下边框是双线
• 左边框是虚线

3.怎么判断两个对象相等？

obj={ a:1, b:2}obj2={ a:1, b:2}obj3={ a:1, b:2}

思路：转换成字符串比较

JSON.stringify(obj)==JSON.stringify(obj2);//true

JSON.stringify(obj)==JSON.stringify(obj3);//false

4.项目做过哪些内存优化

 

• 减少 HTTP 请求数
• 减少 DNS 查询
• 使用 CDN
• 避免重定向
• 图片懒加载
• 减少 DOM 元素数量
• 减少 DOM 操作
• 使用外部 JavaScript 和 CSS
• 压缩 JavaScript 、 CSS 、字体、图片等
• 优化 CSS Sprite
• 使用 iconfont
• 字体裁剪
• 多域名分发划分内容到不同域名
• 尽量减少 iframe 使用
• 避免图片 src 为空
• 把样式表放在 中
• 把脚本放在页面底部
  欢迎补充。。。

5.vue router 除了router-link 怎么实现跳转？

router.go(1)router.push('/')

6.vue router 跳转和location.href 的区别？

router 监听hash值变化

location.href 页面跳转。刷新页面。

7.vue实现双向绑定实现原理？

通过 Object.defineProperty 实现的

8.require和import 的区别

require 运行时加载，JavaScript 引擎静态分析先于模块加载。import（）函数动态加载

9.哪些是稳定排序？哪些是不稳定排序？

定义:
假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变，即在原序列中，r[i]=r[j]，且r[i]在r[j]之前，而在排序后的序列中，r[i]仍在r[j]之前，则称这种排序算法是稳定的；否则称为不稳定的

稳定排序：
插入排序 [1]  ，冒泡排序 [2]  ，归并排序 [3]  ，基数排序 [4]  ，计数排序 [5] 

不稳定排序：
快速排序 [1]，简单选择排序 [2]，希尔排序 [3]，堆排序 [4]

10.typeof obj === 'object'判断obj是对象的弊端？如何改进？

var  obj = {};
var  arr = [];
var funcInstance = new (function (){});  
var isNull = null;

console.log(typeof obj === 'object');  //true
console.log(typeof arr === 'object');  //true
console.log(typeof funcInstance == 'object');  //true
console.log(typeof isNull === 'object');    // true

// constructor
({}).constructor === Object;  //true
([]).constructor === Array;  //true

// instanceof
({}) instanceof Object;  //true
([]) instanceof Array;   //true

// toString: 将当前对象以字符串的形式返回
console.log(Object.prototype.toString.call(obj));  //[object Object]
console.log(Object.prototype.toString.call(arr));  //[object Array]
console.log(Object.prototype.toString.call(null));  //[object Null]

11. 补充题 下面会输出什么

var a = {};
var b = {name:"ZS"};
var c = {};
c[a] = "demo1";
c[b] = "demo2";
console.log(c[a]); // demo2
console.log(c); // Object {[object Object]: "demo2"}
c[a]、c[b]隐式的将对象a，b使用了toString（）方法进行了转换，然后再对属性赋值。
即：Object.prototype.toString.call(a) ==> [object Object] 
因此，c = { [object Object]: 'demo1'} ==> c = {[object Object]: 'demo2' }

12. 实现log函数

function log() {
    // var arr = [].slice.call(arguments);
    var arr = Array.from(arguments);
    var res = '';
    arr.forEach(elem => {
        res += elem + ' ';
    });
    console.log(`${res}`);
}

// 测试
log('hello', 'world');
log('hello world');

13.浅拷贝和深拷贝的区别？如何实现？

• 浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存
• 深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变

  // 1. Object.assign
  
  let foo = {
      a: 1,
      b: 2,
      c: {
          d: 1,
      }
  }
  let bar = {};
  Object.assign(bar, foo);
  foo.a++;
  foo.a === 2 //true
  bar.a === 1 //true
  foo.c.d++;
  foo.c.d === 2 //true
  bar.c.d === 1 //false
  bar.c.d === 2 //true
  
  Object.assign()是一种可以对非嵌套对象进行深拷贝的方法;
  如果对象中出现嵌套情况，那么其对被嵌套对象的行为就成了普通的浅拷贝。
  
  
  // 2. JSON.parse和JSON.stringify
  
  var obj1 = { body: { a: 10 } };
  var obj2 = JSON.parse(JSON.stringify(obj1));
  obj2.body.a = 20;
  console.log(obj1);   // { body: { a: 10 } } 
  console.log(obj2);   // { body: { a: 20 } }
  console.log(obj1 === obj2);   // false
  console.log(obj1.body === obj2.body);   // false
  
  用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。
  但是，会破坏原型链，并且无法拷贝属性值为function的属性
  
  
  // 3. 递归
  
  var json1={
      "name":"shauna",
      "age":18,
      "arr1":[1,2,3,4,5],
      "string":'got7',
      "arr2":[1,2,3,4,5],
      "arr3":[{"name1":"shauna"},{"job":"web"}]
  };
  var json2={};
  
  function copy(obj1,obj2){
    var obj2 = obj2 || {};
    for(var name in obj1){
      if(typeof obj1[name] === "object"){ 
        obj2[name]= (obj1[name].constructor===Array)?[]:{}; 
        copy(obj1[name],obj2[name]); 
      }else{
        obj2[name]=obj1[name];  
      }
    }
    return obj2;
  }
  
  json2=copy(json1,json2)
  json1.arr1.push(6);
  alert(json1.arr1);  //123456
  alert(json2.arr1);  //12345