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

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

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

目录

  • 工作中常用的数组方法
    • 常见数组方法中的用法、以及坑
      • slice() 和 splice() 方法之间有什么区别
      • 如何合并两个数组
      • slice()、concat()、[…arr] 方法返回的数组是浅拷贝还是深拷贝
      • 如何有效地搜索数组中的元素
      • 如何使用reduce()方法
      • sort() 方法是否可以对纯数字数组进行正确的排序
  • sort() 方法如何进行自定义排序
    • 数字排序
    • 字符串排序（考虑大小写）
    • 复杂对象数组排序
  • 如何去除数组中的重复元素
    • 使用 Set 对象
    • 使用 filter() 方法
    • 使用 reduce() 方法
    • 使用对象键
  • 如何判断一个变量是否是数组？有哪些判断方式？
    • 使用 Array.isArray() 方法（推荐）
    • 使用 instanceof 操作符
    • 使用 Object.prototype.toString.call()
    • 使用构造函数属性 constructor
    • 使用 Array.prototype.isPrototypeOf()
  • IF 条件中的空数组是 false 还是 true
    • JS 中的哪些值会被判断为 Falsy 值
    • 判断为 Falsy 值的相关示例
  • 面试问题合集

工作中常用的数组方法

  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() 方法可以接受一个可选的比较函数作为参数，用来定义数组元素的排序方式。
这个比较函数应该接受两个参数（通常表示为a和b），这两个参数是数组中将要被比较的两个元素。比较函数的返回值决定了这两个元素在最终排序后数组中的顺序：

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

sort()方法自定义排序的基础示例

1. 数字排序

对于数字类型的数组，可以这样定义比较函数来确保数组按照数值大小升序或降序排列：

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]
2. 字符串排序（考虑大小写）

对于字符串数组，如果要按字典顺序排序，可能还需要考虑大小写：

let words = ['banana', 'Apple', 'orange'];
// 升序排序，忽略大小写
words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(words); // 输出: ['Apple', 'banana', 'orange']
3. 复杂对象数组排序

如果数组包含对象，可以根据对象的某个属性来排序：

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码点顺序排序，这可能不会按照数值大小排序数字。
  • 通过提供自定义的比较函数，可以灵活地控制数组的排序行为，满足不同的业务需求。

如何去除数组中的重复元素

1. 使用 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]

2. 使用 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]

3. 使用 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]

4. 使用对象键

利用对象的属性不能重复的特性，可以快速去除数组中的重复元素。

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 可以用来判断数组，但它们在某些情况下可能不够可靠或容易受到环境的影响。

1. 使用 Array.isArray() 方法（推荐）

Array.isArray() 是 ECMAScript 5 新增的方法，它提供了一种简单、可靠的方式来判断一个变量是否是数组。这是判断数组的最推荐方式。

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出：true

2. 使用 instanceof 操作符

instanceof 操作符用于测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

let arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出：true

但是，instanceof 可能在不同的执行环境（如不同的iframe或window对象）中不一定可靠，因为数组的构造器可能不同。

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

这种方法相对可靠，并且在不同的执行环境中也能保持一致性。

4. 使用构造函数属性 constructor

每个数组都有一个 constructor 属性，指向它的构造函数。如果这个属性是 Array，那么对象通常是数组。但这种方法不是非常可靠，因为 constructor 属性可以被改写。

let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 输出：true

5. 使用 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~ 😃
转发请注明参考文章地址，非常感谢！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/848796.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

android睡眠分期图

android睡眠分期图

一、效果图 做医疗类项目&#xff0c;经常会遇到做各种图表&#xff0c;本文做的睡眠分期图。 二、代码 引入用到的库 api joda-time:joda-time:2.10.1 调用代码 /*** 睡眠* 分期*/private SleepChartAdapter mAdapter;private SleepChartAttrs mAttrs;private List<SleepI…
阅读更多...
不会制作企业版电子书？学会这几个步骤就好啦！

不会制作企业版电子书？学会这几个步骤就好啦！

