JavaScript数组属性和方法

数组

字面量声明数组

let arr = [1,2,3,4]

构造函数声明数组

let arr = new Array(1,2,3)
arr[0] = "a"
arr[1] = "b"
arr[2] = "c"

数组的遍历操作

// for ... in 循环
ler arr = ["a","b","c","d"]
for(let i in arr) {
	console.log(arr[i])
}

for … in 循环 遍历数组
for … in 循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象

//  forEach循环
arr.forEach(function(v, k) {
	console.log(k)
})

foreach 循环自动迭代数组的每个元素，当每个元素都被迭代一次后，foreach 循环自动结束。

数组的属性方法

获取数组的长度

let arr = [1,2,3]
console.log(arr.length)	// 3

length 是一个可读可写的属性，用来表示数组的长度（即数组元素个数）。通过访问 length 属性，可以获取数组长度；而通过修改 length 的值，可以增加或减少数组元素，甚至可以完全清空数组元素。

数组末尾添加元素

let arr = [1,2,3]
arr.push(4)
console.log(arr)  // [1,2,3,4]

push(元素1,…,元素n)
push() 方法可把参数指定的元素依次添加到数组的末尾，并返回添加元素后的数组长度（该方法必须至少有一个参数）

数组最前面添加元素

let arr = [1,2,3]
arr.unshift(4)
console.log(arr) // [ 4, 1, 2, 3 ]

unshift(元素1,…,元素n)
unshift() 方法可把参数指定的元素依次添加到数组的前面，并返回添加元素后的数组长度。该方法必须至少有一个参数。注意：IE6、IE7 不支持方法的返回值。

删除数组最后一位元素

let arr = [1,2,3]
arr.pop()
console.log(arr) // [ 1, 2 ]

pop()
pop() 方法可弹出（删除）数组最后一个元素，并返回弹出的元素

删除数组最前面的元素

let arr = [1,2,3]
arr.shift()
console.log(arr) // [ 2, 3 ]

shift()
shift() 方法可删除数组第一个元素，并返回删除的元素

使用 splice() 从指定位置删除指定个数的元素

let arr = [1,2,3,4,5,6,7]
// 从索引[0]的位置开始删，删除两个元素
console.log(arr.splice(0,2)) // 删除的元素[ 1, 2 ]
console.log(arr) // 返回的元素[ 3, 4, 5, 6, 7 ]

当参数只有 index 和 count 两个参数时，如果 count 不等于 0，splice() 方法实现删除功能，同时返回所删除的元素：从 index参数指定位置开始删除 count 参数指定个数的元素；

使用 splice() 用指定元素替换从指定位置开始的指定个数的元素

let arr = [1,2,3,4,5,6,7]
// 从索引0开始往后删除三个属性，第"s"替换掉前面删除的三个元素
console.log(arr.splice(0,3,"a")) // 删除的元素 [ 1, 2, 3 ]
console.log(arr) // [ 'a', 4, 5, 6, 7 ]

当参数为 3 个以上，且 count 参数不为0时，splice() 方法实现替换功能，同时返回所替换的元素：用第三个及其之后的参数替换 index 参数指定位置开始的 count 参数指定个数的元素；

使用 splice() 在指定位置添加指定的元素

let arr = [1,2,3,4,5,6,7]
// //4个参数，第二个参数为 0，实现添加功能：在下标为 3 处添加 a,b，没有返回值
console.log(arr.splice(3,0,"a","b")) //[]
console.log(arr) // [1, 2, 3, 'a', 'b',4, 5, 6, 7]

当参数为 3 个以上，且 count 参数为 0 时，splice() 方法的实现添加功能：用第三个及其之后的参数添加到 index 参数指定位置上。

splice(index,count[,元素1,…,元素n])
splic() 方法功能比较强，它可以实现删除指定数量的元素、替换指定元素以及在指定位置添加元素。这些不同功能的实现需要结合方法参数来确定：

使用 splice() 方法实现数组去重。

let arr = [1,3,2,2,2,3,4,5,6,1,7,4,5,6,7]

for (let i = 0; i < arr.length; i++) {
  for(let j = i + 1; j < arr.length; j++) {
    if (arr[i] == arr[j]) {
      // //删除 j 位置处的元素
      arr.splice(j, 1)
      j--
    }
  }
}
console.log(arr) // [1, 3, 2, 4,5, 6, 7]

读取指定的元素

let arr = [1, 2, 3, 4, 5, 6]
// 从索引0的位置开始往后读取5个元素
console.log(arr.slice(0, 5)) // 读取的元素[ 1, 2, 3, 4, 5 ]
console.log(arr.slice(0)) // 返回原数组
console.log(arr) // 返回原数组

