2025-04-14

有用的JavaScript数组技巧

# 1. 50 个让你高效编程的前端轮子

https://mp.weixin.qq.com/s/4H3-W92Z5ejptHw-zbq-KA

https://segmentfault.com/a/1190000038589634

# 2. 数组转对象

let fruits = ['banana', 'apple', 'orange', 'watermelon'];
let newArr = fruits.map((item, index) => {
  let obj = {};
  obj['pic'] = item;
  obj['id'] = index;
  return obj;
});
console.log(newArr);

2.2 数组换为对象的最快方法是使用众所周知的 spread 运算符(…)。

let fruits = ["banana", "apple", "orange", "watermelon"];
let fruitsObj = { …fruits };
console.log(fruitsObj);
// returns {0: "banana", 1: "apple", 2: "orange", 3: "watermelon", 4: "apple", 5: "orange", 6: "grape", 7: "apple"}

# 3. 数组填充（生成假数据）

Array(7)
  .fill()
  .map((item, index) => index + 1);
//输出 => [1, 2, 3, 4, 5, 6, 7];

let newArray = new Array(10).fill('1');
console.log(newArray);
// returns ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]

# 4. 替换数组中的特定值

有时在创建代码时需要替换数组中的特定值，有一种很好的简单的方法可以做到这一点，我们可以使用.splice(start、valueToRemove、valueToAdd)，并将所有三个参数传递给它，这些参数可以指定我们希望从哪里开始修改、希望修改多少值和新值。

let fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];

// First method
let uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits);
// returns ["banana", "apple", "orange", "watermelon", "grape"]

// Second method
let uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2);
// returns ["banana", "apple", "orange", "watermelon", "grape"]

4.2 替换数组中的特定值

let fruits = [
  'banana',
  'apple',
  'orange',
  'watermelon',
  'apple',
  'orange',
  'grape',
  'apple'
];
fruits.splice(0, 2, 'potato', 'tomato');
console.log(fruits);
// returns ["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]

# 5. 只提取数组中 key 为 name 的 value，返回单数组

let friends = [
  { name: 'John', age: 22 },
  { name: 'Peter', age: 23 },
  { name: 'Mark', age: 24 },
  { name: 'Maria', age: 22 },
  { name: 'Monica', age: 21 },
  { name: 'Martha', age: 19 }
];

let friendsNames = Array.from(friends, ({ name }) => name);
// returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

# 6.合并数组

您知道如何不使用.concat()方法将数组合并到一个数组中吗?有一种简单的方法可以用一行代码将任意数量的数组合并。正如您可能已经意识到的，spread 操作符(…)在处理数组时非常有用，在本例中也是如此。

let fruits = ["apple", "banana", "orange"];
let meat = ["poultry", "beef", "fish"];
let vegetables = ["potato", "tomato", "cucumber"];
let food = […fruits, …meat, …vegetables];

// ["apple", "banana", "orange", "poultry", "beef", "fish", "potato", "tomato", "cucumber"]

# 7.求两个数组的交集

这也是 Javascript 面试中最受欢迎的题目之一，因为它考察了你是否可以使用数组方法以及你的逻辑是什么。为了找到两个数组的交集，我们将使用本文前面展示的方法之一，以确保数组中的值不重复，并使用.filter 方法和.include 方法。最后，将得到两个数组的交集。例：

let numOne = [0, 2, 4, 6, 8, 8];
let numTwo = [1, 2, 3, 4, 5, 6];
let duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
// returns [2, 4, 6]

# 8. 从数组中删除假值

首先，让我们定义假值。在 Javascript 中，假值是 false, 0， " "， null, NaN, undefined。现在我们可以来看看如何从数组中删除这类值。为此，我们将使用.filter()方法。

let mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false];
let trueArr = mixedArr.filter(Boolean);
// returns ["blue", 9, true, "white"]

# 9. 从数组中获取随机值

有时我们需要从数组中随机选择一个值。要以一种简单、快速、简短的方式创建它，并保持代码整洁，我们可以根据数组长度获得一个随机索引号。让我们看看代码:

let colors = [
  'blue',
  'white',
  'green',
  'navy',
  'pink',
  'purple',
  'orange',
  'yellow',
  'black',
  'brown'
];
let randomColor = colors[Math.floor(Math.random() * colors.length)];

# 10.lastIndexOf()方法 (最后一次出现的位置)

在 Javascript 中，有一个有趣的方法，它允许查找给定元素的最后一次出现的索引。例如，如果我们的数组有重复的值，我们可以找到它最后一次出现的位置。让我们看看代码示例:

let nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
let lastIndex = nums.lastIndexOf(5);
// returns 9

# 11.JS 中如何快速获取 JSON 对象的最后一项的值?

data[Object.keys(data)[Object.keys(data).length - 1]]
https://segmentfault.com/q/1010000011161258

# 12. 将数组中的所有值相加

这个也是面试中经常被问到的问题，将数组中的所有值相加;它可以在一行代码中使用.reduce 方法来解决。让我们看看代码:

let nums = [1, 5, 2, 6];
let sum = nums.reduce((x, y) => x + y);
console.log(sum);
// returns 14

# 13.使用 indexOf 查找要删除的数组元素的索引(index)，然后使用 splice 方法删除该索引所对应的项。

const array = [2, 5, 9];
const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
console.log(array); // [ 2, 9 ]

# 14. 显示文件大小

showFileSize: size => {
  let newSize = size / 1024;
  return newSize < 1024
    ? `${Math.floor(newSize * 100) / 100} ${'kb'}`
    : `${Math.floor((newSize / 1024) * 100) / 100} ${'M'}`;
};

# 15. 去除数组中的假值

[''].filter(Boolean);

# 16. 在数组中指定索引位置添加新的数据

const arr = ['March', 'Jan', 6, 2, 'A', 'a'];
//在索引为2的位置截取1个，并在索引2的位置后添加 '呵呵', '拉拉'
arr.splice(2, 1, ...['呵呵', '拉拉']);
console.log(arr);

# 17. js 计算可视区域

//<!--滚动条中监听-->
const getObserveDom = () => {
  const container = document.querySelector('.talklist');
  const items = Array.from(container.children) || [];
  const observer = new IntersectionObserver(isInObserve, { threshold: 1.0 });
  for (let i = 0; i < items.length; i++) {
    observer.observe(items[i]);
  }

  function isInObserve(entries, observer) {
    for (let i = 0; i < entries.length; i++) {
      if (entries[i].isIntersecting) {
        // 当前元素可见
        // console.log('entries[i].isIntersecting:', entries[0])
        let findFirst = entries.find(ele => ele.isIntersecting == true);
        let dom = findFirst.target.innerHTML;

        // 列如dom: <div  class="talklist-col"  time="1687310578328" id="1687259933216654" >
        let time = dom.indexOf('time');
        let id = dom.indexOf('id');
        let doc = dom.substring(time, id);

        //获取html上的时间戳
        let getTimestamp = doc.replace('time="', '').replace('"', '') || '';

        observer.unobserve(entries[i].target); //移除监听
        return;
      }
    }
  }
};

上次更新: 2025-12-04