记录工作中常用的 JS 数组相关操作

js · 浏览次数 : 0

小编点评

本文主要总结了工作中常用的数组操作,包括基本方法和使用场景。文章首先列出了常见数组方法及其用法,然后详细解释了slice()和splice()之间的区别,接着分析了合并数组的不同方法及其返回值是否为浅拷贝或深拷贝。此外,还探讨了如何使用reduce()方法进行数组求和,sort()方法的正确排序方式,以及如何去除数组中的重复元素。最后,文章讨论了如何判断一个变量是否是数组,以及IF条件中的空数组处理。 1. **常见数组方法**:介绍了数组的 push()、pop()、shift()、unshift() 方法和 slice() 方法。 - push() 和 unshift() 是向数组末尾或开头添加元素的增删改方法。 - pop() 和 shift() 分别是从数组头部和尾部移除元素的增删改方法。 - slice() 返回数组的一部分,不改变原数组。 2. **slice() 和 splice() 的区别**:描述了这两个方法的作用以及在插入、删除或替换元素时使用。 - slice() 返回一个新数组,保留原数组的元素顺序和范围。 - splice() 用于在数组的指定位置插入元素、替换元素或删除元素。 - 注意它们之间的本质差别和适用场景。 3. **合并数组的方法**:提供了concat()和展开运算符(...)两种方法合并数组。 - concat() 方法用于合并多个数组为一个新数组。 - 展开运算符则适用于合并多个可迭代的值或对象。 4. **拷贝问题**:分析了slice()和 [...arr]方法返回的数组的拷贝深度。 - 浅拷贝和深拷贝的区别在于属性值的拷贝。 - 在实际编程中,理解这一点有助于编写更高效、更安全的代码。 5. **搜索和排序**:讲解了使用indexOf()、find()、sort()等方法搜索和处理数组元素。 - contains() 方法测试数组中是否包含某元素。 - findIndex() 方法返回满足条件的元素的索引。 6. **去重方法**:提出了如何使用Set、filter()、reduce()方法去除数组重复元素的需求,并通过示例展示了它们的应用。 7. **数组类型的判断**:提供了判断变量是否是数组的几种方法,并对每种方法的可靠性进行了简要评价。 - Array.isArray() 方法是最推荐的判断方式。 - 其他方法在特定环境下可能存在问题。 8. **面试问题合集**:设置了一系列关于数组操作的面试问题,以检验读者对本文内容的理解和应用。 总的来说,本文提供了一个全面的数组操作参考,不仅总结了基础知识,还包含了实际应用中可能会遇到的问题的解决方案,对提高编程技能和实践能力具有重要意义。

正文

工作中难免会遇到各种各样的数据结构,较为全面的了解数组操作,对于复杂数据结构的处理会非常有用且节省时间

所以想在这里总结一下工作中常用的数组操作,都是一些非常基础的知识,大家看个乐就好~

目录

工作中常用的数组方法

  1. push() - 向数组的末尾添加一个或多个元素,并返回新的长度。
  2. pop() - 删除数组的最后一个元素并返回该元素。
  3. shift() - 删除数组的第一个元素并返回该元素,数组中的其他元素向前移动。
  4. unshift() - 向数组的开头添加一个或多个元素,并返回新的长度。
  5. slice() - 返回数组的一个片段或子数组。
  6. splice() - 用于插入、删除或替换数组的元素。
  7. map() - 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的返回值。
  8. filter() - 创建一个新数组,包含通过所提供函数实现的测试的所有元素。
  9. reduce() - 对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
  10. forEach() - 对数组的每个元素执行一次提供的函数。
  11. find() - 返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined
  12. findIndex() - 返回数组中满足提供的测试函数的第一个元素的索引,否则返回 -1
  13. sort() - 对数组的元素进行排序,并返回数组。
  14. reverse() - 颠倒数组中元素的顺序。
  15. concat() - 用于合并两个或多个数组。
  16. join() - 把数组的所有元素放入一个字符串。
  17. includes() - 判断一个数组是否包含一个指定的值,根据情况返回 true 或 false。
  18. some() - 测试数组中是不是至少有一个元素通过了被提供的函数测试。
  19. 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() 方法可以用来按数字大小排序数组中的数字。
  • 在JavaScript中,如果直接使用 sort() 方法而不提供比较函数,它默认会将数组元素转换成字符串,然后按照字符串的Unicode字典顺序进行排序。
  • 这种默认行为对于数字排序通常是不正确的,特别是当数字的位数不一致时。
let numbers = [10, 5, 100, 2, 1000];
numbers.sort();
console.log(numbers); // 输出: [10, 100, 1000, 2, 5]

sort() 方法如何进行自定义排序

在JavaScript中,Array.prototype.sort() 方法可以接受一个可选的比较函数作为参数,用来定义数组元素的排序方式。
这个比较函数应该接受两个参数(通常表示为ab),这两个参数是数组中将要被比较的两个元素。比较函数的返回值决定了这两个元素在最终排序后数组中的顺序:

  • 如果比较函数返回一个小于0的值,那么元素a将排在元素b之前。
  • 如果比较函数返回一个大于0的值,那么元素b将排在元素a之前。
  • 如果比较函数返回0,那么元素ab的顺序不变。

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(),尤其是在涉及多个执行环境时。
  • 其他方法:虽然 instanceofconstructorisPrototypeOf 可以用来判断数组,但它们在某些情况下可能不够可靠或容易受到环境的影响。

