Geekly articles weekly

Panduan JavaScript bagian 7: mode ketat, kata kunci ini, acara, modul, matematika

Hari ini, di bagian ketujuh dari terjemahan manual JavaScript, kita akan berbicara tentang mengeksekusi kode dalam mode ketat, tentang fitur dari kata kunci ini, tentang peristiwa, tentang modul, dan tentang perhitungan matematis. Di sini kita akan membahas topik bekerja dengan timer dan pemrograman asinkron.

β†’ Bagian 1: program pertama, fitur bahasa, standar
β†’ Bagian 2: gaya kode dan struktur program
β†’ Bagian 3: variabel, tipe data, ekspresi, objek
β†’ Bagian 4: fungsi
β†’ Bagian 5: array dan loop
β†’ Bagian 6: pengecualian, titik koma, literal wildcard
β†’ Bagian 7: mode ketat, kata kunci ini, acara, modul, perhitungan matematis
β†’ Bagian 8: Gambaran Umum Fitur ES6
β†’ Bagian 9: Gambaran Umum Standar ES7, ES8, dan ES9



Mode yang ketat


Mode ketat muncul dalam standar ES5. Dalam mode ini, semantik perubahan bahasa, itu ditujukan untuk meningkatkan perilaku JavaScript, yang mengarah pada fakta bahwa kode dalam mode ini berperilaku berbeda dari biasanya. Bahkan, kita berbicara tentang fakta bahwa dalam mode ini kekurangan, ambiguitas bahasa, fitur usang yang disimpan di dalamnya untuk alasan kompatibilitas dihilangkan.

▍Mengaktifkan mode ketat


Untuk menggunakan mode ketat dalam beberapa kode, itu harus diaktifkan secara eksplisit. Artinya, kita tidak berbicara tentang fakta bahwa mode ini digunakan secara default. Pendekatan semacam itu akan mengacaukan kerja program-program yang ada yang tak terhitung jumlahnya berdasarkan mekanisme bahasa yang telah ada di dalamnya sejak awal, sejak tahun 1996. Bahkan, upaya signifikan dari mereka yang mengembangkan standar JavaScript ditujukan khusus untuk memastikan kompatibilitas, sehingga kode yang ditulis berdasarkan versi standar lama dapat dieksekusi di mesin JS saat ini. Pendekatan ini dapat dianggap sebagai salah satu kunci keberhasilan JavaScript sebagai bahasa untuk pengembangan web.

Untuk mengaktifkan mode ketat, arahan khusus digunakan yang terlihat seperti ini.

'use strict'

Arahan yang ditulis dalam bentuk "use strict" dan arahan yang sama setelah itu titik koma ( 'use strict'; dan "use strict"; ) akan menghasilkan efek yang sama. Arahan ini (begitu saja - bersama dengan tanda kutip), sehingga semua kode dalam file tertentu akan dieksekusi dalam mode ketat, ditempatkan di awal file ini.

 'use strict' const name = 'Flavio' const hello = () => 'hey' //...

Mode ketat dapat diaktifkan pada tingkat fungsi yang terpisah. Untuk melakukan ini, arahan yang sesuai harus ditempatkan di awal kode fungsi tubuh.

 function hello() { 'use strict' return 'hey' }

Ini dapat berubah menjadi berguna jika mode ketat perlu digunakan dalam basis kode yang ada dan pada saat yang sama menyalakannya pada tingkat file tidak praktis karena kurangnya waktu untuk pengujian menyeluruh dari kode untuk seluruh file ini.

Perlu dicatat bahwa jika mode ketat diaktifkan, Anda tidak dapat mematikannya selama eksekusi program.

Pertimbangkan beberapa fitur mode ketat.

▍ Memerangi inisialisasi acak variabel global


Kami telah mengatakan bahwa jika Anda secara tidak sengaja menetapkan nilai tertentu ke variabel yang tidak dideklarasikan, bahkan jika Anda melakukannya dalam kode fungsi, variabel seperti itu akan dibuat global secara default (milik objek global). Ini bisa menimbulkan kejutan.

Misalnya, kode berikut hanya membuat variabel seperti itu.

 ;(function() { variable = 'hey' })()

variable akan tersedia dalam lingkup global setelah pelaksanaan IIFE.

