JS Array数组

数组构造器（创建一个新的数组）

Array对象字面量

// 使用对象的字面量(常用)，不足之处在于无法创建一个数组长度为6的空数组
var arr1 = []
console.log(arr1)

Array构造方法

// 使用Array构造器创建一个数组长度为6的空数组
// -当参数的长度为0或参数的长度大于等于2时，传入的参数将按照顺序依次成为新数组的第 0 至第 N 项（参数长度为 0 时，返回空数组）
var arr2 = Array()
var arr3 = Array(2, 3)
console.log(arr2)//空数组
console.log(arr3)// [2,3]
// -当参数值为非数值时处理同上，返回一个只包含 len 元素一项的数组，当 len 为数值时，len 最大不能超过 32 位无符号整型，即需要小于 2 的 32 次方（len 最大为 Math.pow(2,32)），否则将抛出 RangeError。
var arr4 = Array('aaa')
var number = Math.pow(2, 32)
var arr5 = Array(number) // 报错
var arr6 = Array(6)
console.log(arr4) // 输出的结果为['aaa']
console.log(arr5)
console.log(arr6) // [empty × 6]

Array.of()构造方法

// 使用Es的新增的Array.of()构造方法，该方法大体上与Array()构造方法相同，区别就在于对单一数字参数的处理上有所不同
var arr7 = Array.of()
var arr8 = Array.of(2,3)
var arr9 = Array.of('aaa')
var arr10 = Array.of(6)
console.log(arr7) // []
console.log(arr8) // [2,3]
console.log(arr9) // ['aaa']
console.log(arr10) // ['6']

Array.from()构造方法

Array.from 的设计初衷是快速便捷地基于其他对象创建新数组，准确来说就是从一个类似数组的可迭代对象中创建一个新的数组实例。其实就是，只要一个对象有迭代器，Array.from 就能把它变成一个数组（注意：是返回新的数组，不改变原对象）。

从语法上看，Array.from 拥有 3 个参数：

1. 类似数组的对象，必选；
2. 函数，新生成的数组会经过该函数的加工再返回；
3. this 作用域，表示加工函数执行时 this 的值。
   这三个参数里面第一个参数是必选的，后两个参数都是可选的。我们通过一段代码来看看它的用法。

<div class="bbb" id="bbb">
  <div class="ccc">1</div>
  <div class="ccc">2</div>
  <div class="ccc">3</div>
  <div class="ccc">4</div>
</div>
<--------------------------->
var temp2 = document.getElementById("bbb") //获取父组件
var temp = document.getElementsByClassName("ccc") // 获取所有的子组件
// 需求删除父组件里的第二个子组件
// 因为temp获取的是一个伪数组，不是一个真正意思上的数组，故此无法使用forEach进行遍历
temp.forEach(...)//报错
// 故此我们可以使用Array.from将伪数组转换成真正意义上的数组
var temp1 = Array.from(temp)
temp1.forEach((item, index) => {
   if (index == 1) {
      temp2.removeChild(item)
   }
})

var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr11 = Array.from(
    obj,
    function (value, index) {
    	console.log(value, index, this, arguments.length);
    	return value.repeat(3); //必须指定返回值，否则返回 undefined
   },obj);
console.log(arr11); //[aaa,bbb,ccc]

这表明了通过 Array.from 这个方法可以自己定义加工函数的处理方式，从而返回想要得到的值；如果不确定返回值，则会返回 undefined，最终生成的也是一个包含若干个 undefined 元素的空数组。

Array数组的判断

var a = [];
// 判断数组的方法
// 1.使用!!号
console.log(!!a); //如果是数组，返回的结果为true，否则的话为false
// 2.ES5
console.log(a instanceof Array); //true
console.log(a.constructor === Array); //true
console.log(Array.prototype.isPrototypeOf(a))//true
console.log(Object.getPrototypeOf(a) === Array.prototype)//true
console.log(Object.prototype.toString.apply(a) === '[object Array]') // true
// 3.Es6
console.log(Array.isArray(a))// true

Array数组的基本使用方法

data: [],
data1: [1, 2, 3],
data2: [4, 5, 6],
data3: [7, 8, 9],

改变自身的方法

• 删除数组中最后一个元素 pop()

let number = this.data1.pop()
console.log(number)//输出的结果为3，被截取的键值
console.log(this.data1)//输出的结果为[1,2]原数组发生改变

• 数组的末尾添加元素 push()

let number = this.data1.push(1)
console.log(number) //输出的结果为改变后数组的长度
console.log(this.data1)//输出的结果为[1,2,3,1] 元素组发生改变

• 删除数组的第一个元素 shift()

this.data = this.data1.shift()
console.log(this.data1) // [2,3] 原数组发生改变
console.log(this.data);// 2,被截取的元素

• 添加数组的第一个元素 unshift()

