摘要:數組的原型上有一個方法叫做給不同的參數組合會返回不同的結果,由于組合非常多,這里研究一下不同組合的結果并基于原型鏈對該方法進行仿寫考慮情況為負數,為負數,超出有效長度了,非有效數字源碼如下不想看源碼的請直接看最下面的結果處理沒有參數的情況處
數組的原型上有一個方法叫做slice,給不同的參數組合會返回不同的結果,由于組合非常多,這里研究一下不同組合的結果并基于原型鏈對該方法進行仿寫
考慮情況:
slice(a,b) slice(a) slice(undefined,b) slice()
a=b,a為負數(0),b為負數(0),b超出有效長度了,a,b非有效數字
源碼如下: 不想看源碼的請直接看最下面的結果...
Array.prototype.mySlice = function (a, b) { var newArr = []; //處理沒有參數的情況 if (a === undefined && b === undefined) { return this } //處理只有一個參數,或者是第二個參數大于數組長度的情況 if (b === undefined || b > this.length) { b = this.length } if (a === undefined) { a = 0 } //處理參數不是數字的情況(上面代碼已經將undefined參數轉化為非undefined參數并且保證參數為兩個了) if (typeof a !== "number" || typeof b !== "number" ) { console.log("參數必須是數字") } //處理第一個參數為負數以及第一個參數大與第二個參數以及第二個參數是負數的情況的情況 if (b < 0) { b = this.length + b } if (a < 0) { a = this.length + a } //先將a,b恢復成正數再比較 if (a >= b || b === 0) { return [] } //正常 slice(a,b) for (var i = a; i < b; i++) { newArr.push(this[i]) } return newArr }
考慮到驗證正確性,增加一個驗證函數
function check(testArr, n, m) { console.log(`[${testArr}].slice(${n},${m})--->[${testArr.slice(n, m)}]`, testArr.slice(n, m).toString() === testArr.mySlice(n, m).toString()); } check([1, 2, 3, 4, 5], 1, 3); check([1, 2, 3, 4, 5], 1); check([1, 2, 3, 4, 5], undefined, 3); check([1, 2, 3, 4, 5], 1, 7); check([1, 2, 3, 4, 5]); check([1, 2, 3, 4, 5], -1, 3); check([1, 2, 3, 4, 5], -3, 3); check([1, 2, 3, 4, 5], 1, 0); check([1, 2, 3, 4, 5], 1, -1); check([1, 2, 3, 4, 5], 1, -2); check([1, 2, 3, 4, 5], 1, -3); check([1, 2, 3, 4, 5], 3, 1);
結果如下:
比較常見的應用:
數組的復制
arr.slice()
類數組轉化為數組(dom類數組不兼容IE6,7,可以用ES6中arr.from()替換)
Array.prototype.slice(類數組)
子數組的獲取
3.1 正常的自數組獲取
arr.slice(m,n) (03.2 模擬多次pop() shift()
比如n次pop arr = arr.slice(undefined,-n) 比如n次shift arr = arr.slice(n)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96391.html
摘要:引言上一節介紹了高階函數的定義,并結合實例說明了使用高階函數和不使用高階函數的情況。我們期望函數輸出,但是實際上調用柯里化函數時,所以調用時就已經執行并輸出了,而不是理想中的返回閉包函數,所以后續調用將會報錯。引言 上一節介紹了高階函數的定義,并結合實例說明了使用高階函數和不使用高階函數的情況。后面幾部分將結合實際應用場景介紹高階函數的應用,本節先來聊聊函數柯里化,通過介紹其定義、比較常見的...
摘要:對基本包裝類型的實例調用會返回,而且所有基本包裝類型的對象都會被轉換為布爾值。構造函數也會像工廠方法一樣,根據傳入值的類型返回相應基本包裝類型的實例。要注意的是,使用調用基本包裝類型的構造函數,與直接調用同名的轉型函數是不一樣的。 為了便于操作基本類型值,JavaScript 還提供了3個特殊的引用類型:Boolean、Number 和 String。實際上,每當讀取一個基本類型值的時...
摘要:實際上,每當讀取一個基本類型值時,后臺就會創建一個對應的基本包裝類型的對象。參數表示數值的所有數字的位數不包括指數部分。原因與顯示創建對象一樣類型重寫了,都返回對象表示的基本字符串值。轉換為針對地區的小寫方式。 讀《javasrcipt 高級程序設計》筆記。ECMAScript提供了3種特殊的引用類型:Boolean,Number,String。實際上,每當讀取一個基本類型值時,后臺就...
摘要:目的相信在網上都有很多的的介紹,這里就應用場景舉例說明前提了解和一句話概括用別人的方法,完成自己的功能。總結介紹了和的用法正文部分根據需求列舉的應用場景注意事項優化方案 目的 相信在網上都有很多的Array的api介紹 , 這里就應用場景舉例說明 前提 了解apply和call 一句話概括:用別人的方法,完成自己的功能。 function Student(na...
摘要:基礎布局的中主要為部分,分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后,提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣,在這篇文章中,我將繼續從一種常見的功能——表格入手,展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比,說明各自的適用場景,也為vue2.0版本中即將刪除的部...
閱讀 908·2023-04-25 18:51
閱讀 1863·2021-09-09 11:39
閱讀 3276·2019-08-30 15:53
閱讀 2090·2019-08-30 13:03
閱讀 1304·2019-08-29 16:17
閱讀 574·2019-08-29 11:33
閱讀 1878·2019-08-26 14:00
閱讀 2118·2019-08-26 13:41