ES5 數(shù)組拓展&&JSON

分別舉例說(shuō)明數(shù)組方法push、pop、shift、unshift、join、splice、sort、join、reverse、concat的作用?

var arr = [1, 2, 3, 4, 5, "cat"] //定義一個(gè)數(shù)組
//push
arr.push(6);//數(shù)組最后添加一個(gè)元素6
console.log(arr);//[1, 2, 3, 4, 5, "cat", 6]

//pop
console.log(arr.pop());//把數(shù)組的最后一個(gè)元素取出來(lái),返回這個(gè)元素6
console.log(arr);//[1, 2, 3, 4, 5, "cat"]

//shift
console.log(arr.shift());//1 把數(shù)組的第一個(gè)元素取出來(lái),返回這個(gè)元素

//unshift
arr.unshift("dog");//向數(shù)組頭部添加一個(gè)元素'dog'
console.log(arr);//["dog", 2, 3, 4, 5, "cat"]

//join
console.log(arr.join("-"));
//"dog-2-3-4-5-cat" 
//join(char)把數(shù)組元素(對(duì)象調(diào)用其toString()方法)使用參數(shù)作為連接符連接成一字符串,不會(huì)修改原數(shù)組內(nèi)容
splice

用于一次性解決數(shù)組添加、刪除(這兩種方法一結(jié)合就可以達(dá)到替換效果),方法有三個(gè)參數(shù)

  1. 開始索引
  2. 刪除元素的位移
  3. 插入的新元素,當(dāng)然也可以寫多個(gè)

splice方法返回一個(gè)由刪除元素組成的新數(shù)組,沒有刪除則返回空數(shù)組

arr = ["dog", 2, 3, 4, 5, "cat"]
console.log(arr.splice(1, 3));//[2, 3, 4] 刪除索引1到3的值并返回
console.log(arr);//["dog", 5, "cat"] 刪除后的數(shù)組
arr.splice(1, 0, 8, 9, 100, "tiger");
/*第二個(gè)參數(shù),也就是刪除動(dòng)作執(zhí)行的次數(shù)設(shè)為0,第三個(gè)參數(shù)及以后填寫要插入內(nèi)容就splice就能執(zhí)行插入操作。
而如果第二個(gè)參數(shù)不為0則變成了先在該位置刪除再插入,也就是替換效果*/
console.log(arr);//["dog", 8, 9, 100, "tiger", 5, "cat"]
sort

sort方法用于對(duì)數(shù)組進(jìn)行排序,當(dāng)沒有參數(shù)的時(shí)候會(huì)按字母表升序排序,如果含有undefined會(huì)被排到最后面,對(duì)象元素則會(huì)調(diào)用其toString方法,如果想按照自己定義方式排序,可以傳一個(gè)排序方法進(jìn)去,很典型的策略模式,同樣sort會(huì)改變?cè)瓟?shù)組。

arr = ["dog", 2, 3, 4, 5, "cat"]
arr.sort();
console.log(arr);//[2, 3, 4, 5, "cat", "dog"]

但是

var a=[7,8,9,10,11]
a.sort()
console.log(a) //[10, 11, 7, 8, 9]

調(diào)用toString,按照字母表排序,7就比10大了,這時(shí)候我們需要傳入自定義排序函數(shù)。
如果想按照數(shù)值排序,可

 var a = [7,8,9,10,11]

    a.sort(function(v1,v2){
        return v1-v2
    })
    console.log(a) //[7, 8, 9, 10, 11]

    var users = [
        {
            name: 'aaa',
            age: 21
        },
        {
            name: 'baa',
            age: 18
        },
        {
            name: 'abc',
            age: 24
        }
    ]
    // 按age 從小到大排序

    var sortByAge = users.sort(function(v1, v2){
        return  v1.age > v2.age
    })

  // 按name從大到小排序
    var sortByName = users.sort(function(v1, v2){
        return  v1.name > v2.name
    })
reverse

方法用于將數(shù)組逆序,與之前不同的是它會(huì)修改原數(shù)組

var a = [1,2,3,4,5];
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]
concat

concat方法用于拼接數(shù)組,a.concat(b)返回一個(gè)a和b共同組成的新數(shù)組,同樣不會(huì)修改任何一個(gè)原始數(shù)組,也不會(huì)遞歸連接數(shù)組內(nèi)部數(shù)組

var a = [1,2,3,4,5];
var b = [6,7,8,9];
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a); //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]

分別舉例說(shuō)明ES5數(shù)組方法 indexOf、forEach、map、every、some、filter、reduce的用法?

.indexOf(element) / .lastIndexOf(element)

