JavaScript数组对象详情

Array 数组概述

Array 类型是 ECMAScript 最常用的类型。javaScript 中的 Array 类型和其他语言中的数组有着很大的区别。

虽然数组都是有序排列，但 javaScript中的数组每个元素可以保存任何类型。

javaScript 中数组的大小也是可以调整的。

 

 

创建数组的两种方式

new 运算符创建数组

let array1 = new Array() // 创建了一个数组，数组属于object类型
let array2 = new Array(10) // 创建一个包含 10 个元素的数组,一个数字表示这个数组的长度,如果是两个数及以上会变成数组中的元素
let array3 = new Array('李炎恢',28,'教师','盐城'); 　　//创建一个数组并分配好了元素

console.log(typeof array1)
console.log(array2) // Array(10),length: 10
console.log(array3) // [ '李炎恢', 28, '教师', '盐城' ]

以上三种方法，可以省略 new 关键字

let array1 = Array() // 创建了一个数组，数组属于object类型
let array2 = Array(10) // 创建一个包含 10 个元素的数组,一个数字表示这个数组的长度,如果是两个数及以上会变成数组中的元素
let array3 = Array('李炎恢',28,'教师','盐城'); 　　//创建一个数组并分配好了元素

console.log(typeof array1)
console.log(array2) // Array(10),length: 10
console.log(array3) // [ '李炎恢', 28, '教师', '盐城' ]

使用字面量方式创建数组

let array1 = []  // 创建一个空的数组
let array2 = ['李炎恢', 28, '教师', '盐城'] // 创建包含元素的数组
let array3 = [1,2,] // 禁止这么做，IE 会识别 3 个元素
let array4 = [,,,,,] // 同样，IE 的会有识别问题

console.log(array1) // []
console.log(array2) // [ '李炎恢', 28, '教师', '盐城' ]
console.log(array3) // [ 1, 2 ]
console.log(array4) // [ <5 empty items> ]

 

 

创建包含各种数据类型的数组

let box = [
  { 　　　　　　　　　　　　　　     // 第一个元素是一个对象
    name : '李炎恢',
    age : 28,
    run : function () {
      return 'run 了'
    }
  },
  ['马云','李彦宏',new Object()],// 第二个元素是数组
  '江苏', // 第三个元素是字符串
  25+25, // 第四个元素是数值
  new Array(1,2,3) // 第五个元素是数组
]
console.log(box)

 

 

JavaScript的数组的操作方法

使用索引下标来读取和设置数组的值

let array = ['李炎恢', 28, '教师', '盐城']

console.log(array[2]) // 获取第三个元素
array[2] = '学生' // 修改第三个元素
array[4] = '计算机编程' // 增加第五个元素
console.log( array[5]) // 如果获取不存在的角标，值是undefined
console.log( array )

使用 length 属性获取数组长度

let array = ['李炎恢', 28, '教师', '盐城']

console.log(array.length) // 获取元素个数
array.length = 10 // 强制设置元素个数,PS：数组最多可包含 4294967295 个元素，超出即会发生异常。
console.log(array.length) // 获取元素个数 ,10

array[array.length] = 'JS 技术' //通过 length 给数组增加一个元素,在最后一个角标添加一个元素
console.log(array.length) // 11
console.log(array[array.length-1])// 获取最后一个数组，数组长度减1,打印结果：JS 技术

转换方法

对象或数组都具有toLocaleString()、toString()和valueOf()方法。

let array1 = ['李炎恢',28,'计算机编程'] // 字面量数组
console.log(array1) // (3) ["李炎恢", 28, "计算机编程"]
console.log(array1.valueOf()) // (3) ["李炎恢", 28, "计算机编程"]
console.log(array1.toString()) // 李炎恢,28,计算机编程
console.log(array1.toLocaleString()) // 李炎恢,28,计算机编程

let array2 = [new Date()]
console.log(array2.toString())        // Sat Apr 06 2019 02:29:36 GMT+0800 (中国标准时间)
console.log(array2.toLocaleString())// 具有本地格式化的功能，不会自动调用 结果是2019/4/6 上午2:29:36

join()方法

默认下，数组字符串都会以逗号隔开。如果使用 join()方法，则可以使用不同的分隔符来构建这个字符串

