JS常用的数组方法和循环

151 阅读 0 评论 100 点赞

我是靠谱客的博主呆萌夕阳，这篇文章主要介绍JS常用的数组方法和循环，现在分享给大家，希望可以做个参考。

数组

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

创建数组：var 数组名称 = new Array(size);

size:表示数组中可存放的元素总数； new:表示数组的关键字

创建数组的三种方法：

1. 创建数组 new 对象

let arr = new Array(5);
arr[0]="html";
arr[1]="css";
arr[2]="js";
arr[3]="vue";
arr[4]="java";
document.write(arr[3]);
console.log(arr);

JavaScript 中的数组用一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从0开始

2.利用 new 创建数组，创建时直接赋值

let arr = new Array("HTML","CSS","JS","VUE","JAVA");
document.write(arr[2]);
console.log(arr);

通过数组的名称和下标直接访问数组的元素，下标从0开始

3.利用字面量创建数


let arr=["HTML","CSS","JS","VUE","JAVA"];
document.write(arr[4]);
console.log(arr);

数组的常用方法和属性

1.join()已分隔符将数组分割转换为string

let arr=["HTML","CSS","JS","VUE","JAVA",18];
console.log(arr);
let newarr=arr.join("+");
console.log(newarr,typeof(newarr));

2. push()向数组末尾追加元素


let arr=["html","js","java","wechat"];
arr.push("CSS","java","linux");
console.log(arr);

3.pop() 删除数组末尾元素只能删除一个


let arr=["html","js","java","wechat"];
arr.pop("wechat");
console.log(arr);

4.unshift()向数组头部添加元素


let arr=["html","js","java","wechat"];
arr.unshift("周三","周四");
console.log(arr);

5.splice(起始下标，删除个数)//删除任意位置元素


let arr=["html","js","java","wechat"];
arr.splice(1,2);
console.log(arr);

6.splice(起始下标，替换个数，替换的数据)，可以替换任意位置的元素


let arr=["arr.splice(1,1,"cssss");
arr.splice(1,1,"cssss");
console.log(arr);

7.splice(起始下标，新增的个数，新增的数据)


let arr=["html","js","java","wechat"];
arr.splice(5,3,"css","mysql","spring");
console.log(arr);

8.sort() 排序

let arr=[4,23,12,21,16,5,56,34,]
arr.sort(function(a,b){
// return a-b;
//正序
return b-a;
//倒序
})
console.log(arr);

循坏二维数组

方法一：

let arr=["HTML","CSS","JS","VUE","JAVA",[1,2,3,4,5],["张三","李四"]];
let i=0;
while(i<arr.length){
if(Array.isArray(arr[i])){
for (let value of arr[i]){
document.write(value+"<br/>");
}
}else{
document.write(arr[i]+"<br/>");
}
i++;

方法二：flat 将数组进行降维处理，创建一个新的数组

let arr=["HTML","CSS","JS","VUE","JAVA",[1,2,3,4,5],["张三","李四"]];
let newarr=arr.flat();
for(let i in newarr){
document.write(newarr[i]+"<br/>");
}

三维数组：

let arr=["HTML","CSS","JS","VUE","JAVA",[1,2,["a","b","c"],3,4,5],["张三","李四"]];
let newarr=arr.flat(2);
for(let i in newarr){
document.write(newarr[i]+"<br/>");
}

检测数据类型 Array.isArray() 查看数据是否为数组 true/flase

let arr=["HTML","CSS","JS","VUE","JAVA",18];
alert(Array.isArray(arr));

循环

1. for 循坏 ---------【已知条件，已知范围（先判断后执行）】

 let arr=["HTML","CSS","JS","VUE","JAVA",18];
for(let i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");
}

2.while 循坏 ---------【未知条件，未知范围（先判断后执行）】

let i =0;
while (i<arr.length) {
document.write(arr[i]+"<br/>");
i++;
}

3.do while 循坏 ---------【至少执行一次】

 let i=0;
do{
document.write(arr[i]+"<br/>");
i++;
}
while (i<arr.length);

4.for of


let arr=["HTML","CSS","JS","VUE","JAVA",18];
for(let value of arr){
document.write(value+"<br/>");
}

5. for in 输出下标【循坏对象】


let arr=["HTML","CSS","JS","VUE","JAVA",18];
for(let i in arr){
document.write(arr[i]+"<br/>");
}

6.forEach 接受回调函数值，下标，数组


let arr=["HTML","CSS","JS","VUE","JAVA",18];
arr.forEach(function(value,index,oldarr){
document.write(value+"----"+index+"----"+oldarr+"<br/>");
})

7.map()数组方法有返回值，返回了一个新的数组（和老数组长度一致，新数组有可能是二维数组）


let newarr = arr.map(function(value,index,oldarr){
document.write(index+"---"+value+"---"+oldarr+"<br/>");
if(index==0){
value="12454";
}
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="12454";
}
return[value,index];
});
console.log(newarr);