JS30 - 04 Array Cardio Day 1
效果展示
相关知识
-
Array.prototype.filter()
-
筛选出运行结果为 true 的元素，组成一个新数组返回
-
例：选出 length > 6 的 word
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] -
-
Array.prototype.map()
-
把数组中的每个元素进行处理后，返回一个新的数组
-
例：将一数组的各元素都乘以 2，返回一个新数组
const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] -
-
Array.prototype.sort()
-
对数组的元素进行排序，详见 MDN: Array.prototype.sort()
-
语法：arr.sort([compareFunction])
-
比较函数（compareFunction）格式
function compare(a, b) { if (a < b) { // 按某种排序标准进行比较, a 小于 b return -1; // a 被排列到 b 之前 } if (a > b) { return 1; // b 会被排列到 a 之前 } // a == b return 0; // a 和 b 的相对位置不变 }- 例：数字升序和降序（要比较数字而非字符串，比较函数可以简单的以 a - b）
// 从小到大，即升序 var points = [40,100,1,5,25,10]; points.sort(function(a, b){return a - b}); // console.log(points); // 输出结果：1,5,10,25,40,100 // 从大到小，即降序 var points = [40,100,1,5,25,10]; points.sort(function(a, b){return b - a}); // console.log(points); // 输出结果：100,40,25,10,5,1 -
-
Array.prototype.reduce()
-
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
-
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
-
例
-
-
Array.prototype.includes()
- 确定数组中是否包含某个值，并根据需要返回 true 或 false，案例中和 Array.prototype.filter() 配合使用
- 例
代码展示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Cardio 💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// Get your shorts on - this is an array workout!
// ## Array Cardio Day 1
// Some data we can work with
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
let list = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600);
console.table(list);
// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
let ary = inventors.map((inventor) => inventor.first + ' ' + inventor.last);
console.table(ary);
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
let bir = inventors.sort((a, b) => a.year > b.year ? 1 : a.year < b.year ? -1 : 0);
console.table(bir);
// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?
let total = inventors.reduce((total, inventor) => {
return total + inventor.passed - inventor.year
}, 0);
console.table(total);
// 5. Sort the inventors by years lived
let ages = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? 1 : (a.passed - a.year) < (b.passed - b.year) ? -1 : 0);
console.table(ages);
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
// let boulevards = Array.from(document.querySelectorAll('.mw-category a'));
// const des = boulevards.map((boulevard) => boulevard.title);
// const deShow = des.filter((de) => de.includes('de'));
// console.table(deShow);
// 7. sort Exercise
// Sort the people alphabetically by last name
let alpha = people.sort((a, b) => {
let [aLast, aFirst] = a.split(', ');
let [bLast, bFirst] = b.split(', ');
return aLast > bLast ? 1 : aLast < bLast ? -1 : 0;
});
console.table(alpha);
// 8. Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
let trans = data.reduce((obj, item) => {
if (!obj[item]) obj[item] = 0;
obj[item]++;
return obj;
}, {});
console.table(trans);
</script>
</body>
</html>