let array = ['李炎恢', 28, '计算机编程']
let arrayStr = array.join('|')
console.log(arrayStr) // 李炎恢|28|计算机编程    返回的类型是字符串

栈方法

ECMAScript 数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可以让数组像栈一样，可以限制插入和删除项的数据结构。

栈是一种数据结构(后进先出)，也就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出)，只发生在一个位置——栈的顶部。

ECMAScript 为数组专门提供了 push()和 pop()方法：

push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。
pop()方法则从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素

let array = ['李炎恢', 28, '计算机编程'] // 字面量声明
console.log(array.push('盐城')) // 数组末尾添加一个元素，并且返回长度
console.log(array) // (4) ["李炎恢", 28, "计算机编程", "盐城"]
console.log(array.pop()) // 移除数组末尾元素，并返回移除的元素:盐城
console.log(array)  // ["李炎恢", 28, "计算机编程"]

队列方法

栈方法是后进先出，而队列方法就是先进先出。队列在数组的末端添加元素，从数组的前端移除元素。

通过 push()向数组末端添加一个元素，然后通过 shift()方法从数组前端移除一个元素。

let array = ['李炎恢', 28, '计算机编程'] // 字面量声明
console.log(array.push('盐城')) // 数组末尾添加一个元素，并且返回长度
console.log(array) // (4) ["李炎恢", 28, "计算机编程", "盐城"]
console.log(array.shift()) // 移除数组开头元素，并返回移除的元素:李炎恢
console.log(array) // (3) [28, "计算机编程", "盐城"]

javaScript 还为数组提供了一个 unshift()方法，它和 shift()方法的功能完全相反。unshift()方法为数组的前端添加一个元素。这四个方法可以自由组合，组成堆栈或者队列的数据结构

let array = ['李炎恢', 28, '计算机编程'] //字面量声明
console.log(array.unshift('盐城', '江苏')) // 数组开头添加两个元素
console.log(array) // ["盐城", "江苏", "李炎恢", 28, "计算机编程"]
console.log(array.pop()) // 移除数组末尾元素，并返回移除的元素:计算机编程
console.log(array) //["盐城", "江苏", "李炎恢", 28]

排序方法

数组中已经存在两个可以直接用来排序的方法：reverse()：逆向排序和 sort()：从小到大排序

let array1 = [1, 2, 3, 4, 5]
console.log(array1.reverse()) // 逆向排序方法，返回排序后的数组:[5, 4, 3, 2, 1]
console.log(array1) // 源数组也被逆向排序了，说明是引用:[5, 4, 3, 2, 1]

let array2 = [4, 1, 7, 3, 9, 2]
console.log(array2.sort()) // 从小到大排序，返回排序后的数组: [1, 2, 3, 4, 7, 9]
console.log(array2) // 源数组也被从小到大排序了: [1, 2, 3, 4, 7, 9]

sort 方法的默认排序的问题

sort 方法的默认排序在数字排序上有些问题，因为数字排序和数字字符串排序的算法是一样的。

我们必须修改这一特征，修改的方式，就是给 sort(参数)方法传递一个函数参数。

function compare(value1, value2) { //数字排序的函数参数
  if (value1 < value2) { //小于，返回负数
    return -1
  } else if (value1 > value2) { //大于，返回正数
    return 1
  } else { // 其他，返回 0
    return 0
  }
}
var array1 = [65, 0, 1, 55, 10] // 验证数字字符串，和数字的区别
console.log(array1.sort(compare)) // [0, 1, 10, 55, 65]

var array2 = ["0", "1", "55", "10", "65"] // 验证数字字符串，和数字的区别
console.log(array2.sort(compare)) // ["0", "1", "10", "55", "65"]
console.log(array2.sort()) // ["0", "1", "10", "55", "65"]

concat()方法:基于当前数组创建一个新数组

let array1 = ['李炎恢', 28, '盐城'] // 当前数组
let array2 = array1.concat('计算机编程') // 创建新数组，并在数组最后面添加新元素
console.log(array2) // 输出新数组:["李炎恢", 28, "盐城", "计算机编程"]
console.log(array1) // 原来的数组没有任何变化:["李炎恢", 28, "盐城"]

