JavaScript数组学习

最新推荐文章于 2024-03-12 22:44:40 发布

Tommy_WXF

最新推荐文章于 2024-03-12 22:44:40 发布

阅读量551

点赞数 4

文章标签： javascript 学习

本文链接：https://blog.csdn.net/Tommy_WXF/article/details/126454023

版权

本文详细介绍了JavaScript数组的概念，包括如何创建数组，以及数组的各种操作方法，如添加、删除元素，判断是否为数组，以及map、filter、every、some等方法的使用。此外，还涵盖了数组的元素新增、筛选、查找最大值与最小值，以及翻转和排序等实用技巧。通过实例代码展示，帮助读者全面掌握JavaScript数组的使用。

摘要由CSDN通过智能技术生成

一、数组是什么

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

数组是用于储存多个相同类型数据的集合。

二、创建数组的方式

1.利用数组字面量创建数组，并赋值默认值为1、 2 、3。

代码如下（示例）：

var arr = [1,2,3];

2.利用new Array() 创建数组。

代码如下（示例）：

var arr = new Array();

3.利用new Array(3) 创建数组，里面有3个空的元素。

代码如下（示例）：

var arr = new Array(3);

4.改变数组第一个元素的值为5，语法：数组名[ 下标（下标从0开始 ] = 值。

代码如下（示例）：

arr[0] = 5;

5.语法：数组名[下标]。

代码如下（示例）：

console.log(arr[0]);
console.log(arr[2]);

6.创建数据，赋默认值。

代码如下（示例）：

var arr = ['大黄','小黑','小白','小绿'];

数组可以通过索引（下标）来访问、设置、修改对应的数组元素。

获取数组中的元素。

代码如下（示例）：

console.log(arr[0]);
console.log("数组长度："+arr.length);

读取数组中所有的元素：遍历数组。

代码如下（示例）：

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

二、数组方法

var arr = ['大黄', '小黑', '小白', '小绿'];

1.向数组的末尾添加一个或多个元素。

代码如下（示例）：

var newArrayLength = arr.push('小粉', '小蓝');
console.log(arr);
console.log('新的数组长度'+newArrayLength);

2.删除并返回数组的最后一个元素。

代码如下（示例）：

var lstArr = arr.pop();
console.log(arr);
console.log('被删除的元素：'+lstArr);

3.向数组的开头添加一个或多个元素，并返回新的数组长度。

代码如下（示例）：

var newArrayLength = arr.unshift('小粉', '小蓝');
console.log(arr);
console.log('新的数组长度' + newArrayLength);

4.删除数组中一个元素并返回删除的元素。

代码如下（示例）：

var fstArr = arr.shift();
console.log(arr);
console.log('被删除的元素：'+fstArr);

5.arr ='这是一个数组吗？'; 判断当前的对象是不是数组，是：true；否：false。

代码如下（示例）：

alert(Array.isArray(arr));

6.map 方法：返回一个新的数组，数组中的元素为原始数组的处理后的值，map方法会按照原始数组中的元素顺序依次处理元素。

代码如下（示例）：

let array = [1,9,3,7,5];
let newArray =  array.map(x=>x+2);
console.log(array);
console.log(newArray);

7.filter方法：创建一个数组，新的数组中的元素是通过检查指定数组中符合条件的元素，filter不会对空的数组进行检测，不会改变原始数组。

代码如下（示例）：

let array = [1,2,3,4,5];
let newArray = array.filter(item=> item > 2);
console.log(array);
console.log(newArray);

8.every方法：用于检测数组中的所有元素是否符合指定的条件，如果数组中检测的有一个元素不满足，则整个表达式返回false并且其他元素不会再进行检测，如果所有的元素满足条件则返回true。

代码如下（示例）：

let array = [1,2,3,4,5];
let newArray = array.every(item => item>2);
console.log(array);
console.log(newArray);

9.some方法：用于检测数组中的元素是否满足指定的条件，会依次执行数组中每个元素：如果有一个元素满足条件则返回true，如果没有满足条件的元素返回 false。

代码如下（示例）：

let array = [1,2,3,4,5];
let newArray = array.some(item => item>2);
console.log(array);
console.log(newArray);

10，splice方法：用于添加或删除数组中的元素，.splice(开始下标,长度); 注意：这个方法会改变原始数组如果仅删除一个元素，则返回一个元素的数组如果没有删除任何元素，则返回空数组。

let array = [1,2,3,4,5,6,7,8,9];