Jika mode ketat diaktifkan di tingkat fungsi ini, kode yang sama akan menyebabkan kesalahan.

 ;(function() { 'use strict' variable = 'hey' })()

▍ Kesalahan yang terjadi selama operasi penugasan


JavaScript, dalam mode normal, tidak melaporkan kesalahan yang terjadi selama operasi penugasan.

Sebagai contoh, di JS ada nilai yang tidak terdefinisi , yang merupakan salah satu nilai primitif bahasa dan diwakili oleh properti dari objek global yang undefined . Dalam JS biasa, perintah seperti itu sangat mungkin.

 undefined = 1

Sepertinya menulis unit ke variabel tertentu dengan nama undefined , tetapi sebenarnya ini merupakan upaya untuk menulis nilai baru ke properti objek global, yang, sesuai dengan standar, tidak dapat ditimpa. Dalam mode normal, meskipun perintah seperti itu mungkin, itu tidak akan mengarah pada apa pun - yaitu, nilai yang tidak ditentukan tidak akan berubah, dan pesan kesalahan tidak akan muncul. Dalam mode ketat, ini akan menyebabkan kesalahan. Untuk melihat pesan kesalahan ini, dan pada saat yang sama memastikan bahwa nilai yang undefined tidak ditimpa dalam mode normal, coba jalankan kode berikut di browser atau di Node.js.

 undefined = 1 console.log('This is '+undefined) ;(() => { 'use strict' undefined = 1 })()

Perilaku yang sama dari sistem juga karakteristik ketika bekerja dengan entitas seperti nilai Infinity dan NaN , serta dengan yang serupa lainnya. Mode ketat memungkinkan Anda menghindari semua ini.

Dalam JavaScript, Anda dapat mengatur properti objek menggunakan metode Object.defineProperty () . Secara khusus, menggunakan metode ini Anda dapat mengatur properti yang tidak dapat diubah.

 const car = {} Object.defineProperty(car, 'color', {  value: 'blue',  writable: false }) console.log(car.color) car.color = 'yellow' console.log(car.color)

Perhatikan atribut writable: false digunakan saat mengatur properti color .

Kode di atas, dieksekusi dalam mode normal, tidak akan menyebabkan perubahan pada properti objek color , maupun output dari kesalahan. Upaya untuk mengubah properti ini dalam mode ketat akan menghasilkan kesalahan.

 ;(() => { 'use strict' car.color = 'red' })()

Hal yang sama berlaku untuk getter. Kode ini akan dieksekusi, meskipun tidak berhasil.

 const car = { get color() {   return 'blue' } } console.log(car.color) car.color = 'red' console.log(car.color)

Dan upaya untuk melakukan hal yang sama dalam mode ketat akan menyebabkan kesalahan melaporkan upaya untuk mengatur properti objek yang hanya memiliki pengambil.

 ;(() => { 'use strict' car.color = 'yellow' } )()

JavaScript memiliki metode Object.preventExtensions () yang membuat objek menjadi non-extensible, yaitu, yang tidak dapat ditambahkan properti baru. Saat bekerja dengan objek seperti itu dalam mode biasa, fitur bahasa yang sama dengan yang kami periksa di atas dimanifestasikan.

 const car = { color: 'blue' } Object.preventExtensions(car) console.log(car.model) car.model = 'Fiesta' console.log(car.model)

Di sini, kedua upaya untuk memperoleh properti dari objek model akan menghasilkan nilai yang undefined muncul di konsol. Tidak ada properti seperti itu di objek, upaya untuk membuatnya setelah objek dibuat tidak dapat diperluas tidak mengarah ke apa pun. Tindakan yang sama dalam mode ketat menghasilkan pesan kesalahan.

 ;(() => { 'use strict' car.owner = 'Flavio' } )()

Dalam kategori tindakan yang sama yang tidak mengarah pada perubahan apa pun, mungkin diharapkan oleh programmer, tetapi juga tidak menyebabkan kesalahan, operasi termasuk dalam upaya yang dilakukan untuk menetapkan properti tertentu ke nilai primitif. Misalnya, kode seperti itu, dalam mode normal, tidak akan menyebabkan kesalahan, tetapi tidak akan menghasilkan hasil apa pun.

 let one = 1 one.prop = 2 console.log(one.prop)

