javascript数组怎么定义_js中的数组

javascript数组怎么定义_js中的数组每一门编程语言,都有数组或类似数组的结构,同样的JavaScript(虽然是脚本语言)也不例外,学习JavaScript的数组,我们从新建第一个数组开始。JavaScript中的数组,长度是动态可变的,如果学过其他编程语言的朋友可能对这一点不是很习惯。但事实上反而使得问题变得简单了,因此不需要再定义数组的时候就指定它的大小。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

目录

I. 初识数组:新建一个数组

II. 认识数组:数组的基本方法

? push()方法

? unshift()方法

? pop()方法

? shift()方法

? sort()方法

? reverse()方法

? slice()方法

III. 掌握数组:数组的进阶方法

? splice()方法

? forEach()方法

? filter()方法 

? map()方法 


高质量前端博主,点个关注不迷路???

I. 初识数组:新建一个数组

每一门编程语言,都有数组或类似数组的结构,同样的JavaScript(虽然是脚本语言)也不例外,学习JavaScript的数组,我们从新建第一个数组开始

var arr = [];

这句话是定义数组的一种方法,之后,我们可以给这个数组赋值

var arr = []
arr[0] = 0;
arr[1] = 1;
console.log(arr[0]);
console.log(arr[1])

赋值的方法也很简单,直接给数组对应的索引值的位置赋值即可与其他编程语言不同的是:

JavaScript中的数组,长度是动态可变的,如果学过其他编程语言的朋友可能对这一点不是很习惯。

事实上反而使得问题变得简单了,因此不需要再定义数组的时候就指定它的大小。

除了上面的这种创建数组的方法外,还有以下几种方法:

// 1. 最简单的创建方法
var arr = [];

// 2. 新建数组对象的方式创建数组
var arr2 = new Array();

// 3. 新建数组对象的方式创建数组,并指定长度,但由于长度可变,因此实际作用不大
var arr3 = new Array(5);

// 4. 创建数组,并给数组前三位初始值为1 2 3 
var arr4 = [1,2,3];

其中,第三种,就像注释说的那样,意义不大,因为数组长度可变第四种在创建数组的同时,就完成了赋值,但由于长度可变,在后面依旧可以继续插入值。

访问数组元素时,与其他编程语言一样,只需要用对应的索引值即可,索引值也是从0开始,为了方便小白阅读,我给出访问数组元素的语法格式:

var arr = [1,2,3];

var num = arr[0];

var num2 = arr[1];

var num3 = arr[2];

这样三个num变量就获取了数组arr的前三个元素,完成了访问。


II. 认识数组:数组的基本方法

学会了新建数组和访问数组元素,我们开始了解一些数组的基本方法

? push()方法

push(参数1,参数2,参数3…,参数n) 方法把参数指定的元素依次添加到数组的末尾,并返回添加元素后的数组长度,其中push()可以传入多个元素,实现多元素同时插入

我们用代码演示一下它的工作

var arr = [1, 2, 3];
var length = arr.push(4);
console.log("新插入的元素为:" + arr[3]);
console.log("数组的长度: " + length);

javascript数组怎么定义_js中的数组


? unshift()方法

unshift(参数1,参数2,参数3…,参数n) 方法把参数指定的元素依次添加到数组的前面,并返回添加元素后的数组长度其中unshift()可以传入多个元素,实现多元素同时插入

我们用代码演示一下它的工作

var arr = [1, 2, 3];
var length = arr.unshift(4);
console.log("新插入的元素为:" + arr[0]);
console.log("数组的长度: " + length);

javascript数组怎么定义_js中的数组


? pop()方法

pop() 方法弹出 / 删除 数组最后一个元素,并返回弹出的元素

我们用代码演示一下它的工作

var arr = [1, 2, 3];
var element = arr.pop();
var length = arr.length;
console.log("弹出/删除的元素为:" + element);
console.log("数组的长度: " + length);

javascript数组怎么定义_js中的数组


? shift()方法

shift() 方法可删除数组第一个元素,并返回删除的元素。

我们用代码演示一下它的工作

var arr = [1, 2, 3];
var element = arr.shift();
var length = arr.length;
console.log("删除的第一个元素为:" + element);
console.log("数组的长度: " + length);

javascript数组怎么定义_js中的数组


? sort()方法

sort(compare_function) 方法用于按某种规则排序数组当方法的参数为空时按字典序(即元素的 Unicode 编码从小到大排序顺序)排序数组元素当参数为一个匿名函数时,将按匿名函数指定的规则排序数组元素

我们用默认不传入参数的形式的代码给大家演示它的排序效果:

var arr = [3, 1, 2, 4, 5];
console.log("排序前:")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
arr.sort();
console.log("排序后:")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);

javascript数组怎么定义_js中的数组


? reverse()方法

