前言

数组是用来存储元素的一种非常重要的方式，掌握常用的数组方法以及学会遍历数组是学习编程不可缺少的一步。

提示：以下是本篇文章正文内容，下面案例可供参考

一、数组是什么？

数组是具有相同数据类型的一个或多个值的集合。

二、数组基本操作方法

1.创建数组

代码如下：

//1、创建数组 new 对象 下标
let arr=new Array(3);
arr[0]="阿易";
arr[1]="阿宓";
arr[2]="生活顺利";
document.write(arr[2]);
console.log(arr); //2、创建数组 new 对象 下标
let arr=new Array("阿易","阿宓","生活顺利");
document.write(arr[2]);
console.log(arr);//3、字面量 创建数组
let arr=new Array("阿易","阿宓","生活顺利");
// document.write(arr[2]);
// console.log(arr);

`2.常用数组方法`

代码如下（示例）：

let arr=new Array("阿易","阿宓","生活顺利");//length   计算数组长度(数组的下标从0开始计算)
let len=arr.length;Array.isArray(arr)             //判断是否为数组类型//jion() 以分隔符将数组分割转换为字符串String
let newStr=arr.join("+");//split()  将String以分隔符转换为array  //向数组末尾添加元素
arr.push("嗨嗨嗨","huhu");//删除数组末尾元素
arr.pop();//向数组头部添加元素
arr.unshift("huhu","ququ");//删除数组头部元素
arr.shift();//数组万能方法
//splice(起始下标，删除个数)      删除任意位置元素
arr.splice(1,2);
//splice(起始下标，替换个数，替换的数据。。。)     替换任意位置元素
arr.splice(1,2,"nana","lili");
//splice(起始下标，新增个数，新增的数据)     新增元素
arr.splice(3,2,"xixi","mama");

三、循环数组的方法

循环实在满足条件的情况下,去不断重复的执行某一个操作,目的是为了解决代码的重复操作,减少代码的编写量,使代码结构更加清晰,增加代码的可读性.

代码如下（实例）：

//1、for循环   下标/key/键  【已知条件，已知范围（先判断，后循环）】
for(let i=0;i<arr.length;i++){document.write(arr[i]+"<br/>");
}//2、while循环 下标/key/键  【未知条件，未知范围（先判断，后循环）】
let i=0;
while(i<arr.length){
document.write(arr[i]+"<br/>");
i++;
}//3、do while循环 【未知条件，未知范围（先循环，后判断）】do{
document.write(arr[i]+"<br/>");
}while(i<arr.length);//4、for of循环   值/value/元素  【循环/遍历 数组】
for(let value of arr){
document.write(value+"<br/>");
} //5、for in循环  下标/key/值    [一般用来循环对象]
for(let i in arr){
document.write(arr[i]+"<br/>");
}//6、forEach() 数组方法  匿名回调函数
arr.forEach(function(value,index,oldarr){
document.write(index+"---"+value+"---"+oldarr+"<br/>");
});//7.map() 数组方法  有返回值，返回一个新的和原数组长度一定一致的数组,新数组有可能是二维数组
let newarr=arr.map(function(value,index,oldarr){document.write(index+"---"+value+"---"+oldarr+"<br/>");if(index==0){value="123456";}return [value];
});
console.log(newarr);//8.flatMAp() 数组方法  有返回值，返回了一个新的和原数组长度有可能不一致的数组，新数组一定是一维数组
let newarr=arr.flatMap(function(value,index,oldarr){document.write(index+"---"+value+"---"+oldarr+"<br/>");if(index==0){value="123456";}return [value,index];
});

另外,在循环中还有两个关键语句"break"和"continue".

break语句用于中止某个循环,使程序跳到循环块外的下一条语句,在循环中位于break后的语句讲不再执行,break语句不仅可以用在for循环中,也可以用在while循环中.

continue语句也可用于for循环和while循环,continue适用于退出本次循环,继续后面的循环的情况,continue语句只能用在循环结构中.

总结

数组是学习编程不管任何语言必须掌握的知识,特别是循环数组的方法,如何取到数组的值,取到的是"键"还是"值"是非常关键的,牢记这些,可以在你需要用到数组是事半功倍.

js中的数组方法以及循环数组的方法相关推荐

JS中判断对象是对象还是数组
JS中判断对象是对象还是数组的方法 JS中判断对象是不是数组的方法 JavaScript中检测对象的方法 1.typeof操作符这种方法对于一些常用的类型来说那算是毫无压力,比如Function ...
js中的concat函数-字符串拼接+数组拼接
js中的concat函数-字符串拼接+数组拼接一.concat() 方法用于字符串拼接字符串 let str1 = "abc"let str2 = "123" ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
js中document通过ID获取的一些使用方法
js中document通过ID获取的一些使用方法 document.getElementById("link").href; document.getElementById(&q ...
nuxt.js中的静态图片显示不出来解决方法
nuxt.js中的静态图片显示不出来解决方法 <script> export default {data() {return {imgList: [{ name: "图1&quo ...
JS中find(), findIndex(), filter(), forEach(), some(), every(), map()方法
1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该 ...
node.js中mysql批量插入更新的三种方法
[背景]在项目中遇到一个批量插入数据的需求,由于之前写过的sql语句都是插入一个对象一条数据,于是去网上搜关键词 "sql批量插入"."mysql批量插入"等, ...
js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象--String对象它有以下几个常用的属性: length prototype 有以下几个常用的方法: parseInt()转换为数字 parseFloat()转换为 ...

js中的数组方法以及循环数组的方法

前言