1. 程式人生 > >一些常用 js 對於 陣列 字串 方法總結

一些常用 js 對於 陣列 字串 方法總結

一 、陣列concat連線

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

二、 陣列刪除與新增元素

1、頭部元素新增刪除

var arrayA = [1,2,3]
arrayA.unshift(0) //頭部新增一個元素
console.log(arrayA); // (4) [0, 1, 2, 3] 
arrayA.unshift(0,7) // 頭部新增多個元素
console.log(arrayA); // (6) [0, 7, 0, 1, 2, 3]
arrayA.shift() // 刪除頭部第一個元素
console.log(arrayA); //(5) [7, 0, 1, 2, 3]

2、尾部元素新增刪除

var arrayA = [1,2,3]
arrayA.push(4,5) // 尾部新增多個元素
console.log(arrayA); // (5) [1, 2, 3, 4, 5] 
arrayA.pop() // 刪除尾部最後一個元素
console.log(arrayA); // (4) [1, 2, 3, 4]

3、擷取陣列 slice (該方法也可用於擷取字串 , substring()只能用於擷取字串)

// array.slice(start,end); 必須要有start引數  , end引數可選。
var arrayA = [1,2,3]
console.log(arrayA.slice(1)); //(2) [2, 3]  表示從下標index = 1 開始擷取 , 包含該下標本身
console.log(arrayA.slice(1,2)) // [2] 表示從下標index = 1開始至下標 index = 2 結束 , 但不包括結束下標本身
//如果為負數,會從尾部選取,比如-1代表最後一個元素
console.log(arrayA.slice(1,-1)) //[2]
console.log(arrayA.slice(1,-2)) // [] 此時為空陣列

4、插入、替換刪除元素splice

//array.splice(index,howmany,item1,.....,itemX)
//index	必需。整數,規定新增/刪除專案的位置,使用負數可從陣列結尾處規定位置。
//howmany	必需。要刪除的專案數量。如果設定為 0,則不會刪除專案。
//item1, ..., itemX	可選。向陣列新增的新專案。
var arrayA = [1,2,3]
arrayA.splice(0,1,4)
console.log(arrayA);//(3) [4, 2, 3]
arrayA.splice(0,1)
console.log(arrayA);//(2) [2, 3]

三、陣列排序sort()與陣列內容順序顛倒reverse()

1、sort()方法

var arrayA = [1,3,6,4,8,9]
arrayA.sort()
console.log(arrayA); //(6) [1, 3, 4, 6, 8, 9]
arrayA.sort(function(a,b){
	return a-b
}) //排序函式升序
console.log(arrayA); //(6) [1, 3, 4, 6, 8, 9]
arrayA.sort(function(a,b){
	return b-a
}) //排序函式降序
console.log(arrayA); //(6) [9, 8, 6, 4, 3, 1]

2、reverse()方法

var arrayA = [1,3,6,4,8,9]
arrayA.reverse()
console.log(arrayA) // [6] [9,8,4,6,3,1]

四、陣列與字串相互轉換

1、陣列轉字串join()

var arrayA = [1,3,6,4,8,9]
console.log(arrayA.join()) // 1,3,6,4,8,9
console.log(arrayA.join('\\')) // 1\3\6\4\8\9
console.log(arrayA.join('-')) // 1-3-6-4-8-9

2、字串轉陣列split()

// str.split(separator,howmany)
// 如果把空字串 ("") 用作 separator,那麼 stringObject 中的每個字元之間都會被分割。
//howmany	可選。該引數可指定返回的陣列的最大長度。如果設定了該引數,返回的子串不會多於這個引數指定的陣列。如果沒有設定該引數,整個字串都會被分割,不考慮它的長度
var  str = 'see|how|much|i|love|u'
console.log(str.split('')) //(21) ["s", "e", "e", "|", "h", "o", "w", "|", "m", "u", "c", "h", "|", "i", "|", "l", "o", "v", "e", "|", "u"]
console.log(str.split()) // ["see|how|much|i|love|u"]
console.log(str.split('|') ) // (6) ["see", "how", "much", "i", "love", "u"] 這裡以‘|’分隔返回

var  str = 'see how much i love u'
console.log(str.split(' ')) //(6) ["see", "how", "much", "i", "love", "u"] 這裡以空格分隔
console.log(str.split(' ',3)) //(3) ["see", "how", "much"]

五、陣列遍歷

1、for…in

var arrayA = [1,3,6,4,8,9]
for( var index in arrayA) {
	console.log(arrayA[index])
}
// 1
// 3
// 6
// 4
// 8 
// 9

2、for…of

var arrayA = [1,3,6,4,8,9]
for( var val of arrayA) {
	console.log(val)
}
// 1
// 3
// 6
// 4
// 8 
// 9

3、map迴圈

var arrayA = [1,3,6,4,8,9]
var newAry=arrayA.map(function(item , index){
    console.log(' 索引下標 '+index+' 的值為 '+item)
    return item
})

//索引下標 0 的值為 1
//索引下標 1 的值為 3
//索引下標 2 的值為 6
//索引下標 3 的值為 4
//索引下標 4 的值為 8
//索引下標 5 的值為 9
console.log(newAry) //(6) [1, 3, 6, 4, 8, 9] 
//map迴圈是返回一個新陣列 ,與forEach不同

4、forEach迴圈

var arrayA = [1,3,6,4,8,9]
var newAry=arrayA.forEach(function(item , index){
    console.log(' 索引下標 '+index+' 的值為 '+item)
    return item
})

//索引下標 0 的值為 1
//索引下標 1 的值為 3
//索引下標 2 的值為 6
//索引下標 3 的值為 4
//索引下標 4 的值為 8
//索引下標 5 的值為 9
console.log(newAry) //undefined  
//打印出來為undefined , 可知forEach迴圈並不返回新陣列