摘要:如果該函數(shù)的返回值大于,表示第一個(gè)成員排在第二個(gè)成員后面其他情況下,都是第一個(gè)元素排在第二個(gè)元素前面。第三次執(zhí)行,為上一輪的返回值,為第四個(gè)成員。第四次執(zhí)行,為上一輪返回值,為第五個(gè)成員。
JS中ArrayAPI學(xué)習(xí)筆記
記博客,時(shí)常回顧.尤其是面試之先回顧
阮一峰標(biāo)準(zhǔn)庫Array對象
棧,堆,棧里面存一個(gè)window/global對象的地址,指向?qū)?nèi)存,堆內(nèi)存存一個(gè)hash表.里面有標(biāo)準(zhǔn)庫.
標(biāo)準(zhǔn)庫里有Object()函數(shù),String()函數(shù),Number(),Boolean().這篇文章記錄Array(),Function()
Object(1)和Object("sss")分別返回Number對象和String對象,同理,Object(true)返回Boolean對象
Object()和new Object()分別返回一個(gè)空對象.
除了Object()用不用new都是對象之外,其他的標(biāo)準(zhǔn)庫函數(shù)跟Object不一樣
直接用String()函數(shù)返回的是一個(gè)字符串,而new String("1")則會返回一個(gè)對象.
其他標(biāo)準(zhǔn)庫函數(shù)同理
NaN也是數(shù)
Boolean()
五個(gè)false值
0 ,"" ,NaN ,undefined ,Null
Boolean({})//ture Boolean(" ")//ture,空格也算ture2 新api Array
JS的七種數(shù)據(jù)結(jié)構(gòu)
number,string,boolean,object,undefined,null,symbol
symbol為新加的
學(xué)習(xí)地址:MDNArray或阮一峰標(biāo)準(zhǔn)庫Array對象
let f1 = ["a","b"]; let f2 = new Array("a","b");
兩種方法等價(jià)
3 聲明數(shù)組加不加new 3.1 JS坑一:var a = Array(3)如果直接
var a = Array(3);//參數(shù)為數(shù)組長度
那么a就是一個(gè)長度為3,但里面每一個(gè)內(nèi)容都是undefined的數(shù)組
且a[0]a[1]a[2]都是不存在的,下面通過內(nèi)存圖來看看為什么會這樣
這個(gè)a里面在棧中存了一個(gè)地址,比如說是99,指向堆里的一塊內(nèi)存空間,但是這個(gè)堆里只存了一個(gè)length:3的鍵值對和__proto__指向Array.Prototype,里面有一些shift`push`的函數(shù).
所以才undefined.因?yàn)闆]有存下來
如圖
var 聲明一個(gè)變量的時(shí)候是一個(gè)語句,語句返回的值是undefined,但表達(dá)式返回的值隨著表達(dá)式變化
3.2 var a = Array(3,3)兩個(gè)參數(shù)的時(shí)候,里面的參數(shù)都是數(shù)組內(nèi)部的值
總結(jié),加不加new都一樣
原始類型Number,String,Boolean加不加new 不 一樣,復(fù)合類型object,array.function加不加new一樣
比如new Function()和不加new的Function()
function是關(guān)鍵字,和var if let這些一樣,是用來聲明一個(gè)函數(shù)的關(guān)鍵字
而Function是window的全局對象
window.Function
只不過大寫的Function也可以創(chuàng)建一個(gè)函數(shù)
詳細(xì)看阮一峰的三種聲明函數(shù)的方法
用Array方法構(gòu)造出來的那個(gè)對象,就是數(shù)組
為什么沒有聲明push的key,就可以用a.push呢,因?yàn)?b>a.__proto__連接到了一個(gè)共用對象,Array.prototype
原型鏈
Array有很多API怎么做到體積小,功能強(qiáng)大呢?原型鏈,共用屬性,共用方法,通過__proto__量過去就好了
var a = Array(1,1); a.__proto__ ===Array.prototype//true a.__proto__.__proto__===Object.prototype//true Array.prototype.__proto__=== Object.prototype//true
__proto__指向的不一樣,共用屬性不一樣,里面所擁有的API不一樣.區(qū)別就在于原型不一樣.
數(shù)組和對象都是對象,只不過是原型鏈不同的對象.
length還是3,但是卻有新加入的屬性,就像對象一樣.
第一種方式,把數(shù)組當(dāng)作真數(shù)組,故意去訪問數(shù)組的下標(biāo)
第二種,打印出所有的的key.
總結(jié):數(shù)組只不過是擁有特殊原型鏈的對象.
for in遍歷 只關(guān)心里面有所有的鍵值對,for i循環(huán)只關(guān)心循環(huán)的標(biāo)序.
__proto__中沒有Array.prototype,就是偽數(shù)組.
例如:只關(guān)心他的下標(biāo),可以完全用hash鍵值對來表示.
JS里面只有一個(gè)偽數(shù)組arguments
arguments代表函數(shù)里面所傳入的所有的參數(shù),是偽數(shù)組.
因?yàn)闆]必要在偽數(shù)組里push和pop東西,所以沒有那些Array.prototype里面的方法.
a.forEach()需要接受一個(gè)函數(shù),這個(gè)函數(shù)必須接受兩個(gè)參數(shù).
所以forEach實(shí)際上類似于下面的實(shí)現(xiàn)方法
數(shù)組的api中,a.forEach之所以沒有把a(bǔ)rray傳進(jìn)去,是因?yàn)橛昧藅his指代當(dāng)前的對象.用this就可以找到那個(gè)調(diào)用它的數(shù)組.所以forEach原理:
forEach中函數(shù)傳的第三個(gè)參數(shù)是他自己
內(nèi)置快排.
阮一峰標(biāo)準(zhǔn)庫Array.sort()
排序后原數(shù)組也會改變,只有sort改變了原值
sort方法不是按照大小排序,而是按照字典順序。也就是說,數(shù)值會被先轉(zhuǎn)成字符串,再按照字典順序進(jìn)行比較,所以101排在11的前面。如果想讓sort方法按照自定義方式排序,可以傳入一個(gè)函數(shù)作為參數(shù)。
[10111, 1101, 111].sort(function (a, b) { return a - b; }) // [111, 1101, 10111]
上面代碼中,sort的參數(shù)函數(shù)本身接受兩個(gè)參數(shù),表示進(jìn)行比較的兩個(gè)數(shù)組成員。如果該函數(shù)的返回值大于0,表示第一個(gè)成員排在第二個(gè)成員后面;其他情況下,都是第一個(gè)元素排在第二個(gè)元素前面。
[ { name: "張三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function (o1, o2) { return o1.age - o2.age; }) // [ // { name: "李四", age: 24 }, // { name: "王五", age: 28 }, // { name: "張三", age: 30 } // ]
里面的參數(shù)是兩個(gè)比較的數(shù)組成員
阮一峰
一般用法,連接數(shù)組
數(shù)組中a + b是a.toString() + b.toString()
特殊用法,復(fù)制數(shù)組
內(nèi)容一樣,地址不一樣
map是映射的意思
map和forEach一樣,可以遍歷數(shù)組,但是與forEach不同的是可以有返回值,可以將傳遞進(jìn)去的函數(shù)的返回值在收集起來,返回一個(gè)新數(shù)組
下面是箭頭函數(shù),參數(shù)=>返回值
也可以返回對象
所有的value都會一一映射
filter是過濾的意思
與map的區(qū)別,過濾.不是一一映射了
鏈?zhǔn)讲僮?br>
總結(jié):forEach,map,filter都可以傳入一個(gè)函數(shù),這個(gè)函數(shù)都可以接受三個(gè)參數(shù),分別是值,鍵,數(shù)組本身,forEach沒有返回值,
map,filter分別返回一個(gè)新數(shù)組,map為映射返回,filter為過濾返回
[1, 2, 3].map(function(elem, index, arr) { return elem * index; }); // [0, 2, 6]9.6 reduce 9.6.1 mdn
reduce() 方法對累加器和數(shù)組中的每個(gè)元素(從左到右)應(yīng)用一個(gè)函數(shù),將其減少為單個(gè)值。----MDN9.6.2 阮一峰教學(xué)
MDN:Array.prototype.reduce()
阮一峰reduce()
下面是阮一峰的教學(xué):
reduce方法和reduceRight方法依次處理數(shù)組的每個(gè)成員,最終累計(jì)為一個(gè)值。它們的差別是,reduce是從左到右處理(從第一個(gè)成員到最后一個(gè)成員),reduceRight則是從右到左(從最后一個(gè)成員到第一個(gè)成員),其他完全一樣。
[1, 2, 3, 4, 5].reduce(function (a, b) { console.log(a, b); return a + b; }) // 1 2 // 3 3 // 6 4 // 10 5 //最后結(jié)果:15
上面代碼中,reduce方法求出數(shù)組所有成員的和。第一次執(zhí)行,a是數(shù)組的第一個(gè)成員1,b是數(shù)組的第二個(gè)成員2。第二次執(zhí)行,a為上一輪的返回值3,b為第三個(gè)成員3。第三次執(zhí)行,a為上一輪的返回值6,b為第四個(gè)成員4。第四次執(zhí)行,a為上一輪返回值10,b為第五個(gè)成員5。至此所有成員遍歷完成,整個(gè)方法的返回值就是最后一輪的返回值15。
reduce方法和reduceRight方法的第一個(gè)參數(shù)都是一個(gè)函數(shù)。該函數(shù)接受以下四個(gè)參數(shù)。
累積變量,默認(rèn)為數(shù)組的第一個(gè)成員
當(dāng)前變量,默認(rèn)為數(shù)組的第二個(gè)成員
當(dāng)前位置(從0開始)
原數(shù)組
這四個(gè)參數(shù)之中,只有前兩個(gè)是必須的,后兩個(gè)則是可選的。
如果要對累積變量指定初值,可以把它放在reduce方法和reduceRight方法的第二個(gè)參數(shù)。
[1, 2, 3, 4, 5].reduce(function (a, b) { return a + b; }, 10); // 25
上面代碼指定參數(shù)a的初值為10,所以數(shù)組從10開始累加,最終結(jié)果為25。注意,這時(shí)b是從數(shù)組的第一個(gè)成員開始遍歷。
上面的第二個(gè)參數(shù)相當(dāng)于設(shè)定了默認(rèn)值,處理空數(shù)組時(shí)尤其有用。
function add(prev, cur) { return prev + cur; } [].reduce(add) // TypeError: Reduce of empty array with no initial value [].reduce(add, 1) // 1
上面代碼中,由于空數(shù)組取不到初始值,reduce方法會報(bào)錯(cuò)。這時(shí),加上第二個(gè)參數(shù),就能保證總是會返回一個(gè)值。
由于這兩個(gè)方法會遍歷數(shù)組,所以實(shí)際上還可以用來做一些遍歷相關(guān)的操作。比如,找出字符長度最長的數(shù)組成員。
function findLongest(entries) { return entries.reduce(function (longest, entry) { return entry.length > longest.length ? entry : longest; }, ""); } findLongest(["aaa", "bb", "c"]) // "aaa"
上面代碼中,reduce的參數(shù)函數(shù)會將字符長度較長的那個(gè)數(shù)組成員,作為累積值。這導(dǎo)致遍歷所有成員之后,累積值就是字符長度最長的那個(gè)成員。
9.6.3 高級用法reduce中函數(shù)的第一個(gè)參數(shù)表示的是累計(jì)值,第二個(gè)參數(shù)是每次遍歷數(shù)組時(shí)的每一個(gè)當(dāng)前值.return的是下一次開始循環(huán)的累積值.
所以
reverse方法用于顛倒排列數(shù)組元素,返回改變后的數(shù)組。注意,該方法將改變原數(shù)組。
var a = ["a", "b", "c"]; a.reverse() // ["c", "b", "a"] a // ["c", "b", "a"]map(),filter(),reduce()題目
計(jì)算所有偶數(shù)的平方,并將其返回成一個(gè)新數(shù)組
var a = [1,2,3,4,5,6,7,8,9] a.filter((x)=>(x%2===0)).map((x)=>(x*x))//(4)?[4, 16, 36, 64]
filter()和map()里面?zhèn)鬟f函數(shù)的參數(shù),第一個(gè)為value,第二個(gè)為key.
計(jì)算所有奇數(shù)的和
var a = [1,2,3,4,5,6,7,8,9] a.reduce((sum,a)=>{if(a%2===1){return sum+a}else{return sum}},0)//25 1+3+5+7+9//25 ![CgsCNT.png](https://s1.ax1x.com/2018/05/20/CgsCNT.png)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95271.html
摘要:有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂,之后會進(jìn)行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用,讓我能夠在各個(gè)頁面間切換,將頁面搭建了起來。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。 注:本...
摘要:注本文首發(fā)于個(gè)人博客學(xué)習(xí)筆記。最近看了下變量,又名自定義屬性,跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來設(shè)置變量名,并使用特定的來訪問。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡單,如下,聲明了一個(gè)名叫的變量。 注:本文首發(fā)于個(gè)人博客 《CSS Variables學(xué)習(xí)筆記》。 最近看了下CSS Variables(CSS變量,又名CSS自定義屬性),跟大家分享一下我的學(xué)習(xí)筆記。 ...
摘要:新搭建的個(gè)人博客,本文地址學(xué)習(xí)筆記環(huán)境搭建本文的書寫環(huán)境為,之后會補(bǔ)充下的差異創(chuàng)建學(xué)習(xí)目錄初始化項(xiàng)目根據(jù)相關(guān)提示完善信息,入口文件安裝相關(guān)包,并且使用也就是支持,需要包,因?yàn)槲抑白鰝€(gè)一些相關(guān)項(xiàng)目,所以部分包已經(jīng)全局安裝,比如等等,大家 新搭建的個(gè)人博客,本文地址:React學(xué)習(xí)筆記1:環(huán)境搭建 本文的書寫環(huán)境為mac,之后會補(bǔ)充windows下的差異 1、創(chuàng)建學(xué)習(xí)目錄 mkdir l...
摘要:瀏覽器在解析文檔流的時(shí)候,如果遇到一個(gè)標(biāo)簽,則會等到這個(gè)代碼塊都加載完之后再對代碼進(jìn)行預(yù)編譯,然后在執(zhí)行。執(zhí)行完畢后,瀏覽器會繼續(xù)解析西門的文檔流,同時(shí)也準(zhǔn)備好處理下一個(gè)代碼塊。同時(shí),也避開了文檔流對執(zhí)行的限制。 本文章記錄本人在學(xué)習(xí) JavaScript 中看書理解到的一些東西,加深記憶和并且整理記錄下來,方便之后的復(fù)習(xí)。 在 html 文檔中的執(zhí)行順序 js代碼執(zhí)行順序...
摘要:前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作,下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章,都是以解讀官方文檔為主,而且是針對單頁面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁面應(yīng)用,該如何去通過打包。 前言 在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作,下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
閱讀 729·2021-11-24 10:19
閱讀 1106·2021-09-13 10:23
閱讀 3428·2021-09-06 15:15
閱讀 1777·2019-08-30 14:09
閱讀 1683·2019-08-30 11:15
閱讀 1837·2019-08-29 18:44
閱讀 934·2019-08-29 16:34
閱讀 2456·2019-08-29 12:46