js部分

1.問：localStorage,sessionStorage和cookie的區(qū)別?

概述：localStorage,sessionStorage是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數(shù)據(jù)。sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)。

共同點:都是保存在瀏覽器端，且同源的.

區(qū)別:

(1）cookie在瀏覽器和服務(wù)器間來回傳遞；sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

(2)存儲大小：

localStorage存儲空間小于等于5M；
sessionStorage存儲空間小于等于5M；
cookie存儲空間小于4K；

(3)有效性：
localStorage：永久存儲，始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；需要手動清除。
sessionStorage：會話級別的存儲，僅在當前瀏覽器窗口關(guān)閉前有效，不能持久保持；
cookie：只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉也不會消失；

2.問:下面代碼運行后輸出結(jié)果

console.log('script start')async function async1() {await async2()console.log('async1 end')}async function async2(){console.log('async2 end')}async1()window.setTimeout(function(){console.log('setTimeout end')},0)var promise1=new Promise(function (resolve,reject) {console.log('Promise build')resolve()})promise1.then(function (){console.log('promise1 end')}).then(function (){console.log('promise2 end')})console.log('script end')

?答案依次為:

script start async2 end Promise build script end async1 end promise1 end promise2 end setTimeout end

3.es6的新特性中，var ?let ?const之間的區(qū)別

? ? ? ?(1)var存在變量提升

? ? ? ?(2)?var可重復(fù)聲明

? ? ? ?(3)var不存在塊級作用域

? ? ? ?(4)存在for循環(huán)變量污染的問題

let、const? ?

? ? ? ?(1)不存在變量提升

? ? ? ?(2) 不可重復(fù)聲明

? ? ? ?(3)存在塊級作用域

? ? ? ?(4)不存在for循環(huán)變量污染的問題，const一旦聲明必須賦值。

4.問：下面代碼輸出結(jié)果

function fun(n, o) {console.log(o)return {fun: function (m) {return fun(m, n)}}}var a = fun(0) //undefined a={fun:function(m){ ruturn fun(m,0)}}a.fun(1) ?// 0 ?再執(zhí)行fun(1,0),結(jié)果{fun:function(m){return fun(m,1)}}(=>fun(2,1),結(jié)果{fun:function(m){retun fun(m,2)}})a.fun(2) ?//0 ? 再執(zhí)行fun(2,0),結(jié)果{fun:function(m){return fun(m,2)}}a.fun(3) ?//0 ? 再執(zhí)行fun(3,0),結(jié)果{fun:function(m){return fun(m,3)}}var b = fun(0).fun(1).fun(2).fun(3) ?//undefined,0,1,2var c = fun(0).fun(1) ?//undefined,0,c.fun(2) //1

5.問：淺拷貝和深拷貝的區(qū)別，使用原生js寫出一種深拷貝的方法

（1）淺拷貝

淺拷貝之所以被稱為淺拷貝，是因為對象只會被克隆最外部的一層,至于更深層的對象,則依然是通過引用指向同一塊堆內(nèi)存.

// 淺拷貝函數(shù) function shallowClone(m) {const Obj = {};for ( let i in m) {Obj[i] = m[i];}return Obj; } // 被拷貝的對象 const originObj = {a: 1,b: [ 'e', 'f', 'g' ],c: { h: { i: 2 } } };const newObj = shallowClone(originObj); console.log(newObj.c.h, originObj.c.h); // { i: 2 } { i: 2 } console.log(originObj.c.h === newObj.c.h); // true

我們可以看到,很明顯雖然originObj.c.h被拷貝了,但是它還與originObj.c.h相等,這表明他們依然指向同一段堆內(nèi)存,這就造成了如果對newObj.c.h進行修改,也會影響originObj.c.h,這就不是一版好的拷貝

（2）深拷貝

可以拷貝對象里面所有的層級，在堆里面開辟一個新的存儲空間，復(fù)制出一個一模一樣的對象出來，復(fù)制出來的對象屬性值改變時不會影響原來的對象。

function deepCopy(obj) {if (typeof obj == 'object') {var result = obj instanceof Array ? [] : {}for (let i in obj) {if (typeof obj[i] == 'object') {result[i] = deepCopy(obj[i])} else {result[i] = obj[i]}}} else {var result = obj}return result}var a = 'aaaa'var aa = deepCopy(a)console.log(a === aa) //truevar b = [1, 2, [3, [4, 5]]]var bb = deepCopy(b) ?//falseconsole.log(b === bb)var c = {a: '11',b: {c: '22',}}var cc = deepCopy(c)console.log(c === cc) ?//false

6.類型識別的方法

一、數(shù)據(jù)類型的分類：

（1）基本數(shù)據(jù)類型：

string（字符串）boolean（布爾值）number（數(shù)字）symbol（符號）null（空值）undefined（未定義）

Symbol 代表創(chuàng)建后獨一無二且不可變的數(shù)據(jù)類型，它主要是為了解決可能出現(xiàn)的全局變量沖突的問題。

（2）引用數(shù)據(jù)類型

a.內(nèi)置對象/原生對象

String、Number、Boolean、Array、Date、RegExp、Math、 Error、 Object、Function、 Global

b.宿主對象

b-1??BOM對象： Window、Navigator、Screen、History、Location

b-2??DOM對象：Document、Body、Button、Canvas等

二、數(shù)據(jù)類型的判斷

(1)typeof??一般通過 typeof 操作符來判斷一個值屬于哪種基本類型。但無法區(qū)分對象類型

typeof 'some' // 'string' typeof true // 'boolean' typeof 10 // 'number' typeof Symbol() // 'symbol' typeof null // 'object' 無法判定是否為 null typeof undefined // 'undefined' typeof {} // 'object' typeof [] // 'object'

(2)instanceof? ??判斷對象類型：測試構(gòu)造函數(shù)的 prototype 是否出現(xiàn)在被檢測對象的原型鏈上。d但無法判斷一個值到底屬于數(shù)組還是普通對象。

[] instanceof Array // true ({}) instanceof Object // true (()=>{}) instanceof Function // true let arr = [] let obj = {} arr instanceof Array // true arr instanceof Object // true obj instanceof Object // true在這個例子中，arr 數(shù)組相當于 new Array() 出的一個實例， 所以 arr.__proto__ === Array.prototype， 又因為 Array 屬于 Object 子類型， 即 Array.prototype.__proto__ === Object.prototype， 所以 Object 構(gòu)造函數(shù)在 arr 的原型鏈上

判斷不了原始類型

console.log(true instanceof Boolean);// false console.log(undefined instanceof Object); // false console.log(arr instanceof Array); // true console.log(null instanceof Object); // false console.log({} instanceof Object); // true console.log(function(){} instanceof Function);// true

（3）Object.prototype.toString.call()?全能型，幾乎都能判斷

Object.prototype.toString.call({})// '[object Object]' Object.prototype.toString.call([])// '[object Array]' Object.prototype.toString.call(() => {})// '[object Function]' Object.prototype.toString.call('abc')// '[object String]'

（4）? Array.isArray(b) 判斷一個變量是否是一個數(shù)組

??A.constructor==Array ?判斷是否為數(shù)組

7.寫出下面代碼輸出結(jié)果

<script>var length = 10function fn() {console.log(this.length)}let obj = {method: function (fn) {fn();arguments[0]();}}obj.method(fn, 1) // 10 2</script>

8.問：call,apply,bind的區(qū)別？

相同點：call,apply,bind都可改變this的指向

區(qū)別:call,apply都是立即調(diào)用一個函數(shù)，它們第一個參數(shù)都是this指向的對象，call傳參是一個個的傳，apply傳的是一個數(shù)組；bind會生成一個新的函數(shù)，并不會立即調(diào)用。

9.談?wù)?span style="color:#fe2c24;">性能優(yōu)化問題(至少列出4點)

