拼多多正式批前端研發工程師筆試題（2019/11/10）

單選題

1.對Symbol的理解（https://www.imooc.com/article/20574）

Symbol函數前不能使用new命令，否則會報錯。這是因爲生成的 Symbol 是一個原始類型的值，不是對象。也就是說，由於 Symbol 值不是對象，所以不能添加屬性。基本上，它是一種類似於字符串的數據類型。
每個Symbol實例都是唯一的。因此，當你比較兩個Symbol實例的時候，將總會返回false
Symbol函數可以接受一個字符串作爲參數，表示對 Symbol 實例的描述，主要是爲了在控制檯顯示，或者轉爲字符串時，比較容易區分。
Symbol 值不能與其他類型的值進行運算，會報錯。Symbol 值可以顯式轉爲字符串。另外，Symbol 值也可以轉爲布爾值，但是不能轉爲數值。
Symbol作爲屬性名，該屬性不會出現在for ...in,for...of 循環中,也不會被Object.keys()，Object.getOwnPrototypeNames()，JSON.stringify()返回，但是他也不是私有屬性，有一個Object.getOwnPropertySymbols方法，可以獲取指定對象的所有 Symbol 屬性名。

2.flex: https://blog.csdn.net/callmeCassie/article/details/86772083

flex-direction（項目的排列方式）
flex-wrap（換行方式）
flex-flow（排列方式+換行）
justify-content（橫軸上的對齊方式）
align-items(縱軸上的對齊方式)
align-content(多行垂直對齊方式)

3.SEO優化：https://blog.csdn.net/qq_29515037/article/details/89332732

網站結構佈局優化
①扁平化目錄層次，最好不要超過三層
②導航儘可能的使用文字
③網站的佈局結構-頁面頭部，頁面主體，頁面底部
④控制頁面大小，最好不要超過100kb
網頁代碼優化
①多使用語義化的標籤，如nav、section、article等
②添加meta關鍵詞
③少使用display:none，不想在當前頁面顯示可使用z-index:-9999;等來達到頁面內容不可見效果
(使用display:none隱藏的元素不會被百度等搜索網站檢索，會影響到網站的SEO)
④dom操作要放在html標籤之後，body結束之前

4.linux命令：https://cloud.tencent.com/developer/article/1353709

-b：若需覆蓋文件，則覆蓋前先行備份。
-f ：force 強制的意思，如果目標文件已經存在，不會詢問而直接覆蓋。
-i ：若目標文件(destination) 已經存在時，就會詢問是否覆蓋！
-u：若目標文件(destination) 已經存在，且源文件source 比較新，纔會更新(update)。
-t ：即指定mv的目標目錄，該選項適用於移動多個源文件到一個目錄的情況，此時目標目錄在前，源文件在後。

5.@import和link區別: http://www.imooc.com/article/75984

從屬關係
link：link是HTML提供的標籤，不僅可以加載CSS，還可以定義rel等屬性
@import：@import是css提供的語法，只有導入樣式表的作用
加載順序
link：link在頁面加載時CSS同時被加載
@import：引入的CSS要等頁面加載完畢後再加載
兼容性問題
link是HTML提供的語法，不存在兼容性問題
@import是css2.1提供的語法，ie5以上才兼容
DOM可控性
js控制DOM時，可以通過插入link標籤來改變樣式，不能通過@import改變
權重問題（有爭議）
link標籤引入的樣式權重大於@import標籤

6.async： https://blog.csdn.net/tcy83/article/details/80544048

無論async函數有無await操作，其總是返回一個Promise。

沒有顯式return，相當於return Promise.resolve(undefined);
return非Promise的數據data，相當於return Promise.resolve(data);
return Promise, 會得到Promise對象本身

async總是返回Promise，因此，其後面可以直接調用then方法，
函數內部return返回的值，會成爲then回調函數的參數
函數內部拋出的錯誤，會被then的第二個函數或catch方法捕獲到

