JavaScript中的数组(Array)详解,一文搞定所有常见的数组操作。

2021/8/5 11:06:11

本文主要是介绍JavaScript中的数组(Array)详解,一文搞定所有常见的数组操作。,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、创建数组的方式
  • 二、数组的空位和索引
    • 1. 数组空位
    • 2. 数组索引
  • 三、检测数组方法
  • 四、数组遍历和迭代
    • 2.读入数据
  • 总结


前言

每一种高级语言基本上都有“数组”这个数据结构。但与大部分语言不同的是,JS种的数据是非常灵活的。JS种的数组也是一种有序数字,但它的一个数组里不同元素可以存放任意数据类型的数据,并且数组的容量是动态的,可以随着数据增加自动增长。


一、创建数组的方式

需要注意的是,使用数组字面量创建数组时,是不会调用Array构造函数的,这点感兴趣的同学可以自己深入了解下。

    <script>
        // 1. 创建方式: new 操作符
        var arr = new Array(); // 创建空数组arr
        var arr = new Array(20); // 创建长度为20的空数组arr
        var arr = new Array('abc'); // 创建一个只有'abc'元素的数组arr
        var arr = new Array('a', 2, 'b'); // 创建有内容数组arr
        // 2. 创建方法:[] 数组字面量
        var arr = [];
        var arr = [1, '二', 'three', true];
    </script>

二、数组的空位和索引

1. 数组空位

在js种因为数组是动态的,那么总会可能出现空数组的情况,这在js中是允许的,现在ES6的处理方式为将空位的值设置为 “ undefined ”。

    <script>
        const options = [, , , , ,]; // 创建包含 5 个元素的数组
        console.log(options.length); // 5 
        console.log(options); // [,,,,,] 
        
        const options2 = [1, , , , 5];
        for (const option of options2) {
            console.log(option === undefined); // false,true,true,true,false
        }
    </script>

console.log(options);在谷歌浏览器中的显示结果(empty)。
在这里插入图片描述
虽然解释器会自动设置数组内空元素的值为undefined,但因为不同的es版本和数组操作方法之间存在的差异,在实际中,如果可以,最好将空数组元素显示定义为undefined。


2. 数组索引

由于js数组中的灵活性,所以其数组长度这个属性不单单只是可以用来获取,还可以通过修改数组长度的值,达到删除数组末尾元素或增加数组长度。介绍一个实际运用中最常用到的实践例子:arr.length始终比数组的最后一个元素下标多1,所以可以通过 arr[arr.length] = i; 的方法稳定扩容数组。

    <script>
        var arr = ['a','b','c'];
        console.log(arr.length); // 3
        // 通过修改length属性,改变数组
        arr.length = 2;
        console.log(arr); // ["a", "b"]
        arr.length = 4;
        console.log(arr); // ["a", "b", empty × 2]
        // 常用实践
        var arr = [1,2,3];
        for (let i = 4; i <= 10; i++) {
            arr[arr.length] = i;
        }
        console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    </script>

与其他编程语言中的数组长度类似,js中的数组虽然可以动态扩容,但最大长度为(2^32-1),也就是4294967295,因为length作为一个属性也有其存储数据的最大值。

    <script>
        // var arr = new Array(4294967296);
        // 以上代码报错:Invalid array length
    </script>

三、检测数组方法

在JavaScript中最常用来检测一个变量是否为数组的方法为 instanceof 操作符。

var arr = new Array();
console.log(arr instanceof Array); // true

但如果在网页里有多个框架,可能有两个版本的Array构造函数。所以还可以通过isArray()方法确定一个值是否为函数。

var arr = new Array();
console.log(Array.isArray(arr)); // true

说说这两个检测数组方法的区别:因为instanceof原理为判断右边参数的原型是否在左边参数的原型链上,所以在不同的环境下对数组的判断可能出现差别,而Array.isArray()方法只对传入参数是Array类型,就返回true,总的来说用isArray判断是否为数组更加可靠。

四、数组遍历和迭代

任何编程语言涉及数组都会需要有对数组的遍历,而很多语言会内置了迭代器,JavaScript内部也同样具有。Array的原型上暴露了3个方法用来获取数组中的内容:keys(), values(), entries()。

const arr = ["一", "二", "三"];
// 因为这些方法都返回迭代器,所以可以将它们的内容
// 通过 Array.from()直接转换为数组实例
const arrKeys = Array.from(arr.keys());
const arrValues = Array.from(arr.values());
const arrEntries = Array.from(arr.entries());
console.log(arrKeys); // [0, 1, 2]
console.log(arrValues); // ["一", "二", "三"]
console.log(arrEntries); // [[0, "一"], [1, "二"], [2, "三"]] 
// 根据这些方法返回的迭代器内容,可以很方便的进行遍历
for (let [index, element] of arr.entries()) {
console.log(index);
console.log(element);
}

2.读入数据

代码如下(示例):

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。


总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。



这篇关于JavaScript中的数组(Array)详解,一文搞定所有常见的数组操作。的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程