【Javascript】Array 数组对象

一、数组介绍

• 数组是一种复合数据类型
  • 在数组可以存储多个不同类型的数据，任何类型的值都可以成为数组中的元素
  • 创建数组时尽量要确保数组中存储的数据的类型是相同的
• 数组中存储的是有序的数据
  • 数组中的每个数据都有一个唯一的索引
  • 可以通过索引来操作获取数据
• 数组中存储的数据叫做元素
• 索引（index）是一组大于0的整数

二、创建数组

1. 构造函数方式创建数组

const arr = new Array(arg0,arg1....)  //实例化数组的同时传递参数
const arr1 = new Array(10)  //创建一个长度为10的空数组

2. 字面量的方式创建数组

const arr = []

3. 方法的方式创建数组

• Array.of(elementN)
  通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。
  • 参数
    • elementN 用于创建数组的元素
  • 返回值
    • 新的Array实例

    arr = Array(7)  // [,,,,,,]
    arr1 = Array.of(7)	// [7]
    	```
    

三、读取/修改数组

• 如果读取了一个不存在的元素，会返回undefined
• arr[index]
  • 根据索引值获取数组中对应元素内容

1. 遍历数组的方式

1.1 for循环

• const arr = [1,2,3,4,5]
  for (let i = 0 ; i < arr.length ; i++){
      console.log(arr[i]);	//1，2，3，4，5
  }
  

1.2 for-of

• const arr = [1,2,3,4,5]
  for ( let i of arr){
      console.log(i);	//1,2,3,4,5
  }
  

1.3 for-in(数组不推荐)

• for-in用来遍历数组的下标和对象的键

  	const arr = [1,2,3,4,5]
  	for ( let i in arr){
  	    console.log(arr[i]); //1,2,3,4,5
  	}
  

1.4 forEach()

• const arr = [1,2,3,4,5]
  arr.forEach(i=>{console.log(i);})  // 1,2,3,4,5
  

1.5 map()

• 	const arr = [1,2,3,4,5]
  	const arr1 = arr.map(item=>item)  //[1,2,3,4,5]
  	```
  

1.6 filter()

• const arr = [1,2,3,4,5]
  const arr1 = arr.filter(item=>item) //[1,2,3,4,5]
  

2. 数组去重

2.1 对比索引值

• 当前元素的索引值与第一次出现的索引值不同则说明不是第一次出现

• const arr = [1,2,3,1,2,3,1,2,3,1,2,3]
  const arr1 = arr.filter((item,index) => arr.indexOf(item)==index)
  arr1 // [123]
  

2.2 数组中不存在则添加进数组

• 创建一个空数组，遍历时将元素添加进数组
• 如果数组中存在当前值，则跳过当前值

• // 用forEach实现
  const arr = [1,2,3,4,5,1,2,3,1,2,2,1]
  let arr1 = []
  arr.forEach(item =>{
    if (arr1.indexOf(item) == -1){
      arr1.push(item)
    }
  })
  console.log(arr1);
  
  // 用reduce实现
  const arr2 = [1,2,3,1,2,3,1,2,3]
  const arr3 = arr.reduce((pre,cur)=>{
      if(!pre.includes(cur)){
          pre.push(cur)
      }
      return pre
  },[])
  

四、方法

1. 非破坏性方法（对原数组没有影响）

• array.indexOf(str，index)
  获取元素在数组中第一次出现的位置

  const arr = [1,2,3,4,5]
  console.log(arr.indexOf(3));	// 2
  
  const arr1 = [1,2,3,1,2,3,1,2,3]
  console.log(arr1.indexOf(3)); 	// 2
  console.log(arr1.indexOf(3,3)); // 5
  

• array.lastIndexOf(str，index)
  获取元素在数组中最后一次出现的位置没有找到返回-1

  const arr = [1,2,3,4,5]
  console.log(arr.lastIndexOf(3));  // 2
  
  const arr1 = [1,2,3,1,2,3,1,2,3]
  console.log(arr1.lastIndexOf(3));	// 8
  console.log(arr1.lastIndexOf(3,-3));  // 5
  