7.HTML空元素：https://www.jianshu.com/p/760df8dfcb7e

空元素：沒有內容的HTML元素，比較常見的空元素像<img> <link> <meta> <br> <hr>

8.arguments:https://blog.csdn.net/zjy_android_blog/article/details/80934042

在函數調用的時候，瀏覽器每次都會傳遞進兩個隱式參數：

函數的上下文對象this
封裝實參的對象arguments

arguments屬性有callee，length和迭代器Symbol。
callee的值是函數fun，callee指向函數fun。
arguments的原型索引__proto__的值爲Object，arguments不是數組，而是一個類數組對象。

function printData(...args){
   console.log(typeof args);//object
   console.log(typeof args[0]);//number
}
printData(21);

9.delete: https://segmentfault.com/a/1190000010574280

(1)delete 操作符用於刪除對象的某個屬性，如果刪除成功，返回true；反之，false;

var person = {
    name: 'abc',
    age: 18
}
console.log(delete person.name) //true
console.log(delete person.job) //即使刪除對象不存在的屬性依然返回true

(2)如果屬性是不可配置屬性,返回false，在非嚴格模式下，返回false，在嚴格模式下則會拋出語法錯誤的異常。

var obj = {}
Object.defineProperty(obj, 'a', {
    value: 1,
    configurable: false
})
console.log(delete obj.a) // false
// 如果'use strict'，Uncaught TypeError...

(3)delete只能刪除對象自己的屬性，不能刪除其原型鏈上的屬性

function Person() {
    this.name = "張三",
    this.job = "工程師"
}

Person.prototype.name = "李四"
var p = new Person();
// 只刪除p實例的name屬性
console.log( delete p.name)//true
console.log(p)//Person{job:"工程師"}
console.log(p.name)// 李四

(3)用var，let和const聲明的變量不能被delete，返回false

var a = 1;
console.log(delete a) //false
console.log(a) // 1
const b = 1;
console.log(delete b) //false
console.log(b) //1
const c = 1;
console.log(delete c) //false
console.log(c) //1
d = 1;
console.log(delete d) //true
console.log(d) //d is not defined

(4)如果試圖刪除不存在的變量，delete不會起任何作用，返回true;

console.log(delete e) //true

var與不var有兩個區別：

var的全局變量不能被刪除，因爲delete智能刪除對象的可刪除的屬性，而通過var 定義的全局屬性會被標明不可刪除。需要說明的是，delete不成功並不會拋錯，delete的返回值是true或者是false。
var定義的全局變量會被提升，而不用var定義的全局變量不會被提升。可以看下面程序的執行結果：

<script>
	alert(a);
	var a=1;
</script>

<script>
	alert(a);//error, a undefined
	a=1;
</script>

10.解構賦值

11.css單位：https://www.jianshu.com/p/80c960ba888b

12.class：https://blog.csdn.net/PINGER0077/article/details/84987784

與函數一樣，類也可以使用表達式的形式定義
const Myclass = class Me {
	getClassName() {
		return Me.name;
	}
};

上面代碼表達式定義了一個類，這個類的名字是MyClass而不是Me

採用class表達式，可以寫出立即執行的class

多選題

1.Array方法: https://github.com/freeshineit/javascript-array

2.flex佈局

在設置了flex佈局以後，其所有的子元素的float，clear和vertical- align屬性都將失效。
不能使用display:block獨佔一行。
text-align:center可以使子元素居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .myflex{
        display: flex;
        text-align: center;/* 第三問 */
    }
    .myflex span{
        display: block;/* 第一問 */
        float: right;/* 第二問 */
        width: 100px;
        height: 100px;
        margin-left:10px;
        border: 1px solid red;
    }
</style>

<body>
    <div class="myflex">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

多行多列：https://www.php.cn/css-tutorial-411753.html

3.ajax請求：http://dy.163.com/v2/article/detail/D63UC8T90511FQO9.html

