整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
要： 本篇文章教你如何使用JavaScript在瀏覽器中完整地定義、訓練和部署機器學習算法。
雖然它可能不是機器學習傳統選擇的開發語言，但是JavaScript正在證明有能力完成這樣的工作——即使它目前還不能與主要的機器學習語言Python競爭。在進一步學習之前，讓我們做一下機器學習的介紹。
根據Skyhoshi這個有著超過13年開發人員的實際經驗，機器學習賦予計算機根據所提供的數據進行學習的能力，并且識別模式，然后得出結論，而不需要明確的人為干預。
從傳統上來說，JavaScript在機器學習中不常用，有以下兩個主要的原因，包括有限的庫支持和實現的復雜性。
雖然如此，JavaScript最近已經頗歡迎了，主要是因為在客戶端上有完整的部署機器學習應用的廣泛機會。
在這篇文章中，我將演示一個簡單的機器學習輔導項目，它展示了JavaScript也能夠為機器學習應用提供動力。
對于這個相對簡單的項目，我將使用Neal.js程序文件，它是一個簡便的開源JavaScript庫，它為機器學習提供了預處理的神經網絡。
該項目的目的是用一組訓練數據來訓練一個神經網絡，使得它可以預測顏色的對比是亮的還是暗的。
第一步：安裝庫
讓我們使用NoDE.js這個文件，并通過NPM包管理器來安裝庫。為此，你需要在計算機上預先安裝No.js文件。
這里是你可以用在終端上運行的代碼。（切記把它安裝在你要處理的文件夾上）
npm install brain.js
第二步: 導入庫
使用以下代碼在你的文件上導入庫:
const brain = require("brain.js");
第三步:創建一個神經網絡
以下是代碼:
const network = new brain.NeuralNetwork();
第四步:訓練數據
在機器學習之中，訓練的數據和收到的結果一樣好。更高質量的數據可能比較低質量的數據預測出更好的結果。
該數據是一組示例，它被提供給算法并“指導”算法要搜索什么東西。
在這個例子中，由于我們希望這個機器學習算法學會識別光亮和黑暗之間顏色對比的差異，所以我們將給出這些例子來訓練學習模型。
在這之后，該算法將利用所提供的實例來辨別兩個組之間的本質特征。
如果在將來提供了未知的數據，那么這個算法將根據從原始訓練模型中識別出來的特征進行分類。
對于這個項目，我們將使用內置的brain.js程序文件中的train()函數來使用實例數據的數組來訓練神經網絡。
每個實例中的訓練數據都將有一個輸入對象和一個輸出對象，它們都應該是一個從0到1的數組。
因為我們正在使用顏色來進行研究，因此我們要去找到它們的RGB值。由于RGB顏色介于0和255之間，所以我們可以將它們轉換為被255相除的0到1之間的值。
舉個例子，如果顏色的RGB值為（158,183,224），我們通過除以255來轉換每個值，它將變成（0.62，0.72，0.88）。
在這之后，我們需要提供RGB值的一些示例數據集，并指定輸出將是亮的還是暗的。
以下是代碼:
network.train([
{input: {r:0.62,g:0.72,b:0.88}, output:{light: 1}},
{input: {r:0.1,g:0.84,b:0.72}, output:{light: 1}},
{input: {r:0.33,g:0.24,b:0.29}, output:{dark: 1}},
{input: {r:0.74,g:0.78,b:0.86}, output:{light: 1}},
]);
第五步: 查看結果
在用一些實例數據進行訓練算法之后，現在是查看預測結果的時候了。
我們只需調用Run（）函數，并提供一個顏色色調的參數，目的是想知道它是亮的還是暗的。
以下是代碼:
const result = network.run({r:0.0,g:1,b:0.65});
console.log(result);
如果我們在Windows終端上執行以上代碼，輸出將是這樣的:
正如你所看到的，我們給初學者的機器學習算法預測到顏色對比度是亮色的，準確度為0.97（97%）。
如果我們希望輸出是亮的或者是暗的，那么可以添加下面的代碼:
const result = brain.likely({r:0.0,g:1,b:0.65}, network);
console.log(result);
以下終端上的顯示結果：
結論：
以下是整個項目的代碼:
const brain = require("brain.js");
const network = new brain.NeuralNetwork();
network.train([
{input: {r:0.62,g:0.72,b:0.88}, output:{light: 1}},
{input: {r:0.1,g:0.84,b:0.72}, output:{light: 1}},
{input: {r:0.33,g:0.24,b:0.29}, output:{dark: 1}},
{input: {r:0.74,g:0.78,b:0.86}, output:{light: 1}},
]);
//const result = network.run({r:0.0,g:1,b:0.65});
const result = brain.likely({r:0.0,g:1,b:0.65}, network);
console.log(result);
在這篇文章中，我演示了一個簡單的關于JavaScript的機器學習項目。為了提高你的機器學習技能，你當然也需要完成類似的項目。
阿里云云棲社區組織翻譯。
作者： Alberto Artasanchez
譯者：奧特曼，審校：袁虎。
JSS是CSS的創作工具，它允許你使用JavaScript以聲明，無沖突和可重用的方式描述樣式。它可以在瀏覽器，服務器端或在構建時在Node中編譯。JSS與框架無關。它由多個包組成：核心部分，插件以及框架集成等。
https://github.com/cssinjs/jss stars:5.1k
如果你已經對使用JSS感興趣，可以使用在線代碼編輯器。在CodeSandbox（一個非常實用的在線編輯器，可以用來學習各種編程技能）上嘗試Hello World示例。以下是三種不同框架下的用法（代碼圖片生成自carbon網站）：
JSS生成實際的CSS，而不是內聯樣式。它支持每個現有的CSS功能。CSS規則只創建一次，并使用其類名與元素重復使用，與內聯樣式相反。此外，當DOM元素更新時，將應用先前創建的CSS規則。
JSS默認生成唯一的類名。它允許避免典型的CSS問題，默認情況下一切都是全局的。它完全消除了命名約定的需要。
使用JavaScript作為宿主語言使我們有機會以常規CSS無法實現的方式重用CSS規則。您可以利用JavaScript模塊，變量，函數，數學運算等。如果做得好，它仍然可以完全聲明。
CSS規則的明確使用允許您跟蹤消費者并確定是否可以安全地刪除或修改它。
使用JavaScript函數和Observable可以在瀏覽器中動態生成樣式，使有機會訪問應用程序狀態，瀏覽器API或遠程數據以進行樣式設置。你不僅可以定義一次樣式，還可以在任何時間點以有效的方式更新樣式。
JSS可以高效地處理CSS更新，可以使用它創建復雜的動畫。使用函數值，Observables并將它們與CSS過渡相結合，可以為用戶控制的動畫提供最大的性能。對于預定義的動畫，使用@keyframes和transition更好，因為它們將完全取消阻止JavaScript線程。
要優化第一次繪制的時間，你可以使用服務器端渲染并提取關鍵CSS。可以將CSS的呈現與HTML的呈現結合起來，這樣就不會生成未使用的CSS。它將導致在服務器端呈現期間提取的最小關鍵CSS，并允許內聯它。
JSS核心實現了基于插件的架構。它允許您創建可以實現自定義語法或其他強大功能的自定義插件。JSS有許多官方插件，可以單獨安裝或使用默認預設。社區插件的一個很好的例子是jss-rtl。
由于各種插件，JSS允許您使用現有的全局類名來嵌套，全局選擇器和組合。例如，允許您以比CSS更可讀的方式表達屬性。如果要直接從瀏覽器開發工具復制粘貼樣式，也可以使用模板字符串。jss-plugin-expandbox-shadow
另一個有用的插件示例是，它允許您完全隔離元素與全局級聯規則，并可能覆蓋不需要的屬性。在創建應該在第三方文檔內部呈現的窗口小部件時尤其有用。jss-plugin-isolate
React-JSS包提供了一些額外的功能：
CSS不需要額外的構建管道配置。無論你選擇構建JavaScript的工具是什么，它都可以與JSS一起使用。
yarn add jss
yarn add jss-preset-default //使用默認設置
import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 創造你的style.
const style = {
myButton: {
color: 'green'
}
}
//編譯樣式，應用插件。
const sheet = jss.createStyleSheet(style)
//如果要在客戶端上呈現，請將其插入DOM。
sheet.attach()
//如果要渲染服務器端，請獲取CSS文本。
sheet.toString()
import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'
//使用插件。
jss.use(camelCase(), somePlugin())
// Create your style.
const style = {
myButton: {
color: 'green'
}
}
//編譯樣式，應用插件。
const sheet = jss.createStyleSheet(style)
// 如果要在客戶端上呈現，請將其插入DOM
sheet.attach()
// 如果要渲染服務器端，請獲取CSS文本。
sheet.toString()
<head> <title>JSS</title> <!-- 自定義插入點 --> </head>
import jss from 'jss'
jss.setup({insertionPoint: 'custom-insertion-point'})
<head> <title>JSS in body</title> </head> <body> <div id="insertion-point"> 這可能是你選擇的任何DOM節點，可以作為插入點。 </div> </body
import jss from 'jss'
jss.setup({
insertionPoint: document.getElementById('insertion-point')
})
通過兩張圖片來體驗：
JSS的功能是十分強大的，不僅僅讓寫css的方式放到了JavaScript，這樣對更加喜愛編寫javascript的小伙伴來說是值得嘗試的，而且還支持服務器端渲染等更多高級的特性，前端技術百花齊放，但目前仍然不變的是掌握JavaScript者得天下的時代！
于初學者，JavaScript 有哪些不為人知卻非常有用的技巧呢？在本文中，我們將一同為大家解密與分享。
作者 | Duomly
譯者 | 彎月，責編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
數組是Javascript中最常見的概念，我們有很多辦法來處理數組中的數據。考慮到數組是Javascript中最基本的概念之一，是初學者剛剛接觸編程時就學習的概念，我想通過本文介紹一些不為人知卻非常有用的技巧。我們開始吧！
從數組中刪除重復
在有關Javascript數組的面試問題中，有一個問題很常見：怎樣從Javascript數組中提取不重復的值。我有一個快捷簡便的方法：只需使用new Set即可。實現的方法有兩種：一種使用.from，另一種使用擴展運算符（...）：
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];很容易，是不是？
替換數組中指定的值
在編程時，有時候需要替換某個特定的值，有個非常簡單的方法來實現這一點。只需使用.split(start, 要刪除的值，要添加的值)，然后設置好三個參數，指明希望從哪里修改、要修改幾個值，以及新的值是什么。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]
不使用.map實現映射
大概所有人都知道數組的.map方法，但還有另一個方法，可以用同樣簡潔的方式實現類似的效果。這種方法就是.from：
var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]
var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]
清空數組
如果想把一個數組清空，但不想一個個刪除其中的元素，該怎么辦？其實只需一行代碼即可：將length設置為0。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits); // returns
將數組轉化為對象
如果有一個數組，我們希望將其數據放到一個對象中，那么最快的方式就是使用擴展運算符（...）：
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
用數據填充數組
有時候需要創建一個數組并用數據填充，或者需要一個所有值都相同的數組，此時可以使用.fill方法簡潔明快地實現：
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
合并數組
你知道怎樣可以不使用.concat來合并數組嗎？最簡單的方法只需要一行代碼。你也許猜到了，那就是擴展運算符（...），它非常適合處理數組：
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
求兩個數組的交集
這也是Javascript面試中最常遇到的問題，因為它能展示出你是否會使用數組方法，以及邏輯如何。要找出兩個數組的交集，只需要使用之前使用的技巧，首先保證數組中的值不重復，然后利用.filter和.includes方法即可。這樣就能找出同時出現在兩個數組中的元素。代碼如下：
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]
從數組中刪除假值
首先我們來定義假值。在Javascript中，假值包括false、0、''、、NaN、undefined。現在可以考慮怎樣從數組中刪除假值了。只需使用.filter方法即可實現：
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]
從數組中獲取隨機值
有時候需要從數組中隨機選擇一個值。簡單、快捷、簡短且干凈的方式就是在數組長度的范圍內生成一個隨機的索引。代碼如下：
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]反轉數組
需要反轉數組時，我們不需要使用復雜的循環和函數來重新創建數組，因為有一個簡單的數組方法可以為我們做這件事，只需一行代碼，就能反轉數組。代碼如下：
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse;
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]
.lastIndexOf方法
Javascript中有一個有趣的方法，可以讓我們找出指定元素最后出現的位置。例如，如果數組中有重復元素，那么可以找出該元素最后出現的位置。代碼如下：
var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9
對數組中的所有值求和
另一個Javascript工程師面試中常見的問題就是對數組中的所有元素求和。這個完全不需要害怕，只需使用.reduce方法，一行代碼就可以實現。代碼如下：
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14總結
本文向你展示了13個編程技巧，可以保持代碼簡短整潔。同時別忘了，Javascript中還有許多不同的技巧值得探索，不僅是有關數組的技巧，也包括許多其他的數據類型。希望你喜歡本文的技巧，并能利用這些技巧改善開發流程。
原文：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo
本文為 CSDN 翻譯，轉載請注明來源出處。
【END】
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
