JavaScript 开发者常用的 10 个技巧-tutorial js-php.cn

Jadual Kandungan

函数参数验证器" >函数参数验证器

格式化 JSON 代码" >格式化 JSON 代码

对数组去重" >对数组去重

去除数组中的 Boolean(v) 为 false 的值" >去除数组中的 Boolean(v) 为 false 的值

同时合并多个对象" >同时合并多个对象

对数字数组排序" >对数字数组排序

禁用右键" >禁用右键

解构时重命名" >解构时重命名

获取数组中的最后一项" >获取数组中的最后一项

等待 Promises 全部执行完成" >等待 Promises 全部执行完成

Rumah

hujung hadapan web

tutorial js

JavaScript 开发者常用的 10 个技巧

Guanhui

Jun 16, 2020 pm 05:35 PM

javascript js

JavaScript 开发者常用的 10 个技巧

我们知道，JavaScript 这门语言正在高速发展中。伴随着 ES2020，又有很多很棒的功能加入。老实说，您可以通过许多不同的方式编写代码。实现同样一个功能，有的代码很长而有的却很短。你可以通过一些小技巧来让你的代码更干净清晰。下面这些小技巧肯定对你接下来的开发工作有所用处。

函数参数验证器

JavaScript 允许你对函数参数设置默认值。通过这个特性，我们可以实现一个小技巧来验证函数参数。

const isRequired = () => { throw new Error(&#39;param is required&#39;); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2print(); // errorprint(null); //printing null

Salin selepas log masuk

格式化 JSON 代码

你肯定对 JSON.stringify 非常熟悉了，但是你知道吗，你也可以通过 stringify 方法格式化你的代码。其实这很简单。

stringify 方法有三个参数，分别是 value replacer 和 space。后面两个参数是可选的，所以我们平常也不会用到它们。想要缩进输出的代码，我们可以使用2个空格，或者4个空格。

console.log(JSON.stringify({ name:"John", Age:23 }, null, &#39;  &#39;));
>>> 
{  "name": "John",  "Age": 23}

Salin selepas log masuk

对数组去重

以往对数组去重我们会使用 filter 函数来过滤掉重复的值。但是现在我们可以使用新的 Set 特性来过滤。非常简单：

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", &#39;ball&#39;, false, false, true, true])];
>>> [1, 2, 3, "school", "ball", false, true]

Salin selepas log masuk

去除数组中的 Boolean(v) 为 false 的值

有时候你想删除数组中 Boolean(v) 为 false 的值。在 JavaScript 中只有以下 6 种：

undefined
null
NaN
0
空字符串
false

去除这些值最简单的办法是使用下面的方法：

array.filter(Boolean)

Salin selepas log masuk

如果你想先做一些更改然后再过滤，你可以用下面的方法。要记住，原始数组 array 是一直没变的，返回的是一个新数组。

array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);

Salin selepas log masuk

同时合并多个对象

如果需要同时合并多个对象或者类，可以用下面这种方法。

const user = {  name: "John Ludwig",  gender: "Male",
};const college = {  primary: "Mani Primary School",  secondary: "Lass Secondary School",
};const skills = {  programming: "Extreme",  swimming: "Average",  sleeping: "Pro",
};const summary = { ...user, ...college, ...skills };

>>>
{  name: &#39;John Ludwig&#39;,  gender: &#39;Male&#39;,  primary: &#39;Mani Primary School&#39;,  secondary: &#39;Lass Secondary School&#39;,  programming: &#39;Extreme&#39;,  swimming: &#39;Average&#39;,  sleeping: &#39;Pro&#39;}

Salin selepas log masuk

三个点也叫扩展操作符。

对数字数组排序

JavaScript 数组有一个原生的排序方法 arr.sort。这个排序方法默认把数组元素转换成字符串，并对其进行字典序排序。这个默认行为会在排序数字数组时出现问题，所以下面有一个办法来处理这个问题。

[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]

[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

Salin selepas log masuk

禁用右键

有时候你可能想要禁止用户点击右键。虽然这个需求很少见，但是可能派的上用场。

<body oncontextmenu="return false">
  <p></p>
  </body>

Salin selepas log masuk

这个简单的代码片段就可以禁止用户点击右键了。

解构时重命名

解构赋值是 JavaScript 的一个特性，它允许直接从数组或者对象中获取值，而不需要繁琐的声明变量再赋值。对对象来讲，我们可以通过下面这种方式来给属性名重新定义一个名字。

const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10

Salin selepas log masuk

获取数组中的最后一项

如果你想获取数组中的最后一项，你可以使用 slice 函数，同时带上一个负数作为参数。

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]console.log(array.slice(-2));
>>>[6, 7]console.log(array.slice(-3));
>>>[5, 6, 7]

Salin selepas log masuk

等待 Promises 全部执行完成

有时候你可能需要等待几个 promise 都执行完然后进行后面的操作。你可以使用 Promise.all 来并行执行这些 promise。

const PromiseArray = [    Promise.resolve(100),    Promise.reject(null),    Promise.resolve("Data release"),    Promise.reject(new Error(&#39;Something went wrong&#39;))];Promise.all(PromiseArray)
  .then(data => console.log(&#39;all resolved! here are the resolve values:&#39;, data))
  .catch(err => console.log(&#39;got rejected! reason:&#39;, err))

Salin selepas log masuk

要注意，只要 Promise.all 中有一个是 rejected 状态时，其会立即停止执行并抛出异常。

如果你想忽略 resolved 或者 rejected 状态，你可以使用 Promise.allSettled。这个是 ES2020 的一个新特性。

const PromiseArray = [  Promise.resolve(100),  Promise.reject(null),  Promise.resolve("Data release"),  Promise.reject(new Error("Something went wrong")),
];Promise.allSettled(PromiseArray)
  .then((res) => {    console.log("here", res);
  })
  .catch((err) => console.log(err));
>>>
here [
  { status: &#39;fulfilled&#39;, value: 100 },
  { status: &#39;rejected&#39;, reason: null },
  { status: &#39;fulfilled&#39;, value: &#39;Data release&#39; },
  {    status: &#39;rejected&#39;,    reason: Error: Something went wrong
        at Object.<anonymous> 
        at Module._compile (internal/modules/cjs/loader.js:1200:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
        at Module.load (internal/modules/cjs/loader.js:1049:32)
        at Function.Module._load (internal/modules/cjs/loader.js:937:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47
  }
]

Salin selepas log masuk

推荐教程：《JS教程》

Atas ialah kandungan terperinci JavaScript 开发者常用的 10 个技巧. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Arahan sembang dan cara menggunakannya

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7536

Tutorial CakePHP

1379

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 pm 02:54 PM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Pelajari langkah-langkah untuk melukis carta lilin dalam PHP dan JS, contoh kod khusus diperlukan Dengan perkembangan pesat Internet dan teknologi, perdagangan saham telah menjadi salah satu cara penting bagi banyak pelabur. Analisis saham adalah bahagian penting dalam membuat keputusan pelabur, dan carta lilin digunakan secara meluas dalam analisis teknikal. Mempelajari cara melukis carta lilin menggunakan PHP dan JS akan memberikan pelabur maklumat yang lebih intuitif untuk membantu mereka membuat keputusan yang lebih baik. Carta candlestick ialah carta teknikal yang memaparkan harga saham dalam bentuk candlestick. Ia menunjukkan harga saham

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Dec 17, 2023 pm 12:09 PM

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 am 09:39 AM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

See all articles