js专题-Array常用方法

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量89 收藏
点赞数
分类专栏： 前端js 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang__l/article/details/128692751
版权

1、数组增加

1.1. push方法

push：向数组的末尾添加新的元素（参数可以是多个），返回数组长度，改变原数组。

var arr = [];
var arrLength = arr.push('1');
console.log(arrLength); // 1
arrLength = arr.push('2','3','4');
console.log(arrLength); // 4
console.log(arr); // ['1','2','3','4']

在这里插入图片描述

1.2. unshift方法

unshift: 向数组的开头添加新的元素（参数可以是多个），返回数组长度，改变原数组

var arr = [];
var arrLength = arr.unshift('4');
console.log(arrLength); // 1
arrLength = arr.unshift('1','2','3');
console.log(arrLength); // 4
console.log(arr); // ['1','2','3','4']

在这里插入图片描述

1.3. concat方法

concat：用于连接两个或多个数组（参数可以是多个），返回新数组，不改变原数组。

1.3.1. 没有传递参数的情况下，concat只是复制当前数组并返回副本。

var arr = ['1', '2', '3'];
var newArr = arr.concat();
console.log(arr); // ['1','2','3']
console.log(newArr); // ['1','2','3']
console.log(arr === newArr); // false

在这里插入图片描述
1.3.2. 参数为一或多个数组，则将这些数组中的每一项都添加到副本数组中。

var arr1 = ['1'];
var arr2 = ['2'];
var arr3 = ['3'];
var newArr = arr1.concat(arr2, arr3);
console.log(arr1); // ['1']
console.log(arr2); // ['2']
console.log(arr3); // ['3']
console.log(newArr); // ['1','2','3']

在这里插入图片描述
1.3.3. 参数传递的值而不是数组，这些值会被添加到副本数组的末尾。

var arr = ['1'];
var newArr = arr.concat('2', '3');
console.log(arr); // ['1']
console.log(newArr); // ['1','2','3']

在这里插入图片描述
1.3.4. 参数可以为值和数组（不建议这样使用）。

var arr = ['1'];
var arr2 = ['3'];
var newArr = arr.concat('2', arr2);
console.log(arr); // ['1']
console.log(arr2); // ['3']
console.log(newArr); // ['1','2','3']

在这里插入图片描述

2、数组删除

2.1. pop方法

pop: 删除数组的末尾元素，返回它删除的元素的值，改变原数组。

var arr = ['1','2','3'];
var lastData = arr.pop();
console.log(arr); // ['1','2']
console.log(lastData); // '3'

在这里插入图片描述

2.2. shift方法

shift: 删除数组的第一个元素，返回它删除的元素的值，改变原数组。

var arr = ['1','2','3'];
var firstData = arr.shift();
console.log(arr); // ['2','3']
console.log(firstData); // '1'

在这里插入图片描述

2.3. splice方法

splice（index，howmany，item1，…，itemX）: 删除从 index 处开始的零个或多个元素，返回被删除的元素的数组，第二个以后的参数为在index处插入的元素，改变原数组。

2.3.1. 从指定位置删除元素。

var arr = ['1','2','3'];
var deleteDataList = arr.splice(1,2); // 从下标1处删除两个元素
console.log(arr); // ['1']
console.log(deleteDataList); // ['2','3']

在这里插入图片描述2.3.2. 从指定位置插入多个元素。

var arr = ['1','2','5'];
var deleteDataList = arr.splice(2,0,'3','4'); // 从下标为2的位置上插入多个元素
console.log(arr); // ['1','2','3','4','5']
console.log(deleteDataList); //  []  //第二个参数为0 不删除元素

在这里插入图片描述2.3.3. 从指定位置删除元素并插入多个元素。

var arr = ['1','2','5'];
var deleteDataList = arr.splice(2,1,'3','4'); // 从下标为2的位置上删除一个元素后，再插入多个元素
console.log(arr); // ['1','2','3','4']
console.log(deleteDataList); //  ['5']

在这里插入图片描述

3、数组截取

3.1. slice方法

slice(start,end)：截取从 start 到 end （不包括该元素）中的元素，返回一个新的数组。

3.1. 无参数表示返回当前数组的一个副本，默认start为0，end为字符串长度length。

var arr = ['1','2','3'];
var newArr = arr.slice();
console.log(arr); // ['1','2','3']
console.log(newArr); //  ['1','2','3']
console.log(newArr === arr); // false

在这里插入图片描述3.2. 只有一个参数,则该参数为start值，end默认为字符串长度length。

var arr = ['1','2','3'];
var newArr = arr.slice(1);
console.log(arr); // ['1','2','3']
console.log(newArr); //  ['2','3']

在这里插入图片描述
3.3. 两个参数，从start到end（不包括end下标的元素）