Ajax對象還可以設置一個timeout 值，代表超時時間，切記：timeout 只會影響readyState，而不會影響status，因爲超時只會中斷數據傳輸，但不會影響服務器的處理結果。如果 timeout 設置的不合理，就會導致響應碼status 是200，但 response裏卻沒有數據，這種情況就是服務器正確響應了請求，但數據的下載被超時中斷了。
爲了保證用戶信息的安全，瀏覽器引入了同源策略，對腳本請求做了限制，不允許 Ajax 跨域請求服務器，只允許請求和當前地址同域的服務器資源。但不限制 HTML 標籤發送跨域請求，比如 script、img、a 標籤等，因此可以利用標籤跨域能力來實現跨域請求，這就是 JSONP 能夠跨域的原理。
JSONP雖然可以解決跨域問題，但只能是get請求，並且沒有有效的錯誤捕獲機制，爲了解決這個問題，XMLHttpRequest Level2 提出了CORS 模型，即跨域資源共享，它不是一個新的API，而是一個標準規範，當瀏覽器發現該請求需要跨域時，就會自動在頭信息中添加一個 Origin
字段，用以說明本次請求來自哪個源。服務器根據這個值，決定是否同意這次請求。

4.Object.create()：https://www.jianshu.com/p/28d85bebe599

new Object和Object.create()的區別：

new Object() 通過構造函數來創建對象, 添加的屬性是在自身實例下。
Object.create() es6創建對象的另一種方式，可以理解爲繼承一個對象, 添加的屬性是在原型下。
當用構造函數或對象字面量方法創建空對象時，對象時有原型屬性的，即有_proto_;
當用Object.create()方法創建空對象時，對象是沒有原型屬性的。

Object.create()第一個參數可以是null，對象，函數的prototype屬性（創建空的對象時需傳null , 否則會拋出TypeError異常）

var a  = {};
var b = Object.create(null)
var c = new Object();
var d = Object.create(); //Object prototype may only be an Object or null: undefined
var e = Object.create(Object.prototype);
var f = new Object({});
console.log(a,b,c,d,e,f)

5.基本數據類型

值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、空（Null）、未定義（Undefined）、Symbol。

引用數據類型：對象(Object)、數組(Array)、函數(Function)。

簡答題

1.迴流和重繪

觸發重排(迴流/reflow)的屬性

1、盒子模型相關屬性

2、定位屬性及浮動

3、改變節點內部文字結構

①. width , height , padding , margin , display , border-width , border , min-height

②. top , bottom , left , right ,position , float , clear

③. text-align , overflow-y , font-weight , overflow , font-family, line-height , vertival-vlign , white-space , font-size

只會觸發重繪(repaint)的屬性

color ， border-style , visibility ,text-decoration , background , background-image , background-position , background-repeat , background-size , outline-color , outline , outline -style , outline-width , box-shadow

2.http緩存：https://blog.csdn.net/callmeCassie/article/details/102781759

3.BOM之window核心模塊：https://www.cnblogs.com/ruhaoren/p/11401040.html

Window對象包含以下五大核心：document，screen，navigator，history，location。

問答題

1.Promise：https://www.cnblogs.com/richard1015/p/9155564.html

promise.all
當所有的子Promise都完成，該Promise完成，返回值是全部值的數組。如果有任何一個失敗，該Promise失敗，返回值是第一個失敗的子Promise的結果。
常見使用場景：多個異步結果合併到一起。
promise.race
有任意一個返回成功後，就算完成，但是進程不會立即停止。
常見使用場景：把異步操作和定時器放到一起，如果定時器先觸發，認爲超時，告知用戶。

函數改造：

const func2 = () =>{
    var promise = new Promise(function (resolved, rejected) {
        setTimeout(function () {
            console.log(1);
            resolved()//在內部調用成功的回調函數 reslove，將成功結果返回給調用者
        }, 1000)
    });
    return promise;
}
func2().then(function () {
    console.log(2);
})

