第一部分: 定義闡述

• 數(shù)組的定義:

• 數(shù)組就是值的有序集合.
  每個值所在數(shù)組中的位置稱為 索引
• 表現(xiàn)形式: 就是內(nèi)存中的一段連續(xù)的內(nèi)存地址
  數(shù)組名稱其實就是連續(xù)內(nèi)存地址的首地址

• 數(shù)組的創(chuàng)建:

① 構(gòu)造函數(shù)

var newArr = new Array();
newArr[0] = 2;
newArr[1] = 'li';
newArr[2] = 'wang';

構(gòu)造函數(shù)簡潔方法:

var newArr = new Array('zhang','wang','liu');

③ 字面量寫法(推薦)

var newArr = ['left','middle','right'];

• 數(shù)組特點:

①: 包容性: 數(shù)組的值可以是任意類型.

var arr = [1,'hello',true,{name: 'li', age: 23},['wang','25']]

②: 彈性: 可根據(jù)需求增長或縮短.

// 把數(shù)組的length = 0. 會直接清除數(shù)組里所有元素值
var arr = [1,2,3,4]
arr.push(5,6) //  [1, 2, 3, 4, 5, 6]
console.log(arr) // 
arr.length = 0
console.log(arr) // []  輸出一個空數(shù)組

③: 稀疏性: 數(shù)組的值可以不一定是連續(xù)的.

var arr = [1,2,3,4]
arr[100] = 100
console.log(arr) // [1,2,3,4,...undefined*95...,100]

// 小知識點: 數(shù)組索引值可以為負(fù)值,但遍歷數(shù)組時,索引值為負(fù)值的,不被算入長度
var arrNegative = [1,2,3,4,5]
arrNegative[-3] = -3  // 負(fù)索引賦值
console.log(arrNegative)  // [1, 2, 3, 4, 5, -3: -3]
console.log(arrNegative.length) // 5  (長度仍然是5)

第二部分

為了方便記憶,我們把字符串的基本方法先分類: 查 ,增, 刪, 改, 轉(zhuǎn).

查:

"查"類案例:

• arrName[index]

var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]

console.log( arr[1] ) // 2
console.log( arr[3] ) // true
console.log( arr[6] ) // "b"
console.log( arr[8] ) // {name: "li", age: 16}

• arrName.indexOf(Element)

var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]

console.log( arr.indexOf( 'a' )) // 5
console.log( arr.indexOf( {name: 'li',age: 16} )) // -1 注意indexOF()方法不接受對象類型參數(shù),一律返回 -1 

//在數(shù)組中查找所有出現(xiàn)的x坛芽，并返回一個包含匹配索引的數(shù)組
function findAll(a,x){
  var results=[],
      len=a.length,
      pos=0;
  while(pos<len){
    pos=a.indexOf(x,pos);
    if(pos===-1){//未找到就退出循環(huán)完成搜索
      break;
    }
    results.push(pos);//找到就存儲索引
    pos+=1;//并從下個位置開始搜索
  }
  return results;
}
var arr=[1,2,3,1,4,1,4,1];
findAll(arr,1);//返回[0,3,5,7]

• arrName.length

var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]
console.log(arr.length) // 9  如果是空數(shù)組則返回 0 . 

• arrName.includes( value )

var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]
var obj1 = {name: "li", age: 16}
console.log( arr.includes( obj1 ) // false　注意這個方法不能判斷數(shù)組里對象類型的存在.
console.log( arr.includes( 'a' )) // true

• arrName.isArray( arrName )

var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]
console.log( Array.isArray(arr) ) //  true

增

在數(shù)組里, 經(jīng)常需要對數(shù)組進(jìn)行添加元素, 除了最直觀的隊尾,隊首添加.還需要其他一些操作來滿足我們對數(shù)組的操作.

• concat ()

連接數(shù)組用法實例:
① 一個數(shù)組
② 多個數(shù)組
③ 增添多個元素

var arr = [1,2,3,'a','b',['A','B','C']]
var arr1 = ['li','liu','wang']
    //  ①連接一個數(shù)組
var concatArr = arr.concat(arr1)
console.log( concatArr ) // [1, 2, 3, "a", "b", Array(3), "li", "liu", "wang"]
console.log( arr ) // [1, 2, 3, "a", "b", ["A", "B", "C"]] //  原數(shù)組不變
   //  ②連接多個數(shù)組
var arr2 = ['age','name','sex']
var concatArrs = arr.concat(arr1,arr2)
console.log( concatArrs ) // [1, 2, 3, "a", "b", ["A", "B", "C"], "li", "liu", "wang", "age", "name", "sex"]
 //  ③也可以把元素當(dāng)成數(shù)組,'續(xù)'給數(shù)組的末尾
