【翻译】ES6新特性

JavaScript ES6 带来了一些新语法和一些很棒的新特性，这使你的代码更现代化更具可读性。

它可以让你写很少的代码实现更多的功能。ES6介绍了大量的新特性，比如：箭头函数、模板字符串，类、模块化等等，来看一下吧。

const 和 let

const 是ES6中声明变量的一个新的关键字，const比var更强大，一旦使用，变量不能被重新赋值，也就是说，这是一个不可变的变量除非你用它声明object。

这在定位选择器的时候非常有用，比如，有个button按钮要触发事件，而你想用JavaScript选中那个html 元素时，你最好用const代替var，因为var存在变量提升，当不需要重新赋值变量时最好使用const。

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

在上面的代码中，const不会改变也不能被重新赋值，如果你想给它一个新值，将会报错。

let name = "Said";
    name = "Rick";
console.log(name);// Rick

 

let可以被重新赋值并获得新值，它创建的是可变变量。let 和const一样都是块级范围的，即变量只在声明它们的范围内有效。

箭头函数

箭头函数非常赞，它让你的代码更具可读性，更有条理性，并且看起来更现代化。

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

//ES6
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等内置函数；

//ES5
const myArray = ['tony', 'sara', 'said', 5];
let Arr1 = myArray.map(function(item){
    return item;
})
console.log(Arr1);
//ES6
let Arr2 = myArray.map(item => item)
console.log(Arr2);

 

使用了箭头函数的map比ES5的写法更简洁可读，用ES6你可以编写更精简的代码，filter和reduce也是同样的用法。

模板字面量

模板字面量和模板字符串简直了好麽，当我们想在字符中间使用一个变量的时候我们不必再使用 '+'号来连接字符串

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

// 用ES6新语法
const myFunc1 = (name, age) => {
    return `Hi ${name} Your age is ${age} year old!`;
}
console.log(myFunc1('Said', 1))

 

很简单吧！ES6和旧语法的区别很大，当操作字符串的时候，ES6的文字字符串比ES5看起来更有组织性，更结构化！

默认参数

当我用PHP的时候,我经常使用默认参数，这让你可以提前定义一个参数。所以，当你忘记传参数的时候，不会返回undefined的错误，因为参数早已默认定义好了，当你运行一个函数而忘记传参时，它会使用默认的参数，并不会报错。
看下面这个例子

// 不带默认参数
const myFunc = (name, age) => {
  return `hello ${name} your age is ${age} year old?`;
}
console.log(myFunc('said)); 
// hello said your age is undefined year old?

 

上面这个函数返回了undefined错误，因为我们忘记传第二个参数age。
但如果我们使用默认参数，就不会返回undefined，当我们忘记传参时函数会使用默认的参数值。

// 带默认参数
const myFunc = (name, age = 22) => {
  return `hello ${name} your age is ${age} year old?`;
}
console.log(myFunc('said)); 
// hello said your age is 22 year old?

 

如你所见，即使我们没传第二个参数该函数也返回了一个值，现在用默认参数就可以提前避免报错。

数组和对象解构

解构使得将数组或对象的值赋给新变量更加简单
旧语法：

// ES5
const contacts = {
  name: 'said',
  familyName: 'Hayani',
  age: 22
}
let name = contacts.name;
let familyName = contacts.familyName;
let age = contacts.age;
console.log(name); // said
console.log(familyName ); // Hayani
console.log(age ); // 22

 

ES6语法：

const contacts = {
  name: 'said',
  familyName: 'Hayani',
  age: 22
}
let {username, familyName,age} = contacts;
console.log(username); // undefined
console.log(familyName ); // Hayani
console.log(age ); // 22

 

在ES5中，我们必须把每个值分配给每个变量；而用ES6,我们只用把变量名放在大括号里来获取对象中的值；

注意：如果你定义的变量名称与对象中的属性名不一致会返回undefined。比如属性名是name而我们定义一个username的变量名，就会返回undefined（如上面代码所示）

我们必须将变量名命名的和属性名一样才可以获取到值，那万一我们需要重命名怎么办呢，可以用 : 实现。

const contacts = {
  name: 'said',
  familyName: 'Hayani',
  age: 22
}
let {name: username, familyName,age} = contacts;
console.log(username); // 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 与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 form './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);

 

挺棒的对吧？！

Promises

Promises是ES6的新特性，它是一个实现异步代码的函数，它可以在获取API数据的时候使用，也可以在某些需要一定时间才能执行完成的函数中使用，Promises使得解决这些问题更加容易，来创建第一个Promise。

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

 

打印console，会返回一个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参数和扩展运算符

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?

 

扩展运算符和rest参数有相同的语法，但是扩展运算符作用的是数组本身而不仅仅是arguments，我们可以用扩展运算符获取数组中的值，而不是用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 myClass{
   constructor() {}
}

 

用class关键字紧跟着类名和一对大括号{}就可以创建一个类

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

 

现在可以用new关键字创建一个对象来访问类中的方法和属性

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

 

为了继承其他的类，可以用extends关键字后面跟你想继承的类名。

 

class myClass{
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
   sayHello() {
    console.log(`Hi${this.name} your age is ${this.age}`);
  }
}

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

 

原文链接：https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/