标签： array

发布于

JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.with()`：其在不可变数组中的新特性。

各位朋友，大家好！今天咱们来聊聊JavaScript里一个相对较新的家伙，Array.prototype.with()。它看起来平平无奇，但背后蕴含着不可变数组的理念，能让咱们的代码更安全、更可控。 开场白：数组的变与不变 咱们JavaScript里的数组啊，默认情况下是个“百变星君”，想怎么改就怎么改，push、pop、splice，一顿操作猛如虎，数组内容早就面目全非了。这在某些情况下很方便，但同时也埋下了隐患。比如，在并发编程或者需要追踪数据变化的时候，这种直接修改数组的方式就容易出问题，导致程序行为不可预测。 所以，就有了“不可变数据结构”的概念。简单来说，就是一旦创建，就不能修改。想改？没问题，创建一个新的，旧的保持原样。这就像你玩游戏，存档之后再浪，死了读档，之前的进度还在。Array.prototype.with()就是为了方便咱们在JavaScript里操作不可变数组而生的。 with()：不可变数组的救星 with()方法允许你创建一个数组的副本，并在副本的指定索引处修改值，而原始数组保持不变。它的语法很简单： const newArray = array.with( …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.with()`：其在不可变数组中的新特性。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.toSpliced()`：其在不可变数组中的新特性。

各位观众老爷，今天咱们来聊聊JavaScript里一个挺新鲜的玩意儿：Array.prototype.toSpliced()。 啥？你问我这玩意儿干啥的？简单来说，它就是数组界的“复制粘贴+剪切”加强版，而且最重要的是，它能帮你搞定不可变数组的操作，让你的代码更优雅、更安全。准备好了吗？咱们这就开讲！ 一、splice()的那些事儿：老朋友，新问题 在深入toSpliced()之前，咱们先回顾一下老朋友splice()。这哥们儿的功能很强大，可以在数组里删除、插入、替换元素，简直是数组操作的一把瑞士军刀。 const arr = [1, 2, 3, 4, 5]; const removed = arr.splice(2, 1, ‘a’, ‘b’); // 从索引2开始，删除1个元素，插入’a’和’b’ console.log(arr); // 输出: [1, 2, ‘a’, ‘b’, 4, 5] console.log(removed); // 输出: [3] 看到没？splice()直接修改了原始数组arr。这在很多情况下是没问题的，甚至很方便。但是，在某些场景下，我们希望保持原始数 …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.toSpliced()`：其在不可变数组中的新特性。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.findLast()`：其在数组搜索中的新特性。

各位观众，欢迎来到今天的JavaScript内核与高级编程小讲堂！今天咱们聊点儿新鲜的——Array.prototype.findLast()，这玩意儿可是数组搜索家族里的一位新成员，让咱们看看它能带来什么惊喜。 开场白：数组搜索的那些事儿 在JavaScript的世界里，数组这东西，那是相当常见。咱们经常需要在数组里找点儿什么，比如找到第一个大于某个值的元素，或者找到符合某种条件的元素。以前，咱们可能会用for循环，或者Array.prototype.find()之类的。但现在，findLast()来了，它要做什么呢？简单来说，就是从数组的末尾开始搜索。 find()的老朋友，findLast()的新面孔 Array.prototype.find()，各位肯定不陌生。它从数组的开头开始，找到第一个符合条件的元素，然后就停止搜索。如果没找到，就返回undefined。 const numbers = [5, 12, 8, 130, 44]; const found = numbers.find(element => element > 10); console.log(fo …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.findLast()`：其在数组搜索中的新特性。”

发布于

JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.toReversed()`：其在不可变数组中的应用。

各位靓仔靓女们，晚上好！我是你们的老朋友，今晚咱们唠唠JavaScript里一个挺有意思的新家伙——Array.prototype.toReversed()。 开场白：数组反转的那些事儿 话说，咱们在JavaScript里处理数组的时候，经常会遇到需要反转数组的情况。以前，我们常用的方法是Array.prototype.reverse()。这玩意儿简单粗暴，直接把原数组给改了，反转完之后，原来的数组就变成反转后的样子了。 let arr = [1, 2, 3, 4, 5]; arr.reverse(); console.log(arr); // 输出: [5, 4, 3, 2, 1] 但是，问题来了！在很多情况下，我们并不希望修改原数组，而是希望得到一个反转后的新数组。这时候，reverse()就显得有点不太优雅了。为了解决这个问题，我们通常会先复制一份数组，然后再反转复制后的数组。 let arr = [1, 2, 3, 4, 5]; let reversedArr = […arr].reverse(); // 或者 arr.slice().reverse() console.l …

继续阅读“JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.toReversed()`：其在不可变数组中的应用。”