var concatArrEle = arr.concat('zhang','zhou')
console.log( concatArrEle ) // [1, 2, 3, "a", "b", ["A", "B", "C"], "zhang", "zhou"]

注意: 使用 "+" 號運算符, 不能連接數(shù)組, 會把數(shù)組轉(zhuǎn)換成 字符串

var arr = [1,2,3]
var arr1 = [4,5,6]

arr[3]= 'li'
console.log(arr) // [1, 2, 3, "li"]


var plusArr = arr + arr1 
console.log( plusArr ) // "1,2,3,li4,5,6"

var plusArr1 = arr+'wang'
console.log( plusArr1 ) //"1,2,3,liwang"

var plusArr2 = arr+''
console.log( plusArr2 ) //"1,2,3,li"

• push()

var arr = [1,2,3,'li']
console.log( arr.push(4,5) ) // 6
console.log( arr ) // [1, 2, 3, "li", 4, 5]  原數(shù)組改變

var obj = [{name: 'li',age: 20}]
console.log( arr.push(obj)) // 7 
console.log( arr ) // [1, 2, 3, "li", 4, 5, [{age: 20,name: "li"}]]  支持多種類型添加到數(shù)組尾部

• unshift()

var arr = [11,22,44,55,33]

var unshift = arr.unshift(66)
console.log( unshift) // 6 插入元素后新數(shù)組的長度
console.log(arr) // [11, 22, 44, 55, 33]  // 元素數(shù)組改變

// 可以插入多個,多種類型的元素
arr.unshift('姓名','學(xué)號',{age: 18, name: "MG"})
console.log(arr) //  ["姓名", "學(xué)號", {age: 18,name: "MG"}, 66, 11, 22, 44, 55, 33]

• splice(statr-index,length,element,....)

start-index: 起始位置
length: 是插入/替換的長度
element: 插入數(shù)組的元素

var arr= [1,2,3,4,'a','b']
var newArr = arr.splice(2,0,'c','d')

console.log(arr) //   [1, 2, "c", "d", 3, 4, "a", "b"]
console.log(newArr) // [] 第二個參數(shù)為0,所以返回一個空數(shù)組

刪

·實例演示芯砸；·

• pop()