var arr = ['1','2','3','4','5'];
var newArr = arr.slice(1,3);
console.log(arr); // ['1','2','3','4','5']
console.log(newArr); //  ['2','3']

在这里插入图片描述3.4. 参数为负数，则规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

var arr = ['1','2','3','4','5'];
var newArr1 = arr.slice(-2); // 相当于arr.slice(arr.length + (-2)) -> arr.slice(3)
var newArr2 = arr.slice(0, -2); // 相当于arr.slice(0, arr.length + (-2)) -> arr.slice(0,3)
var newArr3 = arr.slice(-4,-2); // 相当于arr.slice(arr.length + (-4), arr.length + (-2)) -> arr.slice(1,3)
console.log(arr); // ['1','2','3','4','5']
console.log(newArr1); //  ['4','5']
console.log(newArr2); //  ['1','2','3']
console.log(newArr3); //  ['2','3']

在这里插入图片描述3.5. start参数大于等于数组长度，不管是否有end参数，结果返回空数组。

var arr = ['1','2','3','4','5'];
var newArr1 = arr.slice(5); // arr长度为5，start === arr.length
var newArr2 = arr.slice(6); // arr长度为5  start > arr.length
var newArr3 = arr.slice(5,1); // arr长度为5 start === arr.length
console.log(arr); // ['1','2','3','4','5']
console.log(newArr1); //  []
console.log(newArr2); //  []
console.log(newArr3); //  []

在这里插入图片描述

4、数组查找

4.1. indexOf方法

indexOf： 返回数组中第一个满足条件的索引(从0开始), 不满足返回-1。

4.1.1. 只有一个参数的情况，参数表示要查找的元素。

var arr = ['1','2','3'];
var checkElement1 = arr.indexOf('2');
var checkElement2 = arr.indexOf('4');
console.log(checkElement1); //  1
console.log(checkElement2); // -1

在这里插入图片描述4.2. 两个参数的情况，第一个参数表示要查找的元素，第二个参数表示开始查找的下标位置。

var arr = ['1','2','3'];
var checkElement1 = arr.indexOf('2', 1); // 从下标为0的位置开始查找元素‘2’
var checkElement2 = arr.indexOf('2', 2); // 从下标为2的位置开始查找元素‘2’
console.log(checkElement1); //  1
console.log(checkElement2); // -1

在这里插入图片描述

4.2. find方法

find：传参是一个函数，返回数组中第一个满足条件的数据，不满足返回undefined；使用find方法后，要对查询到的数据进行undefined的判断，才能正常使用数据。

4.2.1.数组为非空数组。

var arr = ['1','2','3'];
var findData1 = arr.find(val => val === '2'); // 查找元素值为‘2’的数据
var findData2 = arr.find(val => val === '4'); // 查找元素值为‘4’的数据
console.log(findData1); //  '2'
console.log(findData2); // undefined

在这里插入图片描述4.2.2. 数组为空数组，查询结果返回undefined。

var arr = [];
var findData1 = arr.find(val => val === '2'); // 查找元素值为‘2’的数据
var findData2 = arr.find(val => val === '4'); // 查找元素值为‘4’的数据
console.log(findData1); //  undefined
console.log(findData2); // undefined

在这里插入图片描述

4.3. includes方法

includes：判断数组是否包含某值，返回 true 或 false

var arr = ['1','2','3'];
var includeData1 = arr.includes('2'); // 查找数组是否存在元素值为‘2’的数据
var includeData2 = arr.includes('4'); // 查找数组是否存在元素值为‘4’的数据
console.log(includeData1); // true
console.log(includeData2); // fasle

在这里插入图片描述

5、数组遍历

5.1. forEach方法

forEach：传参为一个函数，数组里的元素个数有几个，该函数就会执行几次，不会生成新数组。

5.1.1. 数组中的元素是基本数据类型，或者对象直接被赋值，不会改变原数组的数据。

var arr = ['1', 2, true, undefined, Symbol(1), null, {}]; // 数组元素为基本类型
var newArr = arr.forEach(function (val, index, array) {
  val = 'change';
});
console.log(arr); // ['1', 2, true, undefined, Symbol(1), null, {}]
console.log(newArr); // undefined （forEach方法无返回值）

在这里插入图片描述5.1.2. 数组中的元素是对象，遍历更改对象属性值，会改变原数组对象属性的数据。

var arr = [{ a: 1 }, { a: 2}]; // 数组元素为对象
arr.forEach(function (val, index, array) {
  val.a = val.a * 2;
});
console.log(arr); // [{ a: 2 }, { a: 4}]

在这里插入图片描述5.1.3. 循环过程中，回调方法中使用return不会报错，但是无效，不能跳出循环。

