【学习笔记21】JavaScript数组的基本方法
创始人
2024-02-15 23:47:41

笔记首发

一、push:末位新增

  • 语法: 数组.push(数据)
  • 作用: 向数组末尾添加数据
  • 返回值: 追加数据后, 数组最新的长度
        var arr = [10, 20, 30, 40];console.log('原始数组: ', arr);
​var num = arr.push(500);console.log('push新增后数组: ', arr);console.log('push的返回值: ', num);

在这里插入图片描述

二、pop:末位删除

  • 语法: 数组.pop( )
  • 作用: 删除数组的最后一项
  • 返回值: 返回末位删除的数据
        var arr = [10, 20, 30, 40];console.log('原始数组: ', arr);
​var num = arr.pop();console.log('pop删除后数组: ', arr);console.log('pop的返回值: ', num);

在这里插入图片描述

三、unshift:首位新增

  • 语法: 数组.unshift(数据)
  • 作用: 向数组头部添加数据
  • 返回值: 追加数据后, 数组最新的长度
        var arr = [10, 20, 30, 40];console.log('原始数组: ', arr);
​var num = arr.unshift(500);console.log('unshift新增后的数组: ', arr);console.log('unshift的返回值: ', num);

在这里插入图片描述

四、shift:首位删除

  • 语法: 数组.shift( )
  • 作用: 删除数组首位(第一项)的数据
  • 返回值: 返回删除的数据
        var arr = [10, 20, 30, 40];console.log('原始数组: ', arr);
​var num = arr.shift(500);console.log('shift删除后的数组: ', arr);console.log('shift的返回值: ', num);

在这里插入图片描述

五、reverse:反转数组

  • 语法: 数组.reverse( )
  • 作用: 反转数组
  • 返回值: 反转后的数组
        var arr = [10, 20, 45, 30, 40];console.log('原始数组: ', arr);
​var num = arr.reverse();console.log('reverse反转后的数组: ', arr);console.log('reverse的返回值: ', num);

在这里插入图片描述

六、sort:排序

1、语法

  • 数组.sort();
  • 数组.sort(function (a, b) {retrun a - b});
  • 数组.sort(function (a, b) {retrun b - a})

2、作用

  1. 不传参数
    • 会将数组内所有值, 转换为字符串, 然后一位一位的对比(第一位相同,对比第二位,…)
  2. 传参—函数 return a - b
    • 会将数组内所有的值, 按照数字的从小到大排列
  3. 传参—函数 return b - a
    • 会将数组内所有的值, 按照数字的从大到小排列

3、返回值

  • 不传参数:将排序后的数组返回
  • 传递参数:将排序后的数组返回

4、不传参数

        var arr = [100, 1, 101, 3, 2, 102]// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 不传参数 */var num = arr.sort( );console.log('sort后的数组: ', arr);console.log('sort的返回值: ', num);

在这里插入图片描述

5、函数 return a - b

        var arr = [100, 1, 101, 3, 2, 102]// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* return a - b */var num = arr.sort(function (a, b) { return a - b })console.log('sort后的数组: ', arr)console.log('sort的返回值: ', num)

在这里插入图片描述

6、函数 return b - a

        var arr = [100, 1, 101, 3, 2, 102]// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* return b - a */var num = arr.sort(function (a, b) { return b - a })console.log('sort后的数组: ', arr)console.log('sort的返回值: ', num)

在这里插入图片描述

七、splice:添加或删除数组中的元素(相对于剪切)

1、语法

  • 数组.splice(开始索引, 多少个);
  • 数组.splice(开始索引, 多少个, 数据1, 数据2, 数据3...)

2、作用

  • 不传参数: 剪切数组中的某一段数据
  • 传递参数: 剪切数组中的某一段数据, 将第三个参数开始, 当成新数据插入到数组内

3、返回值

  • 返回值: 截切后的数据(数组形式)

4、不传参数

      var arr = [100, 1, 101, 3, 2, 102];// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 不传参数 */var num = arr.splice(1, 3);console.log('splice后的数组: ', arr);console.log('splice的返回值: ', num);

在这里插入图片描述

5、传递参数

        var arr = [100, 1, 101, 3, 2, 102];// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 传递参数 */var num = arr.splice(1, 3, '数据1', '数据2', '数据3', '数据4');console.log('splice后的数组: ', arr);console.log('splice的返回值: ', num);