发布于

剖析 WordPress `do_action_ref_array()` 和 `apply_filters_ref_array()` 函数源码：如何通过引用传递参数。

各位观众，早上好！今天咱们来聊聊 WordPress 里两个有点儿“神秘”但又非常实用的函数：do_action_ref_array() 和 apply_filters_ref_array()。 别怕名字长，其实搞明白它们的工作原理，你就能更好地理解 WordPress 的钩子机制，还能写出更灵活、更强大的插件和主题。 咱们今天就来扒一扒它们的源码，看看它们是如何通过引用传递参数的，顺便也聊聊引用传递的好处和需要注意的地方。准备好了吗？咱们开始！ 一、 钩子机制：WordPress 的灵魂 在深入 do_action_ref_array() 和 apply_filters_ref_array() 之前，先简单回顾一下 WordPress 的钩子机制。 钩子，简单来说，就是 WordPress 预留的一些“接口”，允许插件和主题在特定的时间点插入自己的代码，从而改变 WordPress 的行为或输出。 钩子分为两种： 动作（Actions）： 允许你执行一些操作，比如在文章发布后发送邮件，或者在页面底部添加一段自定义的 HTML 代码。 过滤器（Filters）： 允许你修改数据，比如修 …

继续阅读“剖析 WordPress `do_action_ref_array()` 和 `apply_filters_ref_array()` 函数源码：如何通过引用传递参数。”

发布于

深入分析 ES2023 中的 Array.prototype.toReversed(), toSorted(), toSpliced() 和 with() 非破坏性数组方法的意义和应用。

各位朋友，大家好！我是你们今天的数组方法“非破坏性改造”专家。准备好了吗？我们要开始一场关于 ES2023 全新数组方法的大冒险，保证让你的数组处理技巧更上一层楼，并且避免一不小心就破坏了原始数据的尴尬局面！ 今天要讲的是 ES2023 中引入的四个“非破坏性”数组方法：toReversed(), toSorted(), toSpliced(), 和 with()。 它们的主要意义在于，它们返回的是数组的副本，而不是直接修改原始数组。这对于维护数据的完整性，尤其是在函数式编程中，至关重要。 为什么要 “非破坏性”？ 在深入研究这些方法之前，我们先来聊聊“非破坏性”的重要性。 想象一下，你正在处理一个重要的用户数据数组，你需要在界面上展示一个排序后的版本，但又不想改变原始数据的顺序。 使用传统的 sort() 方法，你会直接修改原始数组，这可能会导致其他依赖该数据的组件出现问题。 这就是“非破坏性”方法的价值所在。 它们允许你创建数组的修改版本，而不会触及原始数据，从而避免潜在的副作用。 1. toReversed()： 倒序排列，优雅转身 toReversed() 方法返回一个颠倒顺序 …

继续阅读“深入分析 ES2023 中的 Array.prototype.toReversed(), toSorted(), toSpliced() 和 with() 非破坏性数组方法的意义和应用。”

发布于

JS 数组去重的高效方法：结合 `Set` 与 `Array.from()`

