JS 常用字符串數組遍歷函數方法整理

目錄

一、concat()

二、join()

三、push()

四、pop()

五、shift()

六、unshift()

七、slice()

九、substring() 和 substr()

十、sort 排序

十一、reverse()

十二、indexOf 和 lastIndexOf

十三、every

十四、some

十五、filter

十六、map

ES6新增新操作數組的方法

1、find():

2、findIndex():

3、fill():

4、copyWithin():

5、from

6、of

7、entries()

8、values()

9、keys()

10、includes



一、concat()

concat() 方法用于連接兩個或多個數組。該方法不會改變現有的數組,僅會返回被連接數組的一個副本。

var arr1 = [1,2,3];var arr2 = [4,5];var arr3 = arr1.concat(arr2);console.log(arr1); //[1, 2, 3]console.log(arr3); //[1, 2, 3, 4, 5]

?

二、join()

join() 方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的,默認使用','號分割,不改變原數組。

var arr = [2,3,4];console.log(arr.join()); //2,3,4console.log(arr); //[2, 3, 4]

?

三、push()

push() 方法可向數組的末尾添加一個或多個元素,并返回新的長度。末尾添加,返回的是長度,會改變原數組。

var a = [2,3,4];var b = a.push(5);console.log(a); //[2,3,4,5]console.log(b); //4

push方法可以一次添加多個元素push(data1,data2....)

四、pop()

pop() 方法用于刪除并返回數組的最后一個元素。返回最后一個元素,會改變原數組。

var arr = [2,3,4];console.log(arr.pop()); //4console.log(arr); //[2,3]

?

五、shift()

shift() 方法用于把數組的第一個元素從其中刪除,并返回第一個元素的值。返回第一個元素,改變原數組。

var arr = [2,3,4];console.log(arr.shift()); //2console.log(arr); //[3,4]

?

六、unshift()

unshift() 方法可向數組的開頭添加一個或更多元素,并返回新的長度。返回新長度,改變原數組

var arr = [2,3,4,5];console.log(arr.unshift(3,6)); //6console.log(arr); //[3, 6, 2, 3, 4, 5]

tip:該方法可以不傳參數,不傳參數就是不增加元素。

七、slice()

返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。返回選定的元素,該方法不會修改原數組。

var arr = [2,3,4,5];console.log(arr.slice(1,3)); //[3,4]console.log(arr); //[2,3,4,5]

八、splice()

splice() 方法可刪除從 index 處開始的零個或多個元素,并且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數組。splice() 方法會直接對數組進行修改。

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

?

九、substring() 和 substr()

相同點:如果只是寫一個參數,兩者的作用都一樣:都是是截取字符串從當前下標以后直到字符串最后的字符串片段。

substr(startIndex);substring(startIndex);var str = '123456789';console.log(str.substr(2)); // "3456789"console.log(str.substring(2)) ;// "3456789"

?

不同點:第二個參數

substr(startIndex,lenth): 第二個參數是截取字符串的長度(從起始點截取某個長度的字符串);
substring(startIndex, endIndex): 第二個參數是截取字符串最終的下標 (截取2個位置之間的字符串,‘含頭不含尾')。

console.log("123456789".substr(2,5)); // "34567"console.log("123456789".substring(2,5)) ;// "345"

?

十、sort 排序

按照 Unicode code 位置排序,默認升序

var fruit = ['cherries', 'apples', 'bananas'];fruit.sort(); // ['apples', 'bananas', 'cherries']var scores = [1, 10, 21, 2];scores.sort(); // [1, 10, 2, 21]

?

十一、reverse()

reverse() 方法用于顛倒數組中元素的順序。返回的是顛倒后的數組,會改變原數組。

var arr = [2,3,4];console.log(arr.reverse()); //[4, 3, 2]console.log(arr); //[4, 3, 2]

?

十二、indexOf 和 lastIndexOf

都接受兩個參數:查找的值、查找起始位置
不存在,返回 -1 ;存在,返回位置。indexOf 是從前往后查找, lastIndexOf 是從后往前查找。
indexOf

var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1if (a.indexOf(7) === -1) {// element doesn't exist in array
}lastIndexOfvar numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

?

十三、every

對數組的每一項都運行給定的函數,每一項都返回 ture,則返回 true

function isBigEnough(element, index, array) {return element < 10;}[2, 5, 8, 3, 4].every(isBigEnough); // true

?

十四、some

對數組的每一項都運行給定的函數,任意一項都返回 ture,則返回 true

function compare(element, index, array) {return element > 10;}[2, 5, 8, 1, 4].some(compare); // false[12, 5, 8, 1, 4].some(compare); // true

?

十五、filter

對數組的每一項都運行給定的函數,返回 結果為 ture 的項組成的數組

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];var longWords = words.filter(function(word){return word.length > 6;});// Filtered array longWords is ["exuberant", "destruction", "present"]