在这里插入图片描述

注意:数组的方法 1~7 是能够改变原数组的方法

八、slice:不会改变原数组

  • 语法: 数组.slice(开始索引, 结束索引)
  • 作用: 复制数组中的某一段数据
  • 返回值: 复制出来的内容

1、参数特点

  1. 包含开始索引, 不包含结束索引(到结束索引前一位)
  2. 参数接受负数(相当于 数组.length + 负数)
  3. 不传结束索引,相当于写了数组.length
  4. 一个参数都不传,相当于复制整个数组, 或者只传递第一个参数为0

2、正常传参

        var arr = [100, 1, 101, 3, 2, 102];// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 正常传参 */var num = arr.slice(1, 5);console.log('slice后的数组: ', arr);console.log('slice的返回值: ', num);

在这里插入图片描述

3、传递负数

        var arr = [100, 1, 101, 3, 2, 102];// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 传递负数 */// arr.length + (-1) --> 6 + (-1) --> 6 - 1 ---> 5var num = arr.slice(1, -1);    console.log('slice后的数组: ', arr);console.log('slice的返回值: ', num);

在这里插入图片描述

4、不传结束索引

        var arr = [100, 1, 101, 3, 2, 102];// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 不传结束索引 相当于写了 数组.length */var num = arr.slice(2)console.log('slice后的数组: ', arr);console.log('slice的返回值: ', num);

在这里插入图片描述

5、一个参数都不传

        var arr = [100, 1, 101, 3, 2, 102];// 下标     0   1    2  3  4  5 console.log('原始数组: ', arr);
​/* 一个参数都不传 相当于复制整个数组, 或者只传递第一个参数为0 */var num = arr.slice();console.log('slice后的数组: ', arr);console.log('slice的返回值: ', num);

在这里插入图片描述

九、concat:合并数组

  • 语法: 数组.concat(数据1, 数据2)
  • 作用: 将参数, 合并到指定数组内(如果参数写了数组, 那么会将数组的每一个值合并到指定数组)
  • 返回值: 合并后的数组
        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);
​var num = arr.concat(100, 200, 'QF', 'haha', [600, 700, 800]);console.log('concat后的数组: ', arr);console.log('concat的返回值: ', num);

在这里插入图片描述

十、join:把数组中的所有元素转换一个字符串

  • 语法: 数组.join(连接符),参数可以不传, 不传递默认逗号
  • 作用: 通过连接符连接数组的每一个
  • 返回值: 连接好的字符串

1、传递参数

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);
​/* 传递参数 */var num = arr.join('|');console.log('join后的数组: ', arr);console.log('join的返回值: ', num);

在这里插入图片描述

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);/* 传递参数 */var num = arr.join('');console.log('join后的数组: ', arr);console.log('join的返回值: ', num);

在这里插入图片描述

2、不传参数

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);/* 传递参数 */var num = arr.join( );console.log('join后的数组: ', arr);console.log('join的返回值: ', num);

在这里插入图片描述

十一、indexOf:查找数据

  • 语法: 数组.indexOf(数据); 数组.indexOf(数据, 开始索引)
  • 作用: 在数组内寻找指定数据
  • 返回值:
    1. 找到数据的时候, 返回数据第一次出现的下标
    2. 找不到的时候, 返回 -1

1、数组中找到数据返回值

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);/* 传递参数 */var num = arr.indexOf(4, 5);console.log('indexOf后的数组: ', arr);console.log('indexOf的返回值: ', num);

在这里插入图片描述

2、数组中没有找到数据返回值js

        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);/* 传递参数 */var num = arr.indexOf(105);console.log('indexOf后的数组: ', arr);console.log('indexOf的返回值: ', num);

在这里插入图片描述

十二、lastIndexOf:查找数据

  • 语法: 数组.lastIndexOf(数据) ; 数组.lastIndexOf(数据, 开始索引)
  • 作用: 在数组内寻找指定数据(倒叙寻找)
  • 返回值:
    1. 找到数据的时候, 返回数据第一次出现的下标
    2. 找不到的时候, 返回 -1
        var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4];// 下标     0  1  2   3  4  5  6  7   8console.log('原始数组: ', arr);/* 传递参数 */var num = arr.lastIndexOf(4, 4)console.log('lastIndexOf后的数组: ', arr);console.log('lastIndexOf的返回值: ', num);

在这里插入图片描述

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...