• array.length
  获取数组的长度，获取的实际值是数组的最大索引+1

  • 可以作为索引用来向数组最后添加元素
  • length是可以修改的，数组的长度会变为指定的长度
  • 如果修改后的长度比原来长，就会在数组后面添加空属性
  • 如果修改后的长度比原来短，就会从右向左删除

  const arr = [1, 2, 3, 4, 5]
  
  console.log(arr.length); //5
  
  arr[arr.length] = 6
  console.log(arr);		// [ 1, 2, 3, 4, 5, 6 ]
  console.log(arr.length); 	 // 6
  
  arr.length = 4
  console.log(arr); // [ 1, 2, 3, 4 ]
  
  arr.length = 10
  console.log(arr); 	// [ 1, 2, 3, 4, , , , , ,  ]
  

• array.forEach(callback,[thisArg]) --ES5
  列出数组的每个元素

  • 参数
    • callback定义一个函数接收方法传入的值并进行运算
      • value 必须 定义一个变量接收数组元素
      • [index] 定义一个变量接收当前元素的索引值
      • [array] 定义一个变量接收当前元素所在的数组
    • [this]传入一个HTML元素，当前函数的this会指向这个元素

    const arr = [1,2,3,{name:'张三'}]
    arr.forEach(item =>{console.log(item)})  //1,2,3,{name:'张三'}
    

• array.map(callback,[thisArg]) --ES5
  返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

  • 参数
    • callback定义一个函数接收方法传入的值并进行运算
      • value 定义一个变量接收数组元素
      • [index] 定义一个变量接收当前元素的索引值
      • [array] 定义一个变量接收当前元素所在的数组
    • [thisArg]传入一个HTML元素，当前函数的this会指向这个元素

    const arr = [1,2,3,4]
    const arr1 = arr.map(item=>{
        return 2*item
    })
    arr1 	// [2,4,6,8]
    

• array.filter(callback,[thisArg]) --ES5
  过滤出数组中满足条件的值并返回 参数与forEach相同

  • 参数
    • callback定义一个函数接收方法传入的值并进行运算
      • value 定义一个变量接收数组元素
      • [index] 定义一个变量接收当前元素的索引值
      • [array] 定义一个变量接收当前元素所在的数组
    • [thisArg]传入一个HTML元素，当前函数的this会指向这个元素
  • 返回值
    • 如果返回值为不为false，则返回数组当前元素，否则返回空

    // 过滤出>= 60的数字
    const arr = [30, 40, 50, 60, 70, 80, 90, 100]
    const arr1 = arr.filter(item => item >= 60)
    arr1 	// [60,70,80,90,100]
    

• array.reduce(callback,Initialization) --ES5
  将数组的内容按照函数处理并回调,最后返回汇总计算结果

  • 参数
    • callback
      • previousValue
        • 第一轮 : 如果Initialization未定义,该值为array[0]的值
        • 后续: 上一次的返回值
      • currentValue
        • 当前正在处理的元素
      • currentIndex
        • 当前元素的索引
      • array
        • 用于遍历的数组
    • Initialization
      • 将参数callback中的previousValue首轮定义为该值
      • 若该参数为空,则取array[0]

    let arr = [1, 2, 3, 4, 5]
    arr1 = arr.reduce(
        // 参数一回调函数
        (previousValue, currentValue,currentIndex,array) => {
            // previousValue为上一轮函数返回值
            // 因为arr[0] == 1，且reduce未定义第二个参数 所以previousValue从1即arr[0]开始
            console.log(previousValue);
            // currentValue为从arr[1]开始的遍历元素,如果参数二定义，则从arr[0]开始
            console.log(currentValue);
            // index为当前元素的下标
            console.log(currentIndex);
            // array为当前元素所在的数组
            console.log(array);
            // 返回值传入下一轮函数作为previousValue使用
            return previousValue + currentValue
            // 函数整体流程
            // 第四轮{第三轮（第二轮[第一轮（1 + 2）+3]+4}+5= 15
        }
        // 参数二未定义，如果定义参数二，则参数二为第一轮previousValue，即代替第一轮的arr[0]进行运算
    
    )
    arr1
    arr
    

