目录
- Javscript数组的常用方法有哪些?
- JavaScript判断数组的方式有哪些?
- 1. Array.isArray() 方法:
- 2. instanceof 操作符:
- 3. Object.prototype.toString.call() 方法:
- 4. Array.from() 方法:
Javscript数组的常用方法有哪些?
-
push():
- 描述: 在数组末尾添加一个或多个元素,并返回新数组的长度。
- 思路: 将指定的元素追加到数组的末尾。
-
pop():
- 描述: 移除并返回数组末尾的元素。
- 思路: 删除数组中的最后一个元素,并返回被删除的元素。
-
unshift():
- 描述: 在数组开头添加一个或多个元素,并返回新数组的长度。
- 思路: 在数组的开头插入指定的元素,使其成为新的第一个元素。
-
shift():
- 描述: 移除并返回数组开头的元素。
- 思路: 删除数组中的第一个元素,并返回被删除的元素。
-
concat():
- 描述: 合并两个或更多数组,并返回新的合并后的数组,不会修改原始数组。
- 思路: 将多个数组连接在一起,形成一个新的数组。
-
slice():
- 描述: 从数组中提取指定位置的元素,返回一个新的数组,不会修改原始数组。
- 思路: 根据开始和结束的索引值,截取数组的一部分,生成新的数组。
-
splice():
- 描述: 从指定位置删除或替换元素,可修改原始数组。
- 思路: 在指定位置删除指定数量的元素,并可以插入新的元素。
-
indexOf():
- 描述: 查找指定元素在数组中的索引,如果不存在则返回-1。
- 思路: 返回数组中第一次出现指定元素的位置索引。
-
lastIndexOf():
- 描述: 从数组末尾开始查找指定元素在数组中的索引,如果不存在则返回-1。
- 思路: 从数组的末尾开始,返回指定元素最后一次出现的位置索引。
-
includes():
- 描述: 检查数组是否包含指定元素,返回一个布尔值。
- 思路: 判断数组中是否存在指定的元素。
- join():
- 描述: 将数组中的所有元素转为字符串,并使用指定的分隔符连接它们。
- 思路: 将数组中的元素用指定的分隔符连接成一个字符串。
- reverse():
- 描述: 颠倒数组中元素的顺序,会修改原始数组。
- 思路: 将数组中的元素顺序颠倒。
- sort():
- 描述: 对数组中的元素进行排序,默认按照字母顺序排序,会修改原始数组。
- 思路: 对数组中的元素进行升序排序。
- filter():
- 描述: 创建一个新数组,其中包含符合条件的所有元素。
- 思路: 使用指定的条件筛选数组中的元素,形成新的数组。
- map():
- 描述: 创建一个新数组,其中包含对原始数组中的每个元素进行操作后的结果。
- 思路: 对数组中的每个元素进行操作,生成一个新的数组。
- reduce():
- 描述: 将数组中的元素进行累积操作,返回一个单一的值。
- 思路: 从左到右依次对数组中的元素进行累积操作,得到最终的结果。
- forEach():
- 描述: 对数组中的每个元素执行提供的函数。
- 思路: 遍历数组,对每个元素执行指定的操作,没有返回值。
以上方法为 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 arrayconst 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 forEachfunction displayResult(operation, result) {document.getElementById('arrayAfter').innerText += `${operation}: ${JSON.stringify(result, null, 2)}\n\n`}</script></body>
</html>
JavaScript判断数组的方式有哪些?
在JavaScript中,判断数组的方式可以通过以下方法实现:
1. Array.isArray() 方法:
这是最简单的方法,用于检测一个值是否为数组。
const myArray = [1, 2, 3]
if (Array.isArray(myArray)) {console.log("It's an array!")
}
2. instanceof 操作符:
通过使用 instanceof
操作符来检查对象是否是特定类的实例,可以用来判断是否是数组。
const myArray = [1, 2, 3]
if (myArray instanceof Array) {console.log("It's an array!")
}
3. Object.prototype.toString.call() 方法:
使用 Object.prototype.toString.call()
方法,这样可以获取对象的内部 [[Class]]
属性,从而判断是否为数组。
const myArray = [1, 2, 3]
if (Object.prototype.toString.call(myArray) === '[object Array]') {console.log("It's an array!")
}
4. Array.from() 方法:
尝试使用 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() 方法,如果成功转换为数组,则说明原始值是数组。