js部分

1.問：localStorage,sessionStorage和cookie的區別?

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

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

區別:

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

(2)存儲大小：

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

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

2.問:下面代碼運行后輸出結果

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之間的區別

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

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

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

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

let、const? ?

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

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

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

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

4.問：下面代碼輸出結果

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 ?再執行fun(1,0),結果{fun:function(m){return fun(m,1)}}(=>fun(2,1),結果{fun:function(m){retun fun(m,2)}})a.fun(2) ?//0 ? 再執行fun(2,0),結果{fun:function(m){return fun(m,2)}}a.fun(3) ?//0 ? 再執行fun(3,0),結果{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.問：淺拷貝和深拷貝的區別，使用原生js寫出一種深拷貝的方法

（1）淺拷貝

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

// 淺拷貝函數 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相等,這表明他們依然指向同一段堆內存,這就造成了如果對newObj.c.h進行修改,也會影響originObj.c.h,這就不是一版好的拷貝

（2）深拷貝

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

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.類型識別的方法

一、數據類型的分類：

（1）基本數據類型：

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

Symbol 代表創建后獨一無二且不可變的數據類型，它主要是為了解決可能出現的全局變量沖突的問題。

（2）引用數據類型

a.內置對象/原生對象

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等

二、數據類型的判斷

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

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? ??判斷對象類型：測試構造函數的 prototype 是否出現在被檢測對象的原型鏈上。d但無法判斷一個值到底屬于數組還是普通對象。

[] 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 數組相當于 new Array() 出的一個實例， 所以 arr.__proto__ === Array.prototype， 又因為 Array 屬于 Object 子類型， 即 Array.prototype.__proto__ === Object.prototype， 所以 Object 構造函數在 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) 判斷一個變量是否是一個數組

??A.constructor==Array ?判斷是否為數組

7.寫出下面代碼輸出結果

<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的區別？

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

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

9.談談性能優化問題(至少列出4點)

(1)減少請求次數：

? ? ? ?a.將圖片轉為base64、使用字體圖標

? ? ? ?b.使用強緩存和協商緩存

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

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

(3)優化網絡連接:使用DNS預解析

(4)webpack性能優化：

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

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

CSS部分

1.問：實現一邊寬度固定，另一邊自適應(至少2中方法）

html部分

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

方法一：對自適應元素設置absolute定位，通過left： 0， right： 0對自適應元素進行寬度拉伸，再通過設置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動畫實現方式

<body><div><div class="guodu">過度動畫</div><div class="guanjian">關鍵幀動畫</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）百分比適配方式

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

需求：是四個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）動態生成viewport適配方式

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

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

<!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適配方式第一步首先需要設置視口的約束（固定的）

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

那么對于這個問題可以使用rem來做適配，rem適配最主要的就是html根元素字體大小設置屏幕區域的寬度，這樣整個屏幕就變成了1rem為基準，然后在設置每個元素的時候試用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 () {// 獲取屏幕區域的寬度var w = document.documentElement.clientWidth// 獲取html根元素var htmlNode = document.querySelector('html')// 設置字體大小htmlNode.style.fontSize = w + 'px'})() </script> <body><div class="box"></div> </body> </html>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。