【ECMAScript 内置对象之Array】Array.prototype.copyWithin generator与iterator_uint8array.prototype.copywithin

一、Array.prototype.copyWithin(target, start, end)

ES2015 即es6新增方法

1、作用与参数

• 作用：拷贝数组集合[start, end)复制到指定位置target（拷贝、粘贴）
• 参数：
  1. target:目标位置
  2. start：开始拷贝的索引位置（包含start）
  3. end：结束拷贝的索引位置（不包含end）

2、使用

具体使用情况：

1. [start, end)左闭右开

const arr = [1, 2, 3, 4, 5];

const newArr1 = arr.copyWithin(1, 3, 4);
console.log(newArr1);// [1, 4, 3, 4, 5]
1
2
3
4

2. end > array.length - 1 取到末尾

const arr = [1, 2, 3, 4, 5];

const newArr2 = arr.copyWithin(0, 2, 5);
console.log(newArr2);// [3, 4, 5, 4, 5]
1
2
3
4

3. target > array.length - 1 不发生替换(或者start < end)

const arr = [1, 2, 3, 4, 5];

const newArr3 = arr.copyWithin(10, 2, 4);
console.log(newArr3);// [1, 2, 3, 4, 5]
1
2
3
4

4. target > start 正常替换

const arr = [1, 2, 3, 4, 5];

const newArr1 = arr.copyWithin(3, 1, 3);
console.log(newArr1);// [1, 2, 3, 2, 3]
1
2
3
4

5. 当start或end是负数，则start = start + array.length; end = end + array.length

const arr = [1, 2, 3, 4, 5];

const newArr1 = arr.copyWithin(3, -3, -1); // 3 2 4
console.log(newArr1);// [1, 2, 3, 3, 4]
1
2
3
4

6. 如果没有start，取整个数组的元素(该方法不改变数组长度)

const arr = [1, 2, 3, 4, 5];

const newArr1 = arr.copyWithin(3); 
console.log(newArr1);// [1, 2, 3, 1, 2]
1
2
3
4

7. 返回的是原数组的引用

const arr = [1, 2, 3, 4, 5];

const newArr1 = arr.copyWithin(3); 
console.log(arr === newArr1); // true
1
2
3
4

3、重写

/**
 * @param
 * 	target：必填
 * 	start：非必填
 *  end：非必填
 */ 
Array.prototype.myCopyWithin = function(target) {
	if(this === null) {
		throw new TypeError('ths is null or not defined');
	}

	// 把当前this用Object包装一下，变成引用值
	var obj = Object(this),
			len = obj.length >>> 0, // 右位移，保证他是正整数
			start = arguments[1],
			end = arguments[2],
			count = 0,
			dir = 1;

	target = target >> 0; // 保证他是正整数
	target = target < 0 ?
					 Math.max(len + target, 0):
					 Math.min(target, len);

	start = start ? start >> 0 : 0;
	start = start < 0 ? 
				  Math.max(len + start, 0):
				  Math.min(start, len);

	end = end ? end >> 0 : len;
	end = end < 0 ?
				Math.max(len + end, 0):
				Math.min(end, len);

	count = Math.min(end - start, len - target);

	if(start < target && target < (start + count)) {
		dir = -1;
		start += count - 1;
		target += count - 1;
	}

	while(count > 0) {
		if(start in obj) {
			obj[target] = obj[start];
		}else {
			delete obj[target];
		}

		start += dir;
		target += dir;
		count --;
	}

	return obj;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

二、generator与iterator

1、7中数组遍历方法

1. forEach：普通的数组遍历方法
2. map：映射，每一次遍历，返回一个新的数组元素，最后返回一个新数组
3. filter：过滤，每一次遍历，返回bool，来决定当前元素是否纳入新的数组中
4. reduce：归纳，每一次遍历，将当前元素归纳到容器中
5. reduceRight：reduce的反向操作
6. every：判定是否所有的元素都满足一个条件
7. some：判定一个元素或者多个元素符合一个条件

2、遍历跟迭代

1. 遍历：
   一次性对数组中每一个元素进行查询和处理

2. 迭代：
   我们希望遍历的过程是可控的（遍历的过程是可停止，可继续的），手动控制遍历流程。

产品迭代： 人为控制的产品升级与扩展

生成器：函数
迭代器：是生成器函数执行后返回的一个带有next方法的对象

生成器对迭代的控制是由yield关键字来执行的

const arr = [1, 2, 3];

function * gen(arr) {
	for(var i = 0; i < arr.length; i++) {
		yield arr[i];
	}
	return '结束';
}

const iterator = gen(arr);

console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: 3, done: false}
console.log(iterator.next());//{value: '结束', done: true}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、重写生成器

function gen(arr) {

	var nextIdx = 0;

	return {
		next: function() {
			return nextIdx < arr.length ?
						 {value: arr[nextIdx ++], done: false} :
						 {value: arr[nextIdx ++], done: true};
		}
	}
}

const iterator = gen(arr);
console.log(iterator.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15