公司安排你制作一本专业的电子书&#xff0c;不知道如何下手&#xff1f;别担心&#xff0c;今天LookLook同学就来给大家分享一下如何轻松制作企业版电子书。参考这几个步骤&#xff0c;相信你一定能轻松搞定&#xff01; 第一步&#xff1a;明确电子书的目标和受众 在开始制作…
阅读更多...
zeppelin 未授权任意命令执行漏洞复现

zeppelin 未授权任意命令执行漏洞复现

一、命令执行复现 访问http://ip:8080&#xff0c;打开zeppelin页面&#xff0c;&#xff08;zeppelin默认监听端口在8080&#xff09; 点击Notebook->create new note创建新笔记 在创建笔记的时候选择Default Interpreter为sh&#xff0c;即可执行sh命令 如下图&#x…
阅读更多...
Dell服务器使用ipmi控制风扇转速

Dell服务器使用ipmi控制风扇转速

#关闭自动调速 ipmitool -I lanplus -U root -P XXX -H 192.168.3.30 raw 0x30 0x30 0x01 0x00 ipmitool -I lanplus -U root -P XXX -H 192.168.3.30 raw 0x30 0x30 0x02 0xff 0x23#80%转速 ipmitool -I lanplus -U root -P XXX -H 192.168.3.30 raw 0x30 0x30 0x02 0xff 0x50…
阅读更多...
最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能

最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能

最新去水印小程序源码分享&#xff1a;无需后台、对接接口&#xff0c;支持全网去水印功能&#xff0c;经过测试发现&#xff0c;该去水印小程序的解析接口需要付费使用。如果您有免费的解析接口&#xff0c;可以自行替换原有接口。 不过&#xff0c;不论是否付费&#xff0c;…
阅读更多...
JAVA小案例-分别计算100以内奇数和偶数的和

JAVA小案例-分别计算100以内奇数和偶数的和

JAVA小案例-分别计算100以内奇数和偶数的和 没啥可说的&#xff0c;就是for循环加if分支&#xff0c;也可以用while写。 代码如下&#xff1a; public class Jiouhe {/*** 分别计算100以内奇数和偶数的和* param args*/public static void main(String[] args){int sum10;in…
阅读更多...
老程序员学习AI大模型的焦虑与机遇

老程序员学习AI大模型的焦虑与机遇

前言 在这个科技飞速发展的时代&#xff0c;AI大模型成为了编程领域的热门话题。许多人都认为&#xff0c;学习AI大模型是获取高薪职位和实现职业发展的关键。然而&#xff0c;作为一名拥有十多年编程经验的老程序员&#xff0c;我不得不承认&#xff0c;面对这一新兴技术&…
阅读更多...
WebGL开发地理信息系统

WebGL开发地理信息系统

WebGL开发地理信息系统&#xff08;GIS&#xff09;是一项复杂且具有挑战性的任务&#xff0c;需要解决一系列技术难点。以下是一些主要的技术难点及其可能的解决方案。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.大规模数据渲染…
阅读更多...
SQL语句练习每日5题（一）

SQL语句练习每日5题（一）

一、查询 题目1——查询所有列&#xff1a; 现在运营想要查看用户信息表中所有的数据&#xff0c;请你取出相应结果 答案&#xff1a; select * from user_profile 题目2——查询多列&#xff1a; 请取出用户的设备id对应的性别、年龄和学校的数据 答案&#xff1a;select …
阅读更多...
QT:QML中使用Loader加载界面

QT:QML中使用Loader加载界面

目录 一.介绍 二.实现 三.效果展示 四.代码 一.介绍 在QML中使用Loader加载界面&#xff0c;可以带来诸多好处&#xff0c;如提高应用程序的启动速度、动态地改变界面内容、根据条件加载不同的组件、更有效地使用内存以及帮助分割应用逻辑等。 1.延迟加载&#xff1a;QML…
阅读更多...
区块链学习记录01

区块链学习记录01

在学习过程中所遇到的问题&#xff0c;及其解。 Q:区块链中分布式账本的存在&#xff0c;让所有人都知道资金的变动吗&#xff1f; A:区块链中的分布式账本确实让参与网络的所有节点都能够了解账户之间的资金变动。这是因为区块链是一个分布式数据库&#xff0c;其中包含着所…
阅读更多...
Java 基础面试题

