工作中难免会遇到各种各样的数据结构,较为全面的了解数组操作,对于复杂数据结构的处理会非常有用且节省时间
所以想在这里总结一下工作中常用的数组操作,都是一些非常基础的知识,大家看个乐就好~
push()
- 向数组的末尾添加一个或多个元素,并返回新的长度。pop()
- 删除数组的最后一个元素并返回该元素。shift()
- 删除数组的第一个元素并返回该元素,数组中的其他元素向前移动。unshift()
- 向数组的开头添加一个或多个元素,并返回新的长度。slice()
- 返回数组的一个片段或子数组。splice()
- 用于插入、删除或替换数组的元素。map()
- 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的返回值。filter()
- 创建一个新数组,包含通过所提供函数实现的测试的所有元素。reduce()
- 对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。forEach()
- 对数组的每个元素执行一次提供的函数。find()
- 返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined
。findIndex()
- 返回数组中满足提供的测试函数的第一个元素的索引,否则返回 -1
。sort()
- 对数组的元素进行排序,并返回数组。reverse()
- 颠倒数组中元素的顺序。concat()
- 用于合并两个或多个数组。join()
- 把数组的所有元素放入一个字符串。includes()
- 判断一个数组是否包含一个指定的值,根据情况返回 true 或 false。some()
- 测试数组中是不是至少有一个元素通过了被提供的函数测试。every()
- 测试一个数组内的所有元素是否都能通过某个指定函数的测试。slice()
和 splice()
方法之间有什么区别slice()
方法返回数组的一个副本,从开始到结束(不包括结束),不改变原数组。splice()
方法通过删除或替换现有元素或添加新元素来修改数组,并返回被修改的元素数组。在需要同时对数组进行元素的删除和添加操作时非常有用。concat()
方法或者展开运算符(...
)。例如,arr1.concat(arr2)
或[...arr1, ...arr2]
。concat()
:用于合并多个数组成一个新数组,常用于不改变原数组的情况下创建新的数组集合。slice()
、concat()
、[...arr]
方法返回的数组是浅拷贝还是深拷贝使用slice()
或[...arr]
是浅拷贝操作。浅拷贝是指只复制对象的第一层属性,如果属性是引用类型,复制的是引用。
indexOf()
或includes()
来检查元素是否存在。find()
或findIndex()
来查找符合条件的元素或其索引。reduce()
方法reduce()
方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。array.reduce((acc, val) => acc + val, 0)
。sort()
方法是否可以对纯数字数组进行正确的排序sort()
方法可以用来按数字大小排序数组中的数字。sort()
方法而不提供比较函数,它默认会将数组元素转换成字符串,然后按照字符串的Unicode
字典顺序进行排序。let numbers = [10, 5, 100, 2, 1000];
numbers.sort();
console.log(numbers); // 输出: [10, 100, 1000, 2, 5]
sort()
方法如何进行自定义排序在JavaScript中,Array.prototype.sort()
方法可以接受一个可选的比较函数作为参数,用来定义数组元素的排序方式。
这个比较函数应该接受两个参数(通常表示为a
和b
),这两个参数是数组中将要被比较的两个元素。比较函数的返回值决定了这两个元素在最终排序后数组中的顺序:
a
将排在元素b
之前。b
将排在元素a
之前。a
和b
的顺序不变。sort()
方法自定义排序的基础示例对于数字类型的数组,可以这样定义比较函数来确保数组按照数值大小升序或降序排列:
let numbers = [10, 5, 100, 2, 1000];
// 升序排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [2, 5, 10, 100, 1000]
// 降序排序
numbers.sort((a, b) => b - a);
console.log(numbers); // 输出: [1000, 100, 10, 5, 2]
对于字符串数组,如果要按字典顺序排序,可能还需要考虑大小写:
let words = ['banana', 'Apple', 'orange'];
// 升序排序,忽略大小写
words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(words); // 输出: ['Apple', 'banana', 'orange']
如果数组包含对象,可以根据对象的某个属性来排序:
let items = [
{ name: "John", age: 25 },
{ name: "Anna", age: 30 },
{ name: "Mike", age: 22 }
];
// 根据age属性升序排序
items.sort((a, b) => a.age - b.age);
console.log(items); // 输出: [{ name: "Mike", age: 22 }, { name: "John", age: 25 }, { name: "Anna", age: 30 }]
sort()
方法在工作中应用的注意事项sort()
方法时需要注意,它是在原数组上进行排序,而不是返回一个新的排序后的数组。sort()
将元素转换为字符串,并按照字符串的Unicode码点顺序排序,这可能不会按照数值大小排序数字。Set
对象Set
是一种允许存储任何类型唯一值的集合。由于 Set
自动去除重复的元素,我们可以利用这个特性来去除数组中的重复项。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
filter()
方法filter()
方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。可以利用这个方法和 indexOf()
来过滤掉重复的元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
reduce()
方法reduce()
方法对数组中的每个元素执行一个 reducer 函数(升序执行),将其结果汇总为单个返回值。这个方法也可以用来去除重复元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {
if (!acc.includes(current)) {
acc.push(current);
}
return acc;
}, []);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
利用对象的属性不能重复的特性,可以快速去除数组中的重复元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueObj = {};
array.forEach(item => {
uniqueObj[item] = true;
});
const uniqueArray = Object.keys(uniqueObj).map(key => parseInt(key));
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
在JavaScript中,判断一个变量是否是数组可以通过多种方式实现。这些方法各有优缺点,适用于不同的场景。
Array.isArray()
,因为它简单且总是可靠的。Object.prototype.toString.call()
,尤其是在涉及多个执行环境时。instanceof
、constructor
和 isPrototypeOf
可以用来判断数组,但它们在某些情况下可能不够可靠或容易受到环境的影响。Array.isArray()
方法(推荐)Array.isArray()
是 ECMAScript 5 新增的方法,它提供了一种简单、可靠的方式来判断一个变量是否是数组。这是判断数组的最推荐方式。
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出:true
instanceof
操作符instanceof
操作符用于测试一个对象在其原型链中是否存在一个构造函数的 prototype
属性。
let arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出:true
但是,instanceof
可能在不同的执行环境(如不同的iframe或window对象)中不一定可靠,因为数组的构造器可能不同。
Object.prototype.toString.call()
这是一个更加通用的方法,可以用来获取任意对象的类型。对于数组,Object.prototype.toString.call()
返回 "[object Array]"
。
let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 输出:true
这种方法相对可靠,并且在不同的执行环境中也能保持一致性。
constructor
每个数组都有一个 constructor
属性,指向它的构造函数。如果这个属性是 Array
,那么对象通常是数组。但这种方法不是非常可靠,因为 constructor
属性可以被改写。
let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 输出:true
Array.prototype.isPrototypeOf()
这个方法可以用来检查 Array.prototype
是否存在于某个对象的原型链上。
let arr = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(arr)); // 输出:true
false
还是 true
在 JavaScript 中,空数组([]
)在 if
条件判断中被视为 true
。
这是因为所有对象,包括数组(无论是否为空),在布尔上下文中都被视为 true
。
这意味着即使数组没有任何元素,它仍然被认为是真值。
Falsy
值以下是JavaScript中的所有 Falsy
值:
false
- 布尔值 false
本身自然是 Falsy
。0
和 -0
- 数字零和负零。0n
- BigInt类型的零。""
(空字符串) - 双引号或单引号中没有任何字符。null
- 表示无值。undefined
- 变量已声明但未赋值时的默认值。NaN
- 表示 "不是一个数字" 的特殊值。Falsy
值的相关示例在实际的编程实践中,了解哪些值是 Falsy
值非常重要,因为它们会影响条件语句的行为。
if (false) {} // 不执行
if (0) {} // 不执行
if (-0) {} // 不执行
if (0n) {} // 不执行
if ("") {} // 不执行
if (null) {} // 不执行
if (undefined) {} // 不执行
if (NaN) {} // 不执行
if ([]) {} // 执行,因为空数组是 true
恭喜你耐心看完本文了,对照下方的问题列表,自我提问一下吧~
你知道哪些 JS 数组操作?
工作中常用哪些方法?
slice() 和 splice() 方法之间有什么区别?
如何合并两个数组?
slice()、concat()、[...arr] 方法返回的数组是浅拷贝还是深拷贝?
如何有效地搜索数组中的元素?
如何使用reduce()方法?
sort() 方法是否可以对纯数字数组进行正确的排序?
sort() 方法如何进行自定义排序?
如何去除数组中的重复元素?
如何判断一个变量是否是数组?
IF 条件中的空数组是 false 还是 true?
JS 中的哪些值会被判断为 Falsy 值?
我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!
如果您喜欢这篇文章,欢迎访问我的 本文github仓库地址,为我点一颗Star,Thanks~ 😃
转发请注明参考文章地址,非常感谢!!!
工作中难免会遇到各种各样的数据结构,较为全面的了解数组操作,对于复杂数据结构的处理会非常有用且节省时间。所以想在这里总结一下工作中常用的数组操作,都是一些非常基础的知识,大家看个乐就好~