js - 综合常见问题

2018-07-21

js 的一些基础知识，如对 dom 的操作，继承对象等。

1、Js是怎么实现方法的继承的

原型继承
call() 继承

2、涉及到数组的函数都有哪些

concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值

3、复制一个数组的函数

针对性能而言：对于 webkit, 使用 concat(); 其他浏览器, 使用 slice().

slice() let arr = oldArray.slice();
concat() let arr = oldArray.concat();
from() let arr = Array.from(oldArray);
push() let arr = []; Array.prototype.push.apply(arr, oldArray);
loop array

4、用什么方式获取元素

ID（getElementById）
name属性（getElementsByName）
标签名（getElementsByTagName）
类名（getElementsByClassName）
获取html（document.documentElement）
获取body（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

5、apply call bind 有什么区别

假如有以下两个对象，为了要 man 对象也能用到 guy 对象的值，而使用这三种方式。

var man = {
  name: '毛头',
  hit: function(sth, who){
    console.log(this.name + '用' + sth + '打' + who);
  }
};
var guy = {
  name: '灭霸'
};

共同点
1. 都用来改变函数的 this 对象的指向。
2. 第一个参数都是 this 要指向的对象。
3. 都可以利用后续参数传参。
不同点
- man.hit.call(guy, '响指', '你'); 后面参数个数与 hit 方法的参数个数一致。
- man.hit.apply(guy, ['响指', '你']); 后面参数为一个数组，数组里的元素个数与 hit 方法的参数个数一致。
- man.hit.bind(guy)('响指', '你'); 或者 man.hit.bind(guy, '面条', '你')(); 因为bind()返回的是一个函数，所以还要再用()调用一次

6、var fn = function(){} 和 function fn(){} 有什么区别

前者是定义了一个函数，只有在调用的时候才会初始化，而且在定义后调用该函数才是正常的，否则会出错。
后者定义完成的同时也初始化了函数，在同一作用域内任一位置调用该函数都是可用的。
通常建议使用第一种定义方式，提高代码可读性：先定义后使用。

7、写一个函数，把一个数组随机排序

function randomSort(arr, newArr) {
  // 如果原数组 arr 只有一个值，只要取第一个值返回即可
  if(arr.length === 1) {
    newArr.push(arr[0]);
    return newArr;
  }
  // 随机生成一个下标，下标值在 arr 长度范围内，并把该随机下标对应 arr 数组的值复制到 newArr 中
  var random = Math.ceil(Math.random() * arr.length) - 1;
  newArr.push(arr[random]);
  // 删除原数组 arr 的对应数组项
  arr.splice(random, 1);
  return randomSort(arr, newArr);
}

8、怎么取整数，都有哪些参数

parseInt(string, radix) 第一个参数是字符串，第二个参数是代表进制数（可选）

9、0.1+0.2 等于多少

0.30000000000000004 因为小数以二进制形式表示时是有有穷性的

10、箭头函数有什么好处

代码更加简洁
不会绑定 this

11、什么是冒泡事件

由内到外进行事件传播，直到根节点，e.stopPropagation(); 停止冒泡
捕获，在事件捕获阶段就会触发，从根节点开始从外到内传播

12、排序都有哪些

冒泡排序、快速排序、选择排序、希尔排序、堆排序、插入排序、归并排序、计数排序、桶排序、基数排序

13、如何获取 url 地址栏的每个信息

location.host(hostname、href、pathname、protocol、search)

14、原型链是什么

假如有一个对象是 people，创建了该对象的一个实例 man，那么 man 的原型（_proto_）是 people.prototype，而 people.prototype 的原型是 Object。
每个对象都包含实例成员和原型成员。判断该实例中是否有 name 这个成员，使用 hasOwnProperty(‘name’) ，只追溯到实例；使用 ‘name’ in man ，追溯到实例或原型

15、对某个属性名无序的对象进行有序读取

实现思路：先用 Object.keys(obj) 获取对象的所有属性名，然后对属性名进行排序存放到某个数组中，最后对此数组遍历数组元素对应的 obj 的属性值

16、字符串转json怎么转

eval()
JSON.parse()

17、let跟var的区别

let 作用于块级作用域
var 作用于函数作用域

18、面向对象、闭包、模块化、组件化的概念

面向对象：封装、继承、多态
闭包：能够读取其他函数内部的变量的函数
模块化：解耦。把内容分为几个大模块
组件化：复用小功能

19、如何封装一个组件。比如如果要做一个下拉框的组件，有单选，多选，搜索功能，怎样写可拓展性高，可复用性高

20、es6的新特性(常用)

let、const 的使用
箭头函数 () => {}
解构 var [x,y] = [1, 2]; // x = 1; y = 2
字符串内用变量 \${n}\
函数参数默认值 function test(name='灭霸'){}
模块 export

| 阅读量()