首页 > 其他分享 >js的数组操作方法大全

js的数组操作方法大全

时间:2022-09-04 18:25:17浏览次数:476  
标签:arr 示例 操作方法 js 参数 数组 var array 大全

js中数组的操作方法大全


常见的一些数组操作
push,pop,unshift,shift

push

  • 语法array.push(item1,item2,...,itemX)
  • push()方法:可以将一个或者更多的参数添加在数组的尾部
  • 代码示例如下:
var arr = [1,2,3,4];
var a = arr.push(9,8,7);
console.log(a,arr);   //1,2,3,4,9,8,7;

unshift

  • 语法:array.unshift(item1,item2,...,itemX)
  • unshift()方法:可以将一个或者更多的参数添加在数组的头部;返回添加后的数组的长度,原数组发生改变。
  • 代码示例如下:
var arr = [1,2,3,4];
var a = arr.unshift(9,8,7);
console.log(a,arr);  //9,8,7,1,2,3,4;

pop

  • 语法:array.pop()
  • pop()方法:从数组尾部删除一个元素返回这个被删除的元素,原数组发生改变。
  • 代码示例如下:
var arr = [1,2,3,4];
var a = arr.pop();
console.log(a,arr)    //4:  1,2,3

shift

  • 语法:array.shift()
  • shift()方法:从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。
  • 代码示例如下
var arr = [1,2,3,4];
var a = arr.shift();
console.log(a,arr)    //1: 2,3,4,

slice

  • 语法:array.slice(start,end)
  • slice()方法:如果不传参,会返回原数组;如果一个参数,从该参数表示的索引开始截取,直至数组结束,返回这个截取数组,原数组不变;两个参数,从第一个参数对应的索引开始截取,到第二个参数对应的索引结束,但包括第二个参数对应的索引上的值,原数组不改变&最多接受两个参数
  • 代码示例如下
var fruits = ["Banana","Orange","Apple","Mango"];
var citrus = fruits.splice(1,3);
console.log(citrus)   //Orange,Lemon

splice

  • 语法:array.splice(index,howmany,item1,...,itemX)
  • splice()方法:没有参数,返回空数组,原数组不变;一个参数,从该参数表示索引位开始截取,直至数组结束,返回截取的数组,原数组改变;两个参数,第一个参数表示开始截取的索引为,第二个参数表示截取的长度,返回截取的数组,原数组改变,三个或者更多参数,第三个及以后的参数表示要从截取位插入的值。
  • 代码示例如下:
var fruits = ["Banana","Orange","Apple","Mango"];
fruits.splice(2,2);
console.log(fruits);      //Banana,Orange

reverse

  • 语法:array.reverse()
  • reverse()方法:用于颠倒数组中元素的顺序。
  • 代码示例如下:

var fruits = ["Banana","Orange","Apple","Mango"];
fruits.reverse();
console.log(fruits);   //Mango,Apple,Orange,Banana

sort

  • 语法:array.sort(sortfunction)
  • sort()方法:用于对数组的元素进行排序。
  • 代码示例如下:
