JavaScript之随机从数组中取出指定个数的元素，且取出的元素不重复、唯一值、Math、floor、random、push

---

1、功能(需求)描述

定义一个图片数组，图片数组存放图片资源。定义一个目标数组，目标数组中没有图片，需要手动给目标数组的每一项添加随机图片，且添加到目标数组的图片不能重复。前提是图片数组的长度足够长，也就是图片数组的长度一定要比目标数组的长度长。

---

2、代码

function uniqueValue(target = [], origin = []) {
	let obj = {},
	newArr = [];
	
	for (let i = 0; i < target.length;) {
		let j = Math.floor(Math.random() * origin.length);
		
		if (!obj[j]) {
			newArr.push({ ...target[i], ...origin[j] });
			obj[j] = j;
			i++;
		}
	}
	
	return newArr;
}

let targetArr = [
		{ id: 1, title: 'a' },
		{ id: 2, title: 'b' },
		{ id: 3, title: 'c' },
		{ id: 4, title: 'd' },
		{ id: 5, title: 'e' },
		{ id: 6, title: 'f' },
		{ id: 7, title: 'g' }
	],
	originArr = [
		{ idOrigin: '1a', icon: 'a.png' },
		{ idOrigin: '2b', icon: 'b.png' },
		{ idOrigin: '3c', icon: 'c.png' },
		{ idOrigin: '4d', icon: 'd.png' },
		{ idOrigin: '5e', icon: 'e.png' },
		{ idOrigin: '6f', icon: 'f.png' },
		{ idOrigin: '7g', icon: 'g.png' },
		{ idOrigin: '8h', icon: 'h.png' },
		{ idOrigin: '9i', icon: 'i.png' }
	];

console.log(uniqueValue(targetArr, originArr));
// [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

---

3、实现思路

第一步：定义targetArr目标数组，数组有两个属性，分别是id和title。
第二步：定义originArr图片数组，数组有两个属性，分别是idOrigin和icon。
把需要的数据已准备好，剩下的就是实现了。

第一步
定义一个名为uniqueValue的函数，也可以不使用函数，使用函数是为了达到封装的目的。函数接收两个参数，分别是target和origin；从ES6开始，函数参数可以指定默认值，分别设置两个参数的默认值为空数组，用来防止函数调用时没有实参的报错问题。
第二步
在函数顶部定义两个变量，分别是obj和newArr，obj变量的类型为对象(object)，newArr变量的类型为数组(array)。在javascript中，对象有属性唯一的特点。newArr变量保存最终结果。
第三步
使用for遍历目标数组来获取图片数组的随机下标。for循环顶部使用Math、floor和random获取图片数组的随机下标。Math.floor(Math.random() * origin.length);表达式中的* origin.length表示生成最大随机下标不超过图片数组长度。
Math是javascript的内置对象，它拥有一些数学常数属性和数学函数(方法)。Math不是一个函数对象。
floor函数总是返回小于等于一个给定数字的最大整数。只保留整数部分，丢掉小数点和小数值。当值为负数时可能有些难理解，例如：-36.6得到的结果是-37，因为向下取整，所以-37小于-36。
random函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从0(包括0)往上，但是不包括1(排除1)，然后可以缩放到所需的范围。
第四步
使用if判断obj对象中是否已经存在当前for随机生成的图片数组的下标。
如果不存在，那么就使用push方法向newArr数组末尾添加元素，元素值是目标数组元素和图片数组元素合并的新对象；接着把随机生成的下标作为属性和值存到obj对象中；最后进行i++。
如果存在，那么不需要做任何操作，相当于跳过本次循环，i++也不会被触发，因为for本体的i++已经被提取到if判断中执行，当if判断成立才会触发i++。