javascript功能_下一代JavaScript功能

javascript功能

let和const (let and const)

let and const basically replace var . You use let instead of var and const instead of var if you plan on never re-assigning this "variable". The value of const can’t be changed.

let和const基本上替代了var 。 如果您计划从不重新分配此“变量”，则可以使用let代替var ，使用const代替var 。 const的值不能更改。

ES6箭头功能 (ES6 Arrow Functions)

Arrow functions are a different way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword. Arrow function syntax may look strange but it’s actually simple.

箭头函数是在JavaScript中创建函数的另一种方式。 除了较短的语法外，它们在保持this关键字的范围方面也具有优势。 箭头函数语法可能看起来很奇怪，但实际上很简单。

function animalName (animal) { 
    console.log(animal);
}


//which you could also write as:
const animalName = function(animal) { 
    console.log(animal);
}


//This is much shorter
const animalName = (animal) => { 
    console.log(animal);
}

For no arguments, use empty parentheses in the function declaration:

对于无参数，请在函数声明中使用空括号：

const animalName = () => {
    console.log('Lion');
};

For one argument, omit the parentheses:

对于一个参数，省略括号：

const animalName = (animal) => {
    console.log(animal);
};

For only returning a value,use the following shortcut:

仅返回值，请使用以下快捷方式：

const animalName = (animal) => animal;/*which is equal to*/
const animalName = (animal) => {
    return animal;
};

进出口商品 (Exports & Imports)

In React projects (and actually in all modern JavaScript projects), you split your code across multiple JavaScript files — so-called modules. You do this, to keep each file/ module focused and manageable.

在React项目中(实际上在所有现代JavaScript项目中)，您都将代码分散在多个JavaScript文件中，即所谓的模块。 您这样做是为了保持每个文件/模块的重点和可管理性。

To still access functionality in another file, you need export (to make it available) and import (to get access) statements. You got two different types of exports: default (unnamed) and named exports:

要仍然访问另一个文件中的功能，您需要导出(使其可用)和导入(以获取访问)语句。 您有两种不同类型的导出： 默认 (未命名)和命名导出：

1. default — export default …;
   默认值-导出默认值…；
2. named — export const someData = …;
   命名-export const someData =…;

You can import default exports like this:

您可以这样导入默认导出：

import name from './path/to/file.js';

named exports have to be imported by their name:

命名的出口必须以其名称进口：

import { data } from './path/to/file.js';

file can only contain one default and an unlimited amount of named exports. You can also mix the one default with any amount of named exports in one and the same file. When importing named exports, you can also import allnamed exports at once with the following syntax:

文件只能包含一个默认值，并且不限数量的命名导出。 您还可以将一个默认值与任意数量的命名导出混合在一个文件中。 导入命名的导出时，还可以使用以下语法一次导入所有命名的导出：

import * as bundled from './path/to/file.js';

班级 (Classes)

Classes are a feature which basically replace constructor functions and prototypes. You can define blueprints for JavaScript objects with them.

类是一种功能，基本上可以代替构造函数和原型。 您可以使用它们来定义JavaScript对象的蓝图。

class AnimalName {
	constructor () {
		this.animal = 'Lion';
	}
}


const animalName = new AnimalName();
console.log(animalName.animal);

In the above example, not only the class but also a property of that class (animal ) is defined. They syntax you see there, is the “old” syntax for defining properties. In modern JavaScript , the more convenient way of defining class properties:

在上面的示例中，不仅定义了类，还定义了该类的属性(animal)。 您在此处看到的语法是定义属性的“旧”语法。 在现代JavaScript中，定义类属性的更便捷方法是：

class AnimalName {
 animal = 'Lion';
}const animalName = new AnimalName();
console.log(animalName.animal);

You can also define methods either like this:

您也可以定义如下方法：

class AnimalName(){
    animal='Lion';
    funcAnimal(){
        console.log(this.animal)
    }
}
const animalName = new AnimalName();
console.log(animalName.funcAnimal());

Or like this:

或像这样：

class AnimalName(){
    animal='Lion';
    funcAnimal=()=>{
        console.log(this.animal)
    }
}
const animalName = new AnimalName();
console.log(animalName.funcAnimal());

The second approach has the same advantage as all arrow functions have: The this keyword doesn’t change its reference.

第二种方法具有与所有箭头功能相同的优点：this关键字不会更改其引用。

You can also use inheritance when using classes:

您还可以在使用类时使用继承 ：

class Human {
	species = 'human';
}


class Person extends Human {
	name = 'Max';
	printMyName = () => {
		console.log(this.name);
	};
}


const person = new Person();
person.printMyName();
console.log(person.species);

价差和休息操作员 (Spread & Rest Operator)

The spread and rest operators actually use the same syntax: … Yes, that is the operator — just three dots. It’s usage determines whether you’re using it as the spread or rest operator.

散布和余数运算符实际上使用相同的语法：…是的，那是运算符-只有三个点。 它的用法决定您是将其用作扩展操作还是休息操作符。

Using the Spread Operator:The spread operator allows you to pull elements out of an array (=> split the array into a list of its elements) or pull the properties out of an object. Here are two examples:

使用Spread运算符：Spread运算符使您可以从数组中拉出元素(=>将数组拆分为元素列表)或从对象中拉出属性。 这是两个示例：

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5];

Here’s the spread operator used on an object:

这是在对象上使用的散布运算符：

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};

newObject would then be

然后newObject将是

{
    name: 'Max',
    age: 28
}

解构 (Destructuring)

Destructuring allows you to easily access the values of arrays or objects and assign them to variables. Here’s an example for an array:

通过解构，您可以轻松访问数组或对象的值并将其分配给变量。 这是一个数组的示例：

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]

And here for an object:

这里是一个对象：

const myObj = {
    name: 'Max',
    age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints {name: 'Max', age: 28}

Thanks for reading

谢谢阅读

All credit goes to @maximilian_schwarzmüller

所有功劳归@maximilian_schwarzmüller

翻译自: https://medium.com/swlh/next-generation-javascript-features-84f103cf0234

javascript功能