let array3 = ['广州', '深圳']
let array4 = array1.concat(array3)
console.log(array4) // [ '李炎恢', 28, '盐城', '广州', '深圳' ]
console.log(array1) // [ '李炎恢', 28, '盐城' ]
console.log(array3) // [ '广州', '深圳' ]

slice()方法:基于当前数组获取指定区域元素并创建一个新数组

let array1 = ['李炎恢', 28, '盐城',"北京","深圳"] //当前数组
let array2 = array1.slice(1)// 一个参数表示从这个参数开始往后取: [28, "盐城", "北京", "深圳"]
let array3 = array1.slice(1,3)// 第2个-第4个 之间的元素  两个参数表示从第一个参数开始取，取到第二个参数的位置:[28, "盐城"]
let array4 = array1.slice(2,5)// 如果参数超过了数组的长度，则获取前面能够获取到的，后面的就忽略了，比如这里获取到：'盐城',"北京","深圳"
console.log(array2)// 28，盐城，北京，深圳
console.log(array3) // [28, "盐城"]
console.log(array4) // ["盐城", "北京", "深圳"]
console.log(array1) //原来的数组: ["李炎恢", 28, "盐城", "北京", "深圳"]

splice()主要用途是向数组的中插入元素

splice 中的删除功能

let array = ['李炎恢', 28, '盐城'] // 当前数组
let array2 = array.splice(0,2) // 截取前两个元素，表示从0开始截取两个元素
console.log(array2) // 返回截取的元素: ["李炎恢", 28]
console.log(array) // 原来的数组被截取的元素已经被删除:["盐城"]

splice 中的插入功能（操作的是原数组）

let array = ['李炎恢', 28, '盐城'] // 当前数组
let array2 = array.splice(1, 0, '计算机编程', '江苏') // 没有截取，但插入了两条  1表示从1号角标插入，0表示不截取，如果改为1,28这个元素就没有了
console.log(array2) // 什么都没有，因为第二个参数是0，没有截取到:[]
console.log(array) // 在第 2 个位置插入两条:["李炎恢", "计算机编程", "江苏", 28, "盐城"]

splice 中的替换功能

let array = ['李炎恢', 28, '盐城'] //当前数组
let array2 = box.splice(1, 2, 100) //截取了 2 条，替换成 100 第二个参数传入几就截取几个
console.log(array2) // 输出截取的 28
console.log(array) // 输出数组: ["李炎恢", 100]

 

 

数组的遍历

数组的遍历方式一：for循环

let arr = [424, 52, 2435, 23452, 4124]
for (let i = 0; i < arr.length; i++){
  console.log(arr[i])
}

数组的遍历方式二：for of

let arr = [424, 52, 2435, 23452, 4124]
for (item of arr){
  console.log(item)
}

数组的遍历方式三：forEach

let arr = [424, 52, 2435, 23452, 4124]
arr.forEach(function (item, index) {
  console.log(item+ ':' + index)
})

数组的遍历方式四：map集合

let arr = [424, 52, 2435, 23452, 4124]
arr.map(item => {
  console.log(item)
})

 

 

JavaScript通过原型给数组添加更多的方法

数组获取最大值的方法

let arr1 = ["nba", "haha", "cba", "aaa", "sbc"]
let arr2 = [32, 34, 43, 56]
Array.prototype.getMax = function(){
  let temp = 0
  for(let x = 1; x < this.length; x++){
    if(this[x] > this[temp]){
      temp = x
    }
  }
  return this[temp]
}
console.log(arr1.getMax())//以上的this都表示arr这个数组，那个对象调用这个方法this就表示谁
console.log(arr2.getMax())

数组的字符串表现形式

定义toString方法。 相当于java中的复写

Array.prototype.toString = function(){
  return "["+this.join("/ ")+"]"
}
var let = [32, 23, 32, 34322, 3232, 2453]
console.log(arr.toString()) // [32/ 23/ 32/ 34322/ 3232/ 2453]

数组去重

