1. 程式人生 > >web前端面試題總結筆記——JavaScript部分

web前端面試題總結筆記——JavaScript部分

js中的變數型別

值型別和引用型別

  • 值型別

    undefined

    string

    number

    boolean

  • 引用型別

    object:

    ​ {}

    ​ []

    ​ null

    ​ function

  • 強制型別轉換

    字串拼接

    ==運算子

    if語句

    邏輯運算子

    ​ 判斷是否是true還是false: console.log(!!a);

===與== 強制型別轉換

JS中的內建函式

JS變數按照儲存方式分為哪些型別

理解json

window.onload和DOMContentloaded 瀏覽器渲染

作用域

JS模組化

JS的基礎演算法

作用域和閉包

​ 執行上下文

​ 自動會將函式宣告 和函式表示式提前

​ this

​ 在執行時,才能確認值

​ 作用域

​ 作用域鏈

​ 閉包

變數提升

​ 函式和宣告會提前

this的幾種場景

​ 作為建構函式

​ 作為物件屬性

​ 作為普通函式

​ call 直接用

​ apply 要用[] 陣列方式

​ bind (.bind({y:100}))

建立10個a 分別點選 分別彈出序號

作用域

閉包

非同步和單執行緒

同步和非同步

setTimeout

前端使用非同步的場景

  • ​ 在可能等待的情況需要非同步

    • 不能像alert阻塞程式執行

    • 所以 等待的情況下 都需要非同步

      定時任務:setTimeout setInterval

      網路請求:ajax請求,動態IMG的載入

            var xhr=XMLHttpRequest()
​
            xhr.open("get",url)
​
            xhr.send()
​
            xhr.onreadystatechange=function(){
    
                if(xhr.readystatechange==4&&xhr.status==200)
                    {
                        document.getElementById("myDiv").innerHTML=xhr.responseText;
                    }
            }
​

​ 事件繫結

日期

function foematDate(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)

Math

獲取0-1之間的隨機數Math.random()

var random=Math.random()
var random=random+'0000000000'
var random=random.slice(0,10)
console.log(random)

陣列API

forEach:遍歷所有元素

var arr = ['a','b','c','d']
arr.forEach(function(item,index){
    console.log(index,item)
})
function forEach(obj,fn)
{
    var kry
    if(obj instanceof Array)
    {
        obj.forEach(function(item,index)
        {
            fn(index,item)
        })
    }
    else
    {
        for(key in obj)
        {
            if (obj.hasOwnProperty(key))
            {
                fn(key,obj[key])
            }
        }
    }
}
var arr = [1,2,3,4]
forEach(arr,function(index,item)
{
    console.log(index,item)
})
var obj={x:100,y:200,z:300}
forEach(obj,function(key,val)
{
    console.log(key,val)
})

every:判斷所有元素是否符合條件

var arr = [1,2,3,4]
var result=arr.every(function(item,index){
   if(item<5){
       return true
   }
})
console.log(result)

some判斷至少一個元素符合條件

var arr = [1,2,3,4]
var result=arr.some(function(item,index){
   if(item<3){
       return true
   }
})
console.log(result)

sort

}):排序

var arr = [1,6,2,7,3,5,4]
var arr2=arr.sort(function(a,b){
       return a-b //從小到大排序 反之 大到小
})
console.log(arr2)

map:對元素重新組裝

var arr = [1,2,3,4]
var arr2=arr.map(function(item,index){
       return '<b>+item+</b>'
})
console.log(arr2)

filter:過濾符合條件的元素

var arr = [1,2,3,4]
var arr2=arr.filter(function(item,index){
       if(item>2){
           return true
       }
})
console.log(arr2) 

for in

var obj = {
    x:100,
    y:200,
    z:300
}
var key
for (key in obj)
    if(obj.hasOwnProperty(key))
    {
        console.log(key,obj[key])
    }