簡(jiǎn)單了解vue.js數(shù)組的常用操作
數(shù)組的相關(guān)方法如下
1,鎖定數(shù)組的長(zhǎng)度(只讀模式)[ Array.join() ]
var a = [1,2,3] //定義一個(gè)數(shù)組<br> Object.defineProperty(a,"length",{ writable:false }) //將a數(shù)組的長(zhǎng)度屬性設(shè)為只讀<br> a.length = 0 //將a的長(zhǎng)度改為0<br> console.log(a.length); //打印a數(shù)組的長(zhǎng)度,還是3
2、將數(shù)組合并成字符串(返回字符串)[ Array.join() ]
var a = [1,2,3]; var b = a.join(""); console.log(a); //[1, 2, 3],原數(shù)組不改變 console.log(b); //"123",變成字符串
3、返回逆序數(shù)組(倒敘排列數(shù)組)[ Array..reverse() ]
var a = [1,2,3]; a.reverse(); console.log(a); //直接改變a數(shù)組的值 返回的是[3,2,1]
4、Array.sort()方法,返回排序后的數(shù)組。如果數(shù)組包含undefined,會(huì)被排到數(shù)組的尾部。如果不帶參數(shù)的調(diào)用sort(),數(shù)組元素以字母表順序排序。
從大到小排列 var a = [2,33,1111,444]; a.sort() console.log(a); //返回的結(jié)果是[1111, 2, 33, 444] 從小到大排列 var a = [2,33,1111,444]; a.sort(function (a,b) { return a-b }) console.log(a); //[2, 33, 444, 1111]
5、Array.concat(),創(chuàng)建并返回一個(gè)新數(shù)組
var a = [1,2,3]; var b = a.concat(4,5); var c = a.concat([4,5]); console.log(a); //返回的還是[1,2,3] console.log(b); //返回[1,2,3,4,5] console.log(c); //返回[1,2,3,4,5] // 復(fù)制數(shù)組 var a = [1,2,3]; var b = a.concat(); console.log(a); //返回[1,2,3] console.log(b); //返回[1,2,3]
6、Array.slice()方法,返回指定數(shù)組的片段或者子數(shù)組。不會(huì)改變?cè)瓟?shù)組
var a = [1,2,3,4,5];<br> a.slice(0,3); //返回[1,2,3] 第一個(gè)參數(shù)是截取開(kāi)始的位置(包括),第二個(gè)參數(shù)是截取結(jié)束的位置(不包括) a.slice(3); //返回[4,5] a.slice(1,-1); //返回[2,3,4] 負(fù)數(shù)表示倒數(shù) console.log(a); //返回[1,2,3,4,5]
7、Array.splice()方法,用來(lái)刪除或插入元素,會(huì)修改原數(shù)組!
數(shù)組的起始位置為0 var a = [1,2,3,4,5,6,7,8]; var b = a.splice(1,2); //第一個(gè)參數(shù)是截取的起始位置(包括),第二個(gè)參數(shù)是截取的個(gè)數(shù),之后的參數(shù)就是添加在元數(shù)組的新值 console.log(a); //返回[1, 4, 5, 6, 7, 8] console.log(b); //返回[2, 3]
可以用來(lái)解決在數(shù)組起始部位加入數(shù)據(jù)
this.noticeMessageList.splice(0, 0, { fromUser: 'zhangq1', noticeMessage: '此處添加message'})
8、push()方法與pop()方法
push()方法在數(shù)組的尾部添加一個(gè)或者多個(gè)元素,并返回?cái)?shù)組的新長(zhǎng)度。注意的是,改變的是原數(shù)組的值,返回的是新數(shù)組的長(zhǎng)度。
pop()方法刪除數(shù)組的最后一個(gè)元素,并返回它的刪除值。也是改變?cè)瓟?shù)組,返回的是刪除的值。
9、unshift()方法與shift()方法
unshift()方法類似于push()不同的是,他是在數(shù)組頭部添加,其他都一樣
shift()方法則類比pop()方法。
10、toString()和toLocaleString()
toString()方法將每個(gè)元素轉(zhuǎn)化為字符串,類似于不傳參的join()方法。
toLocaleString()方法是toString()的本地化版本。
11、forEach()方法,從頭至尾遍歷數(shù)組,為每個(gè)元素調(diào)用指定的函數(shù)。
var a = [1,2,3,4,5]; var sum = 0; a.forEach(function (value) { sum += value }) console.log(sum); //sum = 15
12、map()方法
和forEach()類似,調(diào)用數(shù)組的每個(gè)元素傳遞給指定函數(shù),并返回一個(gè)數(shù)組,所以它和forEach()的區(qū)別在于,有一個(gè)返回值。不修改原數(shù)組,返回的數(shù)組長(zhǎng)度和原數(shù)組相同
var a = [1,2,3,4,5]; var b = a.map(function (value) { return value+1 }) console.log(b); //返回[2,3,4,5,6]
13、filter()方法,返回的是調(diào)用數(shù)組的一個(gè)子集
var a = [1,2,3,4,5]; var b = a.filter(function (value) { return value > 3 }) console.log(b); //返回[4,5] 注意:如果使用map()方法,返回的是[false, false, false, true, true]
filter()會(huì)跳過(guò)稀疏數(shù)組中缺少的元素,他的返回?cái)?shù)組總是稠密的。所以可以用一下方法來(lái)壓縮稀疏數(shù)組的空缺。
var a = [1,2,,,5]; var b = a.filter(function (value) { return true }) console.log(b); //返回[1,2,5]
14、every()和some()
every()方法是只有數(shù)組中所以元素都滿足某個(gè)條件才會(huì)返回true;some()方法是只要有滿足條件的值,就返回true。
以every()方法為例
var a = [1,2,3,4,5]; a.every(function (value) { return value < 10 }) //true a.every(function (value) { return value % 2 === 0 }) //false
15、indexOf()和lastIndexOf()
這兩個(gè)方法都是用來(lái)搜索整個(gè)數(shù)組中具有給定值的元素,返回找到的第一個(gè)元素的索引,如果沒(méi)找到,則返回-1。
區(qū)別在于indexOf()從頭至尾搜索,而后者則是反向搜索。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10vue實(shí)現(xiàn)圖片拖拽及鼠標(biāo)滾輪放大縮小的示例代碼
本文主要給大家介紹如何vue實(shí)現(xiàn)圖片拖拽及鼠標(biāo)滾輪放大縮小,文中有詳細(xì)的代碼供大家參考,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08Vue2安裝使用MonacoEditor方式(自定義語(yǔ)法,自定義高亮,自定義提示)
這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語(yǔ)法,自定義高亮,自定義提示),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vue使用vux-ui自定義表單驗(yàn)證遇到的問(wèn)題及解決方法
這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問(wèn)題及解決方法,需要的朋友可以參考下2018-05-05解決vue中使用history.replaceState?更改url?vue?router?無(wú)法感知的問(wèn)題
這篇文章主要介紹了vue中使用history.replaceState?更改url?vue?router?無(wú)法感知的問(wèn)題,本文給大家分享修復(fù)這個(gè)問(wèn)題的方法,需要的朋友可以參考下2022-09-09