ES6随笔

news/2024/9/20 7:24:19/ 标签: es6, 前端, ecmascript

ES6(ECMAScript 2015)是JavaScript的一个重大更新,它引入了许多新特性和语法糖,使得JavaScript的开发更加高效和灵活。下面是一些ES6中新增的主要特性及其代码示例:

1. 模板字符串(Template Strings)

模板字符串允许你嵌入表达式,并且可以跨越多行。

let name = "Alice";
let greeting = `Hello, my name is ${name}!`;
console.log(greeting); // Hello, my name is Alice!
let multiLineString = `This is a very long
string which spans across multiple lines.`;
console.log(multiLineString);

2. 箭头函数(Arrow Functions)

箭头函数提供了一种更简洁的函数书写方式,并且不绑定自己的thisargumentssuper,或new.target

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]
const person = {
name: "Bob",
greet: () => `Hello, my name is ${this.name}`
};
console.log(person.greet()); // Hello, my name is undefined
// 注意:这里的`this`指向全局对象(非严格模式)或`undefined`(严格模式)

3. 默认参数值(Default Parameter Values)

允许你为函数的参数设置默认值。

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

4. 解构赋值(Destructuring Assignment)

允许你从数组或对象中提取数据,并将其赋值给声明的变量。

// 数组解构
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [3, 4, 5]
// 对象解构
const person = {
name: "Alice",
age: 30
};
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

5. 类(Classes)

ES6引入了基于原型的对象模型的语法糖,使得JavaScript的面向对象编程更加清晰。

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

6. 模块化(Modules)

ES6引入了模块系统,使得JavaScript代码可以被分割成可复用的模块。

// math.js
export function sum(a, b) {
return a + b;
}
// app.js
import { sum } from './math.js';
console.log(sum(1, 2)); // 3

以上只是ES6引入的一部分新特性,实际上ES6还包含了很多其他重要的更新,如letconst(块级作用域变量)、MapSet(新的数据结构)、Promise(异步编程解决方案)、for...of循环等。


http://www.ppmy.cn/news/1511868.html

相关文章

stable-fast-3d的部署,在服务器Ubuntu22.04系统下——点动科技

在服务器Ubuntu22.04系统下,stable-fast-3d的部署 一、ubuntu22.04基本环境配置1.1 更换清华Ubuntu镜像源1.2 更新包列表:2. 安装英伟达显卡驱动2.1 使用wget在命令行下载驱动包2.2 更新软件列表和安装必要软件、依赖2.2 卸载原有驱动2.3 安装驱动2.4 安…

【Java学习】实现图书管理系统

所属专栏:Java学习 🍁1. 功能演示 用户分为普通用户和管理员,登录进系统之后可以对图书进行一系列操作,此时我们要明白,对图书的操作是通过书架来执行的,我们平常在图书馆上借书就是在书架上 &#x1f…

单元测试、系统测试、集成测试知识总结

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 一、单元测试的概念 单元测试是对软件基本组成单元进行的测试,如函数或一个类的方法。当然这里的基本单元不仅仅指的是一个函数或者方法,有…

爬取豆瓣TOP250电影详解

