JavaScript数据类型——数组详解

JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。
使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。RegExp.exec、String.match、String.replace 都会返回这样的数组

数组的属性

length

获取数组的长度

prototype

通过数组的原型对象可以为所有数组对象添加属性。

创建数组

// 方法一
const arr = [1, 2, 3, 4]
// 方法二
const arr = new Array(1, 2, 3, 4)
// 方法三
const arr = new Array(4) // 创建了一个长度为4的数组 数组的每一项为undefined
arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[3] = 4 // 通过索引给数组的每一项赋值
// 方法四
let arr = []
arr.length = 4
arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[3] = 4
console.log(arr) // 通过length创建一个长度为4的数组
// 方法五
const ofArr = Array.of(1, 2, 3)
console.log(ofArr)

通过索引访问数组

const arr = [1, 2, 3, 4]
console.log(arr[0]) // 1

数组方法

Array.from()

• 将一个为数组或者可迭代对象创建成一个新的，浅拷贝的数组实例
• 参数说明
  • 要转换的对象
  • 回调函数 如果指定了 则新数组的每个元素都会执行该对象 可选参数
  • 回调函数中的this执行 可选参数

const a = Array.from('foo', (x, y) => {
  console.log(x, y, this) // x 代表对象元素的每一项 y代表下标
  // f 0 {}
  // o 1 {}
  // o 2 {}
  return x
})
console.log(a)  // [ 'f', 'o', 'o' ]

Array.isArray(obj)

判断传入的对象是否是Array 返回布尔值

Array.of(ele)

创建一个新的数组实例

const ofArr = Array.of(1, 2, 3)
console.log(ofArr)

实例方法

forEach

• 对数组的每一个元素执行一次给定的函数，遍历数组
• foreach的第一个参数是一个回调函数，回调函数的三个参数 分别是当前元素，当前索引，遍历的数组
• foreach的第二个参数是回调函数中的this指向
• 返回undefined

arr.forEach((v,i,a) => {
  console.log(v,i,a)
})

map

• map和forEach用法类似 只不过返回值不同 map返回执行回调函数之后的新数组
• 如果回调没有return值 默认return undefined

const arr = [1, 2, 3, 4]
const a = arr.map(item => {
   console.log(item)
   return item
})
console.log(a) // [ 1, 2, 3, 4 ]

forEach、map 相同点
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）
3.匿名函数中的this都是指向window
4.只能遍历数组

---

forEach、map、for的区别：
1.在for中使用return可以终止整个循环，但是forEach和map只终止当前循环
2. map方法会返回新的数组 但是forEach返回的是undefined

push和pop

• push():向数组的末尾添加任意数量的参数，返回修改后数组的长度
• pop(): 删除数组末尾的最后一项，返回移除的项

// 添加
arr.push(8， 9， 19)
console.log(arr)
// 删除
arr.pop()

shift()和unshift

• shift():删除数组的第一项，返回删除的元素，如果数组为空，返回undefined
• unshift():向数组的开头添加任意数量的参数，返回修改后的长度

arr.unshift(1, 2, 3, 4)
arr.shift()

reverse

• 数组中元素的位置颠倒，并返回该数组 该方法会改变原数组。
• 返回颠倒后的数组

arr.reverse()

sort

• 数组的元素进行排序，并返回排序后的数组
• sort()方法调用的时候，会将数组的每一项使用toString() 方法，然后比较得到的字符串，以确定如何排序
• 参数 compareFunction(firstEl, secondEl)

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

spllice

• 实现数组的删除、插入和替换
• 返回由删除的元素组成的数组 如果没有元素，则返回一个空数组
• 参数
  • start：开始修改的位置 如果超出数组的长度 则从数组末尾开始添加内容, 如果是负数，则表示从数组末尾开始计数（从-1开始，相当于length+start）如果负数的绝对值大于数组的长度 则开始位置为0
  • 要移除的数组元素的个数
  • 要添加进数组的元素

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
// 从倒数第二个开始删除两个 就是把drum 和 sturgen删除了 ==》["drum", "sturgeon"]
// myFish.splice(-2, 2) 

myFish.splice(-2, 0, 'aaa', 'bbb') // 从倒数第二个开始不删除元素 只添加 ==》 []
console.log(myFish) // ["angel", "clown", "aaa", "bbb", "drum", "sturgeon"] 添加到start位置的前面

