在 javascript 中快速获取数组指定位置的元素

Posted 2023-03-29 zjl_712、

前言

在 javascript 中如果我们需要获取一个数组指定位置的元素，通常情况下，我们一般采用以下方法：

1.通过下标直接获取指定元素：arr[index], index 为非负数。

let arr = [1, 4, 5, 8, 10]
// 获取数组的第一个元素
let num1 = arr[0]
// 获取数组的最后一个元素
let num2 = arr[arr.length - 1]
// 获取数组的倒数第二个元素
let num3 = arr[arr.length - 2]
console.log(num1, num2, num3); // 1 10 8

根据正序位置获取指定的元素比较方便，但是根据逆序位置（倒数第几个）获取指定的元素稍微繁琐（需要计算出正序位置）。
正序时 index 为正整数或0，逆序时 index 为负整数。

那么获取对应位置元素的表达式可以表示为：

index 为正数或0：arr[index]

index 为负数： arr[arr.length + index]

2.通过 slice 方法获取

let arr = [2, 4, 6, 8, 10]
// 获取数组的第一个元素
let num4 = arr.slice(0, 1)
// 获取数组的最后一个元素
let num5 = arr.slice(-1)
// 获取数组的倒数第二个元素
let num6 = arr.slice(-2, -1)
console.log(num4[0], num5[0], num6[0]); // 2 10 8

其实在其他语言中比如 python 如果你想要获取倒数第几个元素是可以通过 arr[index] 直接获取（如arr[-1]获取倒数第一个元素）, 但是在 JavaScript 中是不支持这样获取的。

为了更方便获取数组指定位置的元素（无论时正序还是逆序位置），数组提供了一个内置方法 at() 可以通过元素下标直接获取指定位置的数组元素

数组的 at() 方法

我们使用 at 方法实现以上案例：

let arr2 = [2, 4, 6, 8, 10]
// 获取数组的第一个元素
let num4 = arr2.at(0)
// 获取数组的最后一个元素
let num5 = arr2.at(-1)
// 获取数组的倒数第二个元素
let num6 = arr2.at(-2)
console.log(num4, num5, num6); // 2 10 8

语法：at(index), index 是整数，其中包括负整数表示从左往右数第几个元素。

获取指定位置不存在的元素返回 undefined

let arr = [2, 4, 6, 8, 10]
console.log(arr[5]); // undefined

获取类数组指定位置元素

let likeArr = 
  length: 2,
  0: 'vue',
  1: 'react'

let lang = Array.prototype.at.call(likeArr, 0)
console.log(lang); // vue

对比

方法	参数范围	简易程度
arr[index]	非负整数	逆序获取元素时需要进行计算，相对繁琐
slice(startIndex, endIndex)	整数	一般需要一到两个下标，相对繁琐
at(index)	整数	只需一个下标 index ，相对简单

JavaScript 重点笔记

JavaScript 重点笔记

## 数组
// 必须掌握
- arr.length：获取数组元素的长度
- arr.splice(起始位置,长度):从数组中添加或删除元素。
- arr.indexOf()：获取指定元素在数组中的位置，不存在返回-1
- arr.sort([函数:排序规则])：排序（默认采用字符串顺序排序，数字排序则需要通过自定义函数实现）
- arr.join(str)：将arr以指定字符连接成字符串

// 次重点
- arr.push():在数组末尾推入指定元素
- arr.pop()：弹出并返回数组末尾元素
- arr.shift()：弹出并返回数组第一个元素
- arr.unshift()：在数组开头处添加指定元素

// 都必须理解，之后复习，我们能够马上 捡起来
- arr.concat():合并数组
- arr.reverse()：数组元素顺序反转
- arr.lastIndexOf()：获取指定元素最后一次出现的位置，不存在返回-1
- arr.slice(起始位置,结束位置):获取数组中指定的片段(不包含结束位置)

- arr.every():检测数值元素的每个元素是否都符合条件。
- arr.map():通过指定函数处理数组的每个元素，并返回处理后的数组。
- arr.filter():检测数值元素，并返回符合条件所有元素的数组。
- arr.some():检测数组元素中是否有元素符合指定条件。

## 正则
正则帮助我们 验证 字符是否合法

var reg = /表达式/模式修正符;
var reg = new RegExp(表达式,模式修正符);

1.元字符
- [0-9]:任意一个数字
- [a-z]:任意一个小写字母
- [x|y]:匹配x或者y（匹配其中的一个）
- [^0-9]:匹配一个任意非数字
- [\d]:任意一个数字
- [\s]:任意一个空白字符(\r\n\t)
- [\w]:约等于A-Za-z0-9_
- ^[a-z]{6,12}$:必须是6-12位的字母

2.量词
- *	相当于{0,} 任意数量
- +	相当于{1,} 至少一个
- ?	相当于{0,1} 至多一个
- {6,18}

3. 模式修正符
- i:不区分大小写
- g:执行全局匹配

数组
	var arr = [];
	var arr = new Array();

	arr.length:数组元素的个数

	arr.splice(start,length):删除数组中从start位置开始的length个元素
	arr.join(字符):将数组元素以指定字符连接
	arr.indexOf(值):判断值是否在arr数组中，如果在返回索引值，不在返回-1
	arr.sort():排序（默认是以字符串顺序排序） 13 < 8
	arr.sort(function(a,b){return a-b;}):排序（以数字顺序排序） 13 > 8

	arr.slice(start,end):获取数组中从start位置开始，到end位置结束（不包含）的元素

正则
	var reg = /正则表达式/模式修正符;
	var reg = new RegExp(表达式,修正符)

	三要素：修正符 元字符 量词

	修正符
		g:全局匹配
		i:忽略大小写(验证码，网站上的一些关键字不区分大小写)
	元字符
		[0-9]:任意一个数字
		[a-z]：任意一个小写字母
		[A-Z]:任意一个大写字母
		[A-z]:任意一个字母
		[abcd]:abcd中任意一个
		[^abcd]:除abcd之外的任意一个
		[^0-9]:除数字之外的任意一个字符
	量词：
		{1,3}:至少一个，至多3个
		{1,}:至少一个
		{1}:只能一个

		*:任意数量
		+:至少一个
		?:至多一个

	():将括起来的内容作为一个整体
	^表达式$:完全限制了字符串必须全部符合正则的要求
	.:任意一个字符
	.*:任意数量的任意字符（不包含\n\r）
	.*?：拒绝贪婪匹配
	red|blue|green:或者red或者blue或者green

	\r:回车
	\n:换行
	\t:tab制表符

	正则表达式的原则：将所有可能的值全部罗列出来，然后进行相关的正则书写

	元字符
	\w:
	\W:

	reg.test(str):检验str是否符合reg的要求，符合返回true，不符合返回false

补充内容

	inp.value
	inp.value = ‘123456‘

	inp.checked
	inp.checked = true

新的内容 - 事件
	JS = ECMAScript + BOM + DOM

	JS是一门基于对象和事件驱动的弱类型脚本语言
		基于对象：万物皆对象（属性+方法）
		事件驱动：当满足某一个条件的时候，函数自动执行
			btn.onclick = function(){}:当点击的时候，函数自动执行
			inp.onblur = funciton():当input失去焦点的时候，函数自动执行

	四类事件：
	鼠标事件
		onclick:当点击的时候，自动执行
		ondblclick:当双击的时候，自动执行
		oncontextmenu:当右击的时候，自动执行
	键盘事件
	window事件
	表单事件：onblur


全选和全不选的扩展作业完成：不用敲7-9