js数据类型之数组类型二（元素查找，数组排序，循环遍历，迭代器方法及扩展）

最新推荐文章于 2021-08-17 17:00:39 发布
最新推荐文章于 2021-08-17 17:00:39 发布
阅读量199 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42354407/article/details/105789129
版权

查找元素

数组包含多种查找的函数，需要把这些函数掌握清楚，然后根据不同场景选择合适的函数。

indexOf
使用 indexOf 从前向后查找元素出现的位置，找到就返回该位置，如果找不到返回 -1。

let arr = [5,6,2,5,1,9];
console.log(arr.indexOf(2)); // 2  从前向后查找2出现的位置

indexOf 查找字符串找不到，因为 indexOf类似于 === 是严格类型约束。

let arr = [5,6,2,5,"1",9];
console.log(arr.indexOf(1)); // -1     indexOf 是严格类型的

第二个参数用于指定查找开始的位置

let arr = [5,6,2,5,1,9];
// 从第二个元素开始向后查找
console.log(arr.indexOf(5,1)); //3

lastIndexOf
使用 lastIndexOf 从后向前查找元素出现的位置，如果找不到返回 -1.

let arr = [5,6,2,5,1,9];
console.log(arr.lastIndexOf(6)); // 1 从后向前查找6出现的位置

// 第二个参数用于指定查找开始位置

let arr = [5,6,2,5,1,9];
console.log(arr.lastIndexOf(2,4));  //2  从索引下标为4 向前查找

includes
使用 includes 查找字符串返回值是布尔类型更方便判断

let arr = [1,9,7,5,1,3];
console.log(arr.includes(8)); // false

自己实现一个 includes 函数，加深对 includes 方法的了解

function includes(arr,item){
	for(const value of arr){
		if(item === value) return true;
		}
		return false;
}
console.log(includes([1,2,3,4,5,6],8)); //false

find
find方法找到值之后会把值返回

  • 如果找不到返回值为 undefined
    返回第一次找到的值，不继续查找
let arr=["cht" , 'hw' ,'xfj'];
let find = arr.find((item)=> {
	return item =='hw';
})
console.log(find);  // hw

使用 includes 等不能查找引用类型，因为他们的内存地址是不相等的

const user = [ {name:"cht"} , {name:"hw"} , {name:"xfj"}];
const res = user.includes({name : "hw"});
console.log(res);  // false

find 可以方便的查找引用类型

const user = [ {name:"cht"} , {name:"hw"} , {name:"xfj"}];
const find = user.find(function(user) {
	return user.name="hw";
});
console.log(find);

findIndex
findIndex 与 find 的区别是返回索引值，参数也是；当前值，索引，操作数组。

  • 查找不到返回 -1
let arr = [5,1,3,"9",1,2,7];
console.log(arr.findIndex((num) => {
	return num == 9;
}))  // 3

find 原理

let arr = [1,2,3,4,5];
function find(array,callback) {
	for(const value of array) {
	if(callback(value) === true) return value;
}
return undefined;
}
let res = find(arr,function(item) {
	return item == 2;
})
console.log(res);

添加原型方法实现

let arr = [1,2,3,4,5];
Array.prototype.findValue = function(callback) {
	for(const value of this) {
	if(callback(value) === true) return value;
}
return undefined;
}
let res = arr.findValue(function(item) {
	return item==2;
})
console.log(res);

数组排序

reverse 反转数组顺序

let arr = [9,8,7,6,5,4];
console.log(arr.reverse()); // [4,5,6,7,8,9]

sort
sort 每次使用两个值进行比价 Array.sort(a,b) =>a-b

let arr = [15,84,65,32,98,78];
console.log(arr.sort((a,b)=> {
	return a-b;
})); //  [15, 32, 65, 78, 84, 98]

排序原理

