JavaScript之数组随机重组、根据目标数组对本数组排序、匹配数组顺序、随机排序、洗牌游戏、random、splice、floor、while、Math、push、sort

---

前言

本文的功能已经封装成npm插件，如有需要可按下列提示使用插件。插件的功能比本文所列举的功能更全面，且实用性更强，插件会持续更细，敬请期待！

npm install js-mj-utils

---

yarn add js-mj-utils

---

如果网络不好且没有cnpm可以试试这个(强烈建议不要使用cnpm和下列方式)

npm install js-mj-utils --registry=https://registry.npmmirror.com

---

根据目标数组进行本数组排序

/**
 * 排序
 * @param {String} str
 * @param {Array} arr
 */
function handleArrSort(list = [], arr = [], key = 'id') {
  // 根据list对arr进行重组排序
  arr = arr.sort((a, b) => list.indexOf(a[key]) - list.indexOf(b[key]));

  return arr;
}

console.log(handleArrSort([5, 6, 2, 3, 1], [{id: 1}, {id: 2}, {id: 3}, {id: 5}, {id: 6}]));
console.log(handleArrSort([6, 8, 9, 1, 5], [{id: 1}, {id: 5}, {id: 6}, {id: 8}, {id: 9}], 'id'));

---

纯数组随机排序

let reorganize = function (arr){
	let rest = [];
	
	while (arr.length > 0) {
		let random = Math.floor(Math.random() * arr.length);
		// 把获取到的值放到新定义的数组中
		rest.push(arr[random]);
		// 这句代码的作用是改变获取随机数的最大值，
		// 防止获取到数组长度之外的随机数
		// 同时也是限制了重复获取
		// 删除原数组中已经获取到的数值
		arr.splice(random, 1);
	}
	
	return rest;
}

console.log(reorganize([1, 2, 3, 5, 6, 8, 4, 9, 7]));

---

适应所有数组类型

let shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5),
	arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
	arr2 = [
		{
			id: 1,
			name: '张三'
		},
		{
			id: 2,
			name: '李四'
		},
		{
			id: 3,
			name: '王五'
		},
		{
			id: 4,
			name: '赵六'
		},
		{
			id: 5,
			name: '半晨'
		}
	];

console.log(shuffleArray(arr1));
console.log(shuffleArray(arr2));

---

sort

w3school
sort()方法对数组的项目进行排序。
排序顺序可以是按字母或数字，也可以是升序(向上)或降序(向下)。
默认情况下，sort()方法将按字母和升序将值作为字符串进行排序。
这适用于字符串(Apple出现在Banana之前)。但是，如果数字按字符串排序，则25大于100，因为2大于1。
正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。
您可以通过提供“比较函数”来解决此问题。
sort()方法会改变原始数组。

---

MDN
sort()方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的UTF-16码元值升序排序。
由于它取决于具体实现，因此无法保证排序的时间和空间复杂度。
如果想要不改变原数组的排序方法，可以使用toSorted()。

---

splice

MDN
splice()方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。
要创建一个删除和/或替换部分内容而不改变原数组的新数组，请使用toSpliced()。要访问数组的一部分而不修改它，参见slice()。

---

w3school
splice()方法向/从数组添加/删除项目，并返回删除的项目。
splice()方法会改变原始数组。

push

MDN
push方法将指定的元素添加到数组的末尾，并返回新的数组长度。

---

w3school
push方法向数组末尾添加新项目，并返回新长度。
新的项目将被添加到数组的末尾。
push方法会改变数组的长度。
如需在数组的开头添加项目，请使用unshift方法。

---

random

MDN
Math.random()函数返回一个浮点数，伪随机数在范围从0到小于1，也就是说，从0(包括0)往上，但是不包括1(排除1)，然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法；它不能被用户选择或重置。

---

w3school
random()方法返回从0(含)到1(不含)的随机数。

---

floor

MDN
Math.floor()函数总是返回小于等于一个给定数字的最大整数。

---

w3school
floor()方法将数字向下舍入为最接近的整数，并返回结果。
如果传递的参数是整数，则不会舍入该值。
floor()方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

---

Math

MDN
Math是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math不是一个函数对象。
Math用于Number类型。它不支持BigInt。
与其他全局对象不同的是，Math不是一个构造器。Math的所有属性与方法都是静态的。引用圆周率的写法是Math.PI，调用正余弦函数的写法是Math.sin(x)，x是要传入的参数。Math的常量是使用JavaScript中的全精度浮点数来定义的。

---

w3school
Math对象允许执行数学任务。
Math不是构造函数。Math的所有属性/方法都可以通过使用Math作为对象来调用，而无需创建它。

---

while

w3school
while循环会一直循环代码块，只要指定的条件为true。

---

MDN
while语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。