js幾個常被忽略的基礎知識點

PascalXie 發布于2019-08-20 14:12 / 2454人閱讀

摘要：參數數組片段結束處的后一個元素的數組下標。返回值一個新數組，包含從到不包括該元素指定的元素。描述方法將返回數組的一部分，或者說是一個子數組。輸出因為此方法不會在每一個元素的基礎上再次執行匹配。

array.slice(start, end)

參數start
數組片段開始處的數組下標。如果是負數，它聲明從數組尾部開始算起的位置。也就是說，-1指最后一個元素，-2指倒數第二個元素，以此類推。

參數end
數組片段結束處的后一個元素的數組下標。如果沒有指定這個參數包含從start開始到數組結束的所有元素。如果這個參數是負數，從數組尾部開始算起的元素。

返回值
一個新數組，包含從start到end(不包括該元素)指定的array元素。

描述
方法slice()將返回數組的一部分，或者說是一個子數組。返回的數組包含從start 開始到end之間的所有元素，但是不包括end所指的元素。如果沒有指定end，返回的數組包含從start開始到原數組結尾的所有元素。

var a = [1,2,3,4,5];

a.slice(0,3);    // 返回 [1,2,3]

a.slice(3);      // 返回 [4,5]

a.slice(1,-1);   // 返回 [2,3,4]

注意：該方法并不修改數組。如果想刪除數組中的一段元素，應該使用方法Array.splice。

使用 Array#slice 拷貝數組

var len = items.length;
var itemsCopy = [];
var i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

使用 Array#slice 將類數組對象轉換成數組。

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
// "true" array of DIVs
// 得到一個由 div 元素組成的“真正的”數組
 
var argsArr = Array.prototype.slice.call(arguments);
// changes arguments to "true" array
// 把 arguments 轉換成一個“真正的”數組

Array.prototype.sort

不僅可以對簡單類型的數組項進行排序，可以通過屬性來排序對象。如果哪天服務器端發來一段 JSON 數據，而且其中的對象需要排序

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // 實現增序排列：前者的 age 小于后者
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

用 length 屬性來截斷數組

傳對象只是傳引用，我們經常會試圖把一個數組清空，但實際上卻錯誤地創建了一個新數組。

var myArray = yourArray = [1, 2, 3];

// 囧
myArray = []; // `yourArray` 仍然是 [1, 2, 3]
 
// 正確的方法是保持引用
myArray.length = 0; // `yourArray` 和 `myArray`（以及其它所有對這個數組的引用）都變成 [] 了

使用 push 來合并數組

使用 push 方法來合并數組：

var mergeTo = [4,5,6];
var mergeFrom = [7,8,9];
 
Array.prototype.push.apply(mergeTo, mergeFrom);
 
mergeTo; // is: [4, 5, 6, 7, 8, 9]

高效探測功能特性和對象屬性

很多時候我們會像下面這樣來探測瀏覽器的某個特性：

if(navigator.geolocation) {
    // 在這里干點事情
}

當然這可以正常工作，但它并不一定有很好的效率。因為這個對象探測方法會在瀏覽器中初始化資源。在過去，上面的代碼片斷可能會在某些瀏覽器下導致內存泄露。更好、更快的方法是檢查對象是否包含某個鍵名：

if("geolocation" in navigator) {
    // 在這里干點事情
}

鍵名檢查十分簡單，而且可以避免內存泄露。

數組的 indexOf

let arr = ["orange", "2016", "2016"];

arr.indexOf("orange"); //0
arr.indexOf("o"); //-1

arr.indexOf("2016"); //1
arr.indexOf(2016); //-1

arr.indexOf(‘orange") 輸出 0 因為 ‘orange" 是數組的第 0 個元素，匹配到并返回下標。
arr.indexOf(‘o") 輸出 -1 因為此方法不會在每一個元素的基礎上再次執行 indexOf 匹配。
arr.indexOf(‘2016") 輸出 1 因為此方法從頭匹配直到匹配到時返回第一個數組元素的下表，而不是返回全部匹配的下標。
arr.indexOf(2016) 輸出 -1 注意：這里不會做隱式類型轉換。

MDN上面的說明：

indexOf() compares searchElement to elements of the Array using
strict equality (the same method used by the === or triple-equals operator).

這里用的是嚴格等于（===）。做類似判斷的時候多留意，數字不會轉成字符串，同理字符串也不會轉換成數字。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81453.html

可變對象與不可變對象

摘要：不可變對象不允許對自身內容進行修改。因為他們說到不可變對象時用的是賦值，而說到可變對象又用了的索引等方法，這根本是兩碼事。基于這一設定，兩者在功能上的最大區別就是不可變對象可以作為字典的鍵，而可變對象不行。前陣子我們聊了下函數的參數傳遞以及變量賦值的一些內容：關于函數參數傳遞，80%人都錯了簡單回顧下要點： 1. Python 中的變量不是裝有對象的容器，而是貼在對象上的標簽...

jay_tian 2019-07-30 17:54 評論0 收藏0
代碼失控與狀態機（上）

摘要：代碼只是狀態機圖的相關元素的一種表現形式，它與節點式或表格式的狀態機圖并無本質不同。如上，狀態機是防止代碼失控的一劑良藥，制備完善的狀態機圖就是防止代碼失控的一種有效手段。前言前幾天和某某同學吃飯席間，他聊到每當要修改老項目中自己寫的代碼時就痛苦不堪，問我是不是也有同感。我覺得這應該是不少程序猿的心聲，之所以會這樣，大致有兩個主因：項目的整體設計很糟糕，只管往上堆砌各種功能、補...

cucumber 2019-07-30 17:19 評論0 收藏0
前端面試 - 收藏集 - 掘金

摘要：一基礎接口的意義百度規范擴展回調抽象類的意義我的前端面試經歷百度前端掘金博主就讀于電子科技大學，大三狗一枚面試是個漫長的過程，從海投到收獲電話面試，一面二面三面，一個步驟出錯那么后面就宣告終結。一道常被人輕視的前端 JS 面試題 - 前端 - 掘金目錄前言第一問第二問變量聲明提升函數表達式第三問第四問第五問第六問構造函數的返回值第七問最后前言年前剛剛離職了，分享下我曾經出過的一道...

lpjustdoit 2019-08-22 11:03 評論0 收藏0
有關form表單常被問到的知識點

摘要：限制表單的數據集的值必須為字符而支持整個字符集通用字符集。因此對于提交時，傳輸數據就會受到長度的限制。但實際各個服務器會規定對提交數據大小進行限制，都有各自的配置。這一般用于識別該用戶是否擁有合法的操作權限，提高了數據的安全性。這里排版可能不是太好，詳情看我的簡書 form表單有什么作用？表單的作用是搜集用戶的輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與web服務器的交互。...

kohoh_ 2019-08-01 16:50 評論0 收藏0