slice(index1[,index2])
slice() 方法返回包含从数组对象中的第 index1～index2-1 之间的元素的数组。index2 参数可以省略，省略时表示返回从 index1 位置开始一直到最后位置的元素。需要注意的是，该方法只是读取指定的元素，并不会对原数组作任何修改。

按字典序排序数组。

let arr = ['a','c','d','e','a','b','c','a']
console.log(arr.sort()) // ['a', 'a', 'a','b', 'c', 'c','d', 'e']

从上面代码，我们可看到没有参数时，sort() 按字典序排列数组中的各个元素。

下面我们再用元素的 sort() 对几个数字排序

var arr = [4,3,5,76,2,0,8];
arr.sort();
console.log(arr);  //返回排序后的数组：0,2,3,4,5,76,8

我们看到排序后，结果并不是所预期的 76 最大应排在最后，反而是 8 排在最后，似乎 8 在这些元素中是最大的，即元素并没按数字大小进行排序。

为什么会出现这样的结果呢？这是因为 sort() 默认是对每个元素按字符串进行排序，排序时会从左到右按位比较元素的每位字符，对应位的 Unicode 编码大的就意味着这个元素大，此时将不再对后面的字符进行比较；对应位字符相同时才比较后面位置的字符。显然上述数组的排序使用了 sort() 的默认排序规则。此时要让数组中的元素按数字大小进行排序，就必须通过匿名函数参数来修改排序规则。

按匿名函数参数指定的规则排序数组。

let arr = [4, 3, 5, 76, 2, 0, 8]
arr.sort(function (a, b) {
  return a - b;//从小到大排序
  //return b-a;//从大到小排序
});
console.log(arr)//返回排序后的数组：0,2,3,4,5,8,76

上面通过定义匿名函数来修改 sort() 的默认排序规则，实现对上面数字元素按数字大小进行排序

说明：匿名函数中返回第一个参数减第二个参数的值，此时将按元素数值从小到大的规则排序各个元素：当两个参数的差为正数时，前后比较的两个元素将调换位置排序；否则元素不调换位置。如果返回第二个参数减第一个参数的值，则按元素数值从大到小的规则排序各个元素，元素调换规则和从小到大类似。
当数组元素的前缀为数字而后缀为字符串时，如果希望这些元素能按数字大小进行排序，此时需对匿名函数中的参数作一些变通处理。因为这些参数代表了数组元素，所以它们也是一个包含数字和字符的字符串，因此要按数字大小来排序它们，就需要将参数解析为一个数字，然后再返回这些解析结果的差。

连接数组

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

concat() 将参数指定的数组和当前数组连成一个新数组

数组反转

let arr = [1,2,3,4,5,3,2,1]
console.log(arr.reverse()) //[1, 2, 3, 5, 4, 3, 2, 1]

reverse() 方法可返回当前数组倒序排序形式

join(分隔符)

let arr = [1,2,3,4,5,3,2,1]
console.log(arr.join("*")) //1*2*3*4*5*3*2*1

join() 方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。参数可以省略，省略参数时，分隔符默认为“逗号”。

filter()过滤器

let names = ["张三", "李四", "王六", "马六", "大力", "张力", "张成"]

function checkName(name) {
  // //定义回调函数，判断名字是否姓“张”
  if (name.indexOf("张") != -1) {
    return true
  } else {
    return false
  }
}

let names2 = names.filter(checkName)  // 对names执行回调用函数，返回所有姓张的名字给names2
console.log(names2) // [ '张三', '张力', '张成' ]

names2.forEach((val, index) => { //遍历names2数组中的每个元素
  console.log("内容：" + val + " 索引：" + index)
  /*
    内容：张三 索引：0
    内容：张力 索引：1
    内容：张成 索引：2
  */
})

filter() 方法的第一个参数为回调函数，array 对象中每个元素都需要调用该函数，filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下：
currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；
index 参数：可选参数，表示正在处理的当前元素的索引；
array 参数：可选参数，表示方法正在操作的数组；
thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

filter() 函数返回一个新数组，其中包含了指定数组中的所有符合条件的元素。如果没有符合条件的元素则返回空数组。

map()方法

let number1 = [1, 2, 3]
let num = number1.map((item) => { //对原数组中的每个元素*2，将值分别存储在num数组中
  return item * 2
})
console.log(num) // [ 2, 4, 6 ]
num.forEach((item, index) => {
  console.log("num[" + index + "]=" + item)
  /* 
    num[0]=2
    num[1]=4
    num[2]=6
  */
})

