前端常见面试题

获得多维数组中某个元素出现的次数

Q：获得下面数组中某元素出现的次数（例：1）

1	const arr = [1, [1, 2], [1, 2, 3, [1, 2]]]

A： Array.prototype.toString()

const getItemLength = (arr, item) => {
  return arr.toString().split(',').filter(i => i == item).length
}

console.log(getItemLength(arr, 1))

A：递归

const flattenedArray = []

const getFlattenedArray = item => {
  if (!Array.isArray(item)) {
     flattenedArray.push(item)
  } else {
    item.forEach(i => {
      getFlattenedArray(i)
    })
  }
}

getFlattenedArray(arr)

console.log(flattenedArray.filter(item => item == 1).length)

Array.prototype.toString() 方法工作原理：

For Array objects, the toString method joins the array and returns one string containing each array element separated by commas.

实时显示当时时间

(function getDate(){
	var date = new Date(),
	DateObj = {
		getTime: function(){
			var year = date.getFullYear(),
				month = (date.getMonth())+1, //月份从0开始
				day = date.getDate(),
				hour = this.addZero(date.getHours()),
			    min = this.addZero(date.getMinutes()),
				sec = this.addZero(date.getSeconds());

			alert(year+'年'+month+'月'+day+'日 '+hour+':'+min+':'+sec);
		},
		addZero: function(number) { //时分秒个位数补0
			return (number < 10 ? '0' : '') + number;
		}
	}

	DateObj.getTime();
})();

alert 中内容换行

1	alert('123\n456');

请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

Q：编写方法 parseQueryString，把下面的 url 参数解析成对象

1	const url = 'http://www.taobao.com?item=10&key=12&productId=88'

A：for / forEach 循环

const parseQueryString = url => {
  const urlObj = {}
  const paramsUrl = url.split('?')[1]
  const keyValuePair = paramsUrl.split('&')

  // for loop
  for (let i = 0; i < keyValuePair.length; i++) {
    const key = keyValuePair[i].split('=')[0]
    const val = keyValuePair[i].split('=')[1]
    urlObj[key] = val
  }

  // forEach
  keyValuePair.forEach(pair => {
    const key = pair.split('=')[0]
    const value = pair.split('=')[1]
    urlObj[key] = value
  })

  return urlObj
}

console.log(parseQueryString(url))

A：Array.prototype.reduce

const parseQueryString = url => {
  const queryString = url.split('?')[1]
  const keyValuePair = queryString.split('&')
  return keyValuePair.reduce((acc, pair) => {
    const key = pair.split('=')[0]
    const value = pair.split('=')[1]
    acc[key] = value
    return acc
  }, {})
}

console.log(parseQueryString(url))

get 和 post 请求的本质区别

GET 请求

参数都是体现在 url 上
主要用于取（查询）数据
url 有最大长度限制
便于浏览器缓存 ok to cache
不应该去改变服务端的数据

POST 请求

参数通过 body 传递
用于更新数据
没有长度限制
不能做缓存 not ok to cache
可以用作修改服务端数据

html5 有哪些新特性

1.canvas

2.data- 属性
使用data-可以解决自定义属性混乱无管理的现状

1	<div id="box" data-age="23"></div>

var b = document.getElementById('box');
console.log(b.dataset.age);

//jQuery
$('#box').data('age');

3.localStorage，sessionStorage

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

localStorage 和 sessionStorage 的区别：

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

localStorage 和 cookie 的区别：

cookie 需要指定作用域，不可以跨域调用
cookie 有时间限制，localStorage 是永久的

localStorage 用法

localStorage.setItem('name', 'xwill');
localStorage.getItem('name');  //xwill
localStorage.removeItem('name'); 
localStorage.clear();  //清除所有

//注意 localStorage 还可以 dot 方式使用 localStorage.name = 'xwill'，但 key，value 形式显然更容易维护。

4.表单属性
html5 增加了 placeholder 属性，另外 input 的 type 增加了：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。

5….

函数声明和函数表达式的区别

怎么记呢？有＝就是表达式～
函数声明：

1
2
3

function say(word){
	console.log(word);
}

函数表达式：

1
2
3

var say = function(word){
	console.log(word);
}

区别：
函数声明定义的函数可在定义前和后同时调用，而函数表达式定义的函数只能在定义代码下方调用。

哪种定义方式好？
函数声明，可参考 airbnb 的 javascript style guide

jsonp 跨域的原理和实现

jsonp的核心则是动态添加 script 标签来调用服务器提供的js脚本。

jsonp跨域的原理和实现