各位观众老爷，大家好！今天咱来唠唠JS数组去重这事儿。这可是前端面试的常客，也是日常开发中经常碰到的问题。别看它简单，里面可是藏着不少门道。 今天咱就重点说说Set 和 Array.from() 结合起来的这种高效去重方式，保证让你听完之后，下次面试再遇到，直接秒杀！ 一、 数组去重：历史的车轮滚滚向前 在深入 Set + Array.from() 之前，咱们先简单回顾一下数组去重的几种常见方法，也算是热热身。 双重循环大法 (O(n^2)) 这是最直观，也最容易想到的方法。 function unique(arr) { const result = []; for (let i = 0; i < arr.length; i++) { let isExist = false; for (let j = 0; j < result.length; j++) { if (arr[i] === result[j]) { isExist = true; break; } } if (!isExist) { result.push(arr[i]); } } return result …

继续阅读“JS 数组去重的高效方法：结合 `Set` 与 `Array.from()`”

发布于

JS `Array.prototype.reduceRight()`：从右到左遍历数组并累加

各位观众，大家好！今天咱们不聊鸡汤，来点硬核的——JS 数组的 reduceRight() 方法。这玩意儿，说白了，就是个数组累加器，但它有个特别的癖好，喜欢从右往左开始“啃”。 啥是 reduceRight()？为啥要有它？ 在 JavaScript 的世界里，数组是个很常见的数据结构。我们经常需要对数组里的元素进行一些聚合操作，比如求和、求平均值、拼接字符串等等。reduce() 方法就是干这个的，它从左往右遍历数组，把数组里的每个元素“喂”给一个回调函数，最终得到一个累积的结果。 那么问题来了，既然有了 reduce()，为啥还要搞个 reduceRight() 出来？ 这就好比，都有筷子了，为啥还要发明叉子？ 存在即合理嘛！ reduceRight() 和 reduce() 的区别就在于遍历数组的方向不同。reduce() 从左往右，reduceRight() 从右往左。 听起来好像没什么大不了的，但有些场景下，这个顺序就至关重要了。 举个例子，如果你要用数组里的元素来构建一个复杂的对象，元素的顺序会影响最终的结果，这时候 reduceRight() 可能就是你的救星。 red …

继续阅读“JS `Array.prototype.reduceRight()`：从右到左遍历数组并累加”

发布于

JS `Array.prototype.keys()`：获取数组索引的迭代器

各位观众，早上好！今天咱们来聊聊 JavaScript 数组里一个挺低调但有时又挺有用的家伙：Array.prototype.keys()。别看它名字平平无奇，关键时刻能帮你解决不少问题。 啥是 Array.prototype.keys()？ 简单来说，Array.prototype.keys() 是一个方法，它会返回一个新的 迭代器 (iterator) 对象。这个迭代器会按照数组中元素的顺序，依次产生数组的 索引 (index)。 换句话说，它不是给你数组里的值，而是给你值的 位置。就像寻宝游戏，它给你的是藏宝图上的坐标，而不是直接把宝藏送到你面前。 语法 这玩意儿的语法简单得不能再简单了： array.keys() 不需要任何参数，直接调用就行。 返回值 返回一个迭代器对象。这个迭代器会按顺序产生数组中每个元素的索引（从0开始）。 例子：最简单的用法 const arr = [‘apple’, ‘banana’, ‘cherry’]; const iterator = arr.keys(); console.log(iterator.next().value); // 0 con …

继续阅读“JS `Array.prototype.keys()`：获取数组索引的迭代器”

发布于

JS `Array.prototype.entries()`：获取键值对数组的迭代器

各位观众，各位朋友，欢迎来到今天的“数组探秘”特别节目！今天我们要聊的可是数组里的一个“小能手”——Array.prototype.entries()。 别看它名字平平无奇，用好了，能让你在处理数组的时候效率翻倍，代码也更优雅！ 开场白：数组，你真的了解吗？ 咱们都知道，数组是编程里最基础的数据结构之一。它就像一个有序的盒子，可以存放各种各样的东西，比如数字、字符串、对象，甚至是其他的数组！ 但问题来了，当你需要同时访问数组的索引（也就是位置）和值的时候，你会怎么做？ 传统方法：for 循环 最常见的方法就是用 for 循环，就像这样： const myArray = [‘apple’, ‘banana’, ‘cherry’]; for (let i = 0; i < myArray.length; i++) { console.log(`Index: ${i}, Value: ${myArray[i]}`); } 这段代码没毛病，简单粗暴，但缺点也很明显：需要手动管理索引 i，容易出错，而且代码看起来有点冗长。 forEach 方法 ES5 之后，我们有了 forEach 方法 …

继续阅读“JS `Array.prototype.entries()`：获取键值对数组的迭代器”