前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS常用方法-数组篇

JS常用方法-数组篇

作者头像
全栈开发日记
发布2022-05-13 15:05:08
2.1K0
发布2022-05-13 15:05:08
举报
文章被收录于专栏:全栈开发日记

会改变原数组的方法

以下七种:

push(),pop(),shift(),unshift(),splice(),sort(),reserve(),我自己比较常用的有unshfit(),splice()

01 - 添加数组元素方法

push()方法:

在数组结尾处向数组添加一个新的元素(其余元素索引未改变),参数为被添加元素

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
fruits.push('西瓜')  // 向数组添加一个新元素
console.log(fruits);  // ['苹果','香蕉','橘子','西瓜']

返回值为改变后新数组的长度

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
let x = fruits.push('西瓜')  // x的值为4
unshift()方法:

在数组开头处添加一个新元素(其余元素索引都向后移一位),参数为被添加元素

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
fruits.unshift('西瓜')  // 向数组开头添加一个新元素
console.log(fruits);  // ['西瓜','苹果','香蕉','橘子']

返回值为改变后新数组的长度

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
let x = fruits.unshift('西瓜')  // x的值为4

02 - 删除数组元素方法

pop()方法:

删除数组中最后一个元素(其余元素索引未改变)

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
fruits.pop()  // 删除数组的最末尾元素
console.log(fruits);  // ['苹果','香蕉']

返回值为被删除元素

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
let x = fruits.pop()  // x的值为'橘子'
shift()方法:

删除数组首个元素(其余元素索引都向前移一位)

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
fruits.shift()  // 删除数组的首位元素
console.log(fruits);  // ['香蕉','橘子']

返回值为被删除元素

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
let x = fruits.shift()  //x的值为'苹果'

03 - 特殊方法splice()

1、用于向数组添加新项

第一个参数定义添加新元素的位置(索引号);第二个参数定义删除元素数目;第三个及之后的参数定义新添加元素。

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
fruits.splice(1,0,'西瓜','芒果')  // 在索引号为1的位置添加'西瓜'和'芒果'
console.log(fruits);  // ["苹果", "西瓜", "芒果", "香蕉", "橘子"]

返回值为被删除元素组成的数组(如果有)

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
x = fruits.splice(1,1,'西瓜','芒果') // 在索引号为1的位置删除一个元素并在该位置添加'西瓜'和'芒果'
console.log(x);  // ["香蕉"]
console.log(fruits);   // ["苹果", "西瓜", "芒果", "橘子"]
2、用于删除数组元素

只定义第一个和第二个参数(删除元素个数,不为0)。

代码语言:javascript
复制
let fruits = ['苹果','香蕉','橘子']
fruits.splice(1,1)  //在索引号为1的位置删除1个元素
console.log(fruits);  //["苹果", "橘子"]

04 - 数组排序方法

sort()方法:

默认让数组按照字母排序,返回值为排序后的新数组

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Apple", "Mango"]
x = fruits.sort()  // 让数组按照字母排序
console.log(x);   // ["Apple", "Banana", "Mango", "Orange"]
console.log(fruits);  // ["Apple", "Banana", "Mango", "Orange"]

给数值数组排序

代码语言:javascript
复制
let nums = [98, 57, 87, 36, 7]
x = nums.sort(function(a, b){return a - b})  //从小到大
console.log(x);  // [7, 36, 57, 87, 98]
y = nums.sort(function(a, b){return b - a})  //从大到小
console.log(y);  // [98, 87, 57, 36, 7]
reverse()方法:

将原数组顺序翻转,返回值为翻转后的新数组

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Apple", "Mango"]
x = fruits.reverse()  // 让数组顺序翻转
console.log(x);   // ["Mango","Apple","Orange","Banana"]
不改变原数组的方法

01 - 数组合并和裁剪

concat()方法:

合并两个数组或是一个数组和多个元素,类似于向数组添加元素参数可以为一个数组或是元素,返回值为合并后的新数组

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Mango"]
let fruits2 = ['葡萄','香蕉','西瓜']
fruitsArr = fruits.concat(fruits2)  // 合并fruits和fruits2
console.log(fruitsArr);  // ["Banana", "Orange", "Mango", "葡萄", "香蕉", "西瓜"]
slice()方法:

用数组的某个片段切出新数组,参数:第一个为开始索引,第二个为结束参数(不包括)

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Mango", "Apple", "Pear", "Lemon"]
fruitsCut = fruits.slice(1,3)  // 剪切索引从1到3之前的元素作为新数组
console.log(fruitsCut);   // ["Orange", "Mango"]

不定义第二个参数时,裁剪从开始参数之后所有元素作为新数组

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Mango", "Apple", "Pear", "Lemon"]
fruitsCut = fruits.slice(3)  // 剪切索引从3开始的所有元素作为新数组
console.log(fruitsCut);   // ["Apple", "Pear", "Lemon"]

02 - 数组迭代方法

对每个数组项进行操作

forEach():

遍历数组的每个元素参数:第一个为每个元素,第二个为该元素索引号,第三个为数组本身常用的为前两个参数接受回调函数对数组进行操作

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Orange"]
fruits.forEach((item,index) => {
      console.log(item);  // 分别输出Banana,Orange,Orange
      console.log(index);  // 分别输出0,1,2
});
indexOf():

搜索元素值在数组中第一次出现的位置,返回索引值,没有找到返回-1参数为被查找元素

代码语言:javascript
复制
let fruits = ["Banana", "Orange", "Mango"]
let x = fruits.indexOf('Mango') // 查找'Mango'
console.log(x);  // x值为2
let y = fruits.indexOf('Apple')  // 查找'Apple'
console.log(y);  // y值为-1
filter():

过滤出符合条件的元素组成一个新数组参数:第一个为每个元素,第二个为该元素索引号,第三个为数组本身回调函数中return限制条件

代码语言:javascript
复制
let nums = [98, 57, 87, 36, 7]
let numsFil = nums.filter((item,index) => {
       return item > 50  // 过滤出大于50的元素成为新数组
})
console.log(numsFil);  // [98, 57, 87]
reduce():

可以用统计符合条件元素总数参数:第一个为总数(初始值/先前返回值),第二个参数为每个元素,第三个参数为元素索引号,第四个参数为数组本身常用的为前两个参数

代码语言:javascript
复制
let nums = [98, 57, 87, 36, 7]
let total = nums.reduce((pre,val) => {
       if(val<50){  // 条件为值小于50
            pre++   // 符合条件时pre加1
       }
       return pre  // 不符合时返回pre
},0)               // 接收初始值,不写时默认为0
console.log(total);   // total值为2
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 01 - 添加数组元素方法
    • push()方法:
      • unshift()方法:
      • 02 - 删除数组元素方法
        • pop()方法:
          • shift()方法:
          • 03 - 特殊方法splice()
            • 1、用于向数组添加新项
              • 2、用于删除数组元素
              • 04 - 数组排序方法
                • sort()方法:
                  • reverse()方法:
                  • 01 - 数组合并和裁剪
                    • concat()方法:
                      • slice()方法:
                      • 02 - 数组迭代方法
                        • forEach():
                          • indexOf():
                            • filter():
                              • reduce():
                              领券
                              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档