JavaScript知识要点和ES6特性（来自任务列表管理demo）

最新推荐文章于 2025-05-31 16:02:29 发布

一个游离的指针

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量392

点赞数 3

文章标签： javascript es6 前端

本文链接：https://blog.youkuaiyun.com/2301_81192892/article/details/145734394

版权

1.立即执行函数：IIFE ( function a (){} ) ( )

定义后立即执行。创建一个独立的作用域；

2.闭包：function a(){

let x = [],

function b(){}

}

函数嵌套函数，只有内部函数能访问外部函数的变量。使变量驻留在内存中不被回收；

3.箭头函数：()=>{}

没有自己的 this、arguments、super 或 new.target,继承自外层函数的 this 值。处理回调函数时非常方便;

4.Promise对象：new Promise （( resolve , reject ) => {}）接收的是执行器函数

处理异步操作,三个状态pending（进行中）、fulfilled（已成功）、rejected（已失败）

处理结果用then和catch，可以链式调用所以避免了回调地狱，then每次都返回一个新的Promise

const promise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        const randomNumber = Math.random();
        if (randomNumber > 0.5) {
            // 操作成功，将 Promise 状态变为 fulfilled
            resolve('操作成功');
        } else {
            // 操作失败，将 Promise 状态变为 rejected
            reject('操作失败');
        }
    }, 1000);
});

// 处理 Promise 的结果
promise
  .then((result) => {
        // 当 Promise 状态变为 fulfilled 时执行
        console.log(result);
    })
  .catch((error) => {
        // 当 Promise 状态变为 rejected 时执行
        console.error(error);
    });

5.模板字符串：` <div class="task-item">

<span>${index + 1}. ${task}</span>

</div> `

使用反引号（`）来定义字符串

可以直接在反引号内换行，允许在字符串中嵌入表达式${}

！！！可以在模板字符串前加上一个函数名，这个函数会被调用并处理模板字符串的各个部分

function myTag(strings, ...values) {
    let result = '';
    strings.forEach((string, index) => {
        result += string;
        if (index < values.length) {
            result += values[index];
        }
    });
    return result;
}

const person = 'Alice';
const thing = 'book';
const output = myTag`${person} 有一本 ${thing}。`;
console.log(output);

6.map方法： map（（ currentValue，index，array ）=> {} ）

currentValue：当前正在处理的数组元素。
index：当前元素的索引。
array：调用 map 方法的原数组。

创建一个新数组，新数组中的每个元素是原数组中对应元素经过某种处理后的结果。map 方法不会改变原数组，而是返回一个新数组。

map（）和模板字符串结合使用，用于动态生成div，列表等等

    const renderTasks = () => {
        const taskList = document.getElementById('taskList');
        taskList.innerHTML = tasks.map((task, index) => `
            <div class="task-item">
                <span>${index + 1}. ${task}</span>
                <button onclick="TaskManager.deleteTask(${index})">删除</button>
            </div>
        `).join('');
    }

7.async/await 语法：

基于Promise的语法糖，给函数添加async关键字后始终返回一个Promise，在函数体内使用await会让async函数暂停直到await指定的函数Promise完成再继续进行async函数

const init = async () => { // ES7 async/await
        try {
            await loadTasks();
            renderTasks();
        } catch (error) {
            console.error('加载失败:', error);
        }
    };

8.解构赋值：

对象结构赋值：

const { value } = document.getElementById('taskInput');

从对象中拿到value的值并且放在const这个静态的value上

9.事件监听：

document.getElementById('taskForm').addEventListener('submit', (e) => {
    e.preventDefault();

preventDefault()方法阻止元素默认行为，这里阻止了提交行为防止页面刷新

10.展开运算符：（...a）和[...a]

可以用于传递多个参数。

*剩余参数是 function a （...args）把函数a收到的参数都放到了数组args中