JavaScript ES6 新特性全览：变量声明、函数语法、数据结构等多方面解析(面试)

一只小阿乐2025-02-09 20:08

ECMAScript 6（简称 ES6）带来了许多强大的新特性，极大地提升了开发效率和代码的可读性。本文将带你全面了解 ES6 的主要新特性。

一、let 和 const 关键字

let和const是 ES6 中引入的新的变量声明方式，与传统的var相比，具有以下重要区别：

1.let

  • 块级作用域：声明的变量具有块级作用域，只在其声明的代码块内有效，如函数体、循环体、条件语句块等。

  • 不存在变量提升 ：在使用let声明变量时，变量不会被提升到其作用域的顶部，在变量声明之前访问该变量会抛出错误。

    {
    let x = 10;
    console.log(x); // 10
    }
    console.log(x); // 报错，x 未定义

    console.log(y); // 报错，y is not defined
    let y = 20;

2.const

  • 声明常量：用于声明常量，一旦赋值后就不能再被重新赋值，有助于确保某些值在程序的生命周期内保持不变，提高代码的可维护性和可读性。

  • 块级作用域 ：与let一样，具有块级作用域。

  • 并非完全不可变 ：当使用const声明一个对象或数组时，它指向的内存地址不能被改变，但对象或数组的内容是可以修改的。

    const PI = 3.14;
    // PI = 3.14159; // 报错，不能重新赋值

    复制代码 
    {
   const MAX_VALUE = 100;
   console.log(MAX_VALUE); // 100
 }
 console.log(MAX_VALUE); // 报错，MAX_VALUE is not defined

    const obj = { name: 'John' };
    obj.name = 'Jane'; // 可以修改对象的属性
    console.log(obj); // { name: 'Jane' }

    复制代码 
     const arr = [1, 2, 3];
 arr.push(4); // 可以修改数组的内容
 console.log(arr); // [1, 2, 3, 4]

总之，let和const的引入使 JavaScript 的变量声明更加安全和可预测，避免了变量作用域不明确和变量提升带来的问题。在实际开发中，应根据具体情况选择使用let或const来声明变量或常量。

二、箭头函数

1.箭头函数是一种简洁的函数表达式语法

基本语法：

  1. param => expression：当函数只有一个参数且函数体是一个表达式时使用。

  2. (param1, param2) => { statements }：当有多个参数或函数体包含多条语句时使用。

    复制代码 
    const sum = (a, b) => a + b;
const square = x => x * x;

特点：

  • 没有自己的this、arguments、super或new.target，继承了外层函数的这些值。

  • 例如：

    const obj = {
    numbers: [1, 2, 3],
    doubleNumbers: function() {
    return this.numbers.map(num => num * 2);
    }
    };
    console.log(obj.doubleNumbers()); // [2, 4, 6]

2.箭头函数的 this 指向问题

在传统的 JavaScript 函数中，this的指向取决于函数的调用方式。然而，在箭头函数中，this的指向是在定义时确定的，它继承自外层的执行上下文。

复制代码 
function Person() {
  this.age = 30;
  // 传统函数
  this.increaseAgeTraditional = function() {
    setTimeout(function() {
      this.age++;
      console.log(this.age); // 通常情况下这里的 this 不再指向 Person 的实例
    }, 1000);
  };
  // 箭头函数
  this.increaseAgeArrow = function() {
    setTimeout(() => {
      this.age++;
      console.log(this.age); // 这里的 this 指向 Person 的实例，因为继承了外层的 this
    }, 1000);
  };
}
 
const person = new Person();
person.increaseAgeTraditional(); // 可能会报错或者输出不是预期的值
person.increaseAgeArrow(); // 正确地输出增加后的 age

