JavaScript中数组的一些方法总结

数组的定义

在编程语言中,数组是一组存储同一种类型数据的集合。比如一个数值型数组[1,2,3,4,5],就是一个典型的数组。在JavaScript中,数组中的元素可以是不同类型的数据,比如:[1,{key:0,value:1},[2,3,4]]。但是我们还是应该遵守最佳实践(采用同一种数据类型)。

数组的创建和初始化

第一种方式:使用new关键字

let daysOfWeek = new Array() // 不带参数表示创建的是一个空数组
let daysOfWeek = new Array(7) // 带一个参数表示创建的数组有7个元素
let daysOfWeek = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday') // 带多个参数表示这些参数作为数组的元素。

第二种方式:直接赋值方式

let daysOfWeek = ['Sunday', ' Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

数组元素的访问和迭代

由于数组是一种顺序表,支持随机访问的特性。我们可以通过下标对数组元素进行访问,比如:

let Thursday = daysOfWeek[4] // Thursday = 'Thursday'

数组元素迭代方式较多,我们先假设一个数值型数组:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

迭代方法简单列举如下:

-forEach()-对数组中的每个元素运行给定的函数。
	let numbers1 = numbers.forEach(x => console.log(x % 2 === 0))
	// 打印的结果是false, true, false, true, false, true, false, true, false
-every()-迭代数组中的每个元素,直到返回false。
	numbers.every(x => (x % 2 === 0))
	// 得到的结果是在第一个元素1的时候函数返回false,every执行结束。
-some()-迭代数组中的每个元素,直到返回true。
	numbers.some(x => (x%2 === 0))
	// 得到的结果是在第二个元素2的时候函数返回true,some执行结束
-filter()-迭代数组中的每个元素,在给定函数返回值为true的时候加入到新数组中
	let numbers2 = numbers.filter(x => (x % 2 === 0))
	// 得到一个新的数组为:[2, 4, 6, 8]
-map()-迭代数组中的每个元素,以结果值为新数组的元素
	let numbers2 = numbers.map(x => (x % 2 === 0))
	// 得到一个新的数组为: [false, true, false, true, false, true, false, true, false]
-for...of循环迭代
	for (const n of numbers) {
		console.log(n % 2 === 0 ? 'even' : 'odd')
	}

数组排序

数组使用sort()函数进行排序,不带参数的sort()是使用ASCII对应的字符串进行排序的。比如,下列数组:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
numbers.sort()

结果是什么呢,我们看一下;

[1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]

你可能有疑问了,这是什么样的排序规则吗?答案就是先转成字符串,然后按位进行排序。
sort()可以带一个比较函数作为参数,比如下面的代码:

numbers.sort((a, b) => a - b)

等价于:

function compare (a, b) {
	if (a < b) {
		return -1
	}
	else if (a < b) {
		return 1
	}
	return 0
}
numbers.sort(compare)

sort采用了自定义的排序,是根据返回值而定,大于0,就会进行两个数交换。那么上面的函数就是进行了从小到大的排序规则。
数组的反向排序,采用reverse()方法,比如:

console.log(numbers.reverse()) // [15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

数组元素的搜索

第一种方法:indexOf()/lastIndexOf(),这两个方法用于返回所要查找的元素在数组中的下标,没有找到元素,就返回-1,indexOf()是从前往后查找,lastIndexOf()是从后往前查找。比如:

console.log(numbers.indexOf(10)) // 10
console.log(numbers.lastIndexOf(20)) // -1

第二种方法:includes()-ES7语法

console.log(numbers.includes(15) // true
console.log(numbers.includes(20) // false

数组元素转换成字符串

第一种方法:toString()-将数组中所有元素输出为一个字符串,比如:

numbers.toString() // 123456789101112131415

第二种方法:join()-在数组元素间插入指定字符串,比如:

numbers.join('-') // 1-2-3-4-5-6-7-8-9-10-11-12-13-14-15

数组拷贝

第一种方法:Array.from()

let numbers2 = Array.from(numbers)

还可以传入一个用于过滤的函数,比如

let evens = Array.from(numbers, x => (x % 2 === 0))

第二种方法:Array.of()

let numbersCopy = Array.of(...numbers)

数组静态填充

使用fill()方法用于填充数组元素:

let numbersCopy = Array.of(1,2,3,4,5,6) // [1,2,3,4,5,6]
numbersCopy.fill(0) // [0, 0, 0, 0, 0, 0]

数组元素的插入和删除

插入操作包括两个基本函数:push()、unshift()

numbers.unshift(-2) // 从头部开始插入单个元素
numbers.unshift(-3, -4) // 从头部开始插入多个元素
numbers.push(2) // 从尾部开始追加单个元素
numbers.push(3, 4) // 从尾部开始追加多个元素

删除操作包括两个基本函数:pop()、shift()

numbers.pop() // 从尾部弹出一个元素,无参数,表示只能弹出单个元素
numbers.shift() // 从头部弹出一个元素,无参数,表示只能弹出单个元素

综合操作:splice

numbers.splice(5, 3) // 从下标为5的元素开始删除3个元素,也就是numbers[5],numbers[6],numbers[7]
numbes.splice(5, 3, 2, 3, 4) // 从下标为5的元素开始删除3个元素,并插入另外3个元素,也就是[1,2,3,4,5,2,3,4,9,10,11,12,13,14,15]
numbers.splice(5, 0, 2, 3, 4) // 从下标为5的位置上插入3个元素

发布了12 篇原创文章 · 获赞 0 · 访问量 383

猜你喜欢

转载自blog.csdn.net/weixin_42071117/article/details/105722620