十六、数组-2

#4.3万能法:splice():

#4.3.1.删除功能

​ 语法:arr.splice(index,num); //num表示删除的长度

​ 功能:从下标index位置开始,删除num个元素;0

​ 返回值:被删除项组成的数组;

#4.3.2.添加功能

语法:**arr.splice(index, ** **0 ** ,val1,val2..);

​ 功能:在下标index位置,添加多个元素

​ 返回值:空数组;[ ] 因为没有删除,所以数组为空

#4.3.3.替换功能

语法:arr.splice(index,num,val1,val2...)

​ 功能:先删除后添加; 从index 位置开始,先删除num个元素,再添加多个新元素;

​ 返回值:被删除项组成的数组;

#5.1. 数组的反转:reverse

语法:arr.reverse();

功能:数组的反转;

返回值:反转后的数组;

说明:这个方法会改变原数组;

#5.2. 数组排序:sort

语法:arr.sort(function(a,b){return a-b});

​ 功能:数组的排序:

​ 说明:1)如果返回a-b,升序 返回b-a 降序;

​ 2)如果sort方法不传参,表示按照字符串的方式排序;

​ 3)这个方法会改变原数组;

第二个值减第一个值

不传参

#5.3. 数组的合并 concat:

语法:arr1.concat(arr2,arr3....);

功能:将多个数组内容拿出来,合并成一个新数组;

说明:不会改变原数组;

返回值:合并后的新数组;

#5.4. 数组的截取方法 slice:

​ 语法:arr.slice(start,end);

返回值:返回截取的内容;

说明:1)slice的截取时,包含开始位置,不包含截取位置;

​ 2)arr.slice(start,end);//从开始start位置截取到end位置,不包含结束位置

​ 3)arr.slice(start);//从开始位置一直截取最后

​ 4)arr.slice();//不传参:表示,截取整个数组;

​ 5)slice();支持负值;

​ 6)slice()不会改变原数组

传两个参数:

传一个参数

不参数:

参数为负值:

#5.5. 数组的查找方法

#indexOf() 从前向后找

语法:**arr.indexOf( ** 目标值(val),开始查找的位置(index));

​ 功能:从index位置开始,向后查找val首次出现的位置,

​ 返回值:如果找到,返回val的下标,如果找不到,返回-1;

​ 说明:1)indexOf()不会改变原数组;

2) 如果不传第二个参数,默认表示从下标为0开始查找;

#lastIndexOf() 从后向前找

语法:**arr.lastIndexOf( ** 目标值(val),开始查找的位置(index));

​ 功能:从index位置开始,向前查找val出现的位置;

​ 返回值:如果找到,返回val的下标,如果找不到,返回-1;

​ 说明:1)lastIndexOf()不会改变原数组;

​ 2)如果不传第二个参数,默认表示从最后一个下标开始向前查找

#5.6. 数组转字符串 join:

语法:**arr.join(" ** 连接符");

功能:将数组的每一项通过连接符,拼接为一个新字符串;

返回值:字符串;

说明:1)join()不会改变原数组;

​ 2)当join()不传参数时,默认用逗号连接;

#6. 二维数组:

前面我们讨论的都是一维数组。

在实际开发中, 经常需要用到二维数组或是多维数组。

但是,在js中,并不存在真正的多维数组。

js中:

ü 有数组的,

ü 数组中的元素,其数据类型是任意的

如果我们在数组中存放的元素,本身刚好又是一个数组。这就得到了一个二维数组。

Js中的解决方案,利用一维数组及其特性来模拟二维数组。

#问题1:如何访问这些元素呢?

#问题2:需要遍历所有的元素

#7. 案例:

案例1:将arrs中所有的数字乘以5,返回[30,25,15]

案例2:写一个函数,将这个数组中所有的一位数前面补0,输出一个新数组,即最后返回

案例3:写一个函数bouncer(),实现将数组中的真值,添加到一个新数组中;

案例4。模拟pop方法:

案例5:模拟push方法

案例6:封装一个函数实现将二维数组转一维数组;

#小结:

\1. splice()方法有删除、添加、替换功能

\2. reverse()数组的反转

\3. sort()数组的排序,注意sort方法的参数

\4. concat()合并多个数组

\5. slice()数组的截取方法;注意slice的参数

