纯手工打印调试~~~~
九种用途~~~超赞的哦~~~~~
<!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>