Data Processing
資料處理
下列程式碼簡介
filter 用法,It get a function to do something
map 用法,It get an array and output an array, the array.length will NOT change
sort 用法
reduce 用法
加減數字後,再排序
處理字串後(split),再排序
reduce:計算各項目出現的次數,實用必看
// Source: https://github.com/wesbos/JavaScript30 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() // Me: It get a function to do something. // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); console.table(fifteen); /* Before Optimization const fifteen = invertors.filter(function(inventor) { if(inventor.year >= 1500 && inventor.year < 1600) return true; }); //And it no need to "else return false" */ // Array.prototype.map() // Me: It get an array and output an array, the array.length will NOT change. // 2. Give us an array of the inventor first and last names const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); console.log(fullNames); /* Before Optimazation const fullNames = inventors.map(inventor => inventors.frst + ' ' + inventor.last); */ // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest // const ordered = inventors.sort(function(a, b) { // if(a.year > b.year) { // return 1; // } else { // return -1; // } // }); const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? const totalYears = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year); }, 0); // 0 is for set total from a UNDEFINED to a number. console.log(totalYears); /* The Old days without reduce var totalYears = 0; for (var i = 0; i < inventors.length; i++) { totalYears += inventors[i].passed - inventors[i].year; } */ // 5. Sort the inventors by years lived const oldest = inventors.sort(function(a, b) { const lastInventor = a.passed - a.year; const nextInventor = b.passed - b.year; return lastInventor > nextInventor ? -1 : 1; }); console.table(oldest); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris // const category = document.querySelector('.mw-category'); // Change a NodeList to an Array!! // Also can: const links = [...category.querySelectorAll('a')]; // const links = Array.from(category.querySelectorAll('a')); // const de = links // .map(link => link.textContent) // .filter(streetName => streetName.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name const alpha = people.sort((lastOne, nextOne) => { const [aLast, aFirst] = lastOne.split(', '); const [bLast, bFirst] = nextOne.split(', '); return aLast > bLast ? 1 : -1; }); console.log(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', 'pogostick']; const transportation = data.reduce(function(obj, item) { if (!obj[item]) { obj[item] = 0; // Set the initial value. } obj[item]++; return obj; }, {}); // Start with a empty object. console.log(transportation);
下列程式碼簡介
some 的用法
find 的用法
findIndex 的用法
.splice(index, 1):刪除 array 的某一項
Redux 刪除 array 的某一項的作法
// Source: https://github.com/wesbos/JavaScript30 const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 }, ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nice Nice!', id: 542328 } ]; // Some and Every Checks // Array.prototype.some() // is at least one person 19? // const isAdult = people.some(function(person) { // const currentYear = (new Date()).getFullYear(); // if(currentYear - person.year >= 19) { // return true; // } // }); const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); console.log({isAdult}); // curly brackets 只是讓它變成 Object 而已,沒啥特別意思 // Array.prototype.every() // is everyone 19? const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); console.log({allAdults}); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // 很像 filter,但 filter 回傳的是 array 的 subset,find 回傳的是找到的第一項 // find the comment with the ID of 823423 // const comment = commnets.find(function(commnet){ // if (comment.id === '823423'){ // return true; // } // }); const comment = comments.find(comment => comment.id === 823423); console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 const index = comments.findIndex(comment => comment.id === 823423); console.log(index); // comments.splice(index, 1); 刪除 array 的某一項 // Redux 的作法,複製一個新的。記得要 ... spread 才會是預期中的 array const newComments = [ ...comments.slice(0, index), ...comments.slice(index + 1) ];
下列程式碼簡介
多種複製 Array 與 Object 的方式,實用必看
// Source: https://github.com/wesbos/JavaScript30 // start with strings, numbers and booleans // let age = 100; // let age2 = age; // console.log(age, age2); // 100, 100 // age = 200; // console.log(age, age2); // 200, 100 // let name = 'Wes'; // let name2 = name; // console.log(name, name2); // Wes, Wes // name = 'wesley'; // console.log(name, name2); // wesley, Wes // Let's say we have an array const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; // and we want to make a copy of it. const team = players; console.log(players, team); // You might think we can just do something like this: // team[3] = 'Lux'; // however what happens when we update that array? // now here is the problem! // oh no - we have edited the original array too! // Why? It's because that is an array reference, not an array copy. They both point to the same array! // 因為 Array 的複製不是你想像的複製,它只是 reference 到同一個東西 // 所以你改了你新增的變數,會直接改到原始的變數! // 替代的 copy 方法如下~ // So, how do we fix this? We take a copy instead! const team2 = players.slice(); // 方法一 // one day // or create a new array and concat the old one in const team3 = [].concat(players); // 方法二 // or use the new ES6 Spread const team4 = [...players]; // 方法三:ES6 作法 作者prefer team4[3] = 'heeee hawww'; console.log(team4); const team5 = Array.from(players); // 方法四:(有點記不起來)作者prefer // now when we update it, the original one isn't changed // The same thing goes for objects, let's say we have a person object // with Objects const person = { name: 'Wes Bos', age: 80 }; // and think we make a copy: // const captain = person; // captain.number = 99; // how do we take a copy instead? const cap2 = Object.assign({}, person, { number: 99, age: 12 }); // 方法一 console.log(cap2); // We will hopefully soon see the object ...spread // const cap3 = {...person}; // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it. const wes = { name: 'Wes', age: 100, social: { twitter: '@wesbos', facebook: 'wesbos.developer' } }; console.clear(); console.log(wes); const dev = Object.assign({}, wes); // 提醒:.assign 的複製只有一層! // 所以改了 dev.social.twitter = ooxx 的話, // 會改到原本的 wes Object const dev2 = JSON.parse(JSON.stringify(wes)); // 窮人的 deep clone。 作者不喜歡這作法~
Last updated