\6. 数组的查找方法:indexOf()从前往后找, lastIndexOf()从后往前找 ;找到返回下标,找不到返回-1

\7. Join()数组转字符串;如果不传参,默认用逗号连接

\8. 不会改变原数组的方法:indexOf() lastIndexOf() slice() concat() join();

\9. 会改变原数组的方法:push() unshift() pop() shift() splice() reverse() sort()

#作业

\1. 一维数组中转二维数组(思考)

题目:封装一个chunk(arr,size)的函数,把该数组arr按照指定的size分割成若干个数组块。

例如:chunk([1,2,3,4],2) 返回结果:[[1,2],[3,4]]

​ chunk([1,2,3,4,5],3) 返回结果:[[1,2,3],[4,5]]

分析:利用splice方法

倒推:结果:[[1,2],[3,4]] ;

  1. 可以定义一个 [ ]

  2. 将[1,2] 和 [3,4]分别添加到定义的一维数组,形成一个二维数组

  3. 那么如何得到这两个子数组? 截取,删除

  4. Splice(index,size);我们可以从下标为0的位置开始删除size个元素,而其返回值就是我们需要的子数组;

思路:1)定义一个函数,传两个参数

2创建一个空数组,//存放子数组

​ 3.循环删除,添加(当二维数组有元素:就需要删除指定长度的元素,然后将删除的内容添加到新数组中)

​ 4.返回新数组;

2、 var nums = [1,5,9,5,3,6,1,8,9,2,7,6];

题目: 将数组中重复的值只保留一个,且做升序排列,返回[1,2,3,5,6,7,8,9]

分析:定义一个空数组 ; 然后拿着nums中的每一个值,,取新数组中查看是否存在,如果不存在,就添加到新数组中

思考:如何判断是否存在?

IndexOf()方法,找值,找到返回下标,找不到返回-1;即如果一个值再再数组中的位置为-1;证明它不在数组中

3、 封装一个函数实现数组的拷贝(复制)

分析:从下标为0的位置开始遍历(正序遍历)然后利用push()实现

分析2:从最后一个下标开始遍历(倒序遍历)然后利用unshift()实现

分析3:使用concat实现

分析4:赋值

4、、实现reverse封装

分析:从下标为0的位置开始遍历(正序遍历);然后利用unshift()实现

分析2:从最后一个下标开始遍历(倒序遍历);然后利用push()实现

5、、indexOf的完整封装

封装一个函数,检测一个值在数组中出现的位置,如果没有出现返回-1,否则返回值在数组中出现的索引。

原理:用目标是和数组的每一项进行全等比较,如果全等,返回对应的数组下标

如果循环结束都没找到,返回-1

注意:循环的初始值 (indexOf的第二个参数)

最新文章

  1. 难道只有我一个人想吐槽npm这种包管理方式么
  2. access的逻辑类型
  3. 数据库的设计(E-R图,数据库模型图,三大范式)
  4. 自己用反射写的一个request.getParameter工具类
  5. (一)Knockout - 入门
  6. Material Design说明
  7. NSArray数组的学习总结
  8. SpringFramework_module
  9. FileSystemXmlApplicationContext方法的绝对路径问题
  10. Linux常用命令-文本查看篇
  11. Mac下安装MySQL(Mac 10.12)
  12. 工作队列.py
  13. DOM内容操作和自定义、样式改变
  14. DrawItem
  15. SMO详解
  16. C++解析(31):自定义内存管理(完)
  17. POJ 2299 Ultra-QuickSort(树状数组+离散化)
  18. 小米手机Root 刷机
  19. Windows API 编程-----DLL编程之禁止加载自己
  20. android viewpage解决嵌套

热门文章

  1. java中高级面试利器(boot,cloud,vue前后端提升)
  2. 万字长文!从底层开始带你了解并发编程,彻底帮你搞懂java锁!
  3. python中操作excel数据 封装成一个类
  4. sql常用函数整理
  5. Vuex form表单处理, 比官网更好的办法
  6. 简化的鸿蒙WiFi接口,仅需几行代码,简单易用!
  7. leetcode 练习--反转链表
  8. JZOJ8月10日提高组反思
  9. Spring Boot 实现看门狗功能 (调用 Shell 脚本)
  10. Spring Cloud Alibaba 初体验(六) Seata 及结合 MyBatis 与 MyBatis-Plus 的使用