JS数组遍历的几种方式
JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比
第一种:普通for循环
代码如下:
for(j = 0; j < arr.length; j++) {
}
简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间
第二种:优化版for循环
代码如下:
for(j = 0,len=arr.length; j < len; j++) {
}
简要说明: 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
这种方法基本上是所有循环遍历方法中性能最高的一种
第三种:弱化版for循环
代码如下:
for(j = 0; arr[j]!=null; j++) {
}
简要说明: 这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断
实际上，这种方法的性能要远远小于普通for循环
第四种:foreach循环
代码如下:
arr.forEach(function(e){
});
简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱
第五种:foreach变种
代码如下:
Array.prototype.forEach.call(arr,function(el){
});
简要说明: 由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。
实际性能要比普通foreach弱
第六种:forin循环
代码如下:
for(j in arr) {
}
简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中
它的效率是最低的
第七种:map遍历
代码如下:
arr.map(function(n){
});
简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach
第八种:forof遍历(需要ES6支持)
代码如下:
for(let value of arr) {
});
简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环
各种遍历方式的性能对比
上述列举了几种方式都有一一做过对比分析，基本上可以得出的结论是:
普通for循环才是最优雅的
(PS:以上所有的代码都只是进行空的循环，没有再循环内部执行代码，仅仅是分析各自循环的时间而已)
性能对比截图
分析结果1
以下截图中的数据是，在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环，得到的分析结果)
23.png
可以看出,forin循环最慢。优化后的普通for循环最快
分析结果2
以下截图数据是，在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环，得到的分析结果)
31.png
js的Array对象有map、some、every、filter几个方法都能对数组中的每个对象进行处理，但是他们之间的功能又各有差别。
map()：通过指定函数处理数组的每个元素，并返回处理后的数组。
var numbers = [4, 9, 16, 25];
function myFunction() {
console.log(numbers.map(Math.sqrt));
}
输出结果为：
2,3,4,5
map() 方法会将数组中元素依次传入方法中，并将方法的返回结果组成新数组返回。
传入的function可以有自己的三个形参，currentValue, index, arr分别代表当前元素，元素索引，元素所属数组对象；其中currentValue是必须的。
注意：map不会改变原数组，map不会检查空数组
some()：用于检测数组中的元素是否满足指定条件（函数提供）
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
console.log(ages.some(checkAdult));
}
输出为：true
some方法会依次执行数组的每个元素:
-如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
-如果没有满足条件的元素，则返回false;
-function形参和map一样;
注意：some不会改变原数组，some不会检查空数组
every：用于检测数组所有元素是否都符合指定条件（通过函数提供）
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
console.log(ages.every(checkAdult));
}
输出结果：false
every和some正好相反：
-如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
-如果所有元素都满足条件，则返回 true。
-function形参同上
注意：some不会改变原数组，some不会检查空数组
filter：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
console.log(ages.filter(checkAdult));
}
输出结果：
32,33,40
filter会根据函数中的筛选条件将返回的结果组成一个新的数组并返回
javascript学习总结之Object.keys()方法详解
一、官方解释
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。
二、语法
Object.keys(obj)
参数：要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组
三、处理对象，返回可枚举的属性数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()处理对象，返回可枚举的属性数组</title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:20,
eat:function(){}
}
console.log(Object.keys(person));// ['name','age','eat']
</script>
</body>
</html>
输出结果为：
["name", "age", "eat"]
四、处理数组，返回索引值数组
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()处理数组，返回索引值数组</title>
</head>
<body>
<script type="text/javascript">
let arr=[1,2,3,4,5];
console.log(Object.keys(arr));//['0','1','2','3','4','5']
</script>
</body>
</html>
输出结果为：
["0", "1", "2", "3", "4"]
五、处理字符串，返回索引值数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()处理字符串，返回索引值数组</title>
</head>
<body>
<script type="text/javascript">
let str='hello';
console.log(Object.keys(str));//['0','1','2','3','4']
</script>
</body>
</html>
输出结果为：
["0", "1", "2", "3", "4"]
注意：在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES2015中，非对象的参数将被强制转换为一个对象
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"] (ES2015 code)
Object.values()
Object.values()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。
let obj = {
foo : "bar",
baz : 20,
}
console.log(Object.values(obj));
返回数组的成员顺序，与属性的遍历部分介绍的排列规则一致，排列规则在属性的可枚举性和遍历这里。
const obj = {100 : "a", 2 : "b", 7 : "c"};
console.log(Object.values(obj)); //b c a
Object.value只会遍历对象自身的可遍历属性。
const obj = Object.create({},{p : {value : 10}});
console.log(Object.values(obj));
console.log(Object.getOwnPropertyDescriptors(obj));
上面代码中，Object.create方法的第二个参数添加的对象属性（属性p），如果不显式声明，默认是不可遍历的，因为p的属性描述对象的enumerable默认是false，Object.values不会返回这个属性。只要把enumerable改成true，Object.values就会返回属性p的值。
const obj = Object.create({},{p:{
value : 10,
enumerable : true,
configurable : true,
writable : true,
}})
console.log(Object.values(obj)); //[10]
Object.values()会过滤属性名为Symbol值的属性。
const obj = {
[Symbol("a")] : 1,
a : 2,
}
console.log(Object.values(obj));
console.log(Reflect.ownKeys(obj));
如果Object.values()方法的参数是一个字符串，会返回各个字符组成的一个数组。
console.log(Object.values("foo")); //["f","o","o"]
//上面代码中，字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此，Object.values返回每个属性的键值，就是各个字符组成的一个数组。
如果参数不是对象，Object.values会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。所以，Object.values会返回空数组。如果参数为undefined或者null会报错。
console.log(Object.values(123)); //[]
console.log(Object.values(true)); //[]
console.log(Object.values(undefined)); error
console.log(Object.values(null)) error
Object.entries()
Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
const obj = { a : 1, b : 2};
console.log(Object.entries(obj));
Object.entries的基本用途是遍历对象的属性。
let obj = {
one : 1,
two : 2,
}
for(let [k , v] of Object.entries(obj)){
console.log(`${JSON.stringify(k)} : ${JSON.stringify(v)}`);
}
Object.entries方法的另一个用处是，将对象转为真正的Map结构。
const obj = {foo : "bar", baz : 10};
const map = new Map(Object.entries(obj))
console.log(map);
自己实现Object.entries方法。
const entries = (obj) => {
let result = [];
const objType = typeof(obj);
if(obj === undefined || obj === null){
throw new TypeError();
}
if(objType === "number" || objType === "boolean"){
return [];
}
for(let k of Object.keys(obj)){
result.push([k,obj[k]]);
}
return result
}
ES6 for循环中let和var区别详解
let是es6中新增命令，也是用来声明变量的，可能很多小伙伴都像我一样，定义变量的时候都会用var而很少用到let，那么，let和var到底有什么区别呢？
let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。
全局作用域
var 和 let 声明的变量在全局作用域中被定义时，两者非常相似
let bar = 'hehe';
var baz = 'lala';
但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以
console.log(window.bar); //undefined
console.log(window.baz); // 'able'
函数作用域
var 和 let 在函数作用域中声明一个变量，两个变量的意义是相同的。
function aFun(){
let bar = 'hehe'; // 函数作用域中的变量
var baz = 'lala'; // 函数作用域中的变量
}
块作用域
在块作用域中两者的区别较为明显， let只在for()循环中可用，而 var是对于包围for循环的整个函数可用
function aFun1(){
// i 对于for循环外的范围是不可见的(i is not defined)
for(let i = 1; i<5; i++){
// i只有在这里是可见的
}
// i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
// i 对于for循环外的范围是可见的
for(var i = 1;i<5; i++){
// i 在for 在整个函数体内都是可见的
}
// i 对于for循环外的范围是可见的
}
let 和var 重新声明
var允许在同一作用域中声明同名的变量，而let不可以
let me = 'foo';
let me = 'bar'; //SyntaxError: Identifier 'me' has already been declared
var me = 'foo';
var me = 'bar'; //这里me被替代了，是可以重复声明的
es6中还有一个声明变量的命令const，const和let都是在声明的块作用域中有效，但是let声明的变量可变，值和类型都可以改变，没有限制。const声明额变量不能改变，所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值
const hehe; //报错，Missing initializer in const declaration
const a = 3;
a = 5; //报错，Uncaught TypeError: Assignment to constant variable.
以上就是let和var在不同作用域下的区别
那么在什么情况下要用到let呢？
let 在块作用域中有效，有的时候，我们为了降低变量污染的风险，在块作用域中使用let来代替var，这样不会污染块作用域的外部作用域，降低 bug率，使代码更安全。
ES6引入的第三个声明类关键词：const
一句话说明白，const 就是用来定义常量的！任何脑洞的写法都是非法的
比如这样：
//只声明变量不赋值
const a
这样：
//重复声明变量
const a = 'a';
const a = 'b';
还有这样：
//给变量重新赋值
const a = 'a';
a = 'b'
再来个：
//不过不推荐这么干，常量常量，不变的才叫常量~
const a = {a:'a'};
//重新赋值当然是行不通的了
a = {a:'b'};
//嘿嘿嘿科技
a.a = 'b'
Object.getOwnPropertyNames()
Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。
语法
Object.getOwnPropertyNames(obj)
参数
obj
<dd style="margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px;">一个对象，其自身的可枚举和不可枚举属性的名称被返回。</dd>
返回值
在给定对象上找到的自身属性对应的字符串数组。
描述
Object.getOwnPropertyNames() 返回一个数组，该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for...in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。
示例
使用 Object.getOwnPropertyNames()
var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]
// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]
// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c
//不可枚举属性
var my_obj = Object.create({}, {
getFoo: {
value: function() { return this.foo; },
enumerable: false
}
});
my_obj.foo = 1;
console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]
如果你只要获取到可枚举属性，查看Object.keys或用for...in循环（还会获取到原型链上的可枚举属性，不过可以使用hasOwnProperty()方法过滤掉）。
下面的例子演示了该方法不会获取到原型链上的属性：
function ParentClass() {}
ParentClass.prototype.inheritedMethod = function() {};
function ChildClass() {
this.prop = 5;
this.method = function() {};
}
ChildClass.prototype = new ParentClass;
ChildClass.prototype.prototypeMethod = function() {};
console.log(
Object.getOwnPropertyNames(
new ChildClass() // ["prop", "method"]
)
);
只获取不可枚举的属性
下面的例子使用了 Array.prototype.filter() 方法，从所有的属性名数组（使用Object.getOwnPropertyNames()方法获得）中去除可枚举的属性（使用Object.keys()方法获得），剩余的属性便是不可枚举的属性了：
var target = myObject;
var enum_and_nonenum = Object.getOwnPropertyNames(target);
var enum_only = Object.keys(target);
var nonenum_only = enum_and_nonenum.filter(function(key) {
var indexInEnum = enum_only.indexOf(key);
if (indexInEnum == -1) {
// 没有发现在enum_only健集中意味着这个健是不可枚举的,
// 因此返回true 以便让它保持在过滤结果中
return true;
} else {
return false;
}
});
console.log(nonenum_only);
注：Array.filter(filt_func)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
提示
** 在 ES5 中，如果参数不是一个原始对象类型，将抛出一个 TypeError 异常。在 ES2015 中，非对象参数被强制转换为对象 。**
Object.getOwnPropertyNames('foo');
// TypeError: "foo" is not an object (ES5 code)
Object.getOwnPropertyNames('foo');
// ['length', '0', '1', '2'] (ES2015 code)
Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。
语法
Object.getOwnPropertySymbols(obj)
参数
obj
要返回 Symbol 属性的对象。
返回值
在给定对象自身上找到的所有 Symbol 属性的数组。
描述
与Object.getOwnPropertyNames()类似，您可以将给定对象的所有符号属性作为 Symbol 数组获取。 请注意，Object.getOwnPropertyNames()本身不包含对象的 Symbol 属性，只包含字符串属性。
因为所有的对象在初始化的时候不会包含任何的 Symbol，除非你在对象上赋值了 Symbol 否则Object.getOwnPropertySymbols()只会返回一个空的数组。
示例
var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");
obj[a] = "localSymbol";
obj[b] = "globalSymbol";
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2
console.log(objectSymbols) // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0]) // Symbol(a)
JavaScript中try, catch, throw的用法
程序在运行中难免遇到 bug，所以就需要好的调试手段找出问题所在，try, catch, throw 便是 JavaScript 中用来调试并对错误执行相关操作的工具，下面具体介绍其用法；
try, catch
基本语法结构：
try {
// ...
// 这里写需要调试的代码段
} catch(error) {
// ...
// 这里写要对获取的错误信息执行的操作
}
举例：
try {
// 这里故意写错函数名，为了抛出错误
console.logg('This is an error and will not display');
} catch (e) {
console.log(e); // TypeError: console.logg is not a function
console.log(e.message); // console.logg is not a function
console.log(e.name); // TypeError
console.log(e.stack); // TypeError: console.logg is not a function
}
上面的错误代码如果直接在正常环境中执行，便会直接在后台输出错误：
TypeError: console.loggg is not a function
但是使用 try, catch 结构的话，就可以获取一个包含错误信息的对象，其包含各个部分的错误信息，便于进行一些自定义操作；
throw
throw 是在上述结构中使用的一个函数，接受一个参数作为输出信息，throw 的作用是中断后面所有语句的执行，包括错误源，但是它前面的语句都会正常执行，它可以用于判断错误的具体位置，例如：
try {
console.log('This will display.');
throw('My error position.'); // throw 将会中断语句的执行
// 同样故意制造错误
console.logg('This is an error and will not display.');
// 后面是正常语句
console.log('This will not display, either.')
} catch (e) {
console.log(e);
}
如果错误发生在 throw 语句之前的话，错误便会被正常抛出，而 throw 传递的信息不会被输出，例如：
try {
console.logg('This is an error and wil not display.');
throw('My error position.');
// 后面的执行同样会被中断
console.log('This will not display, either.')
} catch(e) {
console.log(e);
}
// TypeError: console.logg is not a function.
因此，在调试过程中可以结合上面两种情况，一步步找出错误的具体位置；
JS reduce()和reduceRight()方法：对数组元素进行迭代（累加）
累加数组项的时候for和while语句通常不是最好的方法,
js提供了更好的reduce()和reduceRight()方法
reduce()方法
reduce()方法接收一个函数callbackfn作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。
语法
array.reduce(callbackfn,[initialValue])
reduce()方法接收callbackfn函数，而这个函数包含四个参数：
function callbackfn(preValue,curValue,index,array){}
-preValue: 上一次调用回调返回的值，或者是提供的初始值（initialValue）
-curValue: 数组中当前被处理的数组项
-index: 当前数组项在数组中的索引值
-array: 调用 reduce()方法的数组
而initialValue作为第一次调用 callbackfn函数的第一个参数。
reduce()方法为数组中的每一个元素依次执行回调函数callbackfn，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce() 的数组。
回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值，`curValue等于数组中的第二个值。
来看一个示例：
var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 10
示例中的回调函数被执行四次，每次参数和返回的值如下：
20200324235154.jpg
上面的示例reduce()方法没有提供initialValue初始值，接下来再上面的示例中，稍作修改，提供一个初始值，这个值为5。这个时候reduce()方法会执行五次回调，每次参数和返回的值如下：
var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
return preValue + curValue;
}, 5); //15
20200324235230.jpg
这样一来，不用多说，应该都知道，可以使用reduce()实现数组求和的功能。如：
var arr = [1,2,3,4,5,6];
Array.prototype.sum = function (){
var sumResult = 0;
return this.reduce(function (preValue, curValue) {
return sumResult = preValue + curValue;
});
return sumResult;
}
arr.sum(); // 21
回到文章的前面，来看看使用reduce()方法对数组求和，需要多少时间：
var arr = [1,2,3,4,5,6];
console.time("ruduce");
Array.prototype.ruduceSum = function (){
for (var i = 0; i < 10000; i++) {
return this.reduce (function (preValue, curValue) {
return preValue + curValue;
});
}
}
arr.ruduceSum();
console.log('最终的值：' + arr.ruduceSum()); // 21
console.timeEnd("ruduce"); // 0.417ms
同时看看所费时间的对比：
循环类型 最终值(和) 所费时间
for 21 54.965ms
while 21 53.056ms
reduce 21 0.417ms
每次执行的数据都会略有不同，但可以明显的看出reduce()对数组项求和所费时间是最短的。
reduceRight()方法
reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。
来看实例：
var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 10
回调将会被调用四次，每次调用的参数及返回值如下：
20200324235544.jpg
如果提供一个初始值initialValue为5:
var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) {
return preValue + curValue;
}, 5); // 15
回调将会被调用五次，每次调用的参数及返回的值如下：
20200324235623.jpg
同样的，可以对一个数组求和，也可以使用reduceRight()方法:
var arr = [1,2,3,4,5,6];
console.time("ruduceRight");
Array.prototype.ruduceRightSum = function (){
for (var i = 0; i < 10000; i++) {
return this.reduceRight (function (preValue, curValue) {
return preValue + curValue;
});
}
}
arr.ruduceRightSum();
console.log('最终的值：' + arr.ruduceSum()); // 21
console.timeEnd("ruduceRight"); // 5.725ms
总结
reduce()和reduceRight()两个方法功能都是类似的，可以让数组调用一个回调函数callbackfn作为累加器。实际上根据这个回调函数，可以实现不同的功能，比如说，对数组项求合；将多个数组合并到一个数组等等。
JS的Array.from
前言
Array.from：允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。
Array.from(arrayLike, mapFunction, thisArg])
- arrayLike：必传参数，想要转换成数组的伪数组对象或可迭代对象。
- mapFunction：可选参数，mapFunction(item，index){...} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
- thisArg：可选参数，执行回调函数 mapFunction 时 this 对象。这个参数很少使用。
将类数组转换成数组
Array.from() 第一个用途：将类数组对象转换成数组。平时会碰到的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。
在下面的示例中，对函数的参数求和：
function sumArguments() {
return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6
Array.from(arguments) 将类数组对象 arguments 转换成一个数组，然后使用数组的 reduce 方法求和。
此外，Array.from() 的第一个参数可以是任意一个可迭代对象：
Array.from('Hey'); // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']
const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]
克隆数组
在 JavaScript 中有很多克隆数组的方法。Array.from() 可以很容易的实现数组的浅拷贝。
const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);
numbers === numbersCopy; // => false
Array.from(numbers) 创建了对 numbers 数组的浅拷贝，numbers === numbersCopy 的结果是 false，意味着虽然 numbers 和 numbersCopy 有着相同的项，但是它们是不同的数组对象。
是否可以使用 Array.from() 创建数组的克隆，包括所有嵌套的？挑战一下！
function recursiveClone(val) {
return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}
const numbers = [[0, 1, 2], ['one', 'two', 'three']];
const numbersClone = recursiveClone(numbers);
numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false
recursiveClone() 能够对数组的深拷贝，通过判断 数组的 item 是否是一个数组，如果是数组，就继续调用 recursiveClone() 来实现了对数组的深拷贝。
你能编写一个比使用 Array.from() 递归拷贝更简短的数组深拷贝吗？如果可以的话，请写在下面的评论区。
使用值填充数组
如果需要使用相同的值来初始化数组，那么 Array.from() 将是不错的选择。定义一个函数，创建一个填充相同默认值的数组：
const length = 3;
const init = 0;
const result = Array.from({ length }, () => init);
result; // => [0, 0, 0]
result 是一个新的数组，它的长度为3，数组的每一项都是0。调用 Array.from() 方法，传入一个类数组对象 { length } 和 返回初始化值的 mapFunction 函数。
但是，有一个替代方法 array.fill() 可以实现同样的功能。
const length = 3;
const init = 0;
const result = Array(length).fill(init);
fillArray2(0, 3); // => [0, 0, 0]
fill() 使用初始值正确填充数组。
使用对象填充数组
当初始化数组的每个项都应该是一个新对象时，Array.from() 是一个更好的解决方案：
const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});
resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]
resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true
由 Array.from 返回的 resultA 使用不同空对象实例进行初始化。之所以发生这种情况是因为每次调用时，mapFunction，即此处的 () => ({}) 都会返回一个新的对象。
然后，fill() 方法创建的 resultB 使用相同的空对象实例进行初始化。不会跳过空项。
生成数字范围
可以使用 Array.from() 生成值范围。例如，下面的 range 函数生成一个数组，从0开始到 end - 1。
function range(end) {
return Array.from({ length: end }, (_, index) => index);
}
range(4); // => [0, 1, 2, 3]
在 range() 函数中，Array.from() 提供了类似数组的 {length：end} ，以及一个简单地返回当前索引的 map 函数 。这样就可以生成值范围。
数组去重
由于 Array.from() 的入参是可迭代对象，因此可以利用其与 Set 结合来实现快速从数组中删除重复项。
function unique(array) {
return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]
首先，new Set(array) 创建了一个包含数组的集合，Set 集合会删除重复项。
因为 Set 集合是可迭代的，所以可以使用 Array.from() 将其转换为一个新的数组。
这样就实现了数组去重。
网友评论