JS数组取前三个用法介绍

一、基础操作

JS数组是一种特殊的对象，其元素可以是任何类型的数据，而且是按照一定顺序排列的。要想取一个数组的前三个元素，可以使用数组的slice()方法实现。

 let arr = [1, 2, 3, 4, 5];
let firstThree = arr.slice(0, 3);
console.log(firstThree); // [1, 2, 3] 

上述代码中，首先定义了一个数组arr，然后使用slice()方法获取了数组的前三个元素，存储在变量firstThree中，并在控制台输出了结果。

需要注意的是，slice()方法不会修改原数组，而是返回一个新数组。在上述代码中，原数组arr并没有发生任何改变。

二、条件筛选

要想根据某些条件选取数组中的前三个元素，可以借助Array.filter()方法实现条件筛选。

 let arr2 = [1, 2, 3, 4, 5];
let firstThreeEven = arr2.filter(item => item % 2 === 0).slice(0, 3);
console.log(firstThreeEven); // [2, 4] 

上述代码中，首先定义了一个数组arr2，然后使用filter()方法选取数组中所有的偶数元素，接着在这个新数组上应用slice()方法，取前三个元素，最终输出结果。

三、链式操作

JS数组提供了丰富的链式操作方法，因此可以在取前三个元素的同时，对其进行一些操作。

 let arr3 = [1, 2, 3, 4, 5];
let result = arr3.map(item => item * 2).filter(item => item % 3 === 0).slice(0, 3);
console.log(result); // [6, 12] 

上述代码中，首先定义了一个数组arr3，然后使用map()方法对数组中的每个元素都进行了乘以2的操作，接着应用filter()方法筛选出所有能够被3整除的元素，最后取前三个元素。

四、判断数组长度

当数组长度小于3时，需要特别注意。

 let arr4 = [1];
let firstThree4 = arr4.slice(0, 3);
console.log(firstThree4); // [1] 

当数组长度小于3时，直接使用slice()方法，会得到所有元素的子集。因此需要在取之前判断数组的长度。

 let arr5 = [1];
let firstThree5 = arr5.length 

上述代码中，首先判断了数组的长度是否小于3，如果是，则直接将整个数组作为结果返回；如果不是，则使用slice()方法取前三个元素。

五、使用解构赋值

当只需要使用数组中的前几个元素时，可以使用解构赋值的方式。

 let arr6 = [1, 2, 3, 4, 5];
let [a, b, c] = arr6;
console.log(a, b, c); // 1 2 3 

上述代码中，使用解构赋值的方式，从数组中取出前三个元素，并分别赋值给变量a、b、c。

六、总结

JS数组是一种非常灵活的数据结构，支持多种方式取前三个元素。需要注意的是，在进行筛选和链式操作时，需要确保数组不为空，并判断数组的长度，防止出现异常错误。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com