reverse() 方法可返回当前数组倒序排序形式。

我们用代码演示一下它的工作

var arr = [1, 2, 3, 4, 5];
console.log("倒序前:")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
arr.reverse();
console.log("倒序后:")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);

javascript数组怎么定义_js中的数组


? slice()方法

slice() 方法返回包含从数组对象中的 第1个索引值 到 第二个索引值 – 1 之间的元素组成的新子数组。

我们用代码演示一下它的工作

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.slice(1, 4);
console.log("子数组的长度:" + arr2.length);
console.log("子数组的元素:" + arr2[0] + " " + arr2[1] + " " + arr2[2]);

javascript数组怎么定义_js中的数组


III. 掌握数组:数组的进阶方法

接下来,我们来看看数组有哪些比较高端的进阶方法

? splice()方法

splice方法就比较复杂了,它有三个形态,我们来看看:

splice(参数1:index(索引值),参数2:length(长度),参数3:element(元素))

上面是splice函数的全部三个参数,根据三个参数的不同,splice可以有三种形态和功能:

(1) 删除形态:

此时注意了,第三个参数不用管了,因为都是删除了,当然不需要第三个element参数,于是:

arr.splice(index , length)

表示从索引index开始,把index 到 index + length – 1 的数组元素全部删除;

(2) 替换形态:

此时注意了,第三个参数是新元素,要替换旧的元素的新元素,于是:

arr.splice(index , length,element)

表示从索引index开始,把index 到 index + length – 1 的数组元素全部替换成element(注意,并不是说这些位置每个位置都换成element,而是这些位置先合并成一个位置,然后换成element)

在替换形态下,第二个参数length不能取值0,必须大于0,否则就会出错!

(3) 添加形态:

此时注意了,第二个参数length必须取值为0:

arr.splice(index ,0,element)

表示把element放在数组索引index的位置上,同时原来的元素以此后移一位(注意是后移/插入,并不是直接把该位置的元素给替换了)

我们一一用代码演示一下

var arr = [1, 2, 3, 4, 5];
arr.splice(0, 2);
console.log("执行删除后数组的长度:" + arr.length);
console.log("执行删除后数组的元素:" + arr[0] + " " + arr[1] + " " + arr[2]);
arr.splice(0, 2, 1);
console.log("执行替换后数组的长度:" + arr.length);
console.log("执行替换后数组的元素:" + arr[0] + " " + arr[1]);
arr.splice(0, 0, 5);
console.log("执行插入后数组的长度:" + arr.length);
console.log("执行插入后数组的元素:" + arr[0] + " " + arr[1]);

javascript数组怎么定义_js中的数组


? forEach()方法

forEach(callback) 方法用于对数组的每个元素执行一次回调函数,传参是回调函数。

例如我们想要循环遍历一个数组,我们可以把回调函数写成这样:

var arr = [1, 2, 3, 4, 5];
arr.forEach(function (e) {
    console.log(e)
})

其中,匿名函数的参数e,就是每一个数组的元素,我们可以在里面对这些元素进行批处理,我这里的处理就是控制台打印,于是可以看到:

javascript数组怎么定义_js中的数组


? filter()方法 

filter(function) 方法用于创建一个新的数组,其中的元素是指定数组中所有符合指定函数要求的元素,传参是我们规定返回的要求对应的函数。

注意,filter()方法返回的是一个数组,它满足我们指定的要求,这个要求通过传参函数进行解释

var arr = [1, 2, 3, 4, 5];
var new_arr = arr.filter(function (e) {
    if (e > 3) {
        return true;
    }
    else {
        return false;
    }
})
new_arr.forEach(function (e) {
    console.log(e)
})

观察一下传参的函数,这个函数判断元素是否大于3,大于3,返回true,于是相当于告知filter()方法,这个元素符合要求,于是大于3的值被赋给了新数组,运行效果为:

javascript数组怎么定义_js中的数组


? map()方法 

最后,我们聊聊map()方法

map() 方法用于创建一个新的数组,其中的每个元素是指定数组的对应元素调用指定函数处理后的值。

例如,我们想让数组的每个元素都扩大二倍,利用map()方法可以这么写

var arr = [1, 2, 3, 4, 5];
var new_arr = arr.map(function (e) {
    return e * 2;
})
new_arr.forEach(function (e) {
    console.log(e)
})

javascript数组怎么定义_js中的数组

到这里,数组的基础方法和进阶方法都告诉大家了(如果有没有包括的,大家再自行学习即可),但是光看完文章还不够,更多的是大家多多练习这些方法,如果上面的函数都能熟练地使用,那么你的JavaScript数组水平已经很不错了!

以上是本期的全部内容,喜欢的小伙伴们可以三连支持一下!???!

另外本期博客参与了新星计划】,还请大家支持一下???

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187143.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号