初识ECMAScript 6 (ES6)

ECMAScript 6 (ES6),也称为 ECMAScript 2015,是 JavaScript 的一个主要更新,增加了许多新的特性和改进,使得编写 JavaScript 更加简洁、高效和易于维护。以下是 ES6 中的一些重要特性及其详细阐述:

1. 块级作用域 (Block Scope)

letconst

在 ES6 之前,JavaScript 只有函数作用域和全局作用域。letconst 引入了块级作用域,这意味着变量只在块内(如 {} 内)有效。

{let x = 10;const y = 20;console.log(x); // 10console.log(y); // 20
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

2. 箭头函数 (Arrow Functions)

箭头函数提供了一种更简洁的函数定义方式,并且不绑定自己的 this 值,this 保持为外层作用域的 this

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5// Traditional function
function add(a, b) {return a + b;
}

3. 模板字面量 (Template Literals)

模板字面量使用反引号 (`) 创建,可以嵌入表达式和多行字符串。

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!const multiLine = `This is
a string
spanning multiple lines.`;
console.log(multiLine);

4. 解构赋值 (Destructuring Assignment)

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

数组解构
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
对象解构
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25

5. 默认参数 (Default Parameters)

函数参数可以有默认值,当没有传递参数或传递 undefined 时使用默认值。

function greet(name = 'Guest') {console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!

6. 展开语法 (Spread Syntax)

展开语法用于展开数组或对象的元素。

数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

7. 类 (Classes)

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 john = new Person('John', 30);
john.greet(); // Hello, my name is John and I am 30 years old.

8. 模块 (Modules)

ES6 模块允许将代码拆分为更小、更可管理的文件。

导出 (Export)
// math.js
export function add(a, b) {return a + b;
}
export const PI = 3.14159;
导入 (Import)
// main.js
import { add, PI } from './math.js';
console.log(add(2, 3)); // 5
console.log(PI); // 3.14159

9. 迭代器和生成器 (Iterators and Generators)

迭代器

迭代器是一种对象,提供了一个 next 方法,每次调用返回一个包含 valuedone 属性的对象。

const iterable = [1, 2, 3];
const iterator = iterable[Symbol.iterator]();console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
生成器

生成器是用 function* 定义的,可以用 yield 返回多个值。

function* generator() {yield 1;yield 2;yield 3;
}const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

10. Promise

Promise 提供了一种处理异步操作的方式,避免了回调地狱。

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

11. Symbol

Symbol 是一种新的基本数据类型,用来创建唯一的标识符。

const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

12. 新的内置方法

字符串方法
const str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true
console.log(str.includes('world')); // true
数组方法
const arr = [1, 2, 3, 4, 5];
console.log(arr.find(x => x > 3)); // 4
console.log(arr.findIndex(x => x > 3)); // 3

通过这些特性,ES6 大大增强了 JavaScript 的功能和开发体验,鼓励使用更现代的编程风格和更结构化的代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

稀疏迭代最近点算法(Sparse ICP)

2013年,2013年Sofien Bouaziz等提出了一种新的ICP改进算法,稀疏迭代最近点(Sparse Iterative Closest Point, Sparse ICP)算法。更多扩展资料可参看随书附赠资源中的说明文档。 Sparse ICP算法的设计的灵感、应用范围、优缺点和泛化能力 两个几何数据集…

oninput和onchange事件有什么区别?

onchange事件:触发条件:在域内容更改时触发,也可用于单选框和复选框改变后触发;作用 对象:select、input、textarea。 oninput事件:触发事件:在域内容更改时触发(严格说是用户输入时…

NAS—网络附加存储

关键词:私有化存储、Nas、云盘、群晖、Tailscale、 前言 身处于互联网时代的我们,几乎每时每刻都在与计算机打交道,而软件则作为我们和计算机之间沟通的桥梁,因此可以认为软件的作用是:将计算机能力进行包装&#xf…

【React】如何监听LocalStorage的变化

在代码中遇到了需要在react中监听localStorage的数据,下意识想到的是按照useEffect监听useState变化那一套,但是未生效。 代码如下: useEffect(()>{console.log("变化了") },[localStorage.getItem(data)])需要使用监听器 us…

Java基础入门day72

day72 mybatis mybatis的实现方式 三种实现方式: 纯xml方式,namespace随便写,id随便写,只要保证整个项目namespaceid唯一即可 xml接口的方式,namespace必须是接口的全路径,id必须是接口的方法名&#xf…

瓦罗兰特新赛季更新资讯 瓦罗兰特新赛季免费加速器

瓦罗兰特新赛季来喽,这是一款由拳头开发的免费第一人称射击游戏,游戏凭借其独特的玩法和丰富的英雄选择吸引了大量玩家。 我们可以在游戏中选择自己喜欢的角色出场与敌人进行对战,而且每一个角色都有自己独特的道具以及技能,使用好…

SwiftUI 中的内容边距

文章目录 前言创建示例适配 iPad使用 contentMargins可运行 Demo总结前言 SwiftUI 引入了一组视图修饰符,使我们能够有效地管理视图中的安全区域。在许多情况下,安全区域是你希望放置内容的地方。今天,我们将了解 SwiftUI 引入的新内容边距概念以及它与安全区域的区别。 创…

MySQL数据管理

表的基本概念 数据完整性 实体完整性 每一行必须是唯一的实体 域完整性 检查每一列是否有效 引用完整性 确保所有表中的数据的一致性,不允许引用不存在的值 用户定义的完整性 制定特定的业务规则 主键 用于唯一标识表中的行数据由一个或多个字段组成具有唯一性…

【Proteus仿真】多变循环彩灯

【Proteus仿真】多变循环彩灯 ‍ 01功能描述 10种灯光效果可通过按键进行切换/通过按键切换灯光效果,通过数码管显示当前灯光模式,并通过按键调节当前灯光速度快慢。 02原理图 ​​ ‍ 03资料内容 源码仿真 04资料获取链接 https://docs.qq.co…

【unity笔记】五、UI面板TextMeshPro 添加中文字体

Unity 中 TextMeshPro不支持中文字体,下面为解决方法: 准备字体文件,从Windows系统文件的Fonts文件夹里拖一个.ttf文件(C盘 > Windows > Fonts ) 准备字库文件,新建一个文本文件,命名为“字库”&…

确认偏差:金融市场交易中的隐形障碍

确认偏差,作为一种深刻影响交易员决策与表现的心理现象,其核心在于个体倾向于寻求与既有信念相符的信息,而自动过滤或轻视与之相悖的资讯。这种认知偏见严重扭曲了交易者的决策过程,导致他们过分依赖符合既有观念的数据&#xff0…

pdf合并,这三种方法学会了吗?

在信息爆炸的时代,PDF文档凭借其跨平台、不易修改的特性,成为了我们工作和学习中不可或缺的一部分。然而,当面对多个PDF文件需要合并成一个完整的文档时,许多人可能会感到头疼。今天,就让我们一起来探讨三种高效的PDF合…

Rust Eq 和 PartialEq

Eq 和 PartialEq 在 Rust 中&#xff0c;想要重载操作符&#xff0c;你就需要实现对应的特征。 例如 <、<、> 和 > 需要实现 PartialOrd 特征: use std::fmt::Display;struct Pair<T> {x: T,y: T, }impl<T> Pair<T> {fn new(x: T, y: T) ->…

C#——里氏转换详情

里氏转换 里氏转换就是派生类的对象赋值给父类对象&#xff0c;反之则不行 实例 : 先创键一个类然后继承 调用

LLM App统计报告【Streamlit】

本文重点介绍了 Streamlit 报告&#xff1a;2023 年 LLM 应用状况&#xff0c;深入了解了 2023 年在 Streamlit 社区云上部署的所有 LLM 应用程序的统计数据。 Streamlit 是一个开源框架&#xff0c;旨在方便部署数据科学和机器学习应用程序。LLM 的最新发展使 Streamlit 成为开…

设计模式(c++)

目录 开闭原则合成复用原则 设计模式单例模式 &#xff08;Singleton&#xff09;工厂方法模式&#xff08;Factory Method&#xff09;适配器模式 &#xff08;Adapter&#xff09;外观模式 &#xff08;Facade&#xff09;代理模式&#xff08;Proxy&#xff09;桥接模式&…

[leetcode]search-insert-position 搜索插入位置

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int searchInsert(vector<int>& nums, int target) {int left 0, right nums.size()-1;while(left <right) {int mid left (right-left)/2;if(nums[mid] target){return mid;} else if(nu…

软件测试之接口测试(Postman/Jmeter)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、什么是接口测试 通常做的接口测试指的是系统对外的接口&#xff0c;比如你需要从别的系统来…

Omni 动画核心运动包 - 为 Unity 游戏开发者带来卓越体验

Omni 动画核心运动包 前言资源包内容领取兑换码 前言 亲爱的 Unity 游戏开发者们&#xff0c;今天要向大家介绍一款令人瞩目的动画资源 - Omni 动画核心运动包。 这个运动包包含了多达 74 个 mocap 运动动画&#xff0c;每一个动画都是由专业演员通过我们先进的人工智能驱动动…

汽车电子行业知识:什么是车载智能座舱

1.什么是车载智能座舱 车载智能座舱是指搭载在汽车内部的一种智能系统&#xff0c;它集成了各种功能和技术&#xff0c;旨在提升驾驶体验、增加安全性和提供更多的便利。这种系统可以包括诸如智能驾驶辅助、信息娱乐、智能语音控制、车内环境控制、车辆健康监测等功能。通过车…