前端面试之路二(javaScript基础整理)

需要等待，因为js是单线程语言

题目

获取2017-06-10格式的日期
获取随机数，要求是长度一直的字符串格式
写一个能遍历对象和数组的通用forEach函数

Date.now() //获取当前时间毫秒数
  
var dt = new Date()
dt.getTime()          //获取毫秒数
dt.getFullYear()      //年
dt.getMonth()        //月(0-11)
dt.getDate()        //日(0-31)
dt.getHours()        //小时(0-23)
dt.getMinutes()        //分钟(0-59)
dt.getSeconds()        //秒(0-59)

Math.random()：可以用来清除缓存

forEach 遍历所有数据

every 判断所有元素是否都符合条件

some 判断是否有至少一个元素符合条件

sort 排序

map 对元素重新组装，生成新数组>- 过滤符合条件的元素

array.forEach

arr.forEach( function(item,index){ 
    console.log(index,item); 
});

array.every

var arr = [1,2,3,4,5];
var result = arr.every(function(index,item){
//用来判断所有的数组元素，都满足一个条件 
    if(item<6) 
        return true
});
    console.log(result);

array.some

var result = arr.some(function(index,item){ 
    if(item<5) 
        return true;
}); 
console.log(result);

arry.sort

var arr2 = arr.sort(function(a,b){ 
    //从小到大排序 return a-b; 
    //从大到小排序 
    //return b-a;
})

array.map

arr.map(function(item,index){
    return "
"+index+":"+item+"
"
})

array.filter

var arr2 = arr.filter(function (item,index){ 
    //通过某一个条件过滤数组 
    if(item >= 2) 
        return true
})

var obj = {
    x:100,
    y:200,
    z:300
}

var key

for(key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(key,obj[key])
    }
}

function formatDate(dt){
    if(!dt){
        dt = new Date()
    }

    var year  = dt.getFullYear()
    var month = dt.getMonth() + 1
    var date  = dt.getDate()

    if(month < 10){
        //强制类型转换
        month = "0" + month 
    }

    if(date < 10){
        //强制类型转换
        date = "0" + date
    }
    //强制类型转换
    return year + "-" + month + "-" + date
}

var dt = new Date()
var formatDate = formatDate(dt)
console.log(formatDate)

var random = Math.random() + "0000000000";
var random = random.slice(0,10);

function forEach(obj,fn){
    var key
    if(obj instanceof Array){
        //准备判断是不是数组
        obj.forEach(function(item,index){
            fn(index,item)
        })
    }else{
        //不是数组就是对象
        for(key in obj){
            fn(key,obj[k])
        }
    }
}

知识点：

js基础知识：ECMA262标准
JS-Web-API：W3C标准

W3C标准中关于JS的规定有：

DOM操作
BOM操作
事件绑定
ajax请求(包括http协议)
存储

DOM的本质 
Document、Object、Model
浏览器把拿到的html代码，结构化一个浏览器能够识别并且js可操作的一个模型而已
DOM的节点操作

获取DOM节点
Attribute 和 properity

attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute；

注意：在使用setAttribute的时候，该函数一定接收两个参数，setAttribute（attributeName,value）,无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。

property：是js获取的DOM对象上的属性值，比如a，你可以将它看作为一个基本的js对象。这个节点包括很多property，比如value，className以及一些方法onclik等方法。

一个js对象有很多property，该集合名字为properties，properties里面有其他property以及attributies，attributies里面有很多attribute。
而常用的attribute，id、class、name等一般都会作为property附加到js对象上，可以和property一样取值、赋值

DOM结构操作

树

获取DOM节点，以及节点的property和Attribute

获取父节点，获取子节点

新增节点，删除节点

property只是一个JS对象的属性的修改

Attribute是对html标签属性的修改

问题：

如何检测浏览器的类型
拆解URL各部分

知识点

navigator
screen
location
history

//navigator
var ua = navigator.userAgent
var isChrome = ua.indexOf("chrome")
console.log(isChrome)

//screen
console.log(screen.width)
console.log(screen.height)

//location
console.log(location.href)
console.log(location.protocol)
console.log(location.pathname)
console.log(location.search)    //?之后的参数
console.log(location.hash)      //#号之后

//history
history.back()          
history.forward()

题目：

编写一个通用的事件监听函数
描述时间冒泡流程
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

知识点:

通用事件绑定
事件冒泡
代理

var btn = document.getElementById("btn1")
btn.addEventListener("click", function(event) {
    console.log("clicked")
})

function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

var a = document.getElementById("link1")
bindEvent(a, "click", function(e) {
    e.preventDefault(); //阻止默认行为
    alert("clicked")
})

关于IE低版本的兼容性

IE低版本使用attachEvent绑定事件，和W3C标准不一样

IE低版本使用量已非常少，很多网站早已不支持

建议对IE低版本的兼容性：了解即可，无须深究

如果遇到对IE低版本要求苛刻的面试，果断放弃

e.stopPropatation() //取消冒泡

    a1
    a2
    a3
    a4
    



var div1 = document.getElementById("div1")
div1.addEventListener("click",function(e){
    var target = e.target
    if(target.nodeName === "A"){
        alert(target.innerHTMl)
    }
})

完整写法

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }

    elem.addEventListener(type, function(e) {
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            fn(e)
        }
    })
}

//使用代理
var div1 = document.getElementById("div1")
bindEvent(div1, "click", "a", function(e) {
    console.log(this.innerHTML)
})

//不使用代理
var a = document.getElementById("a1")
bindEvent(div1, "click", function(e) {
    console.log(a.innerHTML)
})

DOM树形结构

事件冒泡

组织冒泡

冒泡的应用

使用代理

知道代理的两个优点

题目：

手动写一个ajax，不依赖第三方库
跨域的几种实现（原理）

知识点:

xmlHttpRequest
状态码说明
跨域

var xhr = new XMLHttpRequest()

xhr.open("GET","/api",false)

xhr.onreadystatechange = function(){
    //这里的函数异步执行，可参考之前JS基础中的异步模块
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            alert(xhr.responseText)
        }
    }
}

xhr.send(null)

IE兼容性问题

IE低版本使用ActiveXObject，和W3C标准不一样

IE低版本使用量已经非常少，很多网站早已不支持

建议对IE低版本的兼容性：了解即可，无需深究

如果遇到对IE低版本要求苛刻的面试，果断放弃

.

状态码说明

0 - (未初始化)     还没调用send()方法

1 - (载入)            已调send() 方法，正在发送请求

2 - (载入完成)     send()方法执行完成，已经接收到全部相应内容

3 - (交互)            正在解析响应内容

4 - (完成)            响应内容解析完成，可以在客户端调用了

.

status说明

2XX  - 表示成功处理请求。如200
3XX  - 需要重定向，浏览器直接跳转
4XX  - 客户端请求错误，如404
5XX  - 服务器端错误

什么是跨域

浏览器有同源策略，不允许ajax访问其他域的接口

跨域条件：协议、域名、端口，有一个不同就算跨域

可以跨域的三个标签

服务器端设置http header

容量
是否会携带到ajax中
API易用性

ios safari隐藏模式下，localStorage.getItem会报错，建议统一用try-catch封装