Hal yang sama dalam mode ketat akan menghasilkan pesan kesalahan yang menunjukkan bahwa properti prop tidak dapat dibuat pada angka 1 . Dengan cara yang sama, sistem berperilaku ketika bekerja dengan tipe data primitif lainnya.

▍ Kesalahan Penghapusan Entitas


Dalam mode normal, jika Anda mencoba menghapus, menggunakan operator hapus , properti objek yang tidak dapat dihapus, delete hanya delete mengembalikan false dan semuanya diam-diam akan gagal.

 delete Object.prototype

Dalam mode ketat, kesalahan akan dihasilkan di sini.

▍ Argumen fungsi dengan nama yang sama


Fungsi dapat memiliki parameter dengan nama yang sama, ini tidak menyebabkan kesalahan (meskipun ini seperti kesalahan dari orang yang membuat fungsi seperti itu).

 ;(function(a, a, b) { console.log(a, b) })(1, 2, 3) //2 3

Kode ini biasanya menampilkan 2 3 di konsol. Dalam mode ketat, ini akan menyebabkan kesalahan.

Omong-omong, jika selama deklarasi fungsi panah parameternya akan memiliki nama yang sama, ini, dalam mode normal, akan menyebabkan output dari pesan kesalahan.

▍ Nilai oktal


Dalam JavaScript normal, Anda dapat menggunakan nilai oktal dengan menambahkan 0 di awal.

 ;(() => { console.log(010) })() //8

Di sini, representasi desimal dari angka oktal 10 , yaitu 8 akan masuk ke konsol. Ini 0 sebelum nomor dapat dimasukkan secara acak. Dalam mode ketat, Anda tidak dapat bekerja dengan angka oktal yang ditentukan dalam format ini. Tetapi jika Anda perlu menggunakan mode ketat dan bekerja dengan angka oktal, Anda dapat menuliskannya dalam format 0oXX . Kode berikut juga akan menampilkan 8 .

 ;(() => { 'use strict' console.log(0o10) })() //8

▍Operator dengan


Pernyataan with , yang dapat menyebabkan kebingungan, tidak diperbolehkan dalam mode ketat.
Mengubah perilaku kode dalam mode ketat tidak terbatas pada yang kita bahas di atas. Khususnya, dalam mode ini, kata kunci ini berperilaku berbeda, yang telah kami temui, dan yang akan kami bicarakan lebih detail sekarang.

Fitur Kata Kunci Ini


Kata this , atau konteks eksekusi, memungkinkan Anda untuk menggambarkan lingkungan di mana kode JS dieksekusi. Artinya tergantung pada tempat penggunaannya dan apakah mode ketat diaktifkan atau tidak.

▍ Kata kunci ini dalam mode ketat


Dalam mode ketat, nilai this diteruskan ke fungsi tidak dilemparkan ke objek. Konversi ini tidak hanya membutuhkan sumber daya, tetapi juga memberikan fungsi akses ke objek global jika mereka dipanggil dengan set ke undefined atau null . Perilaku ini berarti bahwa fungsi tersebut dapat memperoleh akses tidak sah ke objek global. Dalam mode ketat, konversi this diteruskan ke fungsi tidak dilakukan. Untuk melihat perbedaan antara perilaku fungsi ini dalam mode yang berbeda, coba kode ini menggunakan arahan 'use strict' dan tanpa itu.

 ;(function() { console.log(this) })()

▍ Kata kunci ini dalam metode objek


Metode adalah fungsi yang direferensikan dalam properti objek. Kata this dalam fungsi seperti itu merujuk ke objek ini. Pernyataan ini dapat diilustrasikan dengan contoh berikut.

 const car = { maker: 'Ford', model: 'Fiesta', drive() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a Ford Fiesta car!

Dalam hal ini, kami menggunakan fungsi biasa (dan bukan yang panah - ini penting), kata kunci yang digunakan di mana secara otomatis terikat ke objek yang berisi fungsi ini.

Perhatikan bahwa metode mendeklarasikan metode objek di atas mirip dengan ini:

 const car = { maker: 'Ford', model: 'Fiesta', drive: function() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } }

Perilaku yang sama dari this dalam metode objek juga dapat diamati menggunakan konstruksi berikut.

 const car = { maker: 'Ford', model: 'Fiesta' } car.drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } car.drive() //Driving a Ford Fiesta car!

▍ Kata kunci ini dan fungsi panah