使用 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

IF 条件中的空数组是 false 还是 true

在 JavaScript 中,空数组([])在 if 条件判断中被视为 true
这是因为所有对象,包括数组(无论是否为空),在布尔上下文中都被视为 true
这意味着即使数组没有任何元素,它仍然被认为是真值。

JS 中的哪些值会被判断为 Falsy

以下是JavaScript中的所有 Falsy 值:

  1. false - 布尔值 false 本身自然是 Falsy
  2. 0-0 - 数字零和负零。
  3. 0n - BigInt类型的零。
  4. ""(空字符串) - 双引号或单引号中没有任何字符。
  5. null - 表示无值。
  6. undefined - 变量已声明但未赋值时的默认值。
  7. 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~ 😃
转发请注明参考文章地址,非常感谢!!!

与记录工作中常用的 JS 数组相关操作相似的内容:

记录工作中常用的 JS 数组相关操作

工作中难免会遇到各种各样的数据结构,较为全面的了解数组操作,对于复杂数据结构的处理会非常有用且节省时间。所以想在这里总结一下工作中常用的数组操作,都是一些非常基础的知识,大家看个乐就好~

不能显式拦截ajax请求的302响应?

记录工作中早该加深印象的一个小case: ajax请求不能显式拦截 302响应。 我们先来看一个常规的登录case: 浏览器请求资源,服务器发现该请求未携带相关凭据(cookie或者token) 服务器响应302,并在响应头Location写入重定向地址, 指示浏览器跳转到登录页 浏览器跳转到登录页

DotNetGuide专栏C#/.NET/.NET Core充电站(让你学习不迷路)

DotNetGuide简介 记录、收集和总结C#/.NET/.NET Core基础知识、学习路线、开发实战、编程技巧练习、学习视频、文章、书籍、项目框架、社区组织、开发必备工具、常见面试题、面试须知、简历模板、以及自己在学习和工作中的一些微薄见解。希望能和大家一起学习,共同进步。如果本知识库能为您提

DotNetGuide新增C#/.NET/.NET Core充电站(让你学习不迷路)

DotNetGuide简介 记录、收集和总结C#/.NET/.NET Core基础知识、学习路线、开发实战、学习视频、文章、书籍、项目框架、社区组织、开发必备工具、常见面试题、面试须知、简历模板、以及自己在学习和工作中的一些微薄见解。希望能和大家一起学习,共同进步👊【让现在的自己不再迷茫✨,如果本

Pytorch:使用Tensorboard记录训练状态

我们知道TensorBoard是Tensorflow中的一个强大的可视化工具,它可以让我们非常方便地记录训练loss波动情况。如果我们是其它深度学习框架用户(如Pytorch),而想使用TensorBoard工具,可以安装TensorBoard的封装版本TensorBoardX。最后,需要提到的是,因为Tensorboard太常用了,所以在目前最新的Pytorch版本中已经直接集成进来了。所以,现在使用Tensorboard只需要直接导入torch.utils.tensorboard即可。

学习正则表达式

正则表达式是一个强大的文本匹配工具。但是,对于初学者来说,众多的符号和规则可能让人难以理解。其实,你不需要记住所有的正则表达式语法!本文将分享一些简单而实用的技巧,帮助理解正则表达式的核心概念,轻松使用正则表达式! 基础入门 概念 正则表达式(Regular Expression,在代码中常简写为r

关于Unity 如何与Blazor Server结合

关于Unity 如何与Blazor Server结合 一、介绍 最近工作中有`Unity`与`Blazor Server`结合的需求,在网上找了一圈,发现这方面的资料比较少,特此写下这篇记录一下自己的实现过程,希望可以帮到有需要的朋友。(下方多图预警) OS Version : windows 11

Java中代码Bug记录--泛型失效、数组删除、HashMap死循环

最近在工作的过程中,遇到了不少奇怪自己或者同事的Bug,都是一些出乎意料的,不太容易发现的,记录一下来帮助可能也遇到了这些Bug的人 # 1. 编译时泛型校验失效 ```java Map nameToType = new HashMap(); nameToType.put( "testName",

【Azure 应用服务】在App Service中新建WebJob时候遇见错误,不能成功创建新的工作任务

问题描述 在Azure App Service界面上,添加新的Web Job(工作任务)时,一直添加失败。无详细错误提示,在App Service的Activity Logs(活动日志)中,根本没有添加失败的任何操作记录,这是什么情况呢? Adding WebJob: Failed to add t

基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换

有时候,为了给前端页面输出内容,有时候我们需要准备和数据库不一样的实体信息,因为数据库可能记录的是一些引用的ID或者特殊字符,那么我们为了避免前端单独的进行转义处理,我们可以在后端进行统一的格式化后再行输出,后端处理可以采用不同的DTO尸体信息,后端对不同的实体进行映射处理即可,也可以采用同一个实体,在SqlSugar实体信息中忽略对应的字段写入实现,本篇随笔介绍后者的处理方式,实现在在工作流列表