js数组遍历、截取、删除、元素查询_html代码笔记

首页 > js/css/html > js数组遍历、截取、删除、元素查询

js数组操作基本方法介绍：

一、数组基础

var arr = [1, 2, 3, 4, 5];/./声明一个数组

var arr = new Array(5);//长度为的数组

Array.isArray(arr);//isArray 判断是否为数组返回bool值

arr instanceof Array;//instanceof 检测数据类型返回bool值

arr.indexof(1);//作用：从前向后检索索引；返回索引值如果查询的不存在，返回-1

arr.indexOf(2, 5) ;//在字符串第五个位置开始查找字符 "2" 第一次出现的位置:返回1，即第二个位置，若不存在返回-1

lastindexof;//作用：从后向前检索索引；返回索引值,如果查询的不存在，返回-1,索引任然是从前往后数

二. 数组常用方法

2.1 push

在数组后面添加一个或多个数据
返回：返回push后数组长度
是否改变原数组：改变原数组

var arr = [1, 2, 3, 4, 5];

arr .push(6)

arr =[1,2,3,4,5,6]

2.2 pop 删除数组最后一个数据
返回：删除的数据
是否改变原数组：改变原数组

var arr = [1, 2, 3, 4, 5];

arr .pop()

arr =[1,2,3,4]

2.3 unshift 在数组前面添加一个或多个数据
返回：返回push后数组的长度
是否改变原数组：改变原数组

var arr = [1, 2, 3, 4, 5];

arr .unshift(0)

arr =[0,1,2,3,4,5]

2.4 shift
作用：删除第一个数据
返回：返回删除的数据
是否改变原数组：改变原数组

var arr = [1, 2, 3, 4, 5];

arr .shift()

arr =[2,3,4,5]

2.5 concat 合并两个数组
返回：新数组
是否改变原数组：不改变

var arr = [1, 2, 3, 4, 5];

var arr1= [7,9];

var arr2 = arr.concat(arr1)

arr2 =[1,2,3,4,5,7,9]

2.6 slice 功能强大的数组操作方法，可以截取，指定删除数组元素

用法：arr.slice(index , [end],items...)

index : 截取(新增)数组开始的下标，必填

end: 规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

items:可以为空，表示要新增加的元素

（1）、截取、删除元素

const arr = [1,2,3,4,5];

const newArr = arr.slice(0,1);

console.log(newArr); // [2,3,4,5]

（2）、复制一个新数组

const arr = [1,2,3,4,5];

const newArr = arr.slice();
console.log(newArr); // [1,2,3,4,5]

（3）、在指定位置插入新元素

var arr= ["a", "b", "c", "d"];
var newArr = arr.splice(2,0,"1","2");

console.log(newArr); // ["a", "b", "c","1","2", "d"]

三、 sort 排序

默认以ASCII码值排序改变原数组

数字排序通过回调函数实现

//从小到大排序

var arr = [11, 23, 4, 45, 5]

arr.sort(function(a, b) {
return a - b
});
console.log(arr)

//从大到小排序

arr.sort(function(a, b) {
return b - a
});

四、 join（separator）数组转字符串

不改变原数组

//直接转字符串

var fruits = ["a", "b", "c", "d"];
var res = fruits.join();

console.log(res) = a,b,c,d

//使用连接符连接

var fruits = ["a", "b", "c", "d"];
var energy = fruits.join(" and ");

console.log(res) = a and b and c and d

五、数组遍历

（1）every()：检测数组中所有元素是否都符合指定条件，一个不满足都会返回false

let arr = [1,2,3,4,5];

const bool = arr.every((v, i) =>{
return v < 6;
});

console.log(bool); //true

（2）some()：有一项满足立即返回true，不会继续往下执行

let arr = [1,2,3,4,5];

const bool = arr.some((v, i) =>{
return v < 0;
});

console.log(bool); //false

(3) filter()：返回符合条件的所有元素存放在另一个数组中

let arr = [1,2,3,4,5];

const bool = arr.filter((v, i) =>{
return v < 3;
});

console.log(bool); //[1,2]

（4） map()：对数组里的每个元素经过指定操作返回

let arr = [1,2,3,4,5];

const bool = arr.map((v, i) =>{
return v * 2;
});

console.log(bool); //[2,4,6,8,10]

（5）forEarch ：循环遍历

let arr = [1,2,3,4,5];

arr.forEach((v, i) =>{
console.log(v);
});

（6）reduce：数组的第一项开始，逐个遍历到最后

let arr = [1,2,3,4,5];

const sum = arr.reduce((total, v) =>{
return total + v
}, 0);

console.log(sum); //15

站长微信

微信公众号

站点声明：

1、本站所有内容都为原创

2、文章转载时请附带本站原文链接，谢谢。

js/css/html

js数组操作基本方法介绍：

一、数组基础

二. 数组常用方法

三、 sort 排序

四、 join（separator） 数组转字符串

五、数组遍历

四、 join（separator）数组转字符串