在实际开发当中, 数组和对象使用到最多的; 数组和对象有很多的方法, 这里主要探讨一下:

数组的增删改查
数组的排序方式
数组转换成其他数据类型的方式
ES6数组新增常用的迭代方式

为什么需要数组?

数组可以存入不限数的数据, 并且可以使用下标值进行访问; 数据在数组的内部是有序排列的, 数组经常被运用在循环遍历当中.

在DOM中使用map方式映射dom数, 在vue中使用v-for渲染到页面上等等都会出现数组循环遍历的身影; 所以数组是很重要的!!!

(1) 数组的增删改查

增: 使用到一个api的时候, 必须关注三点: 1. 作用 2. 返回值 3. 用法

① push() 影响原数组

作用: 在数组的末尾添加一个数据

参数: 一个数据或多个

返回值: 添加完后新数据的length值

用法: 数组.push(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.push(6, 7, 8);const arr2 = arr.push(9, 10, 11);console.log(arr);console.log(arr1);console.log(arr2);</script>

② unshift() 影响原数组

作用: 从数组的开头增加一个数据

参数: 一个数据或多个

返回值: 新数组的length值

用法: 数组.unshift(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.unshift(6, 7, 8);const arr2 = arr.unshift(9, 10, 11);console.log(arr);console.log(arr1);console.log(arr2);</script>

③ splice() 影响原数组

作用: 在指定的下标值前面添加数据

参数: 1.指定下标值 2.要删除数据的数量 3.添加数据的数量

返回值: 没有或者说是空数组"[ ]"

用法: 数组.splice(下标值, 数据......)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.splice(5, 0, "第一个数据", "第二个数据");console.log(arr);console.log(arr1);</script>

④concat() 不影响原数组

作用: 连接两个数组(先创建当前数组的副本, 然后把第二个数组添加到副本的末尾, 不会影响原数组)

参数: 第二个数组

返回值: 连接好的新数组

用法: 数组1.concat(数组2)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.concat([6, 7, 8, 9, 10]);console.log(arr);console.log(arr1);</script>

删:

① pop() 影响原数组

作用: 从数组的末尾删除一个数据(一次只能删除一个)

参数: 无

返回值: 被删除的数据

用法: 数组.pop()

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.pop();console.log(arr);console.log(arr1);</script>

② shift() 影响原数组

作用: 从数组的开头删除一个数据(一次只能删除一个)

参数: 无

返回值: 被删除的数据

用法: 数组.shift()

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.shift();console.log(arr);console.log(arr1);</script>

③ splice() 影响原数组

作用: 指定的下标值后面, 删除一个或多个数据

参数: 1.指定的下标值 2.删除数据的个数

返回值: 包含被删除数据的数组

用法: 数组.splice(开始位置, 删除的数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.splice(0, 2);console.log(arr);console.log(arr1);</script>

④ slice() 不影响原数组

作用: 创建一个含有原来数组中数据的新数组

参数: 1.开始的原数组的下标值(包含) 2.结束的原数组的下标值(不包含)

返回值: 获取完数据后的新数组

用法: 数组.slice(开始位置, 结束位置)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.slice(0, 2);const arr2 = arr.slice(2, 4);console.log(arr);console.log(arr1);</script>

改:

① splice() 影响原数组

作用: 指定的下标值后面, 删除一个或多个数据, 添加一个或多个数据

参数: 1.指定的下标值 2.删除数据的个数 3.添加数据的个数

返回值: 包含被删除数据的数组

用法: 数组.splice(开始位置, 删除的数据, 添加的数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.splice(0, 2, "第一个元素", "第二个元素");console.log(arr);console.log(arr1);</script>

查:

① indexOf()

作用: 查找指定数据, 有这返回该数据的下标值, 没有这返回-1

参数: 需查询的数据

返回值: 指定数据的下标值或-1

用法: 数组.indexOf(数据)

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

② includes()

作用: 查找指定数据, 有这返回true, 没有则返回false

参数: 需查询的数据

返回值: true或false

用法: 数组.includes(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.includes(1);const arr2 = arr.includes(0);console.log(arr);console.log(arr1);console.log(arr2);</script>

③ find()

作用: 返回第一个匹配的数据

参数: 回调函数

返回值: 指定数据的下标值或undefined

用法: 数组.find(回调函数)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.find(item => item === 1);const arr2 = arr.find(item => item === 0);console.log(arr);console.log(arr1);console.log(arr2);</script>

  <script>const arr = [{ name: '张三', age: 20 }, { name: '李四', age: 30 }];const res1 = arr.find(item => item.age > 18);const res2 = arr.find(item => item.name === '李四');console.log(res1);console.log(res2);</script>

(2) 数组的排序方式

① reverse()

作用: 翻转数组

参数: 无

返回值: 翻转完后的新数组

用法: 数组.reverse()

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

② sort()

作用: 按需排列数组中数据的顺序

参数: 回调函数

返回值: 新顺序的数组

用法: 数组.reverse(function (a, b) {return a - b / b - a})

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.sort(function (a, b) {return a - b; // 从小到大});console.log(arr);console.log(arr1);</script>

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.sort(function (a, b) {return b - a; // 从大到小});console.log(arr);console.log(arr1);</script>

(3) 数组转换成其他数据类型的方式

① join()

作用: 将数组转换成字符串

参数: 分隔符

返回值: 转换好的新字符串

用法: 数组.join("分隔符")

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.join(',');const arr2 = arr.join('?');const arr3 = arr.join('!');const arr4 = arr.join('@');const arr5 = arr.join('$');console.log(arr);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);console.log(arr5);</script>

(4) ES6数组新增常用的迭代方式:

map(), forEach(), some(), every(), filter(), reduce(), findIndex()

ES6新增数组迭代方法_hmxs_hmbb的博客-CSDN博客详细说明.

总结: 数组常用的方法相关推荐

js中数组常用的方法总结，包括ES6
原文地址:js中数组常用的方法总结,包括ES6 1.push() 后增 push()方法可以向数组后添加一个新的元素,并返回新数组的长度. 末尾添加,返回长度,改变原数组 var a = [1,2,3 ...
JavaScript数组常用的方法总结
导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者数组,下面对常用的数组的使用方法进行总结,方便在开发中手到擒来! ...
java中s方法_Java中Arrys数组常用的方法
Arrys常用方法 1.toString() Arrays.toString(arr) //打印数组的内容,观察数组元素的值 2.sort() Arrays.sort(arr); ...
es6 数组找最大值_JavaScript（es6）数组常用的方法
常用方法 1.forEach() var data = [1,2,3,4,5]; var sum = 0;//求和 data.forEach((item)=>{sum+=item}) //给原数 ...
数组常用解题方法（持续更新）
1.假设题意是叫你在排序数组中寻找是否存在一个目标值,那么训练有素的读者肯定立马就能想到利用二分法在 O(log⁡n)的时间内找到是否存在目标值. 大家注意这道题目的前提是数组是有序数组,这也是使用二 ...
chararray遍历_数组常用的遍历方法 ——总结
看图了解数组常用的方法前言本文主要介绍数组常见遍历方法:forEach.map.filter.find.every.some.reduce,它们有个共同点:不会改变原始数组. 一.forEach: ...
JavaScript的json和Array及Array数组的使用方法
1.关于json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.也可以称为数据集和数组类似,能够存数据! //Ar ...
js中常用的数组和字符串方法
一:js中常用的数组方法 <script>//函数声明式中的方法const arr=[1,3,6,9,15,19,16];//函数的所有方法 map(),reduce(),filter() ...
Javscript数组中最常用的方法（建议收藏）
数组最常见的方法操作方法排序方法转换方法迭代方法 js中数组的方法不管是写原生还是用框架,我们都会经常运用到,以及也有一些面试官会问到甚至让我们手写一个数组的排序函数: 所以我就通过查找一些好 ...

总结: 数组常用的方法

(1) 数组的增删改查

(2) 数组的排序方式

(3) 数组转换成其他数据类型的方式

(4) ES6数组新增常用的迭代方式:

总结: 数组常用的方法相关推荐

最新文章

热门文章