JavaScript ES6 让咱们写得少，作得多

JavaScript ES6 带来了新的语法和新的强大功能，使您的代码更现代，更易读。它容许您编写更少的代码并执行更多操做。 ES6 向咱们介绍了许多强大的功能，如箭头函数，模板字符串，对象结构，模块等，让咱们来看看。

const and let

const 是 ES6 中用于声明变量的新关键字。 const 比 var 更强大。使用后，没法从新分配变量。换句话说，它是一个不可变的变量，除非它与对象一块儿使用。

这对于定位选择器很是有用。例如，当咱们有一个触发事件的按钮时，或者当您想在 JavaScript 中选择 HTML 元素时，请使用 const 而不是 var。这是由于 var 会被提高，当不想从新分配变量时，最好使用 const。

// ES5
var MyBtn = document.getElementId('mybtn');

// ES6
const MyBtn = document.getElementById('mybtn');

在上面的代码中，const 不会更改，也不能从新分配。若是您尝试为其赋予新值，则会返回错误。

let name = "Said";
    name = "Rick";

console.log(name); // Rick

let 能够从新分配并得到新的价值。它建立了一个可变变量。

let 与 const 相同，由于二者都是块级做用域，这意味着该变量仅在其块级范围内可用。

箭头函数

箭头函数很是棒，使您的代码更具可读性，更具结构性，而且看起来像现代代码，而不是使用这个：

// ES5
function myFunc(name) {
  return 'Hello ' + name;
}
console.log(myFunc('said'));  // Hello said

而使用 ES6 的写法：

// ES6 Arrow function
const myFunc = name => {
  return `Hi ${name}`;
}
console.log(myFunc('Said')); // Hi Said

// 或者不要 return 关键字
const myFunc = name => `Hi ${name}`;

console.log(myFunc('Said'));// Hi Said

如您所见，箭头功能彷佛更具可读性和清洁性！您将再也不须要使用旧语法。

此外，您可使用箭头功能与 map，filter 和 reduce 内置函数。

const myArray = ['tony', 'Sara', 'Said', 5];

// ES5
let Arr1 = myArray.map(function(item) {
  return item;
});
console.log(Arr1);// ["tony", "Sara", "Said", 5]

// ES6
let Arr2 = myArray.map(item => item);
console.log(Arr2);// ["tony", "Sara", "Said", 5]

带箭头的 map 函数看起来比 ES5 中的 map 更清晰可读。使用 ES6，您能够编写更短的代码，你也能够用相同的方法使用 reduce 和 filter。

模板字符串

模板字符串很是酷，当咱们想在字符串中使用变量时咱们没必要使用加号（+）运算符来链接字符串。

旧语法：

// ES5
function myFunc1(name, age) {
  return 'Hi ' + name + ' Your age is ' + age + ' year old';
}
console.log(myFunc('Said', 22)); // Hi Said, Your age is 22 year old

用 ES6 新语法：

// ES6
const myFunc = (name, age) => {
  return `Hi ${name}, Your age is ${age} year old`;
}
// or
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc1('Said', 22)); // Hi Said, Your age is 22 year old

很简单！这是旧语法和 ES6 之间的巨大差别。使用字符串时，ES6 中的文字字符串看起来比 ES5 更有条理，结构更好。

默认参数

当您忘记编写参数时，它不会返回未定义的错误，由于该参数已在默认值中定义。所以，当您使用遗漏参数运行函数时，它将采用默认参数的值，而且不会返回错误！

看看这个例子：

const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc('Said')); // Hi Said, Your age is undefined year old

上面的函数返回 undefined，由于咱们忘了给它第二个参数 age。

可是若是咱们使用默认参数，当咱们忘记分配参数时,它将使用它的默认值，将不会返回 undefined！

const myFunc = (name, age = 22) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc('Said')); // Hi Said, Your age is 22 year old

如您所见，即便咱们错过了第二个参数，该函数也会返回一个值。如今使用默认参数咱们能够提早处理错误。

数组和对象解构

解构使得将数组或对象的值分配给新变量更容易。

旧语法：

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let name = contacts.name;
let famillyName = contacts.famillyName;
let myAge = contacts.age;

console.log(name); // said
console.log(famillyName); // Hayani
console.log(myAge); // 22

ES6 新语法：

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let {name, famillyName, age} = contacts;

console.log(name); // said
console.log(famillyName); // Hayani
console.log(age); // 22