1、map () 方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。
2、map () 方法按照原始数组元素顺序依次处理元素。 注意： map () 不会对空数组进行检测。

map() 方法的第一个参数为回调函数，array 对象中每个元素都需要调用该函数。

map() 方法中的各个参数说明如下：
currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；
index 参数：可选参数，表示正在处理的当前元素的索引；
array 参数：可选参数，表示方法正在操作的数组；
thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

map() 函数返回一个新数组，其中的元素为原始数组元素调用回调函数处理后的值。

reduce () 是数组的 归并方法

let number1 = [2,3,6,9]

//reduce()没有initialValue参数
// 没有参数默认就是从数组的第0个开始算
let num1 = number1.reduce((v1, v2) => {
  return v1 * v2
})
console.log(num1) // 324
// 2*3*6*9

//reduce()提供了initialValue参数(第二个参数)
let num2 = number1.reduce((v1, v2) => {
  return v1 + 2 * v2 
}, 5)
/*
  第二个参数为5
  5+2*2+2*3+2*6+2*9
*/
console.log(num2) // 45

num1处调用的 reduce() 没有指定 initialValue 参数，因而初始值为数组的第一个元素,即 2，此时 reduce() 的执行过程等效于：236*9 运算表达式的执行，结果返回 324。

num2处调用的 reduce() 指定了值为 5 的 initialValue 参数，因而初始值为 5，此时 reduce() 的执行过程等效于： 5+22+23+26+29 运算表达式的执行，结果返回 45。

reduce() 用于使用回调函数对数组中的每个元素进行处理，并将处理进行汇总返回。语法如下：
array对象.reduce(function(result,currentValue[,index[,array]])[,initialValue])
reduce() 方法的第一个参数为回调函数。

reduce() 方法中的各个参数说明如下。

result 参数：必需参数，表示初始值或回调函数执行后的返回值。在第一次调用回调函数前，result 参数表示初始值；在调用回调函数之后，result 参数表示回调函数执行后的返回值。
需要注意的是，如果指定了 initialValue 参数，则初始值就是 initialValue 参数值，否则初始值为数组的第一个元素。

currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）。
需要注意的是，如果指定了 initialValue 参数，则第一次执行回调函数时的 currentValue 为数组的第一个元素，否则为第二个元素。

index 参数：可选参数，表示正在处理的当前元素的索引。
array 参数：可选参数，表示方法正在操作的数组。
initialValue 参数，可选参数，作为第一次调用回调函数时的第一个参数的值。如果没有提供该参数，第一次调用回调函数时的第一个参数将使用数组中的第一个元素。
需要注意的是：对一个空数组调用 reduce() 方法时，如果没有指定 initialValue 参数此时将会报错。

find() 用于获取使回调函数值为 true 的第一个数组元素

let names = ["Tom", "Jane", "Marry", "John", "Marissa"]
// 定义回调函数
function checkLength(item) {
  // 只要有一个为true就不往后执行了
  return item.length >= 4
}
let nameS = names.find(checkLength)  // 返回名字数组中名字长度大于或等于4的第一个名字
console.log(nameS)  // Jane

语法如下： array对象.find(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一个参数为回调函数，array 对象中每个元素都需要调用该函数，filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下：
currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；
index 参数：可选参数，表示正在处理的当前元素的索引；
array 参数：可选参数，表示方法正在操作的数组；
thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。

some循环

some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。

 const num = [1,2,3,4,5,6]
 // 第一个参数是数组正在处理的元素，第二个参数是索引，第三个参数是原数组
 let a = num.some(function(item, index, arr) {
  // 如果arr里面有大于5的就返回true，否则就返回false
   return item > 5
 })
console.log(a) // true

every循环

every() 方法检查数组中的所有元素是否都通过了测试
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

const num = [
  { id: 1, name: '西瓜', state: true },
  { id: 2, name: '苹果', state: true },
  { id: 3, name: '榴莲', state: false }
]
const result = num.every(item => item.state)
console.log(result) // false

const num2 = [
  { id: 1, name: '西瓜', state: true },
  { id: 2, name: '苹果', state: true },
  { id: 3, name: '榴莲', state: true }
]
// 第一个参数是数组正在处理的元素，第二个参数是索引，第三个参数是原数组
const result2 = num2.every((item, index, arr) => item.state)
console.log(result2) // true

Array.from() 将伪数组转换成真正的数组

Array.from(...arr)

Array.of() 将任意的数据类型，转换为数组

console.log(Array.of(3, 11, 22, [1,2,3], {id: 1}))