var arr = [{ a: 1 }, { a: 2}];
arr.forEach(function (val, index, array) {
  val.a = val.a * 2;
  if (index === 0) { // 想要在符合条件时之后退出 该return并不会跳出循环
    return;
  }
});
console.log(arr); // [{ a: 2 }, { a: 4}]

在这里插入图片描述5.1.4. 使用break和continue跳出整个循环或当前循环的，会报错。

var arr = [{ a: 1 }, { a: 2}];
arr.forEach(function (val, index, array) {
  val.a = val.a * 2;
  if (index === 0) {
    break;
  }
});

在这里插入图片描述

5.2. map方法

map：传参为一个函数，函数必须有return，数组里的元素个数有几个，该函数就会执行几次，会返回一个新数组，不改变原数组的值

var arr = [1, 2, 3];
var newArr = arr.map(function (val) {
  return val * 2
});
console.log(arr); // [1, 2, 3]
console.log(newArr); //  [2, 4, 6]

在这里插入图片描述

5.3. filter方法

filter：传参为一个函数，函数return 一个可以转化为boolean类型的值，遍历数组，过滤出符合条件的元素并返回一个新数组，不改变原数组的值。

5.3.1.回调函数return一个boolean值。

var arr = [1, 2, 3];
var newArr = arr.filter(function (val) {
  return val === 2
});
console.log(arr); // [1, 2, 3]
console.log(newArr); //  [2]

在这里插入图片描述5.3.2. 回调函数return一个非boolean类型值，会总动转换为true或false。

// 0、''、null、undefined 转化为boolean为false
var arr = [0, 1, 2, 3, '', null, undefined, {}, []];
var newArr = arr.filter(function (val) {
  return val;
});
console.log(arr); // [0, 1, 2, 3, '', null, undefined, {}, []];
console.log(newArr); //  [1, 2, 3, {}, []];

在这里插入图片描述5.3.3. 若没有符合条件的元素，则filter会返回一个空数组。

var arr = [1, 2, 3];
var newArr = arr.filter(function (val) {
  return val === 4;
});
console.log(arr); // [1, 2, 3]
console.log(newArr); //  []

在这里插入图片描述

5.4. some方法

some：传参为一个函数，函数return 一个可以转化为boolean类型的值，some返回值为一个boolean值，遍历数组，只要有一个元素满足条件就返回 true，否则返回 false；不改变原数组的值。

var arr = [1, 2, 3];
var newArr = arr.some(function (val) {
  return val === 2;
});
console.log(arr); // [1, 2, 3];
console.log(newArr); //  true;

在这里插入图片描述5.4.1. 当空数组调用some方法时，返回false。

var arr = [];
var newArr = arr.some(function (val) {
  return val === 2;
});
console.log(arr); // [];
console.log(newArr); //  false;

在这里插入图片描述

5.5. every方法

every：传参为一个函数，函数return 一个可以转化为boolean类型的值，方法返回结果为一个boolean值，遍历数组，每一个元素都满足条件 则返回 true，否则返回 false；不改变原数组的值。

// 只有数组的所有元素满足要求时，结果才为true
var arr = [1, 2, 3];
var newArr = arr.every(function (val) {
  return val <= 3;
});
console.log(arr); // [1, 2, 3];
console.log(newArr); //  true;

// 只要有一个元素不满足要求，则结果就为false
var arr = [1, 2, 3, 4];
var newArr = arr.every(function (val) {
  return val <= 3;
});
console.log(arr); // [1, 2, 3, 4];
console.log(newArr); //  false;

在这里插入图片描述

5.6. reduce方法

reduce：可以将回调参数的结果作为下一个参数使用。
5.6.1. 语法

array.reduce(function(prev, cur, index, arr), initialValue);
/*
  prev: 必需。初始值, 或者计算结束后的返回值。
  cur： 必需。当前元素。
  index： 可选。当前元素的索引；                     
  arr： 可选。当前元素所属的数组对象。
  initialValue: 可选。传递给函数的初始值，相当于total的初始值。
*/

5.6.2. 如果传入了初始值0，则第一次遍历时prev的值为0，cur的值为数组第一项1。

var arr = [1, 2, 3];
// 因为传入了初始值0，所以第一次遍历时prev的值为0
var totle = arr.reduce(function (prev, cur, index) {
  console.log('prev', prev); // 0->1->3
  return prev + cur;
},0);
console.log(arr); // [1, 2, 3];
console.log(totle); //  6;

在这里插入图片描述5.6.3. 没有传入了初始值，则第一次遍历时prev的值为数组第一项数据1，cur的值为数组第二项数据2。

var arr = [1, 2, 3];
// 没有传入了初始值，则第一次遍历时prev的值为数组第一项数据1，cur的值为数组第二项数据2
var totle = arr.reduce(function (prev, cur, index) {
  console.log('prev', prev); // 1->3
  console.log('cur', cur); // 2->3
  console.log('index', index); // 1->2
  return prev + cur;
});
console.log(arr); // [1, 2, 3];
console.log(totle); //  6;