Mari kita coba menulis ulang contoh di atas menggunakan, sebagai metode objek, fungsi panah.

 const car = { maker: 'Ford', model: 'Fiesta', drive: () => {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a undefined undefined car!

Seperti yang Anda lihat, di sini, alih-alih nama-nama pabrikan mobil dan modelnya, nilai yang undefined ditampilkan. Faktanya adalah bahwa, seperti yang telah kita katakan, this dalam fungsi panah berisi tautan ke konteks yang mencakup fungsi.

Panah ini tidak dapat diikat ke fungsi panah, tetapi Anda bisa

▍ Mengikat ini


JavaScript memiliki konsep mengikat seperti this . Anda dapat melakukan ini dengan banyak cara. Misalnya, ketika mendeklarasikan suatu fungsi, Anda dapat mengikat kata kunci ini ke objek menggunakan metode bind() .

 const car = { maker: 'Ford', model: 'Fiesta' } const drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) }.bind(car) drive() //Driving a Ford Fiesta car!

Menggunakan metode yang sama, Anda dapat mengikat objek lain ke metode satu objek, karena this .

 const car = { maker: 'Ford', model: 'Fiesta', drive() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } const anotherCar = { maker: 'Audi', model: 'A4' } car.drive.bind(anotherCar)() //Driving a Audi A4 car!