2.考察日期格式和垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .wrap {
        text-align: center;
    }
    .circle {
        display: flex;
        align-items: center;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: cyan;
        color: red;
   }
</style>
<body>
    <div class="wrap">
        <div class="circle"></div>
    </div>
    <script>
        function format() {
            var d = new Date();
            var year = d.getFullYear();
            var month = change(d.getMonth() + 1);
            var day = change(d.getDate());
            var hour = change(d.getHours());
            var minute = change(d.getMinutes());
            var second = change(d.getSeconds());
            function change(t) {
                if (t < 10) {
                    return "0" + t;
                } else {
                    return t;
                }
            }
            var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            return time;
        }
        document.getElementsByClassName('circle')[0].innerHTML = format();
    </script>
</body>
</html>

3.css樣式隱藏內容的方法：https://blog.csdn.net/zxf13598202302/article/details/50354644

visibility=hidden，該元素隱藏起來了，但不會改變頁面佈局，不會觸發該元素已經綁定的事件
opacity=0，該元素隱藏起來了，但不會改變頁面佈局，仍然佔據空間，並且，如果該元素已經綁定一些事件，如click事件，那麼點擊該區域，也能觸發點擊事件的
display=none，把元素隱藏起來，並且會改變頁面佈局，可以理解成在頁面中把該元素刪除掉一樣

display:none隱藏產生reflow和repaint(迴流與重繪)，而visibility:hidden沒有這個影響前端性能的問題；

4.寫一個函數

傳參：拼多多拼得多拼不多拼好多
輸出：拼多多1 拼得多2 拼不多3 拼好多520
最後的輸出加上520，前面順序加上數字，中間用空格隔開

function pdd (str){
    var arr = str.split(' ');
    var len = arr.length;
    for(var i = 0;i<len-1;i++){
        arr[i]+=i+1
    }
    arr[len-1]+=520
    console.log(arr.join(' '))
}
pdd('拼多多 拼得多 拼不多 拼好多')

拼多多正式批前端研發工程師筆試題（2019/11/10）

單選題

1.對Symbol的理解（https://www.imooc.com/article/20574）

2.flex: https://blog.csdn.net/callmeCassie/article/details/86772083

3.SEO優化：https://blog.csdn.net/qq_29515037/article/details/89332732

4.linux命令：https://cloud.tencent.com/developer/article/1353709

5.@import和link區別: http://www.imooc.com/article/75984

6.async： https://blog.csdn.net/tcy83/article/details/80544048

7.HTML空元素：https://www.jianshu.com/p/760df8dfcb7e

8.arguments:https://blog.csdn.net/zjy_android_blog/article/details/80934042

9.delete: https://segmentfault.com/a/1190000010574280

10.解構賦值

11.css單位：https://www.jianshu.com/p/80c960ba888b

12.class：https://blog.csdn.net/PINGER0077/article/details/84987784

多選題

1.Array方法: https://github.com/freeshineit/javascript-array

2.flex佈局

3.ajax請求：http://dy.163.com/v2/article/detail/D63UC8T90511FQO9.html

4.Object.create()：https://www.jianshu.com/p/28d85bebe599

5.基本數據類型

簡答題

1.迴流和重繪

2.http緩存：https://blog.csdn.net/callmeCassie/article/details/102781759

3.BOM之window核心模塊：https://www.cnblogs.com/ruhaoren/p/11401040.html

問答題

1.Promise：https://www.cnblogs.com/richard1015/p/9155564.html

2.考察日期格式和垂直居中

3.css樣式隱藏內容的方法：https://blog.csdn.net/zxf13598202302/article/details/50354644

4.寫一個函數

5.考的是this的指向

拼出緣分

鼠標拖動地球遠近控制音樂音量大小

vue輸入手機號自動加橫杆如100-1234-1234

拼多多正式批前端研發工程師筆試題（2019/11/10）

原生js實現簡易版消消樂

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結