Home-theater-designers
Ang ES6 ay tumutukoy sa bersyon 6 ng wika ng programa ng ECMA Script. Ang ECMA Script ay ang pamantayan na pangalan para sa JavaScript, at ang bersyon 6 ay ang susunod na bersyon pagkatapos ng bersyon 5, na inilabas noong 2011. Ito ay isang pangunahing pagpapahusay sa wikang JavaScript, at nagdaragdag ng maraming mga tampok na inilaan upang gawing mas madali ang malakihang pag-unlad ng software .
Ang ECMAScript, o ES6, ay nai-publish noong Hunyo 2015. Kasunod nito ay pinalitan ng pangalan sa ECMAScript 2015. Ang suporta sa web browser para sa buong wika ay hindi pa kumpleto, kahit na ang mga pangunahing bahagi ay suportado. Sinusuportahan ng mga pangunahing web browser ang ilang mga tampok ng ES6. Gayunpaman, posible na gumamit ng software na kilala bilang a manlalaro upang i-convert ang ES6 code sa ES5, na mas mahusay na suportado sa karamihan ng mga browser.
Tingnan natin ngayon ang ilang mga pangunahing pagbabago na dinala ng ES6 sa JavaScript.
1. Patuloy
Sa wakas ang konsepto ng mga pare-pareho ay nakarating sa JavaScript! Ang mga pare-pareho ay mga halagang maaaring tukuyin nang isang beses lamang (bawat saklaw, ipinaliwanag ang saklaw sa ibaba). Ang isang muling kahulugan sa loob ng parehong saklaw ay nagpapalitaw ng isang error.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Maaari mong gamitin ang pare-pareho saan ka man gumamit ng variable ( kung saan ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Mga Variable at Pag-andar ng Block-Scoped
Maligayang pagdating sa ika-21 siglo, JavaScript! Sa ES6, ang mga variable na idineklara gamit hayaan (at naglalarawan na parating sa itaas) sundin ang mga panuntunan sa pag-block ng scoping tulad ng sa Java, C ++, atbp. (Upang matuto nang higit pa, tingnan kung paano ideklara ang mga variable sa JavaScript.)
Bago ang pag-update na ito, ang mga variable sa JavaScript ay nasaklaw ng pag-andar. Iyon ay, kapag kailangan mo ng isang bagong saklaw para sa isang variable, kailangan mong ideklara ito sa loob ng isang pagpapaandar.
Pinapanatili ng mga variable ang halaga hanggang sa katapusan ng bloke. Pagkatapos ng bloke, ang halaga sa panlabas na bloke (kung mayroon man) ay naibalik.
hindi makikilala ng aking computer ang aking telepono
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Maaari mong tukuyin din ang kahulugan ng mga pare-pareho, sa loob ng mga naturang bloke.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Mga Pag-andar ng Arrow
Pakilala ng ES6 pagpapaandar ng arrow sa JavaScript. (Ito ay katulad ng tradisyonal na mga pagpapaandar, ngunit may isang mas simpleng syntax.) Sa sumusunod na halimbawa, x ay isang pagpapaandar na tumatanggap ng isang parameter na tinawag sa , at ibabalik ang pagtaas nito:
var x = a => a + 1;
x(4) // returns 5
Gamit ang syntax na ito, maaari mong tukuyin at ipasa ang mga argumento sa mga pag-andar nang madali.
Gamit gamit ang a para sa bawat () :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Tukuyin ang mga pagpapaandar na tumatanggap ng maraming mga argumento sa pamamagitan ng paglalagay ng mga ito sa panaklong:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Mga Parameter ng Default na Pag-andar
Ang mga parameter ng pagpapaandar ay maaari nang ideklara na may mga default na halaga. Sa mga sumusunod, x ay isang pagpapaandar na may dalawang mga parameter sa at b . Ang pangalawang parameter b ay binigyan ng isang default na halaga ng 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Hindi tulad ng ibang mga wika tulad ng C ++ o sawa, ang mga parameter na may mga default na halaga ay maaaring lumitaw bago ang mga walang mga default. Tandaan na ang pagpapaandar na ito ay tinukoy bilang isang bloke na may a bumalik ka halaga sa pamamagitan ng paglalarawan.
var x = (a = 2, b) => { return a * b }
Gayunpaman ang mga argumento ay naitugma sa kaliwa hanggang kanan. Sa unang paanyaya sa ibaba, b may isang hindi natukoy halaga kahit na sa ay idineklara na may isang default na halaga. Ang naipasa na argumento ay naipapantayan sa kaysa sa b . Nagbabalik ang pagpapaandar NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Kapag malinaw na pumasa ka hindi natukoy bilang isang argument, ang default na halaga ay ginagamit kung mayroong isa.
x(undefined, 3)
// returns 6
5. Mga Parameter ng Pag-andar ng Pahinga
Kapag nagsusumamo ng isang pag-andar, kung minsan lumilitaw ang isang pangangailangan upang makapasa sa isang di-makatwirang bilang ng mga argumento, at iproseso ang mga argumentong ito sa loob ng pagpapaandar. Ang pangangailangan na ito ay pinangangasiwaan ng pahinga sa pag-andar ng pahinga syntax Nagbibigay ito ng isang paraan upang makuha ang natitirang mga argumento pagkatapos ng tinukoy na mga argumento gamit ang syntax na ipinakita sa ibaba. Ang mga sobrang argumento na ito ay nakuha sa isang array.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Pag-template ng String
Ang string templating ay tumutukoy sa mga interpolating variable at expression sa mga string gamit ang isang syntax tulad ng perl o shell. Ang isang template ng string ay nakapaloob sa mga back-tick character ( ' ). Sa pamamagitan ng kaibahan solong mga quote ( ' ) o dobleng quote ( ' ) ipahiwatig ang normal na mga string. Ang mga ekspresyon sa loob ng template ay minarkahan sa pagitan $ { at } . Narito ang isang halimbawa:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Siyempre, maaari mong gamitin ang isang di-makatwirang ekspresyon para sa pagsusuri.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Ang syntax na ito para sa pagtukoy ng mga string ay maaari ding gamitin upang tukuyin ang mga string ng multi-line.
var x = `hello world
next line`
// returns
hello world
next line
7. Mga Katangian sa Bagay
Nagdadala ang ES6 ng isang pinasimple na syntax ng paglikha ng bagay. Tingnan ang halimbawa sa ibaba:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Ang mga naka-compute na pangalan ng ari-arian ay medyo nakakatawa din. Sa ES5 at mas maaga, upang magtakda ng isang pag-aari ng object na may naka-compute na pangalan, kailangan mong gawin ito:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Ngayon ay magagawa mo ang lahat sa isang solong kahulugan.
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
At syempre, upang tukuyin ang mga pamamaraan, maaari mo lamang itong tukuyin sa pangalan:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Pormal na Klase ng Kahulugan Syntax
Kahulugan ng Klase
At sa wakas, nakakakuha ang JavaScript ng pormal na kahulugan ng kahulugan ng syntax. Habang ito ay lamang ng syntactic sugar sa mga magagamit na mga klase na batay sa protytype, nagsisilbi ito upang mapahusay ang kalinawan ng code. Nangangahulugan ito na hindi magdagdag ng isang bagong modelo ng object o anumang bagay na magarbong tulad nito.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Mga Paraan ng Pagpapahayag
Ang pagtukoy ng isang pamamaraan ay medyo simple din. Walang suprises doon.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Mga Getter at Setter
Mayroon din kaming mga getter at setter din, na may isang simpleng pag-update sa syntax. Hayaan nating muling tukuyin ang Bilog klase sa isang lugar pag-aari
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Magdagdag tayo ngayon ng isang setter. Na maaring tukuyin radius bilang isang mapag-aayos na pag-aari, dapat nating muling tukuyin ang aktwal na larangan upang _radius o isang bagay na hindi makikipagtunggali sa tagatakda. Kung hindi man nakasalamuha namin ang isang error sa stack overflow.
Narito ang muling kahulugan ng klase:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Sa kabuuan, ito ay isang magandang karagdagan sa JavaScript na nakatuon sa object.
Mana
Bilang karagdagan sa pagtukoy ng mga klase gamit ang klase keyword, maaari mo ring gamitin ang umaabot keyword na magmamana mula sa sobrang klase. Tingnan natin kung paano ito gumagana sa isang halimbawa.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
At iyon ay isang maikling pagpapakilala sa ilan sa mga tampok ng JavaScript ES6.
Susunod: pamilyar sa ilang mahahalagang pamamaraan ng pag-array ng JavaScript at pag-script ng isang robot na may sensitibong boses na robot! Gayundin, alamin ang tungkol sa isang mahusay na balangkas ng front-end na tinatawag na Vue.
Credit sa Larawan: micrologia / Mga deposito
Magbahagi Magbahagi Mag-tweet Email Canon vs. Nikon: Aling Camera Brand Ay Mas Mabuti?Ang Canon at Nikon ay ang dalawang pinakamalaking pangalan sa industriya ng camera. Ngunit aling tatak ang nag-aalok ng mas mahusay na lineup ng mga camera at lente?
kung paano tanggalin ang isang pahina ng break sa salitaBasahin Susunod Mga Kaugnay na Paksa
- Programming
- JavaScript
Mag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe