整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
要： 本篇文章教你如何使用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小时内与您取得联系。
