10.14 百麗集團面試經歷

時間 2019-12-06

原文原文鏈接

一面

1. 自我介紹

2. jQuery的選擇器

jQuery的選擇器與css中的選擇器很類似，經過使用css中的選擇器來選取HTML節點

1. #id     
用法: $("#myDiv");    返回值  單個元素的組成的集合
說明: 這個就是直接選擇html中的id="myDiv"

2. Element 
用法: $("div")     返回值  集合元素
說明: element的英文翻譯過來是」元素」,因此element其實就是html已經定義的標籤元素,例如div, 
input, a等等.

3. class          
用法: $(".myClass")      返回值  集合元素
說明: 這個標籤是直接選擇html代碼中class="myClass"的元素或元素組(由於在同一html頁面中
class是能夠存在多個一樣值的)

4. *          
用法: $("*")      返回值  集合元素
說明: 匹配全部元素,多用於結合上下文來搜索

5. selector1, selector2, selectorN      
用法: $("div,span,p.myClass")    返回值  集合元素
說明: 將每個選擇器匹配到的元素合併後一塊兒返回.你能夠指定任意多個選擇器, 並將匹配到的元素合
併到一個結果內。其中p.myClass是表示匹配元素
p class="myClass"

其次可使用屬性選擇器，例如input中的name，type屬性等

一、[attribute]
用法: $("div[id]") ;  返回值  集合元素
說明: 匹配包含給定屬性的元素。例子中是選取了全部帶」id」屬性的div標籤。

二、[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true);    返回值  集合元素
說明: 匹配給定的屬性是某個特定值的元素.例子中選取了全部 name 屬性是 newsletter 的 input 元素。

三、[attribute!=value]
用法: $("div[title!='test']").css("background","yellow");   返回值  集合元素

說明: 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。
此選擇器等價於:not此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value])。以前看到的:not 派上了用場。

四、[attribute^=value]
用法: $(」input[name^=‘news’]「)  返回值  集合元素 
說明: 匹配給定的屬性是以某些值開始的元素.,咱們又見到了這幾個相似於正則匹配的符號。

五、[attribute$=value]
用法: $("input[name$='letter']")  返回值  集合元素 
說明: 匹配給定的屬性是以某些值結尾的元素。

六、[attribute*=value]
用法: $("input[name*='man']")   返回值  集合元素
說明: 匹配給定的屬性是以包含某些值的元素。

七、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']")  返回值  集合元素
說明: 複合屬性選擇器,須要同時知足多個條件時使用.又是一個組合,這種狀況咱們實際使用的時候很經常使用.這個例子中選擇的是全部含有 id 屬性,而且它的 name 屬性是以 man 結尾的元素。

其餘具體能夠查看 JQuery_九大選擇器

3. 如何尋找子元素a的父元素中帶`class="abc"`的兄弟節點

<div>
    <div class="abc">
        <div>
            <div class="abc">
                <div>
                    <a href="#">點擊我！！！</a>
                </div>
            </div>
            <div class="abcs"></div>
            <div class="abcs"></div>
        </div>
    </div>
    <div class="abcs"></div>
    <div class="abcs"></div>
</div>

個人想法是首先尋找a標籤的所有祖先元素 $("a").parents()，而後找到其中 class="abc"的元素 $("a").parents().filter(".abc")，最後再找到這些節點的兄弟節點便可 $("a").parents().filter(".abc").siblings()

4. 寫一個簡單的jQuery插件（打印"Hello World"）

這個主要有兩種方法css

類級別開發插件

對象級別開發

// 1、類級別開發插件
// 1. 直接給jquer添加全局函數
jQuery.printHelloWorld = function(){
    console.log("Hello World!!!");
}
// 2. 用extend()方法。extend是jquery提供的一個方法，把多個對象合併起來，參數是object
$.extend({
    printHelloWorld:function(){
        console.log("Hello World!!!");
    }
})

// 3. 使用命名空間(若是不使用命名空間容易和其餘引入的JS庫裏面的同名方法衝突)
jQuery.test = {
    printHelloWorld: function () {
        console.log("Hello World!!!");
    }
}

// 調用
$.printHelloWorld();
$.test.printHelloWorld();

// 2、對象級別開發
// 第一行的;必定要寫
;(function($){
    $.printHelloWorld  = function(){
        console.log("Hello World!!!");
    }
}(jQuery))

// 調用
$.printHelloWorld();

5. 跨域的解決方法

經典問題，具體參考深刻理解前端跨域問題的解決方案

6. ES6有了解嗎

首先回答了 let與 const
let定義變量，相對於var，它修復了一些問題，好比變量提高、重複定義等問題，而且const 和let的定義具備塊級做用域；html

const定義常量，可是const定義的常量只是值不可變，即基本數據類型不可變，對於引用類型，由於它創建的是引用，因此即便使用const定義的對象，其屬性仍是可變的（這個當時在論客科技的時候就有被追問到）；前端

而後就說到Promise相關vue

7. Promise解決了什麼問題

Promise主要解決了回調地獄的問題；

除了解決回調地獄，還能夠爲了咱們的代碼更加具備可讀性和可維護性，咱們須要將數據請求與數據處理明確的區分開來。

8. 你以爲Promise能解決回調地獄嗎？

當時面試官問這個問題的時候，我認爲他問的是怎樣正確使用才能夠正確解決回調地獄的問題。有一種狀況就是即便使用了Promise也一樣會出現回調地獄，這是由於使用方法錯誤了，以下：

// 當時因爲剛開始接觸Promise仍是下意識的使用這種回調方法，致使產生了回調地獄
modifyInfoData().then(function (res) {
   let info_id = res.body.data;
   modifyInfoPic(info_id).then(res => {
       modifyInfoFile(info_id).then(res => {
           _this.$message({
               message: '提交成功',
               type: 'success'
           });
       })
   });
});

// 應該修改成
modifyInfoData().then(function (res) {
   let info_id = res.body.data;
   modifyInfoPic(info_id);
}).then(function (res) {
   let info_id = res.body.data;
   modifyInfoFile(info_id);
}).then(res => {
    _this.$message({
        message: '提交成功',
        type: 'success'
    });
});

9. 如今有兩個字符串`var a = "aaa"`和`var b = "bbb`如何不借助任何函數和中間變量交換他們

這裏只寫一個相對比較萬能的方法，其餘能夠參考 JavaScript交換兩個變量值的七種解決方案

var a = "aaa";
var b = "bbb";
a = [b, b=a][0];
// 根據運算符優先級，首先執行b=a，此時的b直接獲得了a的變量值，而後一步數組索引讓a獲得了b的值

10. vue中vuex的action和mutation區別

只有Mutation能夠直接修改State，而Action只能經過Mutation間接的修改State。

Action 能夠包含任意異步操做，而Mutation 必須是同步函數。(Mutation 的同步主要是爲了能夠方便咱們在devtools中檢測到狀態的變化)

在組件中Action是使用dispatch分發，如：this.$store.dispatch("updateUserInfo", 'nick');; Mutation使用commit，如：this.$store.commit("increment", 'nick');

Action中的方法和 Mutation 同樣，最多隻有兩個形參，第一個爲 context，能夠爲payload，須要傳多個參數的時候能夠以對象的形式傳參。