• array.at(index) --ES5
  根据索引值获取数组中的对应值

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

• array.concat(array2) --Es5
  用来连接两个或多个数组，重复的内容不会覆盖

  const arr = [1, 2,3, {name:'张三'}]
  const arr1 = [{name:'张三'},6,7]
  const arr2 = arr.concat(arr1)
  console.log(arr2);  //[ 1, 2, 3, { name: '张三' }, { name: '张三' }, 6, 7 ]
  

• array.join(连接符) --ES5
  将一个数组的元素链接为一个字符串，指定一个字符串作为连接符，默认为逗号

  • 返回值
    • 链接后的字符串

  const arr = ['张三','李四','王五']
  
  console.log(arr.join());	//张三,李四,王五
  console.log(arr.join('---')); 	//张三---李四---王五
  

• array.slice(起始位置，结束位置) --ES5
  用来截取数组并返回

  • 第二个参数可以省略不写，如果省略不写，会一直截取到最后
  • 如果两个参数全部省略，则赋值时会对数组进行浅拷贝（浅复制）

  const arr = ['张三','李四','王五']
  
  console.log(arr.slice(1));	// [ '李四', '王五' ]
  console.log(arr.slice(0,2));  //[ '张三', '李四']
  console.log(arr.slice()); //[ '张三', '李四', '王五' ]
  

• every --ES5
  用于检测数组所有元素是否都符合指定条件

  • 参数
    • callback回调函数 用来测试每个元素的函数,可以接受三个参数
      • element 数组中正在处理的元素
      • [index] 当前元素的索引值
      • [array] 被调用的数组
    • [thisArg]执行callback时函数的this指向该对象
  • 返回值
    • 数组中至少有一个元素不通过callback函数的测试就会返回false,当所有元素都通过则返回true

    const arr = [1,2,3,4,5]
    arr.every(item=>item>1)	//false
    arr.every(item=>item>0)	//true
    

• array.some(callback,thisArg) --ES5
  用于检测数组中的元素是否至少有一个满足指定条件

  • 参数
    • callback回调函数 用来测试每个元素的函数,可以接受三个参数
      • element 数组中正在处理的元素
      • [index] 当前元素的索引值
      • [array] 被调用的数组
    • [thisArg]执行callback时函数的this指向该对象
  • 返回值
    • 数组中至少有一个元素通过callback函数的测试就会返回true,当所有元素都没有通过则返回false

    arr = [1,2,3,4,5]
    arr.some(item => item > 0 )  //true
    arr.some(item => item < 0 )  //false
    

• array.toString() --ES5
  用于将数组内容转换为字符串

  arr = [1,2,3,4,5]
  str = arr.toString() // "1,2,3,4,5"
  

• arrary.includes(searchElement,fromIndex) --ES6
  用来判断一个数组是否包含一个指定的值

  • searchElement需要查找的元素值
  • [fromIndex] 开始查找的索引值,可以为负数

• Array.isArray(Value) --ES6
  判断是否为数组类型，并返回布尔值

  const arr = [1, 2, 3, 4, 5]
  const x = 1
  console.log(Array.isArray(arr)); 		// true
  console.log(Array.isArray(x)); 		// false
  

• Array.from(arrayLike,mapFn,thisArg) --ES6
  对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

  • 参数
    • arrayLike想要转换成数组的对象或可迭代对象（例如获取到的元素列表）
    • [mapFn]如果指定了该参数，则新数组中的每个元素都会执行该回调函数
    • [thisArg]执行回调函数时，函数内的this会指向该对象
  • 返回值
    • 如果未指定mapFn参数,则返回arrayLike转换后的数组
    • 如果指定了mapFn参数,则返回该函数的返回值