(1)減少請求次數(shù)：

? ? ? ?a.將圖片轉(zhuǎn)為base64、使用字體圖標

? ? ? ?b.使用強緩存和協(xié)商緩存

? ? ? ?c.避免使用空的src和href

(2)減少資源大小：使用GZIP壓縮，壓縮html、js、css和圖片資源

(3)優(yōu)化網(wǎng)絡(luò)連接:使用DNS預(yù)解析

(4)webpack性能優(yōu)化：

? ? ? ?a.使用tree shaking去掉未引用的代碼

? ? ? ?b.使用external把沒有必要打包的庫文件分離出來，減少打包后項目體積

CSS部分

1.問：實現(xiàn)一邊寬度固定，另一邊自適應(yīng)(至少2中方法）

html部分

<div class="box"><div class="b"></div><div class="c"></div></div>

方法一：對自適應(yīng)元素設(shè)置absolute定位，通過left： 0， right： 0對自適應(yīng)元素進行寬度拉伸，再通過設(shè)置margin-left避免元素重疊

.box{position: relative; } .b{width: 200px;height: 200px;background-color: aqua; } .c{height: 200px;position: absolute;top: 0;right: 0;left: 0;margin-left: 200px;background-color: blue; }

方法二：flex布局

.box{display: flex; } .b{ width: 200px;height: 200px;background-color: aqua; } .c{height: 200px;flex: 1;background-color: blue; }

2.div中子元素垂直水平居中的方法（至少兩種)

