ES6基本语法(一)

ES6的介绍

ES6是ECMAScript的第六个版本。

JavaScript是基于ESCMAScript的规范实现的编程语言。

ES6可以看作是JavaScript的一个重要版本更新。

ES6的重要引入:

  • 块级作用域letconst关键字的确提供了块级作用域,这使得变量的作用域限制在其所在的代码块内,有助于避免变量冲突和意外修改。

    if (true) {
      let x = 1; // x只在if语句内可用
    }
    // try accessing x here -> x is not defined
    
  • 箭头函数:提供了一种更简洁的函数定义方式,并且自动绑定this到当前作用域。

    const add = (a, b) => a + b;
    console.log(add(1, 2)); // 输出: 3
    
  • :虽然JavaScript本质上是基于原型的,但ES6引入了类的概念,作为一种语法糖,使得对象的创建和继承更加直观。

    class MyClass {
      constructor() {
        this.field = 'value';
      }
    }
    
  • 模板字符串:使用反引号(`)定义,可以在字符串中嵌入变量和表达式。

    const variable = 'world';
    console.log(`Hello, ${variable}`); // 输出: Hello, world
    
  • 解构赋值:允许从数组或对象中提取数据并赋值给对应的变量,使得获取数据更为方便。

    // 数组解构
    const [first, second] = ['Hello', 'World'];
    console.log(first, second); // 输出: Hello World
    
    // 对象解构
    const {a, b} = {a: 1, b: 2};
    console.log(a, b); // 输出: 1 2
    
  • 函数参数默认值:允许你为函数参数设置默认值,当调用函数时不传递相应参数时,会使用默认值。

    function greet(name = 'Guest') {
      return `Hello, ${name}`;
    }
    console.log(greet()); // 输出: Hello, Guest
    console.log(greet('John')); // 输出: Hello, John
    
  • Promise对象:代表一个异步操作的最终完成(或失败)及其结果值。它可以简化异步编程,使代码更加清晰。

    const promise = new Promise((resolve, reject) => resolve('Success'));
    promise.then(result => console.log(result)); // 输出: Success
    
  • Set和MapSet是一种不允许重复的集合,Map是一种键值对的集合,它们提供了更多的数据处理能力。

    const mySet = new Set();
    mySet.add('element');
    console.log(mySet.size); // 输出: 1
    
    const myMap = new Map();
    myMap.set('key', 'value');
    console.log(myMap.get('key')); // 输出: value
    
  • 模块化:ES6引入了原生模块系统,允许你导出和导入函数或变量,使得代码结构化更好,易于维护。

    // 导出模块
    export function sayHello() { console.log('Hello'); }
    
    // 导入模块
    import { sayHello } from './myModule.js';
    sayHello(); // 输出: Hello
    

基本语法

变量和常量

变量

在JavaScript中,变量是用来存储数据的容器。你可以使用let关键字来声明变量,然后给它赋予不同的数据类型。

字符串类型:string

字符串是由一系列字符组成的,可以是单引号或双引号包裹,也可以使用ES6的模板字符串,用反引号(`)包裹,可以在其中嵌入变量。

let str = 'Hello, World';
let templateString = `Hello, World! This is a template string with an embedded variable: ${'John'}`;
console.log(templateStrings); // 输出: Hello, World! This is a template string with an embedded variable: John
数值类型:number

数值类型包括整数和浮点数。

let integer = 10;
let float = 3.14;
console.log(integer, float); // 输出: 10 3.14

使用let声明的变量具有块级作用域,即它们只在声明它们的代码块内可见。这是一个改进,因为它减少了全局命名空间的污染,并防止了变量提升可能引起的潜在问题。

常量

使用const声明,一旦赋值后其值不能被改变。

const PI = 3.14159;
// 尝试重新赋值会导致错误
// PI = 3; // 这行代码会引起错误,因为PI是常量

变量与常量的区别

变量在初始化之后可以重新赋值,而常量不可以。

let count = 1;
count = 2; // 这是可以的,变量count的值被更新为2

使用const声明的变量同样拥有块级作用域,而且它们通常是不可变的。但是需要注意的是,如果你赋值的是一个对象或者数组,那么这个对象或数组内部的属性还是可以被改变的。

const person = { name: 'John' };
person.name = 'Mike'; // 这是可以的,改变了对象的属性

因此,即使使用了const,也要小心不要改变不应该改变的数据。

相关推荐

  1. ES6基本语法

    2024-07-17 15:50:04       23 阅读
  2. ES6基础语法

    2024-07-17 15:50:04       56 阅读
  3. es6基础语法

    2024-07-17 15:50:04       20 阅读
  4. ES6基本语法及常用方法

    2024-07-17 15:50:04       36 阅读
  5. ES6基本语法(四)——对象和类

    2024-07-17 15:50:04       20 阅读
  6. ES6基本语法(二)——函数与数组

    2024-07-17 15:50:04       21 阅读
  7. ES6语法笔记

    2024-07-17 15:50:04       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 15:50:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 15:50:04       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 15:50:04       58 阅读
  4. Python语言-面向对象

    2024-07-17 15:50:04       69 阅读

热门阅读

  1. 100道ajax面试题、练习题

    2024-07-17 15:50:04       21 阅读
  2. Flask与Django框架比较

    2024-07-17 15:50:04       20 阅读
  3. MPNN消息传递神经网络

    2024-07-17 15:50:04       25 阅读
  4. C# —— (左移 右移 异或 与 或 )运算规则

    2024-07-17 15:50:04       20 阅读
  5. 知识加油站

    2024-07-17 15:50:04       20 阅读
  6. 鹈鹕优化算法(POA)及其Python和MATLAB实现

    2024-07-17 15:50:04       22 阅读
  7. 互联网开发工作现状的深度剖析

    2024-07-17 15:50:04       20 阅读
  8. 用c语言写一个贪吃蛇游戏

    2024-07-17 15:50:04       25 阅读
  9. 【VUE】9、VUE项目中使用VUEX完成状态管理

    2024-07-17 15:50:04       21 阅读
  10. 前后端延迟问题应该如何解决

    2024-07-17 15:50:04       21 阅读
  11. ES6 数组的扩展(十六)

    2024-07-17 15:50:04       20 阅读
  12. 如何查看极狐GitLab Helm Chart?

    2024-07-17 15:50:04       19 阅读