let arr = [15,84,65,32,98,78] ; 
function sort(array,callback) {
	for(const n in array) {
		for(const m in array) {
			if(callback(array[n],array[m]) < 0) {
				let temp = array[n];
				array[n] = array[m];
				array[m] = temp;
			}
		}
	}
	return array;
}
console.log(sort(arr,function(a,b){
	return a-b;
}))

数组循环遍历

for 根据数组长度结合 for 循环来遍历数组

let arr = [
	{name:"cht" ,age:15},
	{name:"hw" ,age:16},
	{name:"xfj" ,age:17}
]
for(let i=0;i<arr.length;i++) {
	arr[i] = `我叫${arr[i].name}今年${arr[i].age}` ;
}
console.log(arr);

forEach
forEach 使函数作用在每个数组元素上，但是没有返回值。

let obj = [
	{name:"cht" ,age:15},
	{name:"hw" ,age:16},
	{name:"xfj" ,age:17}
];
obj.forEach((item,index,array)=> {
	item.name = item.name.substr(0,1);
});
console.log(obj);
//{name:'c',age:15}
//{name:"h" ,age:16},
//{name:"x" ,age:17}

for/in
遍历时的 key 值为数组索引

let obj = [
	{name:"cht" ,age:15},
	{name:"hw" ,age:16},
	{name:"xfj" ,age:17}
];
for(const key in obj) {
	console.log(key); // 0  1  2
	console.log(obj[key]); // 整个对象
	console.log(`名字${obj[key].name}`);
}

for/of
于 for/in 不同的是 for/of 每次循环取其中的值而不是索引。

	let obj = [
		{name:"cht" ,age:15},
		{name:"hw" ,age:16},
		{name:"xfj" ,age:17}
]
for( const item of obj) {
	console.log(item);
	console.log(item.name);
	console.log(item.age);
}

取数组中的最大值

let arr = [75,95,35,26,14,15];
function maxValue(array) {
	let max = array[0];
	for( const val of array) {
		max = max>val?max:val;
	}
	return max;
}
console.log(maxValue(arr)); // 95

迭代器方法

keys
通过迭代对象获取索引


```javascript
const arr = ['cht' , 'hw'];
const keys = arr.keys();
console.log(keys.next());//{value: 0, done: false}
console.log(keys.next());//{value: 1, done: false}

获取数组所有键

```javascript
	let arr = ["cht" , "hw" , "xfj"];
	for(const key of arr.keys()) {
		console.log(key);   // 0,1,2
	}

values
通过迭代对象获取值

const arr = ['cht' , 'hw'];
const values = arr.values();
console.log(values.next()); //{value: "cht", done: false}
console.log(values.next()); //{value: "hw", done: false}
console.log(values.next()); // {value: undefined, done: true}

获取数组的所有值

const arr = ['a','b','c'];
for(const value of arr.values()){
	console.log(value); // a,b,c
}

entries
返回所有数组所有键值对,j解构语法

const arr = ['a','b','c'];
for(const [key,value] of arr.entries()) {
	console.log(key,value);  
}
//0 "a"
//1 "b"
//2 "c"

扩展方法

every
every 用于递归检测元素，要所有元素操作都要返回真结果才为真。查看同学成绩是否都及格。

const user =[
	{name:"A",test:50},
	{name:"B",test:90},
	{name:"C",test:78},
];
const res = user.every(function(user){
	user.js>=60;
})
console.log(res);  // false

标题的关键词检查

let words = ["A" ,"B" , "C"];
let title = '我是A';
let is = words.every(function(item,index,array){
	return title.indexOf(item) >-1;
});
console.log(is); // false

some
使用 some 函数可以递归的检测元素，如果有一个返回true，表达式结果就是真。第一个参数为元素，第二个参数为索引，第三个参数为原数组。
下面是使用 some 检测规则关键词的示例。

let words = ['A', 'B','C'];
let title = '我身上有一个字母B';
let is = words.some(function(item,index,array){
	return title.indexOf(item) > -1;
});
console.log(is); // true

