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