一.分析网页DOM树结构 1.分析网页结构及简单爬取 豆瓣(Douban)是一个社区网站,创立于2005年3月6日。该网站以书影音起家,提供关于书籍、电影、音乐等作品的信息,其作品描述和评论都是由用户提供(User-Gen…

【element-ui】 统一全局配置size和z-index属性

Vue.use(Element, { size: small, zIndex: 3000 });参考: element ui 统一全局配置size和z-index属性

使用SSH协议远程连接Ubuntu

1.切换到root用户 sudo -i 2.安装openssh-server apt update apt install openssh-server 3.启动ssh服务 service ssh start 4.查看ssh状态 (q键: 退出) service ssh status 5.检查ssh服务是否启动成功 ps -e | grep ssh 6.开机自启动 systemctl enable …

Webpack高级配置(干货2)

目录 39.CodeSplit 优化代码运行性能40.CodeSplit按需加载,性能优化41.eslint 不支持动态倒入语法,需要引入import的plugin42.图片,字体等命名规则,可以提取复用43.preload/prefatch 39.CodeSplit 优化代码运行性能 entry由字符串…

libvirt bridge network configure

If you want to configure all the parameters of your virtual machine, you can issue the command like this: virsh edit ubuntu22.04-test In the GUI of NIC configuration, you can choose a configuration item from a drop box,such as “default”,‘bridged-network…

Apache Doris 中Compaction问题分析和典型案例

说明 此文档主要说明一些常见compaction问题的排查思路和临时处理手段。这些问题包括 Compaction socre高Compaction失败compaction占用资源多Compaction core 如果问题紧急,可联系社区同学处理 如果阅读中有问题,可以反馈给社区同学。 1 compaction …

机器学习--常见算法总结

有监督学习算法 1. 线性回归算法 概念:线性回归是一种统计方法,用于预测一个变量(因变量)与一个或多个自变量(特征变量)之间的关系。目标是通过线性方程建立自变量和因变量之间的关系模型。 作用&#x…

Linux执行脚本报错:-bash: ./mylife.sh: /bin/sh^M: bad interpreter: Text file busy

这个错误信息 -bash: ./mylife.sh: /bin/sh^M: bad interpreter: Text file busy 实际上包含了两个主要问题,但“Text file busy”这部分通常不是真实的错误,可能是显示错误或者与之前的操作冲突。更常见的问题是前面的 /bin/sh^M,这里的 ^M …

ZooKeeper Watcher 机制详解

ZooKeeper Watcher 机制详解 1、特点2、注册与触发3、注意事项 💖The Begin💖点点关注,收藏不迷路💖 ZooKeeper 的 Watcher 机制是分布式系统中用于事件通知的重要功能。 1、特点 一次性触发: Watcher 被触发后立即从…

Python自动化测试工具selenium使用指南

概述 selenium是网页应用中最流行的自动化测试工具,可以用来做自动化测试或者浏览器爬虫等。官网地址为:相对于另外一款web自动化测试工具QTP来说有如下优点: 免费开源轻量级,不同语言只需要一个体积很小的依赖包支持多种系统&a…

《现代情报》

《现代情报》简介 《现代情报》(原名《情报知识》)杂志是由吉林省科学技术厅主管,吉林省科学技术信息研究所、中国科学技术情报学会联合主办的信息资源管理领域综合性学术期刊。该刊于1980年创刊,每年12期。重点报道服务于国家战略…

上传文件,文件类型限制语法,各种媒体视频文件的Content-Type

各种媒体视频文件的Content-Type “application/x-apple-diskimage”: “DMG”, “application/epubzip”: “EPUB”, “application/java-archive”: “JAR”, “video/x-matroska”: “MKV”, “text/html”: “HTML|HTM”, “text/css”: “CSS”, “text/javascript…

Ps:首选项 - 单位与标尺

Ps菜单:编辑/首选项 Edit/Preferences 快捷键:Ctrl K Photoshop 首选项中的“单位与标尺” Units & Rulers选项卡允许用户根据工作需求定制 Photoshop 的测量单位和标尺显示方式。这对于保持工作的一致性和精确性,尤其是在跨设备或跨平台…

USB3.2 摘录(四)

系列文章目录 USB3.2 摘录(一) USB3.2 摘录(二) USB3.2 摘录(三) USB3.2 摘录(四) 文章目录 系列文章目录8 协议层(Protocol Layer)8.8 三个参数地址信息&…

软考高级第四版备考---第四十一天(软件工程-软件设计)

一、结构化设计 结构化设计(Structured Design,SD)是一种面向数据流的方法,它以SRS和SA阶段所产生的DFD和数据字典等文档为基础,是一个自顶向下、逐步求精和模块化的过程 二、面向对象设计 2.1面相对象设计(OOD&…

Electron 的contextBridge

contextBridge 是 Electron 框架中用于在渲染器进程(通常是 Web 页面)和主进程之间安全地暴露 API 的一种方式。它允许开发者在保持主进程和渲染器进程之间清晰分离的同时,从主进程向渲染器进程安全地传递方法和属性。这是通过创建一个单向的、只能从主进程到渲染器进程的桥…

谷粒商城实战笔记-问题记录-首页没有显示用户名-跨域session问题

文章目录 一,首页无用户信息二,定位三,两个问题1,跨域名session共享 一,首页无用户信息 谷粒商城首页,点击超链接您好,请登录,正常情况下应该跳转到Auth模块的login页面,…