filter
使用 filter 可以过滤数组中元素。
获取所有title

let obj = [
	{ title:'孙悟空',type:'P'  },
	{ title:'蜘蛛侠' ,type:'C'},
	{ title: '钢铁侠', type:'C'}
];
let objTitle = obj.filter(function(item,index,array){
	if(item.type.toLowerCase() == 'c') {
		return true;
	}
});
console.log(objTitle); // 返回

过滤方法：

function except(array,except) {
	const newArray =[];
	for(const ele of array) {
		if(!except.includes(ele)) newArray.push(ele);
		return newArray;
	}
}
const array = [1,2,3,4];
console.log(array,[2,3]);

map
使用map 映射可以在数组的所有元素上应用函数，用于映射新的值。

获取数组所有标题组合的新数组

let obj = [
	{ title:'孙悟空',type:'P'  },
	{ title:'蜘蛛侠' ,type:'C'},
	{ title: '钢铁侠', type:'C'}
];
console.log(obj.map(item => item.title));

为所有title加上A

let obj = [
	{ title:'孙悟空',type:'P'  },
	{ title:'蜘蛛侠' ,type:'C'},
	{ title: '钢铁侠', type:'C'}
];
obj = obj.map(function(item,index,array) {
	item.title = `A ${item.title}`;
	return item;
})
console.log(obj);
机灵的小飞机
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS数组中根据对象的值获取对象
ct5211314的博客
10-26 5759
在JavaScript中，如果你知道数组中对象的某个值，你就可以根据这个值获取到对应的对象。例如：id var arr=[ {a:1,id:1}, {b:2,id:2}, {c:3,id:3} ] var a=3 var obj=arr.find(function (obj) { return obj.id === a }) console.log(obj["checked"]="true"); console.log(arr);//[ { a:...
javascript 中搜索数组的四种方法
热门推荐
CRMEB小程序商城的博客
05-18 2万+
前端经常要通过 javaScript 来处理数组中的数据，其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值，这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。 在 ECMAScript6 之前，最常用的方法就是通过 for 循环来遍历数组中的所有项目并对项目执行操作。现在我们可以通过内置的使用方法来完成在数组中搜索值的常见任务。 本文将介绍 Array.includes()、Array.indexOf()、Array.fiind() 和 Array.filter
js两个数组比较，添加不同属性值，for循环与indexOf的使用
Aom_yt的博客
08-17 1889
实现要求： 2个数组进行对比valList中有对应的list数组中age值就添加sort并且赋值为1，否则就给赋值为2。 //用了一个按钮，点击打印出list数据 <button @click="demo">for循环与indexOf的使用</button> demo () { var valList = [3, 2, 1, 12]; var list = [{ name: 'zhansan', age: 3 }, { name: 'lisi', age:
将数组中相同元素分类放入不同数组中
07-06
将一个随机数组中的相同元素分类放入不同数组中。目前处于输出阶段。
js 如何用一层 for 循环找到数组里第二大的元素
sunlei19951007的博客
06-20 2502
最近有小伙伴跳槽面试，遇到了这个题，要求如下 不能将数组整体排序 如果用循环只能用一层 不能使用额外空间 实现代码 数组只整理了第一大和第二大的元素，分别放在了 index 为 0 和 1 的位置，并没有完全排序 只使用了一层循环 没使用额外空间...
JavaScript数组全解密
01-27
总的来说，JavaScript数组的API丰富多样，包括数组的遍历方法（如`forEach`、`map`、`filter`）、查找方法（如`indexOf`、`find`、`findIndex`）、修改方法（如`push`、`pop`、`shift`、`unshift`）、排序方法（如`...
js常见经典面试题汇总
最新发布
02-02
JavaScript的数据类型主要分为两大类：**基本数据类型（primitive types）**和**引用数据类型（reference types）**。 - **基本数据类型**包括：`number`、`string`、`boolean`、`null`、`undefined`、`symbol`...
arrays-p1
03-28
- `entries()`：返回一个迭代器，允许遍历数组的键值对。 - `keys()`：返回一个迭代器，允许遍历数组的索引。 - `values()`：返回一个迭代器，允许遍历数组的值。 以上知识点构成了JavaScript中数组处理的基础，...
WorkingWithArrays
03-14
在JavaScript编程中，数组是一种非常重要的数据结构，用于存储一系列有序的值，这些值可以是任何类型，包括数字、字符串、对象等。本教程将深入探讨"WorkingWithArrays"的相关知识点，帮助你更好地理解和掌握...
Wrox.Beginning.JavaScript.and.CSS.Development.with.jQuery.May.2009
05-11
- **选择器详解**：深入探讨jQuery提供的各种选择器类型，包括基本选择器、后代选择器、子代选择器等。 - **过滤方法**：讲解如何利用`.filter()`、`.not()`等方法对元素进行筛选，实现更精确的选择。 **第3章：...
JS按照特定的条件对数组进行归类
遛狗的代码的博客
10-27 2925
函数定义： function groupBy(arr, prop, callback) { var newArr = [], tempArr = []; for (var i = 0, j = arr.length; i < j; i++) { var result = callb
c++怎么将两个类的方法集合成一个类的方法_Java程序员必须要掌握的13个集合类操作优化...
weixin_39933026的博客
11-28 301
本文首先针对 Java 集合接口进行了一些介绍，并对这些接口的实现类进行详细描述，包括 LinkedList、ArrayList、Vector、Stack、Hashtable、HashMap、WeakHashMap 等，然后对一些实现类的实现方式和使用经验进行讲解，同时重点介绍 WeakHashMap。希望通过本文介绍，可以让读者对集合的操作方式、注意事项等有一些了解。在实际的项目开发中会有很多的...
js将对象数据根据属性归类分成多个数组
qq_42583562的博客
01-14 4130
场景： 一个数组内含有多个对象，需要根据对象的属性将同一值的对象归为一个数组。 js代码： //数据归类方法 funtion classify(arr, key) { let kind = []; //存放属性标识 let newArr = []; //返回的数据 arr.map((item) => { // 判断key是否存在，不存在则添加 if (!kind.includes(item[key])) { kind.push(item[key]); /
js 中的for in 与标准for循环遍历数组
u013471672的博客
12-09 880
function checkAll(node){   var item = document.getElementsByName("item");   /*alert(item.length);*/   for(i in item){       item[i].checked = node.checked;   }    }    function getSum(){
Javascript中常见的数组遍历方法总结
ITSYDWJ的博客
09-15 223
数组遍历方法 1、for循环的使用 优化后的for循环，是用临时变量将长度缓存起来，避免了重复获取数组长度，当遍历的数组较长时，优化效果会比较明显。 <script> var arr=[1,2,3,6,4,85] for (j = 0, len = arr.length; j < len; j++) { console.log(j) } </script> 2、forEach循环的使用
js 对象数组查找元素常用方法
weixin_30838921的博客
09-26 2526
let the_spec_List_Vaule = res.Data.Spec_List_Vaule.find(function(x) { return x.Spec_Item_List == propertyChildIds; }) 转载于:https://www.cnblogs.com/puzi0315/p/9709995.html...
js处理数组对象把相同的值归类
FrankJiang
03-03 1679
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
js判断一个对象数组里是否存在某个元素
渐行渐远
05-19 2万+
js判断一个对象数组里是否存在某个元素,判断currentTrack这个数组中是否存在trackId=31的对象
使用for循环遍历数组及数组操作技巧
数组在JavaScript等许多编程语言中广泛使用，而遍历数组的常见方法之一就是使用for循环。本篇文章将深入探讨如何利用for循环遍历数组中的元素，并介绍与数组相关的知识点。 首先，我们要明白数组的索引是从0开始的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值