使用 ES5，咱们必须为每一个变量分配每一个值。使用 ES6，咱们只需将咱们的值放在大括号中以获取对象的任何属性。

注意：若是指定的变量与属性名称不一样，则返回 undefined。例如，若是属性的名称是 name，咱们将其分配给 username变量，它将返回undefined。

咱们老是必须将变量命名为与属性名称相同。可是若是咱们想要重命名变量，咱们可使用冒号：代替。

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let {name:otherName, famillyName, myAge} = contacts;

console.log(otherName);// said

对于数组，咱们使用与对象相同的语法。咱们只需用方括号替换花括号。

const Arr = ['Lionel', 'John', 'Layla', 20];

let [value1, value2, value3] = Arr;
console.log(value1); // Lionel
console.log(value2); // John
console.log(value3); // Layla

Import and export

在 JavaScript 应用程序中使用 import 和 export 使其更强大。它们容许您建立单独的可重用组件。

若是您熟悉任何 JavaScript MVC 框架，您将看到他们使用 import 和 export 出来在大多数时间处理组件。那么它们如何真正起做用呢？

很简单！ export 容许您导出要在另外一个 JavaScript 组件中使用的模块。咱们使用 import 导入该模块以在咱们的组件中使用它。

例如，咱们有两个文件。第一个名为 detailComponent.js，第二个名为 homeComponent.js。

在 detailComponent.js 中，咱们将导出 detail 函数。

// ES6 
export default function detail(name, age) {
  return `Hello ${name}, your age is ${age} year old!`;
}

若是咱们想在 homeComponent.js 中使用此函数，咱们将只使用 import

import { detail } from './detailComponent';

console.log(detail('Said', 20)); // Hello Said, your age is 20 year old!

若是咱们要导入多个模块，咱们只需将它们放在大括号内。

import {detail, userProfile, getPosts} from './detailComponent';
console.log(detail('Said', 20)); 
console.log(userProfile); 
console.log(getPosts));

Promis

Promise 是 ES6 的新功能。这是编写异步代码的方法。例如，当咱们想要从 API 获取数据时，可使用它，或者当咱们有一个须要时间执行的函数时。Promise 使解决问题更容易，因此让咱们建立咱们的第一个 Promise！

const myPromise = () => {
  return new Promise((resolve, reject) => {
    resolve('Hi the Promise execute successfully');
  })
}
console.log(myPromise()); // Promise {<resolved>: "Hi the Promise execute successfully"}

若是您登陆控制台，它将返回一个 Promise。所以，若是咱们想在获取数据后执行一个函数，咱们将使用 Promise。 Promise有两个参数： resolve 和 reject 来处理预期的错误。

注意：fetch函数返回一个Promise自己！

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{
  return fetch(url);
}
getData(url).
then(data=> data.json()).
then(result=> console.log(result));

如今，若是您登陆控制台，它将返回一个数据数组。

Rest 参数和 Spread 运算符

Rest 参数用于获取数组的参数，并返回一个新数组。

const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];

// 经过解构获取值
const [val1, val2, val3, ...rest] = arr;

const Func = (restOfArr) => {
  return restOfArr.filter(item => {return item}).join(" ");
}

console.log(Func(rest)); // Hi Said How are you?

const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];

const Func = (...anArray) => anArray;

console.log(Func(arr)); //  ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?']

spread 运算符与 rest 参数具备相同的语法，可是 spread 运算符采用数组自己而不只仅是参数。咱们可使用 Spread 参数来获取数组的值，而不是使用 for 循环或任何其余方法。

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
  return anArray;
}
console.log(Func(arr)); //["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Class

类是面向对象编程（OOP）的核心。它们使您的代码更安全和封装。使用类能够为代码提供一个很好的结构并使其保持面向对象。

class myClass {
  constructor() {
  }
}

要建立一个类，请使用 class 关键字，后跟带有两个大括号的类的名称。

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user = new myClass('Said', 22);
console.log(user.name); // Said
cosnole.log(user.age); // 22

如今咱们可使用 new 关键字访问类方法和属性。

class myClass{
    constructor(name,age){
    this.name=name;
    this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//  said

要从其余类继承，请使用 extends 关键字，后跟要继承的类的名称。

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    cosnole.log(`Hi ${this.name} your age is ${this.age} `);
  }
}

// 继承 myClass 方法和属性
class UserProfile extends myClass {
  username() {
    console.log(this.name);
  }
}

const profile = new UserProfile('Said', 22);
profile.sayHello();// Hi Said your age is 22;
profile.username();// Said