三、模板字符串

  • 基本语法 ：使用反引号（）包裹字符串，在字符串中可以使用 ${expression}` 的形式插入变量或表达式。

    const name = "John";
    const greeting = Hello, ${name}!;
    console.log(greeting); // Hello, John!

  • 多行字符串：可以轻松地表示多行文本。

    const poem = This is a poem. It has multiple lines.;
    console.log(poem);

四、解构赋值

允许从数组或对象中提取值，并将其赋值给变量。

  • 数组解构：

    const [a, b] = [10, 20];
    console.log(a); // 10
    console.log(b); // 20

  • 对象解构：

    const person = { name: "Alice", age: 30 };
    const { name, age } = person;
    console.log(name); // Alice
    console.log(age); // 30

五、默认参数

在函数定义时可以为参数设置默认值。

复制代码 
function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Bob"); // Hello, Bob!

六、展开运算符

  • 数组展开：可以将数组或对象展开为单个元素。

    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const combined = [...arr1,...arr2];
    console.log(combined); // [1, 2, 3, 4, 5, 6]

  • 对象展开：

    复制代码 
    const obj1 = { a: 1, b: 2 };
 const obj2 = { c: 3, d: 4 };
 const combinedObj = {...obj1,...obj2 };
 console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

七、Promise

用于处理异步操作的对象。

  • 基本用法 ：Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

    const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve("Success!");
    }, 2000);
    });
    promise.then(result => {
    console.log(result); // Success!
    }).catch(error => {
    console.log(error);
    });

  • 链式调用：可以进行链式调用，方便地处理多个异步操作。

    const promise1 = new Promise((resolve, reject) => {
    resolve(10);
    });
    const promise2 = promise1.then(result => result * 2);
    const promise3 = promise2.then(result => result + 5);
    promise3.then(result => {
    console.log(result); // 25
    });

八、class 类

ES6 引入了类的概念，使面向对象编程更加直观。

  • 定义类：

    class Person {
    constructor(name, age) {
    this.name = name;
    this.age = age;
    }
    greet() {
    console.log(Hello, my name is ${this.name} and I am ${this.age} years old.);
    }
    }
    const person1 = new Person("Bob", 30);
    person1.greet();

  • 继承 ：使用extends关键字实现继承。

    class Student extends Person {
    constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
    }
    study() {
    console.log(${this.name} is studying in grade ${this.grade}.);
    }
    }
    const student1 = new Student("Alice", 15, 9);
    student1.greet();
    student1.study();

九、模块化（import 和 export）

ES6 支持模块化编程，使代码更加可维护和可复用。

  • 导出模块 ：使用export关键字导出函数、变量或类。

    // module.js
    export const add = (a, b) => a + b;
    export class Person {
    constructor(name) {
    this.name = name;
    }
    }

  • 导入模块 ：使用import关键字导入模块。

    // main.js
    import { add, Person } from './module.js';
    const result = add(10, 20);
    console.log(result); // 30
    const person = new Person("John");
    console.log(person.name); // John

十、Set 和 Map 数据结构

1.Set（集合）
  1. 特点：是一种新的数据结构，类似于数组，但成员的值都是唯一的。可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数来初始化。
  2. 用法：

  • 创建和添加元素：

    const s = new Set();
    s.add(1);
    s.add(2);
    s.add(2); // 重复添加无效
    console.log(s); // Set(2) {1, 2}

  • 数组去重：

    const arr = [1, 2, 2, 3, 3, 4];
    const uniqueArr = Array.from(new Set(arr));
    console.log(uniqueArr); // [1, 2, 3, 4]

**Array.from是ECMAScript 6中新增的一个静态方法，用于将类数组对象或可迭代对象（如字符串、Set、Map、NodeList等）转换为真正的数组。

2.Map（字典）

  1. 特点：是一种键值对的集合，其中键可以是任何类型的值，包括对象。相比传统的以字符串作为键的对象，Map 更加灵活和高效。

  2. 用法： 创建和添加键值对：

    const m = new Map();
    m.set('name', 'John');
    m.set('age', 30);
    console.log(m); // Map(2) {'name' => 'John', 'age' => 30}

  • 根据键获取值：

    console.log(m.get('name')); // John

十一、Symbol 类型

  • 用途：是一种新的原始数据类型，表示独一无二的值。可以用作对象的属性名，确保不会与其他属性名冲突。

    const sym1 = Symbol('description');
    const obj = {};
    obj[sym1] = 'value';
    console.log(obj[sym1]); // value

  • 内置 Symbol ：ES6 定义了一些内置的 Symbol，用于特定的目的。例如，Symbol.iterator用于定义对象的迭代器。

    const arr = [1, 2, 3];
    const iterator = arrSymbol.iterator;
    console.log(iterator.next()); // {value: 1, done: false}

十二、Proxy 和 Reflect

1.Proxy（代理）

  1. 作用：可以拦截对象的各种操作，如属性访问、赋值、函数调用等，并在这些操作发生时执行自定义的逻辑。

  2. 用法：

    const target = {
    name: 'John',
    age: 30
    };
    const handler = {
    get: function(obj, prop) {
    console.log(Getting property ${prop});
    return obj[prop];
    },
    set: function(obj, prop, value) {
    console.log(Setting property ${prop} to ${value});
    obj[prop] = value;
    return true;
    }
    };
    const proxy = new Proxy(target, handler);
    console.log(proxy.name); // Getting property name，然后输出'John'
    proxy.age = 31; // Setting property age to 31

2.Reflect（反射）

  1. 作用：提供了一组与 Proxy 拦截操作对应的方法，用于执行这些操作的默认行为。

  2. 用法：

    const obj = {
    name: 'John',
    age: 30
    };
    console.log(Reflect.get(obj, 'name')); // John
    Reflect.set(obj, 'age', 31);
    console.log(obj.age); // 31

相关推荐
gotoc丶22 分钟前
堆排序：力扣215.数组中的第K个大元素
javascript·数据结构·算法·leetcode·排序算法
NaZiMeKiY1 小时前
HTML5前端第二章节
前端·html·html5
天若有情6731 小时前
深入浅出：HTML 中 ＜a＞ 标签嵌入链接教程
前端·html
烂蜻蜓1 小时前
HTML 样式之 CSS 全面解析
前端·css·html
冬冬小圆帽1 小时前
Webpack 优化深度解析：从构建性能到输出优化的全面指南
前端·webpack·node.js
Tiger Z1 小时前
R 语言科研绘图 --- 密度图-汇总
开发语言·程序人生·r语言·贴图
叶雅茗2 小时前
PHP语言的区块链扩展性
开发语言·后端·golang
双叶8363 小时前
(C语言)写一个递归函数DigitSum(n)，输入一个非负整数，返回组成它的数字之和（递归函数）
c语言·开发语言·数据结构·算法·游戏
大龄大专大前端3 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流3 小时前
【SpringMVC】常用注解：@SessionAttributes
java·服务器·前端
热门推荐
01本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05DeepSeek RAGFlow构建本地知识库系统06本地部署DeepSeek教程（Mac版本）07命令行方式将mysql数据库迁移到达梦数据库（全步骤）08如何本地部署AI智能体平台，带你手搓一个AI Agent09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10rv1126交叉编译opencv+ffmpeg+x264