获取下标2开始的4个元素包括下标2的元素。

代码如下（示例）：

let newArray = array.splice(2,4);

替换下标4的元素为 6、7。

代码如下（示例）：

let newArray = array.splice(4,1,6,7);

在下标9的位置插入元素 10、11。

代码如下（示例）：

let newArray = array.splice(9,0,10,11);
console.log(array);
console.log(newArray);

11.slice方法：可以从已有数组重返回选定的元素，可以提取字符串并返新的字符串被提取的部分，不会改变原数组。

代码如下（示例）：

let array = [1,2,3,4,5,6,7,8,9];
let newArray =array.slice(1,4);
let newArray =array.slice(-3,-1);
console.log(array);
console.log(newArray);

12.indexOf方法：可以返回指定某个字符串在字符串中出现的位置，如果没有则返回 -1，如果存在则返回下标。

代码如下（示例）：

var str = '你今天中午吃了什么?';
var index =  str.indexOf('了');
console.log(index)
let array = [1,2,3,4,5,6,7,8,9];
let index = array.indexOf(4);
console.log(index)

13.includes方法：用于判断数组中是否包含了一个指定的值，如果有返回 true，否false。

代码如下（示例）：

let array = [1,2,3,4,5,6,7,8,9];
let bool = array.includes(1);
console.log(bool)

三、数组元素新增

1.新增数组元素，修改length长度。

var arr = ['red','green','blue'];
console.log("数组长度："+arr.length);

修改数组长度为5，里面应该有5个元素。

代码如下（示例）：

arr.length = 5;
console.log(arr);

读取下标为3、4的元素。

代码如下（示例）：

console.log(arr[3]); //undefined
console.log(arr[4]); //undefined

新增数组元素。

代码如下（示例）：

arr[3] ='pink';
arr[4] = 'hotpink'

读取下标为3、4的元素。

代码如下（示例）：

console.log(arr[3]); //pink'
console.log(arr[4]); //hotpink

替换原下标的内容

代码如下（示例）：

arr[0] = 'yellow'
console.log(arr[0]); //yellow

指定长度为5，新增下标为5，意味着数组长度扩展到了6位，JavaScript 数组长度是动态的。

代码如下（示例）：

arr[5] = 'yellow'
console.log(arr); //yellow
console.log(arr[5]); //yellow

四、数组筛选

代码如下（示例）：

var arr = [2, 1, 6, 4, 77, 3, 54, 7, 8, 9, 56, 46, 4, 5, 7];
var newArr = [];
var index = 0;
  for (let i = 0; i <arr.length ; i++) {
            if(arr[i]>=10){
                newArr[index] = arr[i];
                index++;
            }
    }
console.log(newArr);

五、获取数组的最大值与最小值

代码如下（示例）：

var arr = [2, 1, 6, 4, 77, 3, 54, 7, 8, 9, 56, 46, 4, 5, 7];
      let max = arr[0];
      let min = arr[0];
      for (let i = 0; i < arr.length; i++) {
          if(max < arr[i] ){
              max = arr[i];
          }
          if(min > arr[i] ){
              min = arr[i];
          }
      }
      console.log('最大值：'+max+',最小值：'+min);

六、翻转数组

代码如下（示例）：

var arr = [2, 1, 6, 4, 77, 3, 54, 7, 8, 9, 56, 46, 4, 5, 7];
     for (let i = arr.length-1; i >=0 ; i--) {
         console.log(arr[i]);
     }

七、数组排序 sort

代码如下（示例）：

var arr = [2, 1, 6, 4, 77, 3, 54, 7, 8, 9, 56, 46, 4, 5, 7];
var ascArr = arr.sort((a, b) => {
    if (a < b) {
             return -1;
         }
         if (a > b) {
             return 1;
         }
         return 0;
     });
     console.log(ascArr);

八、冒泡排序

代码如下（示例）：

    var numArr = [2, 1, 6, 4, 77, 3, 54, 7, 8, 9, 56, 46, 4, 5, 7];
    for (let i = 0; i < numArr.length-1; i++) {
        for (let j = 0; j < numArr.length-i-1; j++) {
            // 前一个元素 和 后一个元素 比较
            // 如果前一个元素 大于后一个元素 两者交换位置
            if(numArr[j] >numArr[j+1]){
                var temp = numArr[j];
                numArr[j] = numArr[j+1];
                numArr[j+1] = temp;
            }
        }
    }
    console.log(numArr)