11 个JavaScript专业技巧，让你成为更好的开发者

佚名 2023-03-28 原文

如果您想提高 JavaScript 技能并成为更好的开发人员，那么本文适合您。本文将教您 11 个专业技巧，帮助您编写更好的 JavaScript 代码，你还在等什么？一起来学习吧。

1. 使用 XOR 运算符比较数字

按位异或运算符 (^) 对两个操作数执行按位异或运算。这意味着如果位不同则返回 1，如果相同则返回 0。

const a = 1337;
const b = 69;


// nooby
a !== 69 ? console.log('Unequal') : console.log("Equal");  // Unequal
b !== 69 ? console.log('Unequal') : console.log("Equal");  // Equal


// pro
a ^ 69 ? console.log('Unequal') : console.log("Equal");    // Unequal
b ^ 69 ? console.log('Unequal') : console.log("Equal");    // Equal

2. 用数据即时创建和填充数组

// nooby
const array = new Array(3);
for(let i=0; i < array.length; i++){
    array[i] = i;
}


console.log(array)  // [ 0, 1, 2 ]


// pro
const filledArray = new Array(3).fill(null).map((_, i)=> (i));
console.log(filledArray)  // [ 0, 1, 2 ]

3. 使用对象中的动态属性

// nooby
let propertyName = "body";
let paragraph = {
    id: 1,
};
paragraph[propertyName] = "other stringy";
// { id: 1, body: 'other stringy' }
console.log(paragraph)


// pro
let propertyName = "body";
let paragraph = {
    id: 1,
    [propertyName] : "other stringy"
};
// { id: 1, body: 'other stringy' }
console.log(paragraph)

4. 轻松消除数组中的重复值

您可以使用集合消除数组中的重复值。

// nooby
let answers = [7, 13, 31, 13, 31, 7, 42];
let leftAnswers = [];
let flag = false;
for (i = 0; i< answers.length; i++) {
    for (j = 0; j < leftAnswers.length; j++) {
        if (answers[i] === leftAnswers[j]) {
            flag = true;
        }
    }
    if (flag === false) {
        leftAnswers.push(answers[i]);
    }
    flag = false;
}
//[ 7, 13, 31, 42 ]
console.log(leftAnswers)




// pro
let answers = [7, 13, 31, 13, 31, 7, 42];
let leftAnswers = Array.from(new Set(answers));
// [ 7, 13, 31, 42 ]
console.log(leftAnswers)

5. 轻松地将对象转换为数组

您可以使用展开运算符将数组转换为对象。

// nooby
let arr = ["v1", "v2", "v3"];
let objFromArray = {};


for (let i = 0; i < arr.length; ++i) {
    if (arr[i] !== undefined) {
        objFromArray[i] = arr[i];
    }
}


// { '0': 'v1', '1': 'v2', '2': 'v3' }
console.log(objFromArray)


// pro
let objFromArrayPro = {...arr};


// { '0': 'v1', '1': 'v2', '2': 'v3' }
console.log(objFromArrayPro)

6. 使用逻辑运算符进行短路评估

您可以使用逻辑运算符进行短路评估，方法是使用 && 运算符返回表达式链中的第一个假值或最后一个真值，或者使用 || 运算符返回表达式链中的第一个真值或最后一个假值。

const dogs = true;


// nooby
if (dogs) {
    runAway();
}


// pro
dogs && runAway()


function runAway(){
    console.log('You run!');
}

7. 对象键维护它们的插入顺序

对象键通过遵循一个简单的规则来维护它们的插入顺序：类整数键按数字升序排序，而非类整数键根据它们的创建时间排序。

const character = {
    name: "Arthas",
    age: 27,
    class: "Paladin",
    profession: "Lichking",
};


// name age class profession
console.log(Object.keys(character));

8. 创建并填充指定大小的数组

您可以使用带有两个参数的 Array() 构造函数来创建和填充指定大小和值的数组：大小和值，或者对空数组使用 Array.fill() 方法。

// nooby
const size = 5;
const defaultValue = 0;
const arr = []
for(let i = 0; i < size; i++){
    arr.push(defaultValue)
}
console.log(arr);


// pro
const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]

9. 理解 JavaScript 中的 Truthy 和 Falsy 值

在布尔上下文中使用时，Truthy 和 Falsy 值会隐式转换为 true 或 false。

虚假值 => false, 0, ""(空字符串), null, undefined, &NaN

真值 => "Values", "0", {}（空对象），&[]（空数组）

// pro
if(![].length){
    console.log("There is no Array...");
} else {
    console.log("There is an Array, Hooray!");
}


if(!""){
    console.log("There is no content in this string...");
} else {
    console.log("There is content in this string, Hooray!");
}

10. 用更好的参数改进函数

不要使用单个多个参数，而是使用参数对象。在函数定义中解构它以获得所需的属性。

// nooby
function upload(user, resourceId, auth, files) {}


upload(...); // need to remember the order


// pro
function upload(
    { user, resourceId, auth, files } = {}
) {}


const uploadObj = {
    user: 'me',
    resourceId: uuid(),
    auth: 'token',
    files: []
}


upload(uploadObj);

11. Null 和 Undefined 在 JavaScript 中是不同的

Null 和 undefined 是两个不同的值，表示没有值。

null => 是的，这是一个值。Undefined 不是
将 null 想象成在一个空盒子前面
把 undefined 想象成在没有盒子的前面

const fnExpression = (s = 'default stringy') => console.log(s);


fnExpression(undefined); // default stringy
fnExpression(); // default stringy


fnExpression(null); // null

总结

以上就是我今天想与您分享的11个关于JavaScript的专业技巧，希望您能从中学到新东西。

JavaScript 技巧 span style color 开发$前端 JavaScrip$开发$技巧

有关11 个JavaScript专业技巧，让你成为更好的开发者的更多相关文章

ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？最佳答案设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
ruby-on-rails - 更好的替代方法 try( :output). try( :data). try( :name)? - 2
“输出”是一个序列化的OpenStruct。定义标题try(:output).try(:data).try(:title)结束什么会更好？:) 最佳答案或者只是这样:deftitleoutput.data.titlerescuenilend 关于ruby-on-rails-更好的替代方法try(:output).try(:data).try(:name)?，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c
ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2
这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？最佳答案我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
ruby-on-rails - 使用 ruby 将多个实例变量转换为散列的更好方法？ - 2
我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
ruby - 安装libv8(3.11.8.13)出错，Bundler无法继续 - 2
运行bundleinstall后出现此错误:Gem::Package::FormatError:nometadatafoundin/Users/jeanosorio/.rvm/gems/ruby-1.9.3-p286/cache/libv8-3.11.8.13-x86_64-darwin-12.gemAnerroroccurredwhileinstallinglibv8(3.11.8.13),andBundlercannotcontinue.Makesurethat`geminstalllibv8-v'3.11.8.13'`succeedsbeforebundling.我试试gemin