pop在英文里有泡泡的意思..
在JS 里, 可以理解為 數(shù)組里的元素都是泡泡..泡泡冒出水面 就是 消失掉.
用法: ```arrayObject.pop()``

tips:

如果數(shù)組已經(jīng)為空，則 pop() 不改變數(shù)組，并返回 undefined 值样勃。(判定數(shù)組是否為空方法之一)

var arr = [1,2,3,4,'a','b','c']

var pop = arr.pop()
console.log(pop) // "c" 拋出最后一個元素
console.log(arr) // [1, 2, 3, 4, "a", "b"] 園數(shù)組長度減1

• shift()

把 數(shù)組 第一個元素 給 轉(zhuǎn)(拋出,挪出) 出去..原數(shù)組長度-1.
用法: arrayObject.shift()

tips:

如果數(shù)組是空的伪窖，那么 shift() 方法將不進(jìn)行任何操作碍拆，返回 undefined 值

var arr = [1,2,3,4,'a','b','c']

var shift = arr.shift()
console.log(shift) // 1 拋出最后一個元素
console.log(arr) // [2, 3, 4, "a", "b", "c"] 園數(shù)組長度減1

• delete

清除數(shù)組下標(biāo)值在 內(nèi)存棧值. 數(shù)組長度不變.
用法: delete array[index]

var arr = [1,2,3,4,'a','b','c']

console.log(delete arr[3]) // true 成功清除組下標(biāo)3的元素的棧內(nèi)存
console.log(arr) // [1, 2, 3, undefined, "a", "b", "c"] 被刪除的下標(biāo)為undefined

• slice()

slice 在英文里 有 把…切成 的意思..
在JS數(shù)組里, 我們可以理解成 用一個透明膠把數(shù)組一片段給 膠 出來. 它還是個數(shù)組.

用法: arrayObject.slice(start,end)

var arr = [1,2,3,4,'a','b','c']
var slice = arr.slice(2,4)
console.log( slice ) // [3, 4] 復(fù)取(復(fù)制獲取)數(shù)組下標(biāo)2到下標(biāo)4(不包括下標(biāo)4)的片段值再組成數(shù)組.
console.log( arr ) //  [1, 2, 3, 4, "a", "b", "c"] 原數(shù)組不變.

slice拓展:

slice()的參數(shù)可以接受負(fù)數(shù), 這個負(fù)值表示倒數(shù)元素的索引值

var arr = [1,2,3,4,'a','b','c']
var slice1 = arr.slice(2,-1)
console.log( slice1 ) // 3, 4, "a", "b"]  復(fù)取(復(fù)制獲取)下標(biāo)2到下標(biāo)倒數(shù)-1之間的數(shù)組段.

• splice()

數(shù)組刪減替換的萬能函數(shù).
做刪除的時候.關(guān)鍵是 第三個參數(shù)一定要為0.(代表替換的元素不存在)
用法: arrayObject.splice(start,length,element)

var arr = [1,2,3,4,'a','b','c']
var splice = arr.splice(2,3,0) 
console.log( splice ) // [3, 4, "a"] 從下標(biāo)2開始 (包括自己)長度為3的數(shù)組.
console.log( arr ) // [1, 2, 0, "b", "c"] 原數(shù)組改變.長度減去參數(shù)2.

改

改 引申為: 元素的改變.替換. 元素順序的改變調(diào)整

• fill()

將一個固定值替換數(shù)組所有的元素
用法: array.fill(value, start, end) 注:替換的元素不包括下標(biāo)為start元素, 但包括end所在元素
注意: start,end參數(shù) 可選..如果不填寫.表示全部數(shù)組元素替換成參數(shù)value

var arr = [1,2,3,4,'a','b','c']

var fill = arr.fill('apple',2,5)
console.log(fill ) //  [1, 2, "apple", "apple", "apple", "b", "c"] 下標(biāo)3 4 5 替換成 value值
console.log( arr ) // [1, 2, "apple", "apple", "apple", "b", "c"] 原數(shù)組改變

如果不填寫參數(shù)start 和 end , 表示全部替換 ..如下:

var arr = [1,2,3,4,'a','b','c']
var fill = arr.fill('banana')
console.log( fill ) // ["banana", "banana", "banana", "banana", "banana", "banana", "banana"]

• copyWhthin()

從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中
用法: array.copyWithin(target, start, end)

參數(shù).png

注意: 拷貝范圍 包括start下標(biāo)元素, 但不包含end所在下標(biāo)元素

var arr = [1,2,3,4,'a','b','c']

var copyWithin = arr.copyWithin(3,0,2)
console.log( copyWithin ) // [1, 2, 3, 1, 2, "b", "c"] 選擇范圍為 下標(biāo)0到2(不包括2下標(biāo)元素), 從 索引值3開始 替換.
console.log( arr ) // [1, 2, 3, 1, 2, "b", "c"] // 原數(shù)組改變

• reverse()

reverse() 方法用于顛倒數(shù)組中元素的順序,并改變原數(shù)組
用法: arrayObject.reverse()

var arr = [1,2,3,4,'a','b','c']
var reverse = arr.reverse()
console.log( reverse ) // ["c", "b", "a", 4, 3, 2, 1]
console.log( arr ) // ["c", "b", "a", 4, 3, 2, 1] // 原數(shù)組改變

• splice()

數(shù)組刪減替換的萬能函數(shù).
做替換的時候.關(guān)鍵是 第三個參數(shù)..
用法: arrayObject.splice(start,length,element)

start-index: 起始位置
length: 是插入的長度 注意 插入功能的話 第二個參數(shù)值要為0.表示不替換的任何元素
element: 插入數(shù)組的元素插入的個數(shù)不能超過length

var arr = [1,2,3,4,'a','b','c']
var splice = arr.splice(4,0,5,6,7) // 插入功能 第二個參數(shù)要為 0 .

console.log( splice )  // []沒有替換任何元素..返回空數(shù)組
console.log( arr ) // [1, 2, 3, 4, 5, 6, 7, "a", "b", "c"] 原數(shù)組改變

• sort()

它能對數(shù)組的元素進(jìn)行排序

① 默認(rèn)按字母升序排列
② 按數(shù)字開頭的大小進(jìn)行升序排列,如果是兩位數(shù)以上.則要調(diào)用函數(shù)作為參數(shù).

字母

var sort = arr.sort()
console.log(sort) // ["apple", "banana", "orange", "watermelon"] 默認(rèn)按字母的升序排列

數(shù)字
如果是個位數(shù)排序,可以不傳遞函數(shù)參數(shù)

var arr2 = [20,23,32,49,7,9,16]
var sort2 = arr2.sort(function(x1,x2){
  return x1-x2 //升序 [7, 9, 16, 20, 23, 32, 49]
  // return x2-x1 //降序 [49, 32, 23, 20, 16, 9, 7]
})

console.log( sort2 ) // [7, 9, 16, 20, 23, 32, 49] 

轉(zhuǎn)

轉(zhuǎn) 引申為: 數(shù)組類型轉(zhuǎn)換成其他類型

• 數(shù)組轉(zhuǎn)數(shù)字

第一種: 改變數(shù)組元素的類型
效果

['1','2','3'] => [1,2,3]

????方法

var map = arr.map(Number)
console.log( map ) // [1, 2, 3, 4, NaN, NaN, NaN] 非數(shù)字類型轉(zhuǎn)為為NaN

????第二種: 將數(shù)字?jǐn)?shù)組轉(zhuǎn)化成純數(shù)字
效果

arr[1,2,3] => 123

????方法

function number(arr){
　　var sum=0
　　var arr3=arr.reverse();
　　for(var i=0;i<arr3.length;i++){
　　　　var num=arr3[i]*Math.pow(10,i)
　　　　sum+=num;
　　}
　　return sum;
}

var arr = [1,2,3]
console.log( number(arr) ) // 123 

• 數(shù)組轉(zhuǎn)字符串

方法一: arr.toString()
原數(shù)組不改變

var arr = [1,2,3,4,'a','b','c']

var toString = arr.toString()
console.log( toString ) // "1,2,3,4,a,b,c"

拓展: toString 對于多重數(shù)組可以起到去重作用

var arr = [[1],[2,3],[4,'a'],['b','c']]

var toString1 = arr.toString()
console.log(toString1  ) // "1,2,3,4,a,b,c"

方法二: 空數(shù)組 + 數(shù)組
原數(shù)組不改變

var arr = [1,2,3,4,'a','b','c']
var newArr = [] + arr
console.log( newArr) // "1,2,3,4,a,b,c"

方法三: join()
join()還可以指定傳遞一個參數(shù)作為分隔符,原數(shù)組不變
當(dāng)不傳遞參數(shù)時,默認(rèn)為丟分隔符為逗號","'

var arr = [1,2,3,4,'a','b','c']

var join = arr.join()
var join1 = arr.join("-")
console.log( join ) // "1,2,3,4,a,b,c" // 不傳遞參數(shù)時,默認(rèn)為丟分隔符為逗號
console.log( join1 ) // "1-2-3-4-a-b-c"

• 數(shù)組轉(zhuǎn)對象

方法一: for( x in arr ) 賦值

var obj = {};
var arr = [1,2,3,4,5];
for (var x in arr){
obj[x] = x;
}

console.log( obj ) // { 0: "0", 1: "1", 2: "2",3: "3",4: "4"}

方法二: arrayToObj(arr){} 函數(shù)

var arr = [
  {name: 'li',age: 18},
  {sex: 'male', other: 'none'}
]
function arrayToObj(arr){
 
    return Object.assign({},arr);
}
console.log( arrayToObj(arr) ) 
// {
//   0: [object Object] {
//     age: 18,
//     name: "li"
//   },
//   1: [object Object] {
//     other: "none",
//     sex: "male"
//   }
// }

遍歷

• forEach()
  forEach() 方法用于調(diào)用數(shù)組的每個元素若治，并將元素傳遞給回調(diào)函數(shù)。
  它改變原數(shù)組.
  語法: array.forEach(function(currentValue, index, arr), thisValue)

var numArr = [1,2,3,4,5,6]
numArr.forEach(function(value,index,arr){
   arr[index] = value + 1
})

console.log( numArr  )

• map()
  它創(chuàng)建一個新的數(shù)組..不會對元素組做出改變.
  它能對數(shù)組每一個元素進(jìn)行遍歷操作..可以針對 數(shù)組里每一個元素進(jìn)行操作..
  map()接受一個函數(shù).這個函數(shù)里能傳遞三個參數(shù): currentValue, index,arr
  語法: array.map(function(currentValue,index,arr), thisValue)

var arr = [1,2,3,4,'a','b','c']

var mapArr = arr.map( function(currentValue,idx,arr){
  return currentValue+2
} ) 

console.log( mapArr ) // [3, 4, 5, 6, "a2", "b2", "c2"]
console.log( arr ) // [1, 2, 3, 4, "a", "b", "c"] 原數(shù)組不發(fā)生改變

• every()

對數(shù)組里沒有元素,進(jìn)行判斷.
只有全部為true,時候才返回ture, 當(dāng)遇到一個為false就停止運行.返回false
語法: arr.every( function(value,index,arr){ ... } ) 注意:參數(shù)index,arr可選

var arr = [1,2,3,4,5]
console.log(  arr.every(function(value,index){return value>0 ? true:false}) ) // true

var arr1 = [1,4,-3,5]
console.log( arr1.every(function(value,index){return value>0 ? true:false}) // false
 )

• some()

var arr = [1,2,-1,4,5]
arr.some( function(value,index){ value<4?true:false })
console.log( arr.some( function(value,index){ return value<0?true:false }) ) // true 有一個元素 -1 < 0 .成立, 返回true