这是该系列的第25篇笔记！
让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2 Array.from()</title>
</head>
<body>
<p>123</p>
<p>4576</p>
<p>7879</p>
<script type="text/javascript">
// Array.from()方法將2类对象转为真正的数组：类似数组的对象和可遍历的对象（iterable）
// (1)
// 一个类似数组的对象 --> 数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5
var arr1 = [].slice.call(arrayLike);
// console.log(arr1);
// ES6
let arr2 = Array.from(arrayLike);
// console.log(arr2);
// 实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部arguments对象，Array.from()都可以将他们转为真正的数组
// // NodeList对象
// let ps = document.querySelectorAll('p');
// console.log(ps);
// Array.from(ps).forEach(function(p){
// console.log(p);
// });
// arguments对象
// function foo(){
// var args = Array.from(arguments);
// console.log(args);
// }
// foo(12, 32, 'a', 89, ['a', 'dd', 'c']);
// (2) 只要是部署了Iterator接口的数据结构，Array.from()会都可以将其转为数组
// console.log(Array.from('hello world'));
// let namesSet = new Set(['a', 'b']);
// console.log(Array.from(namesSet) );
// (3) 如果参数是一个真正的数组，Array.from()会返回一个“长得一样”的新数组（但不是相同的数组）
// var arr = Array.from([1, 3, 5]);
// console.log(arr);
// console.log(arr == [1, 3, 5]);
// (4) 扩展运算符（...）也可以将某些数据结构（如arguments对象和NodeList对象）转为数组
// 扩展运算符背后调用的是遍历器接口(Symbol.iterator)，如果一个对象没有部署该接口，就无法转换
// Array.from()方法还支持“类似数组的对象”（必须有length属性的对象），
// 任何具有length属性的对象，都可以通过Array.from()方法转为数组，而扩展运算符无法实现
var arr12 = Array.from({
name: 'kai',
age: 232,
gender: 'male',
length: 3
});
console.log(arr12); // [undefined, undefined, undefined]
// 上面这段代码，Array.from返回了一个具有3个成员的数组，每个位置的值都是undefined，扩展运算符没法转换这个对象
// 对于没有部署该方法(Array.from)的浏览器，可以使用Array.prototype.slice方法替换
const toArray = (() => Array.from? Array.from: obj => [].slice.call(obj))();
// (5) Array.from还可以接收第二个参数(mapFunction，一个函数)，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
// Array.from(arrayLike, x => x * ｘ);
// // 等同于
// Array.from(arrayLike).map(x => x * ｘ);
console.log(Array.from([1, 2, 4], x => x * x ));
// 例子1：将数组中的布尔值为false的成员转为0
console.log(Array.from([1, , 2, , 4], x => x || 0 )); // [1, 0, 2, 0, 4]
// 例子2：返回各种数据的类型
function typeOf(){
return Array.from(arguments, value => typeof value);
}
console.log(typeOf(null, [], NaN)); // ["object", "object", "number"]
// 如果mao函数里边使用了而this，还可以传入Array.from()第三个参数，用来绑定this【比较少用】
// (6) 将字符串转为数组，然后返回字符串的长度 --> 可以正确地处理各种Unicode字符
function countSymbols(str){
return Array.from(str).length;
}
// 【总结】
// Array.from()可以将各种值转为真正的数组，并且提供map功能
// --> 只要有一个原始的数据结构，就可以先对他的值进行处理，然后转成规范的数组结构，进而使用数组的方法
console.log(Array.from({length: 2}, (x) => 'jack')); // ["jack", "jack"]
console.log([1, 2, 3].map(function(x ){
return x + 'kai';
}));
</script>
</body>
</html>
2099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