this.data = this.data1.unshift(1)
console.log(this.data1) // 输出的结果为[1,1,2,3], 原数组发生改变
console.log(this.data);//返回的数组的长度

• splice()的使用

// splice()的使用
let data6 = [3, 5, 7, 8, 2];
// 1.删除元素
this.data = data6.splice(1,3) // 从索引号为1开始，删除后面的3（包括该索引号的值）个元素
console.log(this.data) // 返回的是被截取的数组[5，7，8]
console.log(data6)  // 返回的是被截取后的数组[3,2] 原数组发生改变
// 2,替换元素
this.data = data6.splice(1,3,9,10,11) // 从索引号为1开始，删除后面的3（包括该索引号的值）个元素,在从该索引号开始添加另外3个元素
console.log(this.data) // 返回的还是是被截取的数组[5，7，8]
console.log(data6)  // 返回的是被替换后的数组[3, 9, 10, 11, 2] ,原数组发生改变
// 3.增加元素
this.data = data6.splice(1,0,9,19,11) 从索引号为1开始，删除后面的0个元素,在从该索引号开始添加另外3个元素
console.log(this.data)// 返回的还是是被截取的数组[]
console.log(data6)// 返回的是被增加后的数组[3, 9, 19, 11, 5, 7, 8, 2] 原数组发生改变

• 数组反转

this.data = this.data1.reverse()
console.log(this.data); // 输出的结果为[3,2,1]
console.log(this.data1) // 输出的结果为[3,2,1]，原数组发生改变

• 数组排序

// 1.按字母排序
let data5 = ["Banana", "Orange", "Apple", "Mango"];
this.data = data5.sort();
// 字母排序是分大小的，大写在前，小写在后
console.log(this.data); //['Apple', 'Banana', 'Mango', 'Orange'] 返回的是排序后的数组
console.log(data5); //['Apple', 'Banana', 'Mango', 'Orange'] 返回的是排序后的数组，原数组发生改变
// 2.按数字排序
// 简单的排序 虽然进行了排序，但是明显发现排序的结果是错误的
let data5 =  [34,2,56,4,89,7]
this.data = data5.sort()
console.log(this.data); //[2, 34, 4, 56, 7, 89]
console.log(data5);//[2, 34, 4, 56, 7, 89]
// 通过传递一个函数作为参数解决排序错误的问题
// 升序
let data5 = [34, 2, 56, 4, 89, 7];
this.data = data5.sort((a, b) => {
  return a - b;
});
console.log(this.data); //[2, 4, 7, 34, 56, 89]
console.log(data5); //[2, 4, 7, 34, 56, 89]
// 降序
let data5 = [34, 2, 56, 4, 89, 7];
this.data = data5.sort((a, b) => {
  return b-a;
});
console.log(this.data); //[89, 56, 34, 7, 4, 2]
console.log(data5); //[89, 56, 34, 7, 4, 2]

• copyWithin方法

//第一个参数必填，复制到指定目标索引位置上
//第二个参数选填，元素复制的起始位置
//第三个参数选填，元素停止复制的索引位置
array.copyWithin(target, start, end)
var data3=[7, 8, 9]
var data4 = data3.copyWithin(2,0,1)
console.log(data3)//输出的结果为[7,8,7]
console.log(data4)//输出的结果为[7,8,7] 元素组发生改变

• fill方法

使用固定值填充数组
//第一个参数必填，填充的值
//第二个参数选填，开始填充位置
//第三个参数选填，停止填充位置
var data3 = [7,8,9]
var data4 = data3.fill(10,0,1)
console.log(data3)// 输出的结果为[10,8,9]
console.log(data4)// 输出的结果为[10,8,9] 元素组发生改变

不改变自身的方法

• 数组合并 concat()

//均会触发视图的更新  返回一个新数组，原数组不发生改变
this.data = this.data1.concat(this.data2);//双数组合并
this.data = this.data1.concat(this.data2,this.data3)//三数组合并

• 数组转字符串 join()

// join()参数传空，默认以“,”分割
this.data = this.data1.join()//1,2,3
this.data = this.data1.join('-')//1-2-3

• 数组截取 slice()

//1.不传参数
this.data = this.data2.slice()
console.log(this.data)  // 输出的结果为[4,5,6], 不进行截取
console.log(this.data2) // 输出的结果为[4,5,6] 原数组不发生改变
//2.只传一个参数
this.data = this.data2.slice(1)
console.log(this.data)  // 输出的结果为[5,6], 返回的结果为被截取的数组（截取该索引之后的所有元素，包括该索引）
console.log(this.data2) // 输出的结果为[4,5,6] 原数组不发生改变
//3.传两个参数
this.data = this.data2.slice(1,3)
console.log(this.data)  // 输出的结果为[5,6], 返回的结果为被截取的数组(截取索引号之间的元素，左闭右开)
console.log(this.data2) // 输出的结果为[4,5,6] 原数组不发生改变