Array.prototype.divideRepetition = function () {
  for (let i = 0; i < this.length; i++){// 获取数组中的每个元素
    for (let y = i + 1; y < this.length; y++){// 获取当前元素的下一个元素
      if (this[i] == this[y]){ // 判断两个元素是否相等，如果相等那么就出现了相同的元素，删除相同的元素
        this.splice(y, 1)
        y-- // 数组下标回退
      }
    }
  }
  return this
}
let arr = [43, 4, 4, 6, 8, 43, 8, 4]
console.log(arr.divideRepetition())

 

 

伪数组

具有length属性；按索引方式存储数据；不具有数组的push()、pop()等方法

伪数组无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push()、pop()等方法，但仍可以对真正数组遍历方法来遍历它们，不能使用foEach来遍历伪数组，可以使用for in。

这种对象有很多，比较特别的是function内的arguments对象，还有像调用getElementsByTagName, document.childNodes之类的，它们都返回的NodeList对象都属于伪数组，也称为类数组，还有自定义的对象，也属于伪数组。

我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象或者ES6中的from方法。

let fakeArray01 = {0: 'a', 1: 'b', length: 2}//这是一个标准的伪数组对象
let arr01 = Array.prototype.slice.call(fakeArray01)
console.log(arr01[0]);// a
let arr02 = [].slice.call(fakeArray01);
console.log(arr02[0]);//a

判断一个数组是不是真数组

list instanceof Array

 

ES6中数组的扩展

Array.prototype.indexOf(value) 

得到值在数组中的第一个下标，如果元素不存在返回-1，可以用来判断是否包含指定的元素

let arr = [6, 5, 4, 3, 1, 7, 6]
console.log(arr.indexOf(5)) // 1
console.log(arr.indexOf(8)) // -1
console.log(arr.indexOf(6)) // 0

Array.prototype.includes(value)
判断数组中是否包含指定value

let arr = [6, 5, 4, 3, 1, 7, 6]
console.log(arr.includes(5)) // true
console.log(arr.includes(8)) // false

Array.prototype.lastIndexOf(value) 

得到值在数组中的最后一个下标

let arr = [6, 5, 4, 3, 1, 7, 6]
console.log(arr.lastIndexOf(6)) // 6

Array.prototype.forEach(function(item, index){})

遍历数组

let arr = [6, 5, 4, 3, 1, 7, 6]
arr.forEach( (item, index) => {
  console.log(item + '-' + index) // index是角标，item是元素值
})

Array.prototype.map(function(item, index){})

遍历数组返回一个新的数组，返回加工之后的值

let arr = [6, 5, 4, 3, 1, 7, 6]
let newArr = arr.map( (item, index) => {
  return item + 10
})

console.log(newArr)

Array.prototype.filter(function(item, index){}) 

遍历过滤出一个新的子数组， 返回条件为true的值

let arr = [6, 5, 4, 3, 1, 7, 6]
let newArr = arr.filter((item, index) => {
  return item > 5 // 将arr数组中所有大于5的元素添加到一个新的数组中
})

console.log(newArr)

Array.from(v)

将伪数组对象或可遍历对象转换为真数组

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_数组扩展</title>
</head>
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<script type="text/javascript">
  let btns = document.getElementsByTagName('button') //现在btns也是一个数组（伪数组，没有数组一般的方法）

  // 因为btns是个伪数组，没有数组的一般方法，所以会报错
  // btns.forEach((item, index) => {
  //   console.log(item)
  // })

  // 将伪数组对象转换为真数组
  Array.from(btns).forEach((item, index) => {
    console.log(item)
  })
</script>
</body>

</html>

Array.of(v1, v2, v3)

将一系列值转换成数组

console.log(Array.of('3', 3, '4')) //["3", 3, "4"]

find(function(value, index, arr){return true})和findIndex(function(value, index, arr){return true})

find：找出第一个满足条件返回true的元素

findIndex：找出第一个满足条件返回true的元素下标

let arr = [4, 5, 1, 6, 4, 7, 9, 13]
let result = arr.find((item, index) => {
  return item > 3
})
let resultIndex = arr.findIndex( (item, index) => {
  return item > 3
})

console.log(result) //4,也就是数组中的第一个元素的值，满足了条件大于3
console.log(resultIndex) //0,也就是数组中的第一个元素的下标，满足了条件大于3