怎么用JS数组技巧提高开发技能
本篇内容介绍了“怎么用JS数组技巧提高开发技能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联建站是一家专业提供徐州企业网站建设,专注与做网站、成都做网站、H5建站、小程序制作等业务。10年已为徐州众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
1. 随机排列
在开发者，有时候我们需要对数组的顺序进行重新的洗牌。在 JS 中并没有提供数组随机排序的方法，这里提供一个随机排序的方法：
function shuffle(arr) { var i, j, temp; for (i = arr.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; }2. 唯一值
在开发者，我们经常需要过滤重复的值，这里提供几种方式来过滤数组的重复值。
使用 Set 对象
使用 Set() 函数，此函数可与单个值数组一起使用。对于数组中嵌套的对象值而言，不是一个好的选择。
const numArray = [1,2,3,4,2,3,4,5,1,1,2,3,3,4,5,6,7,8,2,4,6]; // 使用 Array.from 方法 Array.from(new Set(numArray)); // 使用展开方式 [...new Set(numArray)]
使用 Array.filter
使用 filter 方法，我们可以对元素是对象的进行过滤。
const data = [ {id: 1, name: 'Lemon'}, {id: 2, name: 'Mint'}, {id: 3, name: 'Mango'}, {id: 4, name: 'Apple'}, {id: 5, name: 'Lemon'}, {id: 6, name: 'Mint'}, {id: 7, name: 'Mango'}, {id: 8, name: 'Apple'}, ] function findUnique(data) { return data.filter((value, index, array) => { if (array.findIndex(item => item.name === value.name) === index) { return value; } }) }3. 使用 loadsh 的 lodash 方法
import {uniqBy} from 'lodash' const data = [ {id: 1, name: 'Lemon'}, {id: 2, name: 'Mint'}, {id: 3, name: 'Mango'}, {id: 4, name: 'Apple'}, {id: 5, name: 'Lemon'}, {id: 6, name: 'Mint'}, {id: 7, name: 'Mango'}, {id: 8, name: 'Apple'}, ] function findUnique(data) { return uniqBy(data, e => { return e.name }) }3. 按属性对 对象数组 进行排序
我们知道 JS 数组中的 sort 方法是按字典顺序进行排序的，所以对于字符串类， 该方法是可以很好的正常工作，但对于数据元素是对象类型，就不太好使了，这里我们需要自定义一个排序方法。
在比较函数中，我们将根据以下条件返回值：
小于0：A 在 B 之前
大于0 ：B 在 A 之前
等于0 ：A 和 B 彼此保持不变
const data = [ {id: 1, name: 'Lemon', type: 'fruit'}, {id: 2, name: 'Mint', type: 'vegetable'}, {id: 3, name: 'Mango', type: 'grain'}, {id: 4, name: 'Apple', type: 'fruit'}, {id: 5, name: 'Lemon', type: 'vegetable'}, {id: 6, name: 'Mint', type: 'fruit'}, {id: 7, name: 'Mango', type: 'fruit'}, {id: 8, name: 'Apple', type: 'grain'}, ] function compare(a, b) { // Use toLowerCase() to ignore character casing const typeA = a.type.toLowerCase(); const typeB = b.type.toLowerCase(); let comparison = 0; if (typeA > typeB) { comparison = 1; } else if (typeA < typeB) { comparison = -1; } return comparison; } data.sort(compare)4. 把数组转成以指定符号分隔的字符串
JS 中有个方法可以做到这一点，就是使用数组中的 .join() 方法，我们可以传入指定的符号来做数组进行分隔。
const data = ['Mango', 'Apple', 'Banana', 'Peach'] data.join(','); // return "Mango,Apple,Banana,Peach"5. 从数组中选择一个元素
对于此任务，我们有多种方式，一种是使用 forEach 组合 if-else 的方式 ，另一种可以使用filter 方法，但是使用forEach 和filter的缺点是：
鸿蒙官方战略合作共建——HarmonyOS技术社区
在forEach中，我们要额外的遍历其它不需要元素，并且还要使用 if 语句来提取所需的值。
在filter 方法中，我们有一个简单的比较操作，但是它将返回的是一个数组，而是我们想要是根据给定条件从数组中获得单个对象。
为了解决这个问题，我们可以使用 find函数从数组中找到确切的元素并返回该对象，这里我们不需要使用if-else语句来检查元素是否满足条件。
const data = [ {id: 1, name: 'Lemon'}, {id: 2, name: 'Mint'}, {id: 3, name: 'Mango'}, {id: 4, name: 'Apple'} ] const value = data.find(item => item.name === 'Apple') // value = {id: 4, name: 'Apple'}“怎么用JS数组技巧提高开发技能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
网站栏目：怎么用JS数组技巧提高开发技能
文章转载：http://cdiso.cn/article/goisoo.html
