各位观众老爷,大家好!今天咱来唠唠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 `Array.prototype.reduceRight()`:从右到左遍历数组并累加
各位观众,大家好!今天咱们不聊鸡汤,来点硬核的——JS 数组的 reduceRight() 方法。这玩意儿,说白了,就是个数组累加器,但它有个特别的癖好,喜欢从右往左开始“啃”。 啥是 reduceRight()?为啥要有它? 在 JavaScript 的世界里,数组是个很常见的数据结构。我们经常需要对数组里的元素进行一些聚合操作,比如求和、求平均值、拼接字符串等等。reduce() 方法就是干这个的,它从左往右遍历数组,把数组里的每个元素“喂”给一个回调函数,最终得到一个累积的结果。 那么问题来了,既然有了 reduce(),为啥还要搞个 reduceRight() 出来? 这就好比,都有筷子了,为啥还要发明叉子? 存在即合理嘛! reduceRight() 和 reduce() 的区别就在于遍历数组的方向不同。reduce() 从左往右,reduceRight() 从右往左。 听起来好像没什么大不了的,但有些场景下,这个顺序就至关重要了。 举个例子,如果你要用数组里的元素来构建一个复杂的对象,元素的顺序会影响最终的结果,这时候 reduceRight() 可能就是你的救星。 red …
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.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.values()`:获取数组值的迭代器
嘿,各位代码界的弄潮儿们,今天咱们来聊聊 JavaScript 数组里一个挺实在的小伙伴:Array.prototype.values()。 别看它名字平平无奇,用好了也能让你的代码更优雅,更高效。 开场白:迭代器的那些事儿 在深入 values() 之前,咱们先简单回顾一下迭代器(Iterator)的概念。 迭代器就像一个旅行指南,它知道怎么一步步地遍历一个数据结构(比如数组、Map、Set)。 它有两个关键方法: next(): 返回一个对象,包含 value (当前元素的值) 和 done (是否遍历结束) 两个属性。 Symbol.iterator: 一个特殊的 Symbol 属性,用来让一个对象可迭代。 简而言之,迭代器就是一种访问集合数据的标准方式。 ES6 引入了迭代器,让我们可以使用 for…of 循环等语法来轻松地遍历各种数据结构。 Array.prototype.values():闪亮登场 Array.prototype.values() 方法返回一个新的 数组迭代器 对象,该对象按顺序包含数组中每个索引的值。 也就是说,它会创建一个迭代器,专门用来遍历数组的值 …
JS `Array.prototype.fill()`:用静态值填充数组元素
嘿,大家好!今天咱们来聊聊JavaScript里一个看似简单,实则暗藏玄机的家伙:Array.prototype.fill()。别看它只有短短几个字母,用好了能让你的代码更简洁,用不好嘛…嗯,可能会让你踩到一些意想不到的坑。 一、初识fill():填鸭式教育的典范 fill()方法顾名思义,就是用一个静态的值去填充数组的一部分或全部元素。它就像一个勤劳的油漆工,帮你把数组刷成你想要的颜色。它的基本语法是这样的: array.fill(value[, start[, end]]) value:要填充的值,可以是任何数据类型,比如数字、字符串、对象等等。 start:可选参数,填充的起始位置,默认是0。如果为负数,则从数组末尾开始计算,-1代表最后一个元素,-2代表倒数第二个元素,以此类推。 end:可选参数,填充的结束位置(不包括该位置的元素)。默认是数组的长度。如果为负数,同样从数组末尾开始计算。 咱们来举几个简单的例子: // 1. 用5填充整个数组 const arr1 = [1, 2, 3, 4, 5]; arr1.fill(5); console.log(arr1); // 输 …
JS `Array.prototype.copyWithin()`:在数组内部复制元素
各位观众,各位朋友,大家好!今天咱们来聊聊 JavaScript 数组里一个挺有意思,但可能平时不太常用的家伙:Array.prototype.copyWithin()。 这玩意儿啊,就像数组里的 “乾坤大挪移”,能在数组内部把一部分元素复制到另一个位置,听起来有点绕,但用起来其实挺灵活的。 一、copyWithin() 的基本概念 简单来说,copyWithin() 方法允许你在同一个数组内,将数组的一部分浅拷贝到数组的另一个位置,而不会改变数组的长度。 记住,是浅拷贝!这意味着如果数组里存的是对象,复制的只是对象的引用,而不是对象本身。 它的语法结构是这样的: array.copyWithin(target, start, end) 参数说明: target (必须): 指定复制序列的目标位置的索引。从这个索引开始,元素将被覆盖。如果 target 是负数,则从数组的末尾开始计算(例如,-1 表示数组的最后一个元素)。 start (可选): 指定复制序列的起始位置的索引。从这个索引开始,元素将被复制。如果 start 是负数,则从数组的末尾开始计算。如果省略 start,则默认值 …
JS `Array.prototype.flatMap()`:映射并扁平化,提升代码简洁性
各位观众老爷,大家好!今天咱们来聊聊 JavaScript 数组里一个相当实用的家伙——flatMap()。 别看它名字长,其实干的活儿挺简单,就是“映射”和“扁平化”的结合体。 说白了,就是先用一个函数处理数组里的每个元素,然后把处理结果拍扁,变成一个新数组。 听起来有点绕是吧? 没关系,咱们慢慢来,保证你听完之后,也觉得这玩意儿真香! flatMap()是个啥? 首先,咱们得知道啥是“映射”和“扁平化”。 映射 (Mapping): 就是把数组里的每个元素,通过一个函数,变成另外一个东西。 比如,你可以把一个装着数字的数组,映射成装着这些数字的平方的数组。 扁平化 (Flattening): 就是把一个嵌套的数组(数组里面还有数组),变成一个一维的数组。 比如,[[1, 2], [3, 4]] 扁平化之后就变成了 [1, 2, 3, 4]。 flatMap() 呢,就是把这两个操作合二为一。 它先对数组里的每个元素执行一个映射函数,然后把映射结果扁平化成一个新数组。 flatMap() 怎么用? flatMap() 的语法非常简单: array.flatMap(function(c …
JS `Array.prototype.flat()` 与 `depth` 参数:控制扁平化深度
各位观众老爷,大家好!今天咱们不聊风花雪月,只谈技术!今天的主题是JavaScript里那个有点像“压路机”的 Array.prototype.flat() 方法,以及它那个控制“压路机”深度的小旋钮:depth 参数。 一、什么是 Array.prototype.flat() ? 想象一下,你面前有一堆俄罗斯套娃,一个套一个,结构复杂。Array.prototype.flat() 的作用就是把这些套娃拆开,然后把所有的小娃娃(也就是数组里的元素)都摆放到一个桌面上,形成一个扁平的数组。 简单来说,flat() 方法创建一个新数组,其中所有子数组元素都以递归方式连接到该数组中,直到指定的深度。 二、没有 depth 参数的 flat():默认压平一层 如果咱们直接用 flat(),不给它任何参数,它就会默认“压平”一层。就像压路机只压一遍,只把最外层的套娃拆开。 const arr = [1, 2, [3, 4, [5, 6]]]; const flattenedArr = arr.flat(); console.log(flattenedArr); // 输出: [1, 2, 3, …
JS `Array.prototype.sort()` 的稳定排序 (ES2019):保持相同元素相对顺序
各位听众,早上好/下午好/晚上好!今天咱们来聊聊 JavaScript 里一个既熟悉又有点小神秘的家伙:Array.prototype.sort()。这玩意儿大家天天用,但要说把它摸透了,能准确预测它排序后的结果,很多人可能就得挠头了。 特别地,我们要聚焦在 ES2019 引入的一个重要特性:稳定排序。这可不是什么玄学魔法,而是一个实实在在的改进,让 sort() 变得更加可预测和可靠。 sort() 的老脾气:不稳定排序的那些年 在 ES2019 之前,JavaScript 的 sort() 方法在不同浏览器、不同 JavaScript 引擎下的实现可能是不一样的。这意味着,对于那些“相等”的元素(根据你的比较函数判断),它们的相对顺序可能会被打乱。 举个例子,假设我们有一个数组,表示员工信息: const employees = [ { name: ‘Alice’, department: ‘Sales’, seniority: 5 }, { name: ‘Bob’, department: ‘Marketing’, seniority: 3 }, { name: ‘Charlie …