js数据类型方法（Array）

QAQshift

已于 2024-09-13 10:18:35 修改

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2023-03-02 19:27:52 首次发布

本文链接：https://blog.csdn.net/o_0ava0_o/article/details/129307232

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文总结了JavaScript中数组的各种操作方法，包括转换方法如toString和join，首尾元素的增删如pop、push、shift和unshift，元素更改、删除及合并，以及裁剪、排序、查找最高值和最低值、迭代方法如forEach、map、filter、reduce等，还有检索方法如indexOf和lastIndexOf，以及find和findIndex。这些方法在数组处理中起到关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组类型方法总结

1.把数组转换为字符串

  Array.toString()      `把数组转换为数组值（逗号分隔）的字符串 返回字符串`
  //无参数
  //默认逗号分隔字符
  //注意：不改变原数组

  Array.join(''/'element')        `将所有数组元素结合为一个字符串 返回字符串`
  //一个参数---参数1：分隔字符的符号
  //注意：不改变原数组

  /*
	  方法差异: 
	  toString      隔字符的符号只能是逗号
	  join          可以自定义分隔字符的符号
	
	  toString() === join(',')/join()
  */


//---------------------Array.toString()

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

//---------------------Array.join()

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

2.数组中元素的首尾元素增减

  Array.pop()   `从数组中删除最后一个元素 返回值是删除的值`
  //无参数
  //注意：会改变原数组

  Array.push(element)   `在数组结尾处向数组添加一个新的元素 返回值是数组的长度`
  //一个参数---参数1：添加的元素
  //注意：会改变原数组

  Array.shift()  `从数组中删除首个元素 返回值是删除的值`
  //无参数
  //注意：会改变原数组

  Array.unshift(element) `在数组首部处向数组添加一个新的元素 返回值是数组的长度`
  //一个参数---参数1：添加的元素
  //注意：会改变原数组

  /*
	  方法差异: 
	  pop与shift  一个删除结尾元素，一个删除首部元素
	
	  push与unshift   一个增添元素至数组尾部，一个增添至首部
  */


//---------------------pop

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

//---------------------push

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

//---------------------shift

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

//---------------------unshift

	let arr4=[1,2,3,4]
	console.log(arr2.unshift(0)) // 5
	console.log(arr2) // [0, 1, 2, 3, 4]

3.数组中元素的更改

  Array[i]= 修改后元素

  // 通过索引可以将数组中的某个元素进行修改
  //注意：会改变原数组


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

4.数组中元素的删除

  // 运用delete运算符 --- JavaScript 数组属于对象
  delete Array[i];
  //和 pop与shift 不同的是，delete会留下一个空洞 值为undefined
  //注意：会改变原数组


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

4.数组中元素的增减

  Arrary.splice(start,length...)   `拼接和删除数组元素       返回一个包含已删除项的数组`
  //多个参数---参数1：开始[拼接新元素/删除元素]的位置 参数2：删除元素个数 其余参数：拼接的元素
  //注意：会改变原数组


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

5.数组的合并

  Array.concat(Array...)    `合并（连接）现有数组来创建一个新数组 返回一个新数组`
  //任意个参数---参数：拼接的数组
  //注意：不改变原数组


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

6.裁剪数组

  Array.slice(start, end / start)   `用数组的某个片段切出新数组 返回裁剪的数组片段`
  //两个参数---参数1：开始裁剪的位置 参数2：结束裁剪的位置
  //如果只有一个参数，则截取从参数1开始的后面所有
 //注意：不改变原数组
	
  /*
	  方法差异
	  splice和slice   一个返回删除元素后的数组，一个返回裁剪的数组，裁剪并不改变原数组
  */


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

7.反转数组

  Array.reverse()   `反转数组中的元素`
  //无参数
  //注意：会改变原数组


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

字符串数组方法对比

1.字符串数组转化

    // 字符串转数组
    String.split()


    // 数组转字符串
    Array.toString()
    Array.join()


    // split对应join

