从初学者到高级ð学习ecmascript 6
#javascript #编程 #es6

它是什么?
是JavaScript所基于的脚本语言规范。 Ecma International负责标准化Ecmascript。

在JavaScript中添加了许多新功能,在这篇文章中,我们将看到最有价值的功能。

默认参数和使用模板文字的串联

带有默认值的函数参数(如果不包含值或未定义)初始化默认值。

模板文字提供了一种简便的方法,可以插值变量和表达式成字符串。

function printMessage(message = 'default'){
  if (message !== 'default'){
    return `Custom message with this value: ${message}`
  }

  return `Hello, this is ${message} message`
}

让和const

ES6约定:

  • 默认使用const
  • 如果您必须重新启动变量,请使用let
  • 可以重新定制并重新分配var
  • 可以重新分配let,但不能重新签名。
  • const不能重新安排并重新分配。

Table comparation const, let and var

var a = 10;
console.log(a); //10
{
  let a = 2;
  console.log(a); //2
}
console.log(a); //10

var b = 10;
console.log(b)// Here b is 10
{
  const b = 2;
  console.log(b)// Here b is 2
}
console.log(b)// Here b is 10

箭头功能

箭头功能没有悬浮。它们必须在使用之前定义。
建议将const用于arrow functions,因为函数表达式始终是恒定值。

const sumData = (a,b) => a + b;

console.log(sumData(23,4)); // 27

传播(...)操作员

它允许我们快速将现有数组或对象的全部或部分复制到另一个数组或对象中。

const pokemonKanto = ['pikachu','zubat'];
const pokemonHoenn = ['torchid','latios'];

const listPokemonAllRegion = [...pokemonKanto,...pokemonHoenn]

console.log(listPokemonAllRegion); // ["pikachu", "zubat", "torchid", "latios"]

破坏性

破坏性分配语法是一种JavaScript表达式,可以从数组或从对象的属性中拆卸值,从对象中解开值。

const [a, b] = ["hello", "Jose"];
console.log(a); // "hello"
console.log(b); // "jose"

const obj = { nombre: "Jose", apellido: "Silva" };
const { nombre, apellido } = obj;
console.log(nombre,apellido); // "Jose Silva"

const getYearAndMonth = function () {
  return ["2022", "December"];
};
const [year, month] = getYearAndMonth();
console.log(year); //2022
console.log(month); //December

const getPokemon = function () {
  return {
    name:'pikachu',
    trainner:'Ash',
  };
};
const {name,trainner} = getPokemon();
console.log(name); //pikachu
console.log(trainner); //Ash

for/of loop

这是一种迭代阵列的新方法

function printAllNames(...names) {
  let listOfName = 'list of name: ';
  for (let name of names){
   listOfName += name + " ";
  } 
  return listOfName;

}

let result = printAllNames('pablo','jose','ernesto','');

console.log(result); //list of name: pablo jose ernesto

休息参数

剩余的参数语法允许函数接受无限的参数作为数组。

function multiply(...values) {
  let operation = 1;
  for (let value of values){
    operation *= value;
  } 
  return operation;

}

let result = multiply(1,2,3,4,5,6);

console.log(result); //720

课程

JavaScript类是JavaScript对象的模板。
使用关键字类创建类。
始终添加一个名为constructor()的方法:

class PlayerSoccer {
  constructor(name, selection) {
    this.name = name;
    this.selection = selection;
  }
}

const playerOne = new PlayerSoccer('messi','argentina');
const playerTwo = new PlayerSoccer('ronaldo', 'portugal');

console.log(playerOne); //PlayerSoccer {name: "messi", selection: "argentina", constructor: Object}
console.log(playerTwo); //PlayerSoccer {name: "ronaldo", selection: "portugal", constructor: Object}
export { PlayerSoccer };

模块

模块以两种不同的方式导入:

  1. 从文件工具中命名的导出
export default class Pokemon {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}
  1. 从文件pokemon.js导入默认导出:
class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }
}

class Bike {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }
}
export { Car, Bike };
import Pokemon from "./pokemon";
import { Car, Bike } from "./vehicle";

const firstPokemon = new Pokemon("pikachu", "electric");
console.log(firstPokemon);

const firstCar = new Car("Toyota", "yaris", 2020);
console.log(firstCar);

const firstBike = new Bike("Suzuki", "gixxer", 2021);
console.log(firstBike);


JavaScript集是一个唯一值的集合。
每个值只能在集合中发生一次。
一组可以容纳任何数据类型的任何值。

const words = new Set();

words.add('a');
words.add('b');
words.add('a');
console.log(words); //a,b

承诺

Promise是在JavaScript中使用异步编程的最简单方法。

const myPromise = () => {
  return new Promise((resolve, reject) => {
      if(true) {
          resolve( "success" )
      }
      else{
          reject( "error" )
      }
    });
}

myPromise()
.then( response => console.log(response) ) // case success
.catch( error => console.log(error) ) //case error

是时候练习ðª»

这是帖子的结尾,也是最令人兴奋的部分,现在轮到您将顶级实践ES6付诸实践了,在这里,我为您提供了一个代码盒,准备您编写代码。切记要分叉codesandbox以保存您的练习。

您有任何问题,在评论中这样做,我将很乐意回答所有问题。我还分享了一些链接,我们可以深入研究Ecmascript 6。

w3schools
Platzi Curso de ECMAScript: Historia y Versiones de JavaScript