• array.find(callbackfn,[thisArg]) --ES6
  返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined

  • 参数
    • callback回调函数 用来测试每个元素的函数,可以接受三个参数
      • element 数组中正在处理的元素
      • [index] 当前元素的索引值
      • [array] 被调用的数组
    • [thisArg]执行callback时函数的this指向该对象
  • 返回值
    • 如果数组中没有满足条件的元素,则返回undefined

  arr = [1,2,3,4,5]
  let n1 = arr.find((item,index,arr)=>{
      item //1,2,3
      index //0,1,2
      arr		//[1,2,3,4,5] [1,2,3,4,5] [1,2,3,4,5]
      return item > 2 // false false true
  })
  n1  // 3
  

• array.findIndex(callbackfn,[thisArg]) --ES6
  返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1

  • 参数
    • callback回调函数 用来测试每个元素的函数,可以接受三个参数
      • element 数组中正在处理的元素
      • [index] 当前元素的索引值
      • [array] 被调用的数组
    • [thisArg]执行callback时函数的this指向该对象
  • 返回值
    • 如果数组中没有满足条件的元素,则返回-1

  arr = [1,2,3,4,5]
  let n1 = arr.findIndex((item,index,arr)=>{
      item	// 1,2,3
      index	// 0,1,2
      arr	 // [1,2,3,4,5] [1,2,3,4,5] [1,2,3,4,5]
      return item > 2  // false  false  true
  })
  n1 // 2
  

• array.flat() --ES6
  用于拉平嵌套组对象

  let list = [1, 2, 3, [4, [5]]];
  
  let res = list.flat(Infinity)
  console.log(res) // [1, 2, 3, 4, 5]
  

2.破坏性方法(会改变原有数组)

• push() --ES5
  向数组的末尾添加一个或多个元素，并返回新数组长度

  const arr = ['张三','李四','王五']
  const arr1 = arr.push('小明','小刘')  // 5
  // 此时arr1 = ['张三','李四','王五','小明','小刘']
  

• pop() --ES5
  删除并返回数组的最后一个元素

  const arr = ['张三','李四','王五']
  const arr1 = arr.pop()  // '王五'
  console.log(arr1)  // ['张三','李四']
  

• shift() --ES5
  删除并返回数组的第一个元素

  const arr = ['张三','李四','王五']
  const arr1 = arr.shift()
  console.log(arr1);  // 张三
  console.log(arr); 	// [ '李四', '王五' ]
  

• unshift() --ES5
  删除并返回新数组的长度

  const arr = ['张三','李四','王五']
  const arr1 = arr.unshift('小明')
  console.log(arr1);	// 4
  console.log(arr); 	// [ '小明', '张三', '李四', '王五' ]
  

• splice(startIndex,deleteCount,item1,item2......) --ES5
  可以删除、添加、插入、替换数组中的元素

  • 参数：
    • startIndex删除的起始位置
    • deleteCount删除的数量
    • item1,item2.. 插入的元素，可以是无数个，也可以是任意类型
  • 返回值：
    • 被删除的元素，如果没有删除元素则返回空数组

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

• reverse() --ES5
  反转数组

• 返回值：反转后的数组

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

• sort() --ES5
  数组排序

  • 参数
    • function(x,y) 比较函数，用来指定排列规则，如果为空，则按照字符串各字符的Unicode位点进行排序
      • x第一个用于比较的元素。
      • y第二个用于比较的元素。
      • 如果函数结果大于0 ，则y在前
      • 如果函数结果小于0 ，则x在前
      • 如果函数结果等于0 ，则顺序不变

    let arr = [10,1,20,2]
    
    // 无函数
    arr.sort()	// [1，10，2，20]
    
    function sor(x,y){return x-y}
    // 调用比较函数
    arr.sort(sor)	// [1 , 2 , 10 , 20 ]
    
    // 内嵌函数
    arr.sort((x,y)=>x-y)  // [ 1 , 2 , 10 , 20]
    

• array.fill() --ES6
  用于填充数组对象

  let list = [1, 2, 3];
  
  let res = list.fill(1)
  console.log(res) // [1, 1, 1]