2.字符串数组裁剪方法

    //字符串裁剪
    String.slice()
    String.substring()
    String.substr()

    //数组裁剪
    Array.slice()

3.字符串数删除元素方法

    //字符串删除
    String.replace()


    //数组删除
    Array.splice()

4.字符串反转字符

  /*
    字符串中没有反转方法

    但是数组中有，因此我们只需要将字符串转化为数组，再将数组进行反转，最后再将数组转化为字符串即可

    '12345' -> '54321'
  */


	let str='12345'
	arr=str.split('')		// arr [1,2,3,4,5]
	arr=arr.reverse()		// arr [5,4,3,2,1]
	str=arr.join('')		// str 54321

	console.log('12345'.split('').reverse().join(''))  // 54321

数组其他方法

1.数组排序

  Array.sort()    `方法首字母或首数字顺序对数组进行排序`
  //无参数  或 参数：比值函数
  //注意：会改变原数组

  //缺陷：比较元素是以首字母或首数字为顺序，而数字的话就导致11在2前面的现象
  //解决:在sort()中传入比值函数作为参数
  //当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

  /*
    比值函数    比较函数应该返回一个负，零或正值	
    注意：对字母无效
    正序
    function(a,b){
      return a-b;
    }
    倒序
    function(a,b){
      return b-a;
    }
  */


	let arr1=[11,2,3,4]
	console.log(arr1.sort())  // [11, 2, 3, 4]
	console.log(arr1) // [11, 2, 3, 4]
	
	let arr2=[11,2,3,4]
	console.log(arr2.sort(function(a,b){
      return a-b;
  	}))  //  [2, 3, 4, 11]
	console.log(arr2) //  [2, 3, 4, 11]
	
	let arr3=['b','a','c']
	console.log(arr3.sort())  // ['a', 'b', 'c']
	console.log(arr3) // ['a', 'b', 'c']
	
	//字母排序倒叙
	let arr4=['b','a','c']
	console.log(arr4.sort())  // ['a', 'b', 'c']
	console.log(arr4.reverse())  // ['c', 'b', 'a']

2.查找数组中的最高值和最低值

  Math.max.apply(Math.max,Array)    `查找数组中的最高值`
  //一个参数---参数1：Math.max	参数2：数字数组数组

  Math.min.apply(Math.min,...args)    `查找数组中的最低值`
  //一个参数---参数1：Math.min	参数2：统一数据结构的参数

  //Math.max.apply(Math.max,[1, 2, 3]) 等于 Math.max(1, 2, 3) 等于 Math.max.call(Math.max,1, 2, 3)
  //Math.min.apply(Math.min,[1, 2, 3]) 等于 Math.min(1, 2, 3) 等于 Math.min.call(Math.min,1, 2, 3)

  /*
	  apply方法 与call方法  `可以编写用于不同对象的方法`

	  apply与call差异：基本类似，但apply只有两个参数，第二个参数为数组，数组元素会传入到方法
	                  而call方法有多个参数，除第一个参数为对象，其余参数为统一数据结构

  */


	  console.log(Math.max(1, 2, 3))	// 3
	  console.log(Math.max.apply(Math.max,[1, 2, 3]))		// 3
	  console.log(Math.max.call(Math.max,1, 2, 3))		// 3
	  
	  console.log(Math.min(1, 2, 3))		// 1
	  console.log(Math.min.apply(Math.min,[1, 2, 3]))		// 1
	  console.log(Math.min.call(Math.min,1, 2, 3))		// 1

	  let obj1={
	    fn:function(a,b){
	      return this.s1+" "+this.s2+""+a+b
	    }
	  }
	  let obj2={
	    s1:"hello",
	    s2:"world"
	  }
	  console.log(obj1.fn.apply(obj2,["小","明"]))	// hello world 小明
	  console.log(obj1.fn.call(obj2,"小","明")) 	// hello world 小明

迭代数组的方法