?

十六、map

對數組的每一項都運行給定的函數,返回每次函數調用的結果組成一個新數組

var numbers = [1, 5, 10, 15];var doubles = numbers.map(function(x) {return x * 2;});// doubles is now [2, 10, 20, 30]// numbers is still [1, 5, 10, 15]十七、forEach 數組遍歷const items = ['item1', 'item2', 'item3'];const copy = [];items.forEach(function(item){copy.push(item)});

?

ES6新增新操作數組的方法

?

1、find():

傳入一個回調函數,找到數組中符合當前搜索規則的第一個元素,返回它,并且終止搜索。

const arr = [1, "2", 3, 3, "2"]console.log(arr.find(n => typeof n === "number")) // 1

?

2、findIndex():

傳入一個回調函數,找到數組中符合當前搜索規則的第一個元素,返回它的下標,終止搜索。

const arr = [1, "2", 3, 3, "2"]console.log(arr.findIndex(n => typeof n === "number")) // 0

?

3、fill():

用新元素替換掉數組內的元素,可以指定替換下標范圍。

	
arr.fill(value, start, end)

?

4、copyWithin():

選擇數組的某個下標,從該位置開始復制數組元素,默認從0開始復制。也可以指定要復制的元素范圍。

arr.copyWithin(target, start, end)const arr = [1, 2, 3, 4, 5]console.log(arr.copyWithin(3))// [1,2,3,1,2] 從下標為3的元素開始,復制數組,所以4, 5被替換成1, 2const arr1 = [1, 2, 3, 4, 5]console.log(arr1.copyWithin(3, 1))// [1,2,3,2,3] 從下標為3的元素開始,復制數組,指定復制的第一個元素下標為1,所以4, 5被替換成2, 3const arr2 = [1, 2, 3, 4, 5]console.log(arr2.copyWithin(3, 1, 2))// [1,2,3,2,5] 從下標為3的元素開始,復制數組,指定復制的第一個元素下標為1,結束位置為2,所以4被替換成2

?

5、from

將類似數組的對象(array-like object)和可遍歷(iterable)的對象轉為真正的數組

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]

?

6、of

用于將一組值,轉換為數組。這個方法的主要目的,是彌補數組構造函數 Array() 的不足。因為參數個數的不同,會導致 Array() 的行為有差異。

Array() // []Array(3) // [, , ,]Array(3, 11, 8) // [3, 11, 8]Array.of(7);? // [7]Array.of(1, 2, 3); // [1, 2, 3]Array(7);?? // [ , , , , , , ]Array(1, 2, 3); // [1, 2, 3]

?

7、entries()

返回迭代器:返回鍵值對

//數組
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {console.log(v)
}
// ['a', 'a'] ['b', 'b']

?

8、values()

返回迭代器:返回鍵值對的value

//數組
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {console.log(v)
}
//'a' 'b' 'c'//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {console.log(v)
}
// 'a' 'b' 'c'//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {console.log(v)
}
// 'a' 'b'

?

9、keys()

返回迭代器:返回鍵值對的key

//數組
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {console.log(v)
}
// 0 1 2//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {console.log(v)
}
// 'a' 'b' 'c'//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {console.log(v)
}// 'a' 'b'