var Array = [1,2,3,4,5];
var fruits = Array.sort(function(a,b) {
	//return a - b;    //从小到大
	return b - a;      //从大到小
}

join

  • 语法:arrat.join(separator)
  • join()方法:把数组中的所有元素转化一个字符串,元素是通过指定的分隔符进行分割的。
  • 代码示例如下:
var arr = [1,2,3,4]
var bbc = arr.join()
console.log(bbc)     //1,2,3,4

concat

  • 语法:string.concat(string1,string2,...,stringX)
  • concat()方法:属于字符串的方法,数组也可以用,接受一个或多个参数,将参数中值放到操作的数组后边,返回拼接的数组,原数组不变。如果参数是一个数组,则先把值提取出来再操作。
  • 代码示例如下:
var arr = [1,2,3,4];
arr.concat([5,6,7])    //[1,2,3,4,5,6,7]

indexOf()

  • 语法:string.indexOf(searchvalue,start)
  • indexOf()方法:字符串的方法,数组也可适用,此方法可返回某个指定的字符串值在字符串中首次出现的位置;若一个参数,返回这个参数在数组里面的索引值,如果参数不在操作的数组中,则返回-1.
  • 代码示例如下:
var arr = [1,2,3,4];
arr.indexOf(1)   //0
arr.indexOf(5)   //-1

forEach()

  • 语法:array.forEach(function(currentValue,index,arr),thisValue)
  • forEach()方法:数组遍历,且只能遍历数组,不接受返回值或返回值为undefined。
  • 如果数组只有长度没有初始化是不会进行迭代元素的
  • 代码示例如下:
var arr = [1,2,3,4,5];
arr.forEach((item,index,arr) =>{
	//item  为当前数组元素
	//index 为当前索引
	//arr 为数组名称
})

map()

  • 语法:array.map(function(currentValue,index,arr),thisValue)
  • map()方法:数组的遍历,用来接收一个返回值,创建一个新数组,不改变原数组。
  • 代码示例如下:

var arr = [1,2,3,4,5,6];
arr.map(function(item,index,arr){
	return item * 2
})
//输出[2,4,6,8,10,12]

filter()

  • 语法:array.filter(function(currentValue,index,arr),thisValue)
  • filter()方法:过滤出一些符合条件的元素,返回一个新数组
  • 代码示例如下:
var ages = [32,33,16,40];

function checkAdult(age) {
	return age >= 18;
	//返回数组ages中所有元素大于18的元素
}

function myFunction(){
	document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//输出结果为:32,33,40

标签:arr,示例,操作方法,js,参数,数组,var,array,大全
From: https://www.cnblogs.com/HuangJiaZ/p/16655443.html

相关文章

  • 使用 fetch + React.js 调用 REST API
    JSON:PlaceholderJSON:Placeholder(https://jsonplaceholder.typicode.com/)是一个用于测试的RESTAPI网站。以下使用RxJS6+React.js调用该网站的RESTAPI,......
  • 关于 JSON 引号问题
    JSON的字符串中,字符串的引号必须用单引号,内部的键值必须用双引号importjsonstr='{"a":123,"b":"456"}'str=json.loads(str)print(str)#{'a':123,'b':'4......
  • 解决js对Long型数据进行处理时精度丢失的问题
    自定义消息转换器,将消息转换器追加到mvc框架的转换器集合中 步骤:1、首先在mvc配置类(WebMvcConfig)中重写“extendMessageConverters”方法,这是扩展mvc的消息转换器,可以在......
  • DOM css js 执行顺序
    DOM、CSS、JS的执行顺序js放在head中会立即执行,会阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。2.js的执行依赖前......
  • python读取xlsx文件并转化为 json 数据
    fromopenpyxlimportload_workbookimportosfromreimportfindallimportjson#读取所有的sheet目录defread_xlsx(path="./"):lis=os.listdir(path)......
  • 简单介绍 js array.map、array.forEach、Object.assign、Object.keys用法
     1、 Object.assign,合并成新的对象formData.data=Object.assign({},toRaw(props.rowData)); 2、Object.keys,循环对象的key属性 Object.keys(enumObj).forEa......
  • js操作BOM
    js操作BOM什么是Bom?BOM即浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象;由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;BOM由......
  • React.js VS Solid.js,作为初学者,你应该学习哪个?
    React.jsVSSolid.js,作为初学者,你应该学习哪个?作为初学者,哪个框架对您的开发之旅最有帮助?作为第一次接触javascript前端框架的初学者,您可能想知道一些事情,例如,哪个最......
  • ReactJS 与 NextJS:下一个项目应该使用哪一个?
    ReactJS与NextJS:下一个项目应该使用哪一个?当我们考虑下一个项目时,我们必须决定我们将使用什么技术堆栈.使用越来越普遍JavaScript在你的项目中。但不仅是普通的Ja......
  • js函数( 普通函数、箭头函数 ) 内部this的指向
    -普通函数 |具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的this总是指向代码运行环境下的全局对象(例如,浏览器中的window)。  示例:......