Java 基础面试题

文章目录 重载与重写抽象类与接口面向对象a a b 与 a b 的区别final、finalize、finallyString、StringBuild、StringBuffer位运算反射 重载与重写 重载&#xff1a;是在同一个类中&#xff0c;方法名相同&#xff0c;方法参数类型&#xff0c;个数不同&#xff0c;返回类型…
阅读更多...
苹果不会在WWDC 2024中推出任何搭载M4芯片的Mac电脑

苹果不会在WWDC 2024中推出任何搭载M4芯片的Mac电脑

虽然苹果公司已在上月推出了首搭 M4 芯片的 iPad Pro&#xff0c;不过彭博社的马克・古尔曼在最近的实时通讯中透露苹果公司不会在即将进行的 WWDC 2024 开发者大会中推出任何搭载 M4 芯片的 Mac 电脑&#xff08;不会推出任何硬件产品&#xff09;。 此前报道&#xff0c;苹果…
阅读更多...
linux命令别名与shell函数

linux命令别名与shell函数

# 修改网卡配置 alias vinetwork"vi /etc/sysconfig/network-scripts/ifcfg-ens33" 1. 方法和调用在同一个文件 # 定义shell函数,返回值通过$?获取 function say_hello(){ echo "hello shell" return 1 } # 使用shell函数 say_hello # 执行脚本后接收返…
阅读更多...
源代码防泄密是什么？

源代码防泄密是什么？

1.源代码防泄密的概念 源代码防泄密是指采取一系列措施和技术手段&#xff0c;以防止源代码被未授权的访问、复制、传播或篡改&#xff0c;从而保障软件的知识产权和系统的安全性。 2.源代码防泄密的重要性 源代码是软件的核心部分&#xff0c;一旦泄露&#xff0c;可能会被…
阅读更多...
fastjson序列化对象后属性变更问题

fastjson序列化对象后属性变更问题

使用fastjson进行JSON序列化存储到数据库后&#xff0c;发现JSON字符串“莫名其妙地”多了一些属性。 public class MyClass {// boolean 类型的属性private boolean isActive;private boolean valid;// int 类型的属性private int id;// 默认构造器public MyClass() {}// 带有…
阅读更多...
前端框架之 MVVM

前端框架之 MVVM

MVVM vue 是典型的 MVVM 框架&#xff0c;v-model 实现了 VM 部分 MVVM 的理解 M&#xff1a;模型层、数据层&#xff0c;简单理解就是定义在 data 中的变量 V&#xff1a;视图层&#xff0c;就是浏览器展示的页面 M > V&#xff1a;数据的改变&#xff0c;需要同步更新…
阅读更多...
公寓远程抄表系统：智能管理方法新的篇章

公寓远程抄表系统：智能管理方法新的篇章

1.界定和功能 公寓远程抄表系统是一种前沿的自动化控制&#xff0c;它允许物业管理管理人员在远离现场部位收集和分析公寓里的电力能源使用数据&#xff0c;似水、电、气等。根据集成传感器、物联网产品和云计算&#xff0c;系统能实时检测并记录公寓的能耗状况&#xff0c;大…
阅读更多...
OCR行驶证识别介绍

OCR行驶证识别介绍

OCR行驶证识别是一种基于光学字符识别&#xff08;OCR&#xff09;技术的应用&#xff0c;专门用于识别机动车行驶证上的关键字段信息。以下是关于OCR行驶证识别的详细解释&#xff1a; 定义与原理 OCR行驶证识别通过扫描或拍摄行驶证图片&#xff0c;利用计算机视觉和模式识别…
阅读更多...
可视化数据科学平台在信贷领域应用系列三：特征组合

可视化数据科学平台在信贷领域应用系列三：特征组合

现代各企业都提倡“降本增效”&#xff0c;所以越来越多优秀的工具诞生了。若想在特征加工这块工作上提升效率&#xff0c;建模人员也能有更多时间“偷懒”&#xff0c;都 “Sora”时代了&#xff0c;为啥不巧用工具呢&#xff1f;RapidMiner在信贷风控特征加工组合中是一把利器…
阅读更多...
最新文章

Copyright @ 2022~2023