10、includes

判斷數組中是否存在該元素,參數:查找的值、起始位置,可以替換 ES5 時代的 indexOf 判斷方式。indexOf 判斷元素是否為 NaN,會判斷錯誤。

var a = [1, 2, 3];a.includes(2); // truea.includes(4); // false

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247360.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247360.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247360.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

AttributeError: Can only use .str accessor with string values, which use np.object_ dtype in pandas

忘記網址了…… 問題&#xff1a; 分析思路與解決方法&#xff1a; 轉載于:https://www.cnblogs.com/bravesunforever/p/11247988.html

vue app掃PC端二維碼登錄

通過接口獲取二維碼唯一標識&#xff0c;例如&#xff1a;qrcodeId通過 qrcodejs2插件生成 二維碼&#xff08;二維碼內容就是 qrcodeId&#xff0c;具體根據APP 需要&#xff09;循環調用接口&#xff0c;查看掃碼狀態&#xff08;app是否掃碼確認登錄&#xff09; //下載插件…

第八章 方法

1. 概述 本章重點講述類型中的各種方法&#xff0c;包括實例構造器、類型構造器、操作符/類型轉換重載、擴展方法、分部方法。 2. 名詞解釋 ① 構造器&#xff1a;是允許將類型的實例初始化為良好狀態的一種特殊方法。 3. 主要內容 3.1 實例構造器和類(引用類型) ① 創建一個引…

Java生鮮電商平臺-促銷架構以及秒殺解決方案實戰

Java生鮮電商平臺-促銷架構以及秒殺解決方案實戰 背景:隨著這幾年的電商的大熱,我們經常看到一些商家為了促銷和快速收益,紛紛推出了秒殺活動.不管是日常的超市里面的促銷,明星演唱會門票售賣,還是春節訂閱火車票,等等我們都能看到秒殺活動的影子. 1. 構建秒殺活動架構 1.1 說明…

PHP---錯誤處理(error)

錯誤的級別 1. notice&#xff1a;提示2. warning&#xff1a;警告3. error&#xff1a;致命錯誤12345 注&#xff1a;notice和warning報錯后繼續執行&#xff0c;error報錯后停止 錯誤的提示方法 方法一&#xff1a;顯示在瀏覽器上 方法二&#xff1a;記錄在日志中執行 錯…

對url給后臺傳數據的時候特殊字符需要轉義

URL中的字符只能是ASCII字符&#xff0c;但是ASCII字符比較少&#xff0c;而URL則常常包含ASCII字符集以外的字符&#xff0c;如非英語字符&#xff0c;漢字&#xff0c;特殊符號等等&#xff0c;所以要對URL進行轉換。這個過程就叫做URL編碼&#xff0c;或者叫URL轉義&#xf…

PHP Cookie處理

Cookie 是什么&#xff1f; cookie是保存在客戶端的信息包&#xff08;一個文件&#xff09; cookie 常用于識別用戶。 cookie 是一種服務器留在用戶計算機上的小文件。每當同一臺計算機通過瀏覽器請求頁面時&#xff0c;這臺計算機將會發送 cookie。通過 PHP&#xff0c;您能…

python裝飾器補充