Ikatan ini juga dapat diatur pada tahap memanggil fungsi menggunakan metode call() dan apply() .

 const car = { maker: 'Ford', model: 'Fiesta' } const drive = function(kmh) { console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`) } drive.call(car, 100) //Driving a Ford Fiesta car at 100 km/h! drive.apply(car, [100]) //Driving a Ford Fiesta car at 100 km/h!

this terikat pada apa yang diteruskan ke metode ini sebagai argumen pertama. Perbedaan antara metode ini adalah yang apply() , sebagai argumen kedua, mengambil array dengan argumen yang diteruskan ke fungsi, dan call() mengambil daftar argumen.

▍Tentang mengikat ini di penangan acara browser


Dalam panggilan balik eventback, this menunjuk ke elemen HTML yang dengannya peristiwa itu terjadi. Untuk mengikat panggilan balik, karena this , sesuatu yang lain, Anda dapat menggunakan metode bind() . Ini adalah contoh untuk menggambarkan hal ini.

 <!DOCTYPE html> <html> <body>   <button id="el">Element (this)</button>   <button id="win">Window (this</button>   <script>     const el = document.getElementById("el")     el.addEventListener('click', function () {         alert(this) //object HTMLButtonElement     })     const win = document.getElementById("win")     win.addEventListener('click', function () {         alert(this) //object Window     }.bind(this))   </script> </body> </html>

Acara


JavaScript di browser menggunakan model pemrograman yang digerakkan oleh peristiwa. Tindakan ini atau tindakan lain dilakukan oleh kode sebagai respons terhadap peristiwa. Di bagian ini, kita akan berbicara tentang acara dan cara menanganinya.

Suatu peristiwa dapat, misalnya, penyelesaian memuat DOM, menerima data sebagai hasil dari permintaan tidak sinkron, mengklik elemen halaman, menggulir halaman, memasukkan karakter tertentu dari keyboard. Bahkan, ada banyak peristiwa yang, ketika diproses, kode JS halaman memungkinkan Anda untuk memecahkan berbagai masalah dalam interaksi aplikasi dengan pengguna, dengan elemen-elemen halaman, dengan lingkungan di mana kode bekerja.

▍Event handler


Anda dapat merespons acara menggunakan penangan acara, yang merupakan fungsi yang dipanggil saat acara terjadi.
Jika perlu, untuk memproses acara yang sama, Anda dapat mendaftarkan beberapa penangan yang akan dipanggil jika acara ini terjadi. Penangan acara dapat didaftarkan dengan berbagai cara. Pertimbangkan tiga metode tersebut.

▍ Penangan acara bawaan


Saat ini, penangan event bawaan jarang digunakan karena keterbatasannya. Sebelumnya, mereka lebih sering digunakan. Untuk mengatur event handler seperti itu, kodenya ditambahkan ke markup HTML elemen sebagai atribut khusus. Dalam contoh berikut, penangan sederhana untuk peristiwa onclick yang terjadi ketika tombol diklik ditugaskan ke tombol berlabel Button 1 .

 <!DOCTYPE html> <html> <body>   <button onclick="alert('Button 1!')">Button 1</button>   <button onclick="doSomething()">Button 2</button>   <script>       function doSomething(){           const str = 'Button 2!'           console.log(str)           alert(str)       }       </script> </body> </html>

Kode HTML untuk Button 2 menggunakan pendekatan yang serupa, tetapi ini menunjukkan fungsi yang kodenya dieksekusi sebagai respons terhadap klik tombol. Kode ini menampilkan string yang diberikan ke konsol dan menampilkan jendela dengan teks yang sama.

▍ Menetapkan pawang ke properti elemen HTML


Metode penugasan event handler ini cocok untuk kasus-kasus ketika suatu peristiwa tertentu dari elemen harus hanya memiliki satu handler. Ini terdiri dalam menetapkan fungsi ke properti elemen yang sesuai.

Misalnya, objek window memiliki onload , yang dipanggil setelah memuat kode HTML halaman dan semua sumber daya tambahan yang dibutuhkan, misalnya, gaya dan gambar. Jika Anda menetapkan penangan ke acara ini, maka ketika Anda memanggilnya, Anda dapat yakin bahwa browser telah memuat semua konten halaman, yang sekarang dapat Anda gunakan secara terprogram, tanpa takut bahwa beberapa elemen halaman belum dimuat.

 window.onload = () => {   alert('Hi!') //   }

Pendekatan ini sering digunakan saat memproses permintaan XHR. Jadi, saat menyiapkan permintaan, Anda dapat menentukan penangan untuk acara onreadystatechange , yang akan dipanggil ketika properti readyState berubah. Berikut adalah contoh penggunaan pendekatan ini untuk memuat data JSON dari API publik.

 <!DOCTYPE html> <html> <body>   <button onclick="loadData()">Start</button>   <script>       function loadData (){           const xhr = new XMLHttpRequest()           const method = 'GET'           const url = 'https://jsonplaceholder.typicode.com/todos/1'           xhr.open(method, url, true)           xhr.onreadystatechange = function () {               if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {                   console.log(xhr.responseText)               }           }           xhr.send()      }       </script> </body> </html>

Untuk memeriksa apakah seorang pawang ditugaskan untuk suatu peristiwa tertentu, Anda dapat melakukan ini.

 if (window.onload){}

▍Gunakan metode addEventListener ()


Metode addEventListener() , yang telah kita lihat, adalah mekanisme modern untuk menetapkan penangan acara. Anda dapat mendaftarkan beberapa penangan untuk satu acara.

 window.addEventListener('load', () => { //  })

Perhatikan bahwa browser IE8 (dan versi yang lebih lama) tidak mendukung metode addEventListener() . Ini menggunakan metode attachEvent() serupa. Ini harus diperhitungkan jika program Anda harus mendukung browser yang ketinggalan zaman.

▍Tentang menugaskan penangan acara ke berbagai elemen


Anda dapat menghubungkan event handler ke objek window untuk menangani acara "global", seperti menekan tombol pada keyboard. Pada saat yang sama, penangan acara ditugaskan untuk elemen HTML individual, yang menanggapi apa yang terjadi pada elemen-elemen ini, misalnya, dengan mengkliknya dengan mouse. Oleh karena itu, metode addEventListener() digunakan baik dengan objek window dan dengan elemen biasa.

▍ Objek Acara


Sebagai parameter pertama, pengendali event dapat mengambil objek event - Event . Set properti dari objek ini tergantung pada peristiwa yang dijelaskan. Di sini, misalnya, adalah kode yang menunjukkan penanganan peristiwa keystroke keyboard menggunakan peristiwa keydown objek keydown .

 <!DOCTYPE html> <html> <body>   <script>       window.addEventListener('keydown', event => {           //              console.log(event.type, event.key)       })       window.addEventListener('mousedown', event => {           //             //0 -  , 2 -            console.log(event.type, event.button, event.clientX, event.clientY)       })   </script> </body> </html>

Seperti yang Anda lihat, di sini, untuk menampilkan informasi tentang tombol yang ditekan ke konsol, properti objek key digunakan. type properti juga digunakan di sini, yang menunjukkan jenis acara. Dalam contoh ini, kita sebenarnya bekerja dengan objek KeyboardEvent , yang digunakan untuk menggambarkan peristiwa yang terkait dengan keyboard. Objek ini adalah turunan dari objek acara . Objek yang dirancang untuk menangani berbagai acara memperluas kemampuan objek acara standar.

Dalam contoh yang sama, objek MouseEvent digunakan untuk memproses acara mouse. Di pengendali acara mousedown , kami mencetak ke konsol jenis acara, nomor button (properti button ) dan koordinat penunjuk pada saat klik ( clientY clientX dan clientY ).

Objek DragEvent digunakan untuk menangani peristiwa yang terjadi saat menyeret elemen halaman.

Di antara properti objek Event tersedia di objek acara lainnya, kita dapat menyebutkan properti type telah disebutkan dan properti target , yang menunjuk ke elemen DOM tempat peristiwa terjadi. Objek Event memiliki metode. Misalnya, metode createEvent() memungkinkan Anda membuat acara baru.

▍ Peristiwa Peristiwa


Perhatikan contoh berikut.

 <!DOCTYPE html> <html>   <head>       <style>           #container {               height: 100px;               width: 200px;               background-color: blue;           }           #child {               height: 50px;               width: 100px;               background-color: green;           }       </style>   </head>   <body>   <div id="container">       <div id="child">       </div>   </div>   <script>       const contDiv = document.getElementById('container')       contDiv.addEventListener('click', event => {           console.log('container')       })       const chDiv = document.getElementById('child')       chDiv.addEventListener('click', event => {           console.log('child')       })       window.addEventListener('click', event => {           console.log('window')       })       </script> </body> </html>

Jika Anda membuka halaman dengan kode ini di browser, buka konsol dan klik mouse pertama di area bebas halaman, kemudian di kotak biru, dan kemudian di hijau, berikut ini akan masuk ke konsol:

 window container window child container window


Gelembung acara

Apa yang bisa diamati di sini disebut event bubbling. Yaitu, peristiwa yang terjadi pada elemen anak meluas ke elemen induk. Proses ini berlanjut hingga acara mencapai elemen "atas". Jika elemen yang dilewati acara pop-up memiliki penangan yang sesuai ditentukan, mereka akan dipanggil sesuai dengan urutan distribusi acara.

stopPropagation() peristiwa dapat dihentikan menggunakan metode stopPropagation() dari objek stopPropagation() . Misalnya, jika perlu bahwa, setelah mengklik elemen child , acara yang sesuai tidak merambat lebih lanjut, kita perlu menulis ulang kode di mana kita menetapkan penangan peristiwa click untuk itu sebagai berikut.

 chDiv.addEventListener('click', event => {   console.log('child')   event.stopPropagation() })

, , β€” , β€” container , β€” child , .

 window container window child

▍


, .

load


load window . , , HTML- body .


click . dblclick β€” . click dblclick , click , β€” dblclick . mousedown , mousemove , mouseup , . , mousemove , , , . , - , . .


keydown . , . β€” keyup .

scroll


scroll window . , , , window.scrollY .

, , mousemove , .


mousemove scroll . - . . «» (throttling), Lodash . , , , , . .

 let cached = null window.addEventListener('mousemove', event => {   if (!cached) {       setTimeout(() => {           //     cached           console.log(cached.clientX, cached.clientY)           cached = null           }, 100)   }   cached = event })

, mousemove , 100 .

ES-


ES6 , ES-. , , -, , Node.js, .

, . , , . , , .

Node.js CommonJS. , ES-, , . , , ES-, , , , . , caniuse.com , 2018 ES- 80%.

ES- Node.js.

▍ ES-


Node.js ES- .

 import package from 'module-name'

CommonJS- .

 const package = require('module-name')

, JavaScript-, - . Ini dilakukan dengan menggunakan kata kunci export . , , , , uppercase.js . .

 export default str => str.toUpperCase()

, . .
( , ) .

HTML- , <script> type="module" .

 <script type="module" src="index.js"></script>

, (defer) . , , uppercase.js , , , . -. , -. , VSCode, Live Server ( β€” ritwickdey.liveserver).

 <!DOCTYPE html> <html> <head> </head> <body>   <script type="module">     import toUpperCase from './uppercase.js'     console.log(toUpperCase('hello'))   </script> </body> </html>

HELLO .

URL.

 import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

, , ./ / .

▍


, .

 export default str => str.toUpperCase()

.

 const a = 1 const b = 2 const c = 3 export { a, b, c }

module.js , , , .

 <html> <head> </head> <body>   <script type="module">     import * as m from './module.js'     console.log(ma, mb, mc)   </script> </body> </html>

1 2 3 .

, , .

 import { a } from './module.js' import { a, b } from './module.js'

, , .

 console.log(a)

:

 import { a, b as two } from './module.js'

, , , , . module.js .

 const a = 1 const b = 2 const c = 3 export { a, b, c } export default () => console.log('hi')

.

 import sayHi, { a } from './module.js' console.log(a) sayHi()

.

▍CORS


CORS . , CORS, ( Access-Control-Allow-Origin: * ).

▍ nomodule


, , , script , nomodule . , , .

 <script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script>

▍ ES6 WebPack


ES6 β€” , , ECMAScript. , , , , . , WebPack, , , .

▍ CommonJS


, Node.js CommonJS. , . CommonJS npm.

CommonJS-, , . , up-node.js .

 exports.uppercase = str => str.toUpperCase()

, .

 const up = require('./up-node.js') console.log(up.uppercase('hello'))

HELLO .

, npm, , .

 const package = require('module-name')

CommonJS , . .

CommonJS- .

 exports.a = 1 exports.b = 2 exports.c = 3

, .

 const { a, b, c } = require('./up-node.js')


, JavaScript β€” . Math , . , , JS- .

▍


(+)


+ . :

 const three = 1 + 2 //3 const four = three + 1 //4

, , , .

 'three' + 1 // three1

(-)


 const two = 4 - 2 //2

(/)


.

 20 / 5 //4 20 / 7 //2.857142857142857

0, . Infinity ( ) - Infinity ( ).

 1 / 0 //Infinity -1 / 0 //-Infinity

(%)


% , .

 20 % 5 //0 20 % 7 //6

0 NaN (Not a Number β€” ).

 1 % 0 //NaN -1 % 0 //NaN

(*)


 1 * 2 //2 -1 * 2 //-2

(**)


, .

 1 ** 2 //1 2 ** 1 //2 2 ** 2 //4 2 ** 8 //256 8 ** 2 //64

▍


(++)


++ 1 . .

β€” 1 , .

 let x = 0 ++x //1 x //1

β€” , .

 let x = 0 x++ //0 x //1

(--)


-- ++ , 1 , .

 let x = 0 x-- //0 x //-1 --x //-2

(-)


.

 let x = 2 -x //-2 x //2

(+)


, , . β€” .

 let x = 2 +x //2 x = '2' +x //2 x = '2a' +x //NaN

▍


JavaScript, ( = ), , . , , += .

 let x = 2 x += 3 x //5

: Β« , , , , Β». , .

 let x = 2 x = x + 3 x //5

:

  • -=
  • *=
  • /=
  • %=
  • **=

▍


. , .

 const a = 1 * 2 + 5 / 2 % 2

2.5 . , . , .

  • - + ++ -- β€” ,
  • / % β€” , ,
  • + - β€”
  • = += -= *= /= %= **= β€”

, , . , .

 const a = 1 * 2 + 5 / 2 % 2 const a = 2 + 2.5 % 2 const a = 2 + 0.5 const a = 2.5

. .

 const a = 1 * (2 + 5) / 2 % 2

1.5 .

▍ Math


Math , . . , .

, , Math.E β€” , e, Math.PI β€” , Ο€.

 Math.E // 2.718281828459045 Math.PI //3.141592653589793

.

  • Math.abs() β€”
  • Math.ceil() β€” , ,
  • Math.cos() β€” ,
  • Math.floor() β€” , ,
  • Math.max() β€”
  • Math.min() β€”
  • Math.random() β€” [0, 1) ( 1)
  • Math.round() β€”
  • Math.sqrt() β€”

▍


JavaScript , .

  • == β€” . .
  • != β€” .

, . , , , .

  • === β€”
  • !== β€”

.

  • < β€” «»
  • > β€” «».
  • <= β€” Β« Β».
  • >= β€” Β« Β».

, .

 1 === true //false 1 == true //true

, , 1 true . 1 true , 1 true .


, , . Node.js. , :


PDF- Node.js.

Ringkasan


, this, , , . , ES6.

Pembaca yang budiman! , JavaScript?

Source: https://habr.com/ru/post/id431072/

More articles:


All Articles