這兩個(gè)方法用于查找數(shù)組內(nèi)指定元素位置,查找到第一個(gè)后返回其索引,沒有查找到返回-1,indexOf從頭至尾搜索,lastIndexOf反向搜索。

var a = [1,2,3,3,2,1]
console.log(a.indexOf(2)) //1
console.log(a.lastIndexOf(2)) //4

.forEach(element, index, array)

遍歷數(shù)組,參數(shù)為一個(gè)回調(diào)函數(shù),回調(diào)函數(shù)有三個(gè)參數(shù):

  1. 當(dāng)前元素
  2. 當(dāng)前元素索引值
  3. 整個(gè)數(shù)組
var a = new Array(1,2,3,4,5,6);
a.forEach(function(e,i,array){
    array[i]= e + 1;
});
console.log(a); //[2, 3, 4, 5, 6, 7]

.map(function(element))

與forEach類似,遍歷數(shù)組,回調(diào)函數(shù)返回值組成一個(gè)新數(shù)組返回,新數(shù)組索引結(jié)構(gòu)和原數(shù)組一致,原數(shù)組不變

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

console.log(a.map(function(e){
  return e * e
}))  // [1, 4, 9, 16, 25, 36]

console.log(a) //[1, 2, 3, 4, 5, 6]

.every(function(element, index, array)) / .some(function(element, index, array))

這兩個(gè)函數(shù)類似于離散數(shù)學(xué)中的邏輯判定,回調(diào)函數(shù)返回一個(gè)布爾值

  1. every是所有函數(shù)的每個(gè)回調(diào)函數(shù)都返回true的時(shí)候才會(huì)返回true,當(dāng)遇到false的時(shí)候終止執(zhí)行,返回false
  2. some函數(shù)是“存在”有一個(gè)回調(diào)函數(shù)返回true的時(shí)候終止執(zhí)行并返回true,否則返回false
    在空數(shù)組上調(diào)用every返回true,some返回false
var a = [1, 2, 3, 4, 5, 6]

console.log(a.every(function(e, i, arr){
return e < 5
}))

console.log(a.some(function(e,i,arr){
  return e > 4
}))

.filter(function(element))

返回?cái)?shù)組的一個(gè)子集,回調(diào)函數(shù)用于邏輯判斷是否返回,返回true則把當(dāng)前元素加入到返回?cái)?shù)組中,false則不加
新數(shù)組只包含返回true的值,索引缺失的不包括,原數(shù)組保持不變

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

console.log(a.filter(function(e){
  return e % 2 == 0;
})) // [2, 4, 6]

console.log(a) //[1, 2, 3, 4, 5, 6]

.reduce(function(v1, v2), value) / .reduceRight(function(v1, v2), value)

遍歷數(shù)組,調(diào)用回調(diào)函數(shù),將數(shù)組元素組合成一個(gè)值,reduce從索引最小值開始,reduceRight反向,方法有兩個(gè)參數(shù)

  1. 回調(diào)函數(shù):把兩個(gè)值合為一個(gè),返回結(jié)果
  2. value,一個(gè)初始值,可選
var a = [1, 2, 3, 4, 5, 6]
var b = a.reduce(function(v1, v2){ return v1 + v2 }) 
console.log(a) // 21
var b = a.reduceRight(function(v1, v2){ return v1 - v2 }, 100)
console.log(b) // 79
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ES5 數(shù)組拓展 ES5為Array對(duì)象做了大幅拓展 Array.isArray(obj) 這是Array對(duì)象的一...
    南山碼農(nóng)閱讀 284評(píng)論 0 0
  • Array.isArray(obj) 這是Array對(duì)象的一個(gè)靜態(tài)函數(shù),用來(lái)判斷一個(gè)對(duì)象是不是數(shù)組 .indexO...
    左冬的博客閱讀 496評(píng)論 0 4
  • Array.isArray(obj)是不是數(shù)組,判斷! 這是一個(gè)Array對(duì)象的一個(gè)靜態(tài)函數(shù),判斷一個(gè)對(duì)象是不是數(shù)...
    流著萬(wàn)條永遠(yuǎn)的河閱讀 267評(píng)論 0 0
  • Array.isArray(obj) 判斷一個(gè)對(duì)象是不是數(shù)組 .indexOf(element)/.lastInd...
    王難道閱讀 287評(píng)論 0 0
  • 如果能去歷史上的任何時(shí)間,你會(huì)選擇去什么時(shí)候呢? 最近被問(wèn)到這個(gè)問(wèn)題,我有一點(diǎn)懵。因?yàn)閺膩?lái)沒想過(guò)要回去改變自己的過(guò)...
    魚鮮支閱讀 1,102評(píng)論 16 27

友情鏈接更多精彩內(nèi)容