• 数组转字符串toString()

// 数组转字符串
var data = [1,2,3]
var data1 = data.toString()
console.log(data1) //输出的结果为1,2,3

• toLocaleString()将数组转换成本地数组

var array= [{name:'zz'}, 123, "abc", new Date()];
var array1 = array.toLocaleString() // 将数组转换成本地数组
console.log(array)//[{…}, 123, 'abc', Wed Feb 09 2022 21:31:43 GMT+0800 (中国标准时间)]
console.log(array1)//[object Object],123,abc,2022/2/9 下午9:31:43

• indexOf()方法返回指定的字符串值在数组中首次出现的位置（索引）

var array = [3,4,5,7,8,5]
var index = array.indexOf(5)
console.log(index)//2
var index1 = array.indexOf(10)
console.log(index1) // -1
console.log(array)//[3, 4, 5, 7, 8, 5]

• lastIndexOf()方法返回指定的字符串值在数组中最后出现的位置（索引）

var array = [3,4,5,7,8,5]
var index = array.lastIndexOf(5)
console.log(index)//5
var index1 = array.lastIndexOf(9)
console.log(index1)// 输出的结果为-1
console.log(array)//[3, 4, 5, 7, 8, 5]

• includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

var array = [3,4,5,7,8,5]
var str1 = array.includes(4)
console.log(str1) // true
var str2 = array.includes(10)
console.log(str2) // false
console.log(array) // [3,4,5,7,8,5]

数组遍历的方法

• forEach

// 语法：array.forEach(function(currentValue, index, arr), thisValue)
// 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
  array[index] = value;
  console.log(this.name); // cc被打印了三次, this指向obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为undefined

• every

// 对数组的所有元素进行校验，如果都满足条件返回值为true,否则返回false,不会对空数组进行校验
var array = [20,45,78]
var str1 = array.every((item)=>{
  return item >= 18
})
console.log(str1) // true
var str2 = array.every((item)=>{
  return item >= 28
})
console.log(str2) // false

• some

// 对数组的元素进行校验，如果有一项满足条件的话就返回true，并且后面的元素不在进行校验，不对空数组进行校验
var array = [20,45,78]
var str1 = array.some((item)=>{
    return item >= 28
})
console.log(str1) // true
var str2 = array.some((item)=>{
    return item >= 88
})
console.log(str2) // false

• map

//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。不会对空数组进行处理
var array = [1,2,3]
var arr1 = array.map((item)=>{
  return item * 2
})
console.log(array) // [1,2,3]
console.log(arr1) // [2,4,6]

• filter

//filter() 方法返回一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。不会对空数组进行处理
var array = [4,7,6,9,2,8]
var str1 = array.filter((item)=>{
  return item == 9
})
console.log(str1) // [9]

• reduce

//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。不会对空数组进行处理
var numbers = [65, 44, 12, 4];
var num = numbers.reduce((total,num)=>{
  return total + num
})
// 1 total: 0 num: 65
// 2 total: 65 num: 44
// 3 total: 109 num: 12
// 4 total: 121 num: 4
// 5 total: 125
console.log(num) //125

• reduceRight

//reduceRight()方法与reduce()方法的区别在于它是从右往左开始缩减的

• entrues

// entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key， 数组元素作为 value。
var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组末尾时, 再迭代就会返回undefined

• keys

// keys() 方法用于从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true，否则返回 false。
var array = ['张三','李四','王五']
var str1 = array.keys()
console.log(str1.next().value) //0
console.log(str1.next().value) //1
console.log(str1.next().value) //2

• values

// keys() 方法用于从数组创建一个包含数组键值的可迭代对象。如果对象是数组返回 true，否则返回 false。
var array = ['张三','李四','王五']
var str1 = array.values()
console.log(str1.next().value) //张三
console.log(str1.next().value) //李四
console.log(str1.next().value) //王五

• find

// find方法返回数组满足条件的第一个元素
// find() 方法为数组中的每个元素都调用一次函数执行：
// -当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
// -如果没有符合条件的元素返回 undefined
var array = [3,8,2,4,9,7]
var str1 = array.find(item=>{
  return item >= 8
})
console.log(str1) // 输出的结果为8
var str2 = array.find(item=>{
  return item >=10
})
console.log(str2) // undefined

• findIndex

// findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
// findIndex() 方法为数组中的每个元素都调用一次函数执行：
// -当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
// -如果没有符合条件的元素返回 -1
var array = [3,8,2,4,9,7]
var str1 = array.findIndex(item=>{
  return item >= 8
})
console.log(str1) // 输出的结果为1
var str2 = array.findIndex(item=>{
  return item >=10
})
console.log(str2) // -1