在这里插入图片描述5.6.4. 如果数组为空，并且没有传入了初始值，则reduce方法会报错。

var arr = [];
// 数组为空，并且没有传入了初始值，reduce方法会报错
var totle = arr.reduce(function (prev, cur, index) {
  console.log('prev', prev); // 未执行
  console.log('cur', cur); // 未执行
  console.log('index', index); // 未执行
  return prev + cur;
});
console.log(arr); // 未执行
console.log(totle); // 未执行

在这里插入图片描述5.6.5.如果数组为空，传入了初始值，则reduce方法不会报错，所以一般来说我们提供初始值通常更安全。

var arr = [];
// 数组为空，并且没有传入了初始值，reduce方法会报错
var totle = arr.reduce(function (prev, cur, index) {
  console.log('prev', prev); // 未执行
  console.log('cur', cur); // 未执行
  console.log('index', index); // 未执行
  return prev + cur;
},0);
console.log(arr); // []
console.log(totle); // 0

在这里插入图片描述

张先生程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【愚公系列】2023年08月 Three.js专题-粒子特效案例
时光隧道
08-13 1万+
粒子特效是一种视觉效果，可以模拟出许多粒子在空间中的运动和变化，形成各种美丽的图案和动态效果。常见的粒子特效包括烟雾、火焰、水流、星空、气泡等，可以在电影、电视、游戏等领域中得到广泛应用。实现粒子特效，需要使用计算机图形学技术，如粒子系统、计算流体力学等。粒子平面是指在计算机图形学中，用于呈现粒子特效的平面。粒子特效是通过模拟大量的粒子运动和变化来实现的，而为了在视觉上呈现这些粒子，需要将它们以一定的规律排列在一个平面上，使得观众可以看到这些粒子的动态变化。因此，粒子平面常常被用作粒子特效的载体，通过对平面
JavaScript常用技巧专题三
小马甲
12-20 1014
通过了解初学者和经验丰富的开发者在处理JavaScript各种技巧上的不同方法，你可以将自己的编码风格从新手转变为专业人士。采纳这些技巧不仅能提高你的代码效率，还能增强代码的可读性、可维护性以及整体的开发体验。效率: 通过使用现代JavaScript特性，如箭头函数、map()reduce()等，你可以写出更简洁高效的代码。可读性: 利用模板字符串、解构赋值等技巧，可以使代码更加直观和易于理解。可维护性: 采用模块化、函数式编程概念等，可以帮助你构建更加组织化且易于维护的代码结构。
JavaScript 常用数组函数方法专题
weixin_33923762的博客
03-12 58
1、 由字符串生成数组 split()分割字符串，并将分割的部分作为一个元素保存在一个新建的数组中。 var str1 = "this is an emample to using the method of array ."; var str2 = str1.split(" "); //以空格作为分割条件 for(var i = 0; i< str2.l...
JavaScript常用技巧专题六
小马甲
12-27 1060
JavaScript常用技巧专题六。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
JavaScript 数组- Array的方法总结(推荐)
10-21
下面小编就为大家带来一篇JavaScript 数组- Array的方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
reto-4-js-array-cardio
05-23
JS的第四个挑战，这是一个非常实际的挑战，其中将对“阵列的功能方法”进行回顾，该挑战在布局和交互级别上表现得不太明显，但是回顾功能方法并学会如何使用它是一个非常有趣的挑战。结合起来！ 成功！ :check_mark:...
JavaScript原生数组Array常用方法
12-12
栈方法 push方法和pop方法, 可以使数组的行为类似于栈, 先进后出, 并且推入和弹出操作只发生在一端. push方法 push方法可以接收一个或多个参数, 把它们追加到数组末尾, 并返回修改后数组的长度. var arr = ['a', 'b...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 769
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 40
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 912
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1219
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 214
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 196
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 418
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1468
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
redux快速入门
qq_73270720的博客
04-29 264
简单的加减案例,学会redux快速入门
Vue.js中Object.defineProperty实现数据劫持、数据代理和计算属性
javaThinker的专栏
04-26 322
在Vue.js中，数据劫持、数据代理和计算属性都是重要的概念，它们都与这个方法密切相关。下面我会逐一解释它们的原理，并给出相应的代码示例。
js中array对象的常用方法
09-01
在JavaScript中，array对象是一种特殊的对象，用于存储和操作一组数据。以下是一些array对象的常用方法： ...以上是一些array对象的常用方法，使用这些方法可以方便地对JavaScript中的数组进行操作和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张先生程序猿

谢谢您的打赏，我会持续创作下去

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值