push():
pop():
unshift():
shift():
concat():
slice():
splice():
indexOf():
lastIndexOf():
includes():
以上方法为 JavaScript 数组中常用的操作,通过组合运用这些方法,可以完成丰富的数组处理任务。
参考案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数组的常用方法</title>
</head>
<body>
<div id="beforeOperation">
<h2>Array (Before Operation)</h2>
<pre id="arrayBefore"></pre>
</div>
<div id="afterOperation">
<h2>Array (After Operation)</h2>
<pre id="arrayAfter"></pre>
</div>
<script>
// Original array
const originalArray = [1, 2, 3, 4, 5]
document.getElementById('arrayBefore').innerText = JSON.stringify(originalArray, null, 2)
// push()
originalArray.push(6, 7)
displayResult('push()', originalArray)
// pop()
originalArray.pop()
displayResult('pop()', originalArray)
// unshift()
originalArray.unshift(0, -1)
displayResult('unshift()', originalArray)
// shift()
originalArray.shift()
displayResult('shift()', originalArray)
// concat()
const newArray = originalArray.concat([8, 9])
displayResult('concat()', newArray)
// slice()
const slicedArray = originalArray.slice(1, 4)
displayResult('slice()', slicedArray)
// splice()
originalArray.splice(1, 2, 'a', 'b')
displayResult('splice()', originalArray)
// indexOf()
const index = originalArray.indexOf('a')
displayResult('indexOf()', index)
// includes()
const includesResult = originalArray.includes('c')
displayResult('includes()', includesResult)
// join()
const joinedString = originalArray.join('-')
displayResult('join()', joinedString)
// reverse()
originalArray.reverse()
displayResult('reverse()', originalArray)
// sort()
originalArray.sort()
displayResult('sort()', originalArray)
// filter()
const filteredArray = originalArray.filter(item => typeof item === 'number')
displayResult('filter()', filteredArray)
// map()
const mappedArray = originalArray.map(item => item * 2)
displayResult('map()', mappedArray)
// reduce()
const reducedValue = originalArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
displayResult('reduce()', reducedValue)
// forEach()
originalArray.forEach(item => console.log(item)) // Just for side effect, no displayResult for forEach
function displayResult(operation, result) {
document.getElementById('arrayAfter').innerText += `${operation}: ${JSON.stringify(result, null, 2)}\n\n`
}
</script>
</body>
</html>
在JavaScript中,判断数组的方式可以通过以下方法实现:
这是最简单的方法,用于检测一个值是否为数组。
const myArray = [1, 2, 3]
if (Array.isArray(myArray)) {
console.log("It's an array!")
}
通过使用 instanceof
操作符来检查对象是否是特定类的实例,可以用来判断是否是数组。
const myArray = [1, 2, 3]
if (myArray instanceof Array) {
console.log("It's an array!")
}
使用 Object.prototype.toString.call()
方法,这样可以获取对象的内部 [[Class]]
属性,从而判断是否为数组。
const myArray = [1, 2, 3]
if (Object.prototype.toString.call(myArray) === '[object Array]') {
console.log("It's an array!")
}
尝试使用 Array.from()
方法,如果成功转换为数组,则说明原始值是数组。
const myArray = [1, 2, 3]
if (Array.from(myArray).length === myArray.length) {
console.log("It's an array!")
}
这些方法可以根据具体的场景和需求选择使用。一般来说,推荐使用 Array.isArray()
方法,因为它是最简单和直观的方式。
持续学习总结记录中,回顾一下上面的内容:
Javscript数组的常用方法有哪些?
push():将指定的元素追加到数组的末尾。
pop():删除数组中的最后一个元素,并返回被删除的元素。
unshift():在数组的开头插入指定的元素,使其成为新的第一个元素。
shift(): 删除数组中的第一个元素,并返回被删除的元素。
concat():将多个数组连接在一起,形成一个新的数组。
slice():根据开始和结束的索引值,截取数组的一部分,生成新的数组。
splice():在指定位置删除指定数量的元素,并可以插入新的元素。
indexOf():返回数组中第一次出现指定元素的位置索引。
lastIndexOf():从数组的末尾开始,返回指定元素最后一次出现的位置索引。
includes():判断数组中是否存在指定的元素。
join():将数组中的元素用指定的分隔符连接成一个字符串。
reverse():将数组中的元素顺序颠倒。
sort():对数组中的元素进行升序排序。
filter():使用指定的条件筛选数组中的元素,形成新的数组。
map():对数组中的每个元素进行操作,生成一个新的数组。
reduce():从左到右依次对数组中的元素进行累积操作,得到最终的结果。
forEach(): 遍历数组,对每个元素执行指定的操作,没有返回值。
判断数组的方式:
Array.isArray() 方法:这是最简单的方法,用于检测一个值是否为数组。
instanceof 操作符:通过使用 instanceof 操作符来检查对象是否是特定类的实例,可以用来判断是否是数组。
Object.prototype.toString.call() 方法:使用 Object.prototype.toString.call() 方法,这样可以获取对象的内部 [[Class]] 属性,从而判断是否为数组。
Array.from() 方法:尝试使用 Array.from() 方法,如果成功转换为数组,则说明原始值是数组。