JS 

ES6

Parengė: Martynas Kašelionis

From zero to hero

ES6

Nauja versija, kuri turi daugiau lankstumo ir patobulintą sintaksę

  • Išplėstas objektinis modelis
  • Nauji metodai

 

​

Kas naujo ?

  • Template literals
  • Object destructing
  • Array destructing
  • Object literal
  • For of
  • Spread operator
  • Arow function
  • Includes
  • Import export
  • asyn, await (ajax temoje)
  • class (objektinio programavimo temoje)

 

​

Template literals

  • Leidžia įterpti reikšmes nejungiant eilutės
  • Galima naudoti išraiškas
  • string tipo reikšmė gali būti per kelias eilutes​
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"

Old shool

ES6

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

Template literals

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

Old shool

ES6

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

Išraiškos

Object destructing

  • Sintaksė, kuri leidžia išpakuoti masyvo reikšme arba objekto savybes ir priskirti kintamiesiems
let [firstName, middleName, lastName] = ['Dylan', 'Coding God', 'Israel'];

lastName = 'Clements';

console.log(lastName)

Masyvas

Objektas

const personalInformation = {
    firstName: 'Dylan',
    lastName: 'Israel',
    city: 'Austin',
    state: 'Texas',
    zipCode: 73301
};

const {firstName: fn, lastName: ln} = personalInformation;

console.log(`${fn} ${ln}`);

Object literal

  • Sintaksė, kuri leidžia papraščiau susieti funkcijos parametrus su objekto savybėmis
function addressMaker(city, state) {
    const newAdress = {newCity: city, newState: state};
    
    console.log(newAdress);
}

Old shool

ES6

function addressMaker(city, state) {
    const newAdress = {city, state};
    
    console.log(newAdress);
}

For of

  • Ciklas darbui su objektais ir masyvais

ES6

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

Spread operator

  • Sintaksė leidžia išplėsti pakartojamą, pvz., Masyvo išraišką ar eilutę, vietose, kur tikimasi nulio ar daugiau argumentų
const numbers = [1, 2, 3];
function sum(nums) {
    console.log(nums);

}

Problema

ES6

const numbers = [1, 2, 3];
function sum(...nums) {
    console.log(nums);

}

Arow function

  • Paprastesnė funkcijos sintaksė

ES6

function sum(...nums) {
    let total = nums.reduce((x, y) => x + y);
    console.log(total);

}
sum(1,2,3);

Includes

  • Patikrina ar masyve yra lyginama reikšmė

ES6

if(data.includes('Kazkas')){
	console.log("Kontaktas surastas");
} else{
	console.log("Kontaktas nerastas");
}

Import, export

  • Leidžia kurti moduliarų kodą, kurį naudojame tada kai to reikia. Eksportuodami ir importuodami
let data = {
    name:'John',
    lastname: "Gates",
    age: 37
}

export default {data};

Export

Import

import data from 'data.js';


console.log(data);

JS ES6

By Martynas Kašelionis

Made with Slides.com

JS ES6

  • 262

More from Martynas Kašelionis