飞道的博客

JavaScript /JS 如何实现数组的创建,增加,删除,遍历等操作???

361人阅读  评论(0)

1.数组的定义:

数组(Array)是有序的元素序列。 [1]  若将有限个类型相同的变量的集合命名,那么这个名称为数组名。组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中,为了处理方便, 把具有相同类型的若干元素按有序的形式组织起来的一种形式。 [1]  这些有序排列的同类数据元素的集合称为数组。

 注意:数组必须先定义再使用!

这里更正一下:这段关于数组的定义是引用百度的解释。其实在 JavaScript 中的数据类型是弱类型的,所以用 var 定义数组的时候,数组元素可以不同,下面请看演示:


  
  1. <script type= "text/javascript">
  2. var arr2 = [ "毛笔", "墨水", "宣纸", "砚台", 1, 2, 3];
  3. for (key in arr2){
  4. document.write( "&nbsp"+arr2[key]);
  5. document.write( '&nbsp&nbsp');
  6. }
  7. </script>

演示效果: 毛笔   墨水   宣纸   砚台   1   2   3   

数组创建的三种方式:


  
  1. <script type= "text/javascript">
  2. //1.new 一个数组对象 ,括号写数字可以指定数组的容量
  3. var arr1 = new Array();
  4. //2.直接给数组赋初始值
  5. var arr2 = new Array( "小红", "小粉", "小紫");
  6. //3.直接用 [] 声明赋予初始值
  7. var arr3 = [ "红红", "粉粉", "紫紫"];
  8. </script>

 浏览器右键检查,点 Console 然后依次输入红框内容,可以查看我们定义的数组,第一个就是一个空数组。如果写 Array(2),这是显示的是  [empty × 2] 

2.数组的操作

① 添加和删除数组中的元素

向数组中添加元素两种方法:1.利用数组下标直接赋值  2.利用 push 方法追加数组

3. unshift 方法,从头部插入元素。与下文 删除(shift)方法一样,往下看

4.splice 方法:splice(索引位置,删除个数,插入元素1,...插入元素 n)

数组的下标是从0 开始的,所以 0表示第一个元素。下图演示是向空数组中添加元素,正常的数组也是这么添加的。


  
  1. <script type= "text/javascript">
  2. //1.下标法
  3. var arr1 = new Array();
  4. arr1[ 0]= "第一个元素";
  5. arr1[ 1]= "第二个元素";
  6. //2.push 方法
  7. var arr2 = new Array();
  8. arr2.push( "第一个");
  9. arr2.push( "第二个");
  10. arr2.push( "第三个");
  11. </script>

演示效果:

② 数组的遍历 

1. 使用 for 循环遍历数组


  
  1. <script type= "text/javascript">
  2. var arr1 = [ "小白兔", "大灰狼", "小绵羊", "梅花鹿"];
  3. for ( var i= 0;i<arr1.length;i++){
  4. document.write(arr1[i]);
  5. document.write( '&nbsp&nbsp');
  6. }
  7. </script>

演示结果:小白兔  大灰狼  小绵羊  梅花鹿   

2. 使用 for in 循环遍历数组


  
  1. <script type= "text/javascript">
  2. var arr2 = [ "毛笔", "墨水", "宣纸", "砚台"];
  3. for (key in arr2){
  4. document.write(key+ "&nbsp"+arr2[key]);
  5. document.write( '&nbsp&nbsp');
  6. }
  7. </script>

演示结果:0 毛笔  1 墨水  2 宣纸  3 砚台  

说明一下,这里的数字就是数组的下标,也称为索引值。

来自评论区投稿:不推荐用 for in 遍历数组,可能会出现重大 bug或者未知错误,可自行百度了解。

③ 删除数组中的元素

1.pop 方法:删除最后一个元素。


  
  1. <script type= "text/javascript">
  2. var arr1 = [ "小白兔", "大灰狼", "小绵羊", "梅花鹿"];
  3. var last1 = arr1.pop();
  4. document.write(arr1);
  5. document.write( "<br/>");
  6. document.write(last1);
  7. </script>

演示效果:第一行是数组 arr1,第二行的梅花鹿是被删除的元素。

2. shift 方法:删除第一个元素。


  
  1. <script type= "text/javascript">
  2. var arr1 = [ "小白兔", "大灰狼", "小绵羊", "梅花鹿"];
  3. var last1 = arr1.shift();
  4. document.write(arr1);
  5. document.write( "<br/>");
  6. document.write(last1);
  7. </script>

演示效果:第一行是数组 arr1,第二行的小白兔是被删除的元素。

3. splice 方法:指定位置删除指定元素,splice(索引位置,删除个数)


  
  1. <script type= "text/javascript">
  2. var arr1 = [ "小白兔", "大灰狼", "小绵羊", "梅花鹿"];
  3. var last1 = arr1.splice( 1, 2); //从索引 1 的位置上删除两个元素
  4. document.write(arr1);
  5. document.write( "<br/>");
  6. document.write(last1);
  7. </script>

演示效果:第一行是数组 arr1,第二行的大灰狼,小绵羊是被删除的元素。

④ 合并数组

concat 合并数组,格式:数组。concat(数组1,数组2,.....数组n)


  
  1. <script type= "text/javascript">
  2. var arr1 = [ 1, 2, 3];
  3. var arr2 = [ 4, 5, 6];
  4. var arr = arr1.concat(arr2);
  5. document.write(arr);
  6. </script>

演示结果:1,2,3,4,5,6

⑤ 数组转为字符串

join 方法:将数组中的元素合并成一个用指定分隔符分割的字符串。格式:数组.join(分隔符)


  
  1. <script type= "text/javascript">
  2. var arr1 = [ "毛笔", "墨水", "宣纸", "砚台"];
  3. var arr = arr1.join( "——");
  4. document.write(arr);
  5. </script>

演示效果:毛笔——墨水——宣纸——砚台 

⑥ 数组元素倒序

reverse 方法:将原来的数组倒序,不会创建新的数组。


  
  1. <script type= "text/javascript">
  2. var arr1 = [ "毛笔", "墨水", "宣纸", "砚台"];
  3. arr1.reverse();
  4. document.write(arr1);
  5. </script>

演示效果:砚台,宣纸,墨水,毛笔

⑦ 对数组元素进行排序

sort 方法:可以实现排序,默认是按 ASSCII 码自动排序的。


  
  1. <script type= "text/javascript">
  2. var arr1 = new Array();
  3. arr1[ 0] = "red";
  4. arr1[ 1] = "pink";
  5. arr1[ 2] = "orange";
  6. arr1[ 3] = "blue";
  7. arr1[ 4] = "white";
  8. arr1[ 5] = "green";
  9. document.write( "排序前:"+arr1+ "<br/>");
  10. document.write( "排序后:"+arr1.sort());
  11. </script>

演示效果:

3.二维数组或者多维数组

不想写了,其实就是一个嵌套的关系,累了,今天就到这里,亲们可以自己去百度看看。


未经允许,禁止转载! 晚安哦,早点睡觉~


转载:https://blog.csdn.net/qq_44761243/article/details/109027639
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场