杂项问题笔记

1. Array.prototype.reduce();

        数组 需要过滤一些数据之后 在进行格式化处理使用到filter和map 感觉要遍历两遍性能很低；

        百度之后可以用reduce()方法实现: reduce可以只遍历一遍实现map和filter的组合

this.containers = containers.reduce((preValue, item) => {
			return item.TotalPositions === item.UsedPositions
				? preValue
				: preValue.push({
						label: item.Name,
			            value: item,
				  }) && preValue;
		    }, []);

参数有两个 第一个回调函数四个参数

1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. Source Array (src) (源数组)

第二个参数 是初始值 （不指定初始值时，acc为数组第一个元素，cur为数组第二个元素，idx为1）

        除此之外mdn中还有其他场景的例子 Array.prototype.reduce() - JavaScript | MDN

        计算每个元素出现次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

2.Array.prototype.splice(), Array.prototype.slice(), String.prototype.split()

        splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

        array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

        start：指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

        deleteCount：整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months);
//  Array ["Jan", "Feb", "March", "April", "May"]

months.splice(7, 1, 'w');
console.log(months);
//  Array ["Jan", "Feb", "March", "April", "May", "w"]

months.splice(-9, 1, 'w');
console.log(months);
//  Array ["w", "Feb", "March", "April", "May", "w"]

        slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

        语法：arr.slice([begin[, end]])

        begin 可选

        提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。如果省略 begin，则 slice 从索引 0 开始。如果 begin 超出原数组的索引范围，则会返回空数组。

        end 可选

        提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。如果 end 被省略，则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

        split()方法使用指定的分隔符字符串将一个StringString对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。 

        用法：str.split([separator[, limit]])

        参数：

        separator

        指定表示每个拆分应发生的点的字符串。separator 可以是一个字符串或正则表达式。 如果纯文本分隔符包含多个字符，则必须找到整个字符串来表示分割点。如果在str中省略或不出现分隔符，则返回的数组包含一个由整个字符串组成的元素。如果分隔符为空字符串，则将str原字符串中每个字符的数组形式返回。

        limit

        一个整数，限定返回的分割片段数量。当提供此参数时，split 方法会在指定分隔符的每次出现时分割该字符串，但在限制条目已放入数组时停止。如果在达到指定限制之前达到字符串的末尾，它可能仍然包含少于限制的条目。新数组中不返回剩下的文本。

警告：如果使用空字符串('')作为分隔符，则字符串不是在每个用户感知的字符(图形素集群)之间，也不是在每个Unicode字符(代码点)之间，而是在每个UTF-16代码单元之间。这会摧毁代理对。还请参见how do you get a string to a character array in javascript

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

const chars = str.split('');
console.log(chars[8]);
// expected output: "k"

const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

3.WeakMap

        与Map区别：

        没有iterator不可遍历，无法获取到自己有什么值， key为弱引用， 

        弱引用：

const map = new Map();

const weakMap = new WeakMap();

let obj1 = {a:1};

let obj2 = {a:1};

map.set(obj1, 1);
// Map(1) {{…} => 1}
weakMap.set(obj2, 2);
// WeakMap {{…} => 2}

obj1 = null
// null
obj2 = null
// null
// obj1 与 obj2的外部引用消失 map仍保留obj1的值作为键  而weakMap则为空了
map
Map(1) {{…} => 1}[[Entries]]0: {Object => 1}size: 1[[Prototype]]: Map
weakMap
WeakMap {}[[Entries]]No properties[[Prototype]]: WeakMap