帶參裝飾器 msg """ 1.QQ 2.wechat """ avg input(驗證方式&#xff1a;)def auth(avg):def wrapper(f):def inner(*args,**kwargs):if avg QQ:user input(name)pwd input(password)if user alex and pwd 123456:f()else:print(輸入錯誤)…

PHP-連接數據庫

1.2 連接數據庫 通過PHP做MySQL的客戶端 1.2.1 開啟mysqli擴展 在php.ini中開啟mysqli擴展 extensionphp_mysqli.dll開啟擴展后重啟服務器&#xff0c;就可以使用mysqli_函數了&#xff0c;1.2.2 連接數據庫 創建news數據庫 -- 創建表 drop table if exists news; create …

python模塊初始與time、datetime及random

模塊初始與time、datetime及random 模塊初始 模塊的概念&#xff08;本質為一個py文件&#xff09; python模塊可以將代碼量較大的程序分割成多個有組織的、彼此獨立但又能互相交互的代碼片段&#xff0c;這些自我包含的有組織 的代碼段就是模塊&#xff0c;模塊在物理形式上表…

PHP-面向對象編程教程

1.2 面向對象介紹 1.2.1 介紹 面向對象是一個編程思想。編程思想有面向過程和面向對象 面向過程&#xff1a;編程思路集中的是過程上 面向對象&#xff1a;編程思路集中在參與的對象 以去飯館吃飯為例&#xff1a; ? 面向過程&#xff1a;點菜——做菜——上菜——吃飯—…

vue-property-decorator使用指南

在Vue中使用TypeScript時&#xff0c;非常好用的一個庫&#xff0c;使用裝飾器來簡化書寫。 一、安裝 npm i -S vue-property-decorator PropPropSyncProvideModelWatchInjectProvideEmitComponent (provided by vue-class-component)Mixins (the helper function named mix…

Java生鮮電商平臺-統一異常處理及架構實戰

Java生鮮電商平臺-統一異常處理及架構實戰 補充說明&#xff1a;本文講得比較細&#xff0c;所以篇幅較長。 請認真讀完&#xff0c;希望讀完后能對統一異常處理有一個清晰的認識。 背景 軟件開發過程中&#xff0c;不可避免的是需要處理各種異常&#xff0c;就我自己來說&…

VScode新建自定義模板快捷方式

VS新建vue文件的自定義模板 在使用vscode開發的時候&#xff0c;新建vue文件是不可或缺的&#xff0c;但是VSCode并沒有vue文件的初始化模板&#xff0c;這個需要自定義模板。 我們可以使用vscode的snippets在新建.vue 文件后輕松獲得一套模板。 具體步驟 打開VSCode -> …

ESLint Unary operator ‘++‘ used.

ESLint Unary operator used. 安裝了ESLint&#xff0c;用這個工具之后發現居然不會寫代碼了。好尷尬~ 感覺自己以前寫的JS都是假的... 沒有操作 increment(state) {state.count ; },for(let i 0; i < temp.length; i} {//... } 然后報了如下錯誤 Unary operator u…

sencha touch筆記(6)——路由控制(1)

做項目的時候在界面的跳轉上遇到了挺大的問題&#xff0c;本來跳轉不想通過路由來控制的&#xff0c;沒辦法&#xff0c;只能再去看一下路由的跳轉方式了。 應用程序的界面發生改變后&#xff0c;可以通過路由讓應用程序的界面返回到改變之前的狀態&#xff0c;例如瀏覽器中頁面…

Angular rxjs operators 筆記

toArray /*toArray把結果都塞到數組里去 */ const source = interval(1000); const example = source.pipe(take(10),toArray() );example.subscribe(val => console.log(val)); // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] toArray /*pairwise把相鄰的兩個流組成數組 */…

Angular rxjs Subject筆記

BehaviorSubject /*ehaviorSubject接受一個默認參數,相當于new Subject后自動next(aa)之后到行為和Subject一致 */ const behave = new BehaviorSubject(aa); behave.subscribe(res => {console.log(res)

面試39 MySQL讀寫分離

&#xff08;1&#xff09;如何實現mysql的讀寫分離&#xff1f; 其實很簡單&#xff0c;就是基于主從復制架構&#xff0c;簡單來說&#xff0c;就搞一個主庫&#xff0c;掛多個從庫&#xff0c;然后我們就單單只是寫主庫&#xff0c;然后主庫會自動把數據給同步到從庫上去。 …

Angular自學筆記(一)ngModule 元數據

工作硬上開發angular項目,好難啊,上網搜資料教程真的賊少,吐槽真的沒什么人用angular,自己學習到處搜集整理的筆記,分享出來,方便查看理解總結。應該適用于angular11系列(更新真快,反正我也不知道之前低版本不同 手動狗頭) 什么是angular module(ngModule)? angula…