concat

• 合并两个或多个数组 不会改变原数组 而是返回一个新数组

var arr1 = [1]
var arr2 = [2]
var arr3 = [3]
arr1.concat(arr2, arr3) //  [1, 2, 3]

includes

• 判断一个数组是否包含某一个指定的值 返回true或者false
• 参数
  • 要判断的值
  • 开始查找的索引 若索引为负数 则从末尾开始计算（-1）开始 然后往后查找 默认为0

var arr = ['a', 'b', 'c'];
arr.includes('b', -1) // false 因为-1 就相当于从c开始查找 所以查找不到b 返回false
arr.includes('a', 3) // false 超出数组的最大索引

join

• 将数组中的所有元素转成字符串并返回
• 参数：用于分割数组的每个元素

var arr = [1, 2, 3]
arr.join('+')

slice()

• 截取数组的内容，返回从数组中指定开始下标和结束下标（不包括) 之间组成的新数组 原始数组不会改变
• 参数一：代表截取的开始下标，如果只有一个参数，代表开始下标到结尾
• 参数二：代表的结束下标
• 注意：如果参数是负数，截取的下标为对应下标 + 数组的长度

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(-1, -2) // [] 如果结束下标小于开始下标返回空数组
animals.slice(-3, -1) // ["camel", "duck"]

toString

• 返回一个字符串，表示指定的数组及其元素

const array1 = [1, 2, 'a', '1a'];
array1.toString() // "1,2,a,1a"

indexOf()和 lastIndexOf()

• indexOf 查找元素的索引 不存在返回-1 存在返回元素在数组中的索引
• lastIndexOf 查找数组中最后一个索引的位置 不存在返回-1
• 参数一： 查找的元素 参数二 开始查找的下标

var arr = ['a', 'b', 'c', 'd', 'a']
arr.indexOf('a') // 0
arr.lastIndexOf('a') //4

every

• 遍历数组，判断数组的每个元素是否满足条件，返回布尔值
• 参数是一个回调函数

var arr = [2,4,6,10,15,21];
var f = arr.every(function(element, index, array){ // 当前元素 下标 数组
    return element > 10;
});

f // false

some

• 遍历数组，如果至少有一个元素满足条件，则返回true，否则返回false。
• 参数是一个回调函数

var arr = [2,4,6,10,15,21];
var f = arr.some(function(element,index,array){ // 当前元素 下标 数组
    return element > 100
})
console.log(f) // false

filter

• 过滤----将数组中所有满足条件的元素组成一个新数组返回 不会改变原数组
• 参数是一个回调函数

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word, index, array) => word.length > 6);  // 当前元素 下标 数组
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

find

• 返回数组中满足条件的第一个值，找不到元素则返回undefined
• 参数是一个回调函数

var arr = [2,4,6,10,15,21];
var f = arr.find(function(element, index, array){ // 当前元素 下标 数组
    return element > 10;
});
console.log(f) // 15 

findIndex

• 返回数组中满足条件的第一个值的下标，找不到元素则返回-1
• 参数是一个回调函数

var arr = [2,4,6,10,15,21];
var f = arr.findIndex(function(element, index, array){ // 当前元素 下标 数组
    return element > 10;
})
console.log(f) // 4

copyWithin

• 浅复制数组的一部分到同一数组的另一个位置 并返回他不会改变原数组的长度 多余部分会自动删除
• 参数
  • target 复制到位置的索引 若为负数索引相当于length + target
  • start 开始复制的索引 若为负数索引相当于length + start end也是如此
  • end 结束复制的索引 不包括end的这个元素

const arr = [1, 2, 3, 4]
console.log(arr.copyWithin(2, 1, 2)) //  1, 2, 2, 4

reduce

• 数组的每一个元素执行reduce中的函数，并将结果汇总成单个值并返回
• 函数参数
  • accumulator 上一次调用函数返回的累计值
  • currentValue 当前正要处理的值
  • index 当前元素索引
  • arr 数组

案例： 计算当前按数组总和

const reduceArr = [1, 2, 3, 4, 5, 6, 6]

const num = reduceArr.reduce((pV, cV, index, arr) => {
  console.log(pV, cV)
  return pV + cV
})
console.log(num ) // 27