方法一：定位

<template><div class="father"><div class="son"></div></div> </template> <style scoped>.father {background: red;height: 200px;position: relative;}.son {background: green;width: 80%;height: 100px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;} </style>

方法二：display: table-cell

<template><div class="father"><div class="son"></div></div> </template> <style scoped>.father {background: red;height: 200px;width: 200px;display: table-cell;vertical-align: middle;}.son {background: green;width: 80%;height: 100px;margin: 0 auto;} </style>

3.問：CSS3動畫實現(xiàn)方式

<body><div><div class="guodu">過度動畫</div><div class="guanjian">關(guān)鍵幀動畫</div></div> </body> <style>.guodu {width: 100px;height: 100px;background-color: aqua;transition: all 0.3s linear;}.guodu:hover {width: 500px;height: 100px;background-color: purple;}.guanjian {width: 100px;height: 100px;background-color: rgb(197, 28, 127);}.guanjian:hover {width: 500px;animation: mykey 0.3s linear;}@keyframes mykey {from {background-color: rgb(47, 0, 255);}to {background-color: rgb(22, 190, 50);}}</style>

4.問：了解的哪些可視化工具

Echarts, ?canvas, ?svg

5.移動端的適配方法

（1）百分比適配方式

這種方法，只是寬度能適配，高度不能適配，只能設(shè)置某個高度固定死

需求：是四個div高度為100px，寬度等寬橫向排列

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width,user-scalable=no"><style type="text/css">body {margin: 0;}div {width: 25%;height: 100px;float: left;}.a {background: red;}.b {background: blue;}.c {background: green;}.d {background: yellow;}</style> </head> <body><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div> </body> </html>

（2）動態(tài)生成viewport適配方式

這種方式其實是動態(tài)設(shè)置縮放比例，動態(tài)創(chuàng)建meta標簽，并且將計算出來的縮放比例放到這個標簽的content屬性里面

如果目標尺寸設(shè)置320,那么整個屏幕寬度就是320px，設(shè)置為750那么整個屏幕就是750px，這樣我們頁面中的每個元素就可以根據(jù)設(shè)計圖來設(shè)置寬高了

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">(function(){var w = window.screen.width;var targetW = 320;var scale = w/targetW; //當前尺寸/目標尺寸var meta = document.createElement("meta");meta.name = "viewport";meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""console.log(scale);document.head.appendChild(meta);})();</script><!--<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">--><style type="text/css">body {margin: 0;}div {width: 80px;height: 100px;float: left;}.box1 {background: red;}.box2 {background: blue;}.box3 {background: green;}.box4 {background: yellow;}</style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>

（3）rem適配方式

rem適配方式第一步首先需要設(shè)置視口的約束（固定的）

先來看一下在rem適配之前是怎么樣的
分析運行結(jié)果，當屏幕的寬度是320的時候，這個box的寬度比例是200/320，當換一個手機屏幕大小不一樣的，比如375的那么box的寬度比例是200/375
那么在不同手機中相同的一個box盒子占整個屏幕的寬度比例就不一樣了，所以呈現(xiàn)的效果也是不一樣的

那么對于這個問題可以使用rem來做適配，rem適配最主要的就是html根元素字體大小設(shè)置屏幕區(qū)域的寬度，這樣整個屏幕就變成了1rem為基準，然后在設(shè)置每個元素的時候試用rem來做單位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Title</title> </head> <style>*{margin: 0;padding: 0;}.box{width:2rem;height: 0.5rem;background-color: red;} </style> <script>(function () {// 獲取屏幕區(qū)域的寬度var w = document.documentElement.clientWidth// 獲取html根元素var htmlNode = document.querySelector('html')// 設(shè)置字體大小htmlNode.style.fontSize = w + 'px'})() </script> <body><div class="box"></div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的广州电信高级前端开发工程师笔试题及答案（国企面试题大全）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。