1.Array.forEach()

    Array.forEach(fn)   `为每个数组元素调用一次函数（回调函数）`
    //一个参数：fn 即回调函数  必须传入回调
    //注意：不改变原数组

    //回调函数可以传入以下参数 如下
    function(value,index,array){
		
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身

	
	 const arr=['a','b','c']
	 arr.forEach((value,index,arry)=>{
	 		console.log(value,index,arry)
	 })
	 //	a 0  ['a', 'b', 'c']
	 //	b 1  ['a', 'b', 'c']
	 //	c 2  ['a', 'b', 'c']
	 console.log(arr)	// ['a', 'b', 'c']

2.Array.map()

    Array.map(fn)   `通过对每个数组元素执行函数来创建新数组 注：不会对没有值的数组元素执行函数，不会更改原始数组`
    //一个参数：fn 即回调函数  必须传入回调
    //注意：不改变原数组

    //回调函数可以传入以下参数 如下
    function(value,index,array){
      return value*2;
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身


	 const arr1=['a','b','c']
	 let arr2=arr1.map((value,index,arry)=>{
	 	console.log(value,index,arry)
	 	return `${value}${index+1}`
	 })
	 //	a 0  ['a', 'b', 'c']
	 //	b 1  ['a', 'b', 'c']
	 //	c 2  ['a', 'b', 'c']
	 console.log(arr1)	//	['a', 'b', 'c']
	 console.log(arr2)	//	['a1', 'b2', 'c3']

3.Array.filter()

    Array.filter(fn)   `创建一个包含通过测试的数组元素的新数组`
    //一个参数：fn 即回调函数  必须传入回调
    //注意：不改变原数组

    //回调函数可以传入以下参数 如下
    function(value,index,array){
      return value>1
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身

	 const arr1=[1,2,3]
	 const arr2=arr1.filter((value,index,arry)=>{
	 	console.log(value,index,arry)
	 	return value>1 && value<3
	 })
	 //	1 0  [1, 2, 3]
	 //	2 1  [1, 2, 3]
	 //	3 2  [1, 2, 3]
	 console.log(arr1)	//	[1, 2, 3]
	 console.log(arr2)	//	[2]

4.三个迭代方法的区别 forEach map filter

    /*
    forEach,map,filter 都是迭代数组的方法

    共同点：都需要传入一个回调函数 且回调函数的三个参数相同
    不同点:forEach 是每迭代一次返回一个结果
           map 是将每次迭代的值放到一个数组中返回 
           filter 是将每次迭代的符合某条件的值放到一个数组中返回
    */

5.Array.reduce()

    Array.reduce(fn, n / fn)   `在每个数组元素上运行函数，以生成（返回）单个值 注:从左到右工作 不会减少原始数组`
    //两个参数：参数1:回调函数(必传)  参数2:total的起始值(可选)
    //注意：不改变原数组

    //回调函数可以传入以下参数 如下
    function(total,value,index,array){
      return total+value;
    }

    //三个参数---参数1：总数 参数2：数组元素的值 参数3：索引 参数4：数组本身 

    /*  
        与以上三个方法一样，会迭代执行函数  但是只会返回一个值
        注意：
        如果没有传tatal，reduce默认会将第一个value作为初始total，然后从第二个value开始执行函数回调
        如果传了total，reduce会将tatal作为初始total，然后从第一个value开始执行回调函数
        返回值即为运算过的 total
    */


	 const arr1=[1,2,3]
	 const arr2=arr1.reduce((total,value,index,array)=>{
	 	 console.log(total,value,index,array)
	 	 return total+value
	 })
	 // 1 2 1 [1, 2, 3]		total=1
	 // 3 3 2 [1, 2, 3]		total=1+2
	 console.log(arr1)	//	[1, 2, 3]
	 console.log(arr2)	//	6		total=1+2+3

	 
	 const arr3=[1,2,3]
	 const arr4=arr3.reduce((total,value,index,array)=>{
		 console.log(total,value,index,array)
		 return value+total
	 },0)
	 // 0 1 0 [1, 2, 3]		total=0
	 // 1 2 1 [1, 2, 3]		total=0+1
	 // 3 3 2 [1, 2, 3]		total=0+1+2
	 console.log(arr1)	//	[1, 2, 3]
	 console.log(arr2)	//	6	 total=0+1+2+3

6.Array.reduceRight()

    Array.reduceRight(fn, n / fn)  `和reduce一样效果，只是迭代方向的从右往左`
    //注意：不改变原数组


	const arr1=[1,2,3]
	const arr2=arr1.reduceRight((total,value,index,array)=>{
		console.log(total,value,index,array)
		return value+total
	})
	//	3 2 1  [1, 2, 3]		total=3
	//	5 1 0  [1, 2, 3]		total=3+2
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	6	total=3+2+1
	
	const arr2=[1,2,3]
	const arr3=arr2.reduceRight((total,value,index,array)=>{
		console.log(total,value,index,array)
		return value+total
	},0)
	//	0 3 2  [1, 2, 3]		total=0
	//	3 2 1  [1, 2, 3]		total=0+3
	//	5 1 0  [1, 2, 3]		total=0+3+2
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	6	total=0+3+2+1

7.Array.every()

    Array.every(fn)   `检查所有数组值是否通过测试 返回值为布尔值`
    //一个参数：fn 即回调函数  必须传入回调
    //注意：不改变原数组

    //回调函数可以传入以下参数 如下
    function(value,index,array){
      return value>1
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身


	const arr1=[1,2,3]
	const arr2=arr1.every((value,index,array)=>{
		console.log(value,index,array)
		return value>1
	})
	//	1 0 [1, 2, 3]		
	//	2 1 [1, 2, 3]		
	//	3 2 [1, 2, 3]		
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	true

	/*
		为什么只执行一次回调函数：当第一次回调执行value>1时，value=1不满足条件，于是
		every直接返回了false，后面的回调都不会执行
		value>2时同理，也是在执行第一次回调就返回false
	*/
	const arr3=[1,2,3]
	const arr4=arr3.every((value,index,array)=>{
		console.log(value,index,array)
		return value>1
	})
	//	1 0 [1, 2, 3]		
	console.log(arr3)	//	[1, 2, 3]
	console.log(arr4)	//	false

7.Array.some()

    Array.some(fn)   `检查数组是否有任意一个元素值是否通过测试 返回值为布尔值`
    //一个参数：fn 即回调函数  必须传入回调

    //回调函数可以传入以下参数 如下
    function(value,index,array){
      return value>1
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身


	/*
		为什么只执行一次回调函数：当第一次回调执行value>0时，value=1满足条件，于是
		some直接返回了true，后面的回调都不会执行
		value>1时，则是第一次回调value=1没有通过，会继续执行value=2时的回调，然后
		满足条件，于是value=3不会执行，只会执行两次回调
	*/
	const arr1=[1,2,3]
	const arr2=arr1.some((value,index,array)=>{
		console.log(value,index,array)
		return value>0
	})
	//	1 0 [1, 2, 3]		
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	true

	/*
		当value都不满足条件时，就会执行所有回调
	*/
	const arr3=[1,2,3]
	const arr4=arr3.some((value,index,array)=>{
		console.log(value,index,array)
		return value>3
	})
	//	1 0 [1, 2, 3]		
	//	2 1 [1, 2, 3]		
	//	3 2 [1, 2, 3]		
	console.log(arr3)	//	[1, 2, 3]
	console.log(arr4)	//	false

8.三个迭代方法的区别 filter every some

    /*
    filter,every,some 都是迭代数组的比较方法

    共同点：都需要传入一个回调函数 且回调函数的三个参数相同
    不同点:filter 是将每次迭代的符合某条件的值放到一个数组中返回
           every 每次迭代的值都符合条件 则返回布尔值true 否则为false
           some 每次迭代，如果值符合条件就会返回一个 true 否则返回一个 false
    */

9.数组检索方法

    Array.indexOf(item,strat)   `在数组的首部开始搜索元素值并返回其位置(索引值)。 注：未找到返回-1`
    //两个参数---参数1：需要检索的项目 参数2：检索的起始位置
    //注意：不改变原数组

    Array.lastIndexOf(item,strat)   `在数组的尾部搜索元素值并返回其位置(索引值)。 注：未找到返回-1`
    //两个参数---参数1：需要检索的项目 参数2：检索的起始位置
    //注意：不改变原数组

    //indexOf 和 lastIndexOf 区别在于：lastIndexOf是从数组尾部检索其索引值,索引查找方向相反
    //indexOf是从左往右	lastIndexOf是从右往左


//---------------------indexOf
	const arr1=[1,2,3]
	const arr2=arr1.indexOf(2,4)	
	const arr3=arr1.indexOf(4,0)	
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	1	
	console.log(arr3)	//	-1	

//---------------------lastIndexOf
	const arr1=[1,2,3]
	const arr2=arr1.lastIndexOf(2,4)		// 从索引4往左查值为2，可找到
	const arr3=arr1.lastIndexOf(4,4)		// 从索引4往左查值为4，找不到
	const arr4=arr1.lastIndexOf(2,0)		// 从索引0往左查值为2，找不到
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	1	
	console.log(arr3)	//	-1	
	console.log(arr4)	//	-1

10.Array.find()

    Array.find(fn)   `返回通过测试函数的第一个数组元素的值`
    //一个参数：fn 即回调函数  必须传入回调
    //不改变原数组

    //回调函数可以传入以下参数 如下
    function(value,index,array){
      return value>1
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身


	/*
		为什么只执行一次回调函数：当第一次回调执行value>0时，value=1满足条件，于是
		find直接返回了value的值1，后面的回调都不会执行
		value>1时，则是第一次回调value=1没有通过，会继续执行value=2时的回调，然后
		满足条件，于是value=3不会执行，只会执行两次回调
	*/
	const arr1=[1,2,3]
	const arr2=arr1.find((value,index,array)=>{
		console.log(value,index,array)
		return value>0
	})
	//	1 0 [1, 2, 3]		
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	1

	/*
		当value都不满足条件时，就会执行所有回调，返回undefined
	*/
	const arr3=[1,2,3]
	const arr4=arr3.find((value,index,array)=>{
		console.log(value,index,array)
		return value>3
	})
	//	1 0 [1, 2, 3]		
	//	2 1 [1, 2, 3]		
	//	3 2 [1, 2, 3]		
	console.log(arr3)	//	[1, 2, 3]
	console.log(arr4)	//	undefined

11.Array.findIndex()

    Array.findIndex(fn)   `返回通过测试函数的第一个数组元素的索引`
    //一个参数：fn 即回调函数  必须传入回调

    //回调函数可以传入以下参数 如下
    function(value,index,array){
      return value>1
    }

    //三个参数---参数1：数组元素的值 参数2：索引 参数3：数组本身


	/*
		为什么只执行一次回调函数：当第一次回调执行value>0时，value=1满足条件，于是
		find直接返回了value的索引值0，后面的回调都不会执行
		value>1时，则是第一次回调value=1没有通过，会继续执行value=2时的回调，然后
		满足条件，于是value=3不会执行，只会执行两次回调
	*/
	const arr1=[1,2,3]
	const arr2=arr1.findIndex((value,index,array)=>{
		console.log(value,index,array)
		return value>0
	})
	//	1 0 [1, 2, 3]		
	console.log(arr1)	//	[1, 2, 3]
	console.log(arr2)	//	0

	/*
		当value都不满足条件时，就会执行所有回调，由于找不到索引，所以返回-1
	*/
	const arr3=[1,2,3]
	const arr4=arr3.findIndex((value,index,array)=>{
		console.log(value,index,array)
		return value>3
	})
	//	1 0 [1, 2, 3]		
	//	2 1 [1, 2, 3]		
	//	3 2 [1, 2, 3]		
	console.log(arr3)	//	[1, 2, 3]
	console.log(arr4)	//	-1