gpt4 book ai didi

JavaScript ES6

转载 作者:知者 更新时间:2024-03-13 01:32:29 24 4
gpt4 key购买 nike

在本教程中,您将借助示例了解 JavaScript ES6。
    JavaScript ES6(也称为 ECMAScript 2015 或 ECMAScript 6)是 2015 年推出的较新版本的 JavaScript。
    ECMAScript 是 JavaScript 编程语言使用的标准。ECMAScript 提供了关于 JavaScript 编程语言应该如何工作的规范。
    本教程简要总结了 ES6 的常用特性,以便您快速入门 ES6。

JavaScript let

JavaScript let 用于声明变量。以前,变量是使用 var 关键字声明的。
    要详细了解 let 和 var 之间的区别,请访问JavaScript let vs var
    使用 let 声明的变量是块范围的。这意味着它们只能在特定区块内访问。例如,

// variable declared using let
let name = 'Sara';
{
    // can be accessed only inside
    let name = 'Peter';

    console.log(name); // Peter
}
console.log(name); // Sara
JavaScript const

const 语句用于在 JavaScript 中声明常量。例如,

// name declared with const cannot be changed
const name = 'Sara';

一旦声明,就不能更改 const 变量的值。

JavaScript 箭头函数

在 ES6 版本中,可以使用箭头函数创建函数表达式。例如,
    这个函数

// function expression
let x = function(x, y) {
   return x * y;
}

可以写成

// function expression using arrow function
let x = (x, y) => x * y;

要了解有关箭头函数的更多信息,请访问JavaScript 箭头函数

JavaScript 类

JavaScript 类用于创建对象。类与构造函数类似。例如,

class Person {
  constructor(name) {
    this.name = name;
  }
}

关键字 class 用于创建类。属性在构造函数中分配。
    现在您可以创建一个对象。例如,

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person1 = new Person('John');

console.log(person1.name); // John

要了解有关类的更多信息,请访问JavaScript 类

默认参数值

在 ES6 版本中,您可以在函数参数中传递默认值。例如,

function sum(x, y = 5) {

    // take sum
    // the value of y is 5 if not passed
    console.log(x + y);
}

sum(5); // 10
sum(5, 15); // 20

在上面的示例中,如果不传递 y 的参数,默认情况下 y 取值为 5。
    要了解有关默认参数的更多信息,请访问JavaScript 函数默认参数

JavaScript 模板字面量(模板字符串)

模板字面量使在字符串中包含变量变得更加容易。例如,在您必须这样做之前:

const first_name = "Jack";
const last_name = "Sparrow";

console.log('Hello ' + first_name + ' ' + last_name);

这可以通过以下方式使用模板字面量实现:

const first_name = "Jack";
const last_name = "Sparrow";

console.log(`Hello ${first_name} ${last_name}`);

要了解有关模板字面量的更多信息,请访问 JavaScript 模板字面量

JavaScript 解构

解构语法使为新变量赋值更容易。例如,

// before you would do something like this
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

使用 ES6 解构语法,上述代码可以写成:

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

要了解有关解构的更多信息,请访问JavaScript解构

JavaScript 导入和导出

您可以导出一个函数或一个程序,并通过导入在另一个程序中使用它。这有助于制作可重用组件。例如,如果您有两个名为 contact.js 和 home.js 的JavaScript文件。
    在 contact.js 文件,您可以导出 contact()函数:

// export
export default function contact(name, age) {
    console.log(`The name is ${name}. And age is ${age}.`);
}

然后,当您想在另一个文件中使用 contact()函数时,只需导入该函数即可。例如,在 home.js 文件中:

import contact from './contact.js';

contact('Sara', 25);
// The name is Sara. And age is 25
JavaScript Promise

Promise 用于处理异步任务。例如,

// returns a promise
let countValue = new Promise(function (resolve, reject) {
   reject('Promise rejected'); 
});

// executes when promise is resolved successfully
countValue.then(
    function successValue(result) {
        console.log(result); // Promise resolved
    },
 )

要了解有关 Promises 的更多信息,请访问JavaScript Promises

JavaScript Rest Parameter(剩余参数) and Spread Operator(展开操作符)

您可以使用rest 参数将不确定数量的参数表示为数组。例如,

function show(a, b, ...args) {
  console.log(a); // one
  console.log(b); // two
  console.log(args); // ["three", "four", "five", "six"]
}

show('one', 'two', 'three', 'four', 'five', 'six')

您可以使用 … 语法传递剩余的参数。因此,名为剩余参数(Rest Parameter)。
    你可以使用展开操作符 … 将项目复制到单个数组中。例如,

let arr1 = ['one', 'two'];
let arr2 = [...arr1, 'three', 'four', 'five'];
console.log(arr2); // ["one", "two", "three", "four", "five"]

剩余参数和展开操作符都使用相同的语法。但是,展开操作符用于数组(可迭代值)。
    要了解有关扩展运算符的更多信息,请访问 JavaScript 扩展运算符

上一教程 :JS Modules                                          下一教程 :JS Arrow Function

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/ES6

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com