Array.from的9大优美用途!!!看了不后悔哦~~~~
2024-10-12 12:09:06
纯手工打印调试~~~~
九种用途~~~超赞的哦~~~~~
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="css/style.css" rel="stylesheet"> -->
</head> <body>
<script>
// 第一種用途:遍歷對象對象值進行操作
const someNumbers = {
'0': 10,
'1': 15,
length: 2
};
Array.from(someNumbers, value => value * 2);
// console.log(someNumbers);
// {0: 10, 1: 15, length: 2}
// console.log(Array.from(someNumbers, value => value * 2));
// ArrayFrom.html:14 (2) [20, 30] // 第二種用途:將類數組對象轉化為數組
// 通常,你会碰到的类数组对象有:函数中的 arguments 关键字,或者是一个 DOM 集合。
function sumArguments() {
// console.log(Array.from(arguments));
// [1,2,3,4]
return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3, 4);
// console.log(sumArguments(1,2,3,4));
// 10 // 第三種用途:克隆一個數組,实现数组的浅拷贝。
const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);
// console.log(numbers === numbersCopy);
// false // 來,讓我們搞一個數組的深拷貝
function recursiveClone(val) {
return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}
const numbers1 = [[[0, 7, 8], 1, 2], [4, 5, 6]];
const aa = numbers1;
// console.log(aa[0] === numbers1[0]); // true
const numbersClone = recursiveClone(numbers1);
// console.log(numbersClone[0][0] === numbers1[0][0]) //false //第四種用途:使用各種東西來填充數組
const length = 3;
const init4 = 0;
const result4 = Array.from({ length }, () => init4);
// console.log(result4);
// [0, 0, 0]
// console.log(Array.from({ length: 5 }, _ => 6));
// (5) [6, 6, 6, 6, 6]
// console.log(Array.from({ length: 8 }, (_, i) => i));
// [0, 1, 2, 3, 4, 5, 6, 7] // 使用對象填充數組,好處大大的哦~~ 每個都是新對象!!!
const resultA = Array.from({length: 9}, _ => ({})); // 好用不貴,經濟實惠
// console.log(resultA);
// [{}, {}, {}, {}, {}, {}, {}, {}, {}]
// console.log(resultA[0] === resultA[1]); //false
// 來來我們對比一下~~
const resultB = Array(8).fill({});
// console.log(resultB);
// [{}, {}, {}, {}, {}, {}, {}, {}]
// console.log(resultB[0] === resultB[1]); //true // 不要用map()方法,这是因为 Array(length) 创建了一个有3个空项的数组(也称为稀疏数组),但是 map() 方法会跳过空项。 // 第五種:數組去重
function unique(array) {
return Array.from(new Set(array));
}
// console.log(unique([1,1,2,2,3])); // [1, 2, 3] // 首先,new Set(array) 创建了一个包含数组的集合,Set 集合会删除重复项。
// 因为 Set 集合是可迭代的,所以可以使用 Array.from() 将其转换为一个新的数组。
// 这样,我们就实现了数组去重。 // 第六種: 從String 生成數組
// console.log(Array.from('hello'));
// ["h", "e", "l", "l", "o"] // 第七種:從Map 生成數組
const map = new Map([[1,2],[3,4]]);
Array.from(map);
const mapper = new Map([['1','a'],['2','b']]);
console.log(mapper.values()); // MapIterator {"a", "b"}
console.log(Array.from(mapper.values())); // ["a", "b"]
console.log(mapper.keys()); // MapIterator {"1", "2"}
console.log(Array.from(mapper.keys()));// ["1", "2"] // 第八種: 序列產生工具,可以根據自定義規則產生序列
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
const arr8 = range(0, 30, 3)
console.log(arr8);
// [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30] // 使用Array.from将其作为序列排序,生成字母表
const arrCode = range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1);
console.log(arrCode);
// [65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90]
const arrCode1 = arrCode.map(_ => String.fromCharCode(_));
console.log(arrCode1);
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] // 第九種:數組去重合併
function combine() {
let arr = [].concat.apply([], arguments); //這個是沒有去重的新數組
return Array.from(new Set(arr));
}
var arr9 = [1,2,2,3,3], arr91 = [5,5,8,8,9,7];
console.log(combine(arr9, arr91));
// [1, 2, 3, 5, 8, 9, 7]
</script>
</body> </html>
最新文章
- 《深入理解Java虚拟机》虚拟机性能监控与故障处理工具
- SqlServer导入数据到MySql
- 既使用maven又使用本地Jar包
- [BZOJ]1016 JSOI2008 最小生成树计数
- jquery 取的单选按钮组的值
- zendstudio正则匹配查询
- this computer does not support Intel Virtualization Technology (VT-x) .Haxm can&#39;not be installed
- Linux下is not in the sudoers file(转)
- sqlserver 更改跟踪相关知识
- 树型权限管理插件:jQuery Tree Multiselect详细使用指南
- [UOJ]#36. 【清华集训2014】玛里苟斯
- Django入门之路
- BZOJ5507 GXOI/GZOI2019旧词 (树链剖分+线段树)
- cmdb部署
- Java技术学习之影响MySQL性能的配置参数
- React-router4 简单总结
- P3760 [TJOI2017]异或和
- 集齐所有机制的按键控制LED驱动
- RTP协议全解析(H264码流和PS流)
- [UE4]缓存选项 Is volatile