ES6(一)箭头函数,解构赋值,模板字符串,let 和 const,类和继承

ES6(一)箭头函数,解构赋值,模板字符串,let 和 const,类和继承

01 箭头函数:

1.基本语法

// 普通函数
function regularFunction(a, b) {return a + b;
}// 箭头函数
const arrowFunction = (a, b) => {return a + b;
};

2.省略大括号和 return

当箭头函数只有一条语句时,可以省略大括号和 return 关键字。

// 等同于上面的箭头函数
const arrowFunction = (a, b) => a + b;

3.单个参数时的简写

当箭头函数只有一个参数时,可以省略参数的括号。

// 等同于上面的箭头函数
const square = x => x * x;

4.改变 this 的指向

箭头函数没有自己的 this,它会从定义它的作用域继承 this 值。

function Person() {this.age = 0;setInterval(() => {this.age++; // 这里的 this 指向 Person 对象}, 1000);
}

5.注意事项

  • 不能作为构造函数使用:箭头函数没有自己的 this,因此不能用于构造实例对象。

  • 没有 arguments 对象:箭头函数不具备 arguments 对象,需要通过 rest 参数(…)来获取所有参数。

  • 不能用作 Generator 函数:箭头函数不能用作 Generator 函数。

  • 箭头函数的引入极大地简化了 JavaScript 中函数的书写方式,并且更加清晰地表达了函数的意图。在实际开发中,箭头函数通常用于简短的回调函数或者需要保持 this 绑定的情况。

02 解构赋值:

  • ES6 中的解构赋值是一种方便的语法,用于从数组或对象中提取值并赋给变量。下面介绍一下解构赋值的基本用法和一些注意事项:

1.数组解构赋值

// 基本用法
const [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2// 可以忽略某些元素
const [c, , d] = [3, 4, 5];
console.log(c); // 输出 3
console.log(d); // 输出 5// 默认值
const [e, f = 10] = [6];
console.log(e); // 输出 6
console.log(f); // 输出 10

2.对象解构赋值

// 基本用法
const { name, age } = { name: 'Alice', age: 30 };
console.log(name); // 输出 'Alice'
console.log(age); // 输出 30// 重命名变量
const { name: personName, age: personAge } = { name: 'Bob', age: 25 };
console.log(personName); // 输出 'Bob'
console.log(personAge); // 输出 25// 默认值
const { country = 'China' } = {};
console.log(country); // 输出 'China'

3.函数参数中的解构赋值

// 函数参数解构赋值
function greet({ name, age }) {console.log(`Hello, ${name}! You are ${age} years old.`);
}const person = { name: 'Carol', age: 35 };
greet(person); // 输出 "Hello, Carol! You are 35 years old."

4.注意事项

  • 如果解构失败(比如右侧的值为 undefined 或 null),则变量的值将是 undefined。

  • 可以嵌套使用数组和对象的解构赋值。

  • 解构赋值可以在数组和对象字面量中使用。

  • 解构赋值在处理复杂数据结构时非常有用,可以让代码更加简洁清晰。在实际开发中,经常用于函数返回多个值、处理 API 返回的数据等场景

03 模板字符串:

  • ES6 中的模板字符串是一种允许嵌入表达式的字符串字面量,使用反引号 (`) 来表示。模板字符串提供了更简洁、更灵活的字符串拼接方式。下面是一些关于模板字符串的基本用法和一些注意事项:

1.基本用法

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, Alice!"

2.多行字符串

  • 使用模板字符串可以轻松创建多行字符串,不需要使用换行符或者字符串拼接符。
const multiLineString = `This is amulti-linestring.
`;
console.log(multiLineString);
// 输出:
//     This is a
//     multi-line
//     string.

3.嵌入表达式

  • 模板字符串中可以嵌入任何有效的 JavaScript 表达式。
const a = 10;
const b = 5;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 输出 "The sum of 10 and 5 is 15."

4.原始字符串

  • 通过在模板字符串前面加上 String.raw 可以创建原始字符串,忽略转义字符的特殊含义。
const path = String.raw`C:\Users\Administrator\Desktop\file.txt`;
console.log(path); // 输出 "C:\Users\Administrator\Desktop\file.txt"
  • 区别
    • 转义字符处理:在模板字符串中,反斜杠(\)会被解释为转义字符,而在原始字符串中,反斜杠(\)不会被解释为转义字符。
    • 使用方式:模板字符串是以反引号()包裹的字符串字面量形式,而原始字符串需要使用 String.raw` 方法来创建。

注意事项

  • 在模板字符串中使用 ${} 来引入表达式,表达式可以是变量、函数调用、甚至是更复杂的表达式。

  • 模板字符串中的空格、缩进和换行会保留在生成的字符串中。

  • 模板字符串是不可变的,一旦创建就无法更改。

  • 模板字符串使得字符串拼接更加简洁和易读,特别适用于需要动态生成字符串的场景,如拼接 URL、生成 HTML 片段等。

04 let 和 const:

1.let

  • let 关键字用于声明一个块级作用域的变量,变量的作用域限定在当前代码块内。

  • 使用 let 声明的变量可以被重新赋值,但不可以被重复声明。

  • for 循环中使用 let 声明的变量具有每次迭代都会创建一个新的绑定的特性,有效避免了闭包中常见的问题。

  • 示例:

let x = 10;
if (true) {let x = 20;console.log(x); // 输出 20
}
console.log(x); // 输出 10

2.const

  • const 关键字用于声明一个常量,常量的值在声明后不能被修改,并且必须进行初始化赋值。

  • 使用 const 声明的变量必须在声明时进行初始化赋值,否则会报错。

  • const 声明的常量也具有块级作用域。

  • 示例:

const PI //必须在声明时进行初始化赋值,否则会报错。
PI = 3.14159;
// 尝试修改常量值会导致错误,虽然现在浏览器不会报,但不建议这么做

使用建议

  • 尽量使用 const 声明变量,避免意外的变量修改。

  • 只有在需要重新赋值的情况下才使用 let

  • 减少使用 var,避免变量提升和全局作用域带来的问题。

  • 总的来说,let 适用于需要变化的变量,而 const 更适用于常量或者不需要改变的变量。根据变量的需求灵活选择使用 letconst

05 类和继承:

在 ES6 中,引入了类(class)和继承(inheritance)的概念,使得 JavaScript 的面向对象编程更加直观和易用。

类(class)

ES6 中引入了类的概念,可以使用关键字 class 来定义一个类,类可以包含构造函数、方法等。类提供了更加传统的面向对象编程方式来定义对象和对象之间的关系。

下面是一个简单的类的定义和使用示例:

javascriptCopy Codeclass Animal {constructor(name) {this.name = name;}speak() {console.log(this.name + ' makes a noise.');}
}let animal = new Animal('Dog');
animal.speak(); // 输出 "Dog makes a noise."

继承(inheritance)

  • ES6 中引入了 extends 关键字,允许一个类继承另一个类的属性和方法。子类可以通过 super 关键字调用父类的构造函数以及方法。

  • 下面是一个简单的继承示例:

class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类的构造函数this.breed = breed;}speak() {console.log(this.name + ' barks loudly.');}
}let dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出 "Buddy barks loudly."
  • 在这个例子中,Dog 类继承了 Animal 类,并且重写了 speak 方法。

  • ES6 的类和继承使得 JavaScript 的面向对象编程更加清晰和灵活,同时也更符合传统的面向对象编程习惯。通过类和继承,可以更方便地组织和管理代码。

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

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

相关文章

vue3路由代码示例

路由简单分三步吧 第一定义路由&#xff1a; 包括访问地址&#xff0c;对应组件 第二使用&#xff1a;在index.html中使用它 下面是代码示例&#xff1a; components/Person.vue <template><router-link to"/test/hello">跳转</router-link>&…

一键换脸的facefusion

FaceFusion 一个开源换脸软件&#xff0c;提供UI界面&#xff0c;启动后可直接在浏览器上面上传图片进行换脸操作。 电脑环境win10&#xff0c;软件pycharm&#xff0c;需要提前安装好python环境&#xff0c;推荐使用Anaconda3。关注文章下方公共号发送 “ 软件安装包 ”可以获…

Leetcode239_滑动窗口最大值

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口…

Docker Compose 中spring boot服务连接 mysql

Docker compose 启动两个docker ,一个是mysql, 另一个是spring boot 服务。spring boot 服务要连接mysql8 。传统的做法&#xff1a; 在application.properties 文件中配置 spring.datasource.urljdbc:mysql://127.0.0.1:3306/mydatabase spring.datasource.usernameroot spr…

java springboot vue elementui python django vue 30套源代码

java springboot vue elementui python django vue 30套源代码 全套源码 Springboot vue3 elementplus 后台通用权限系统 代码生成器 (源码教程开发环境) Springboot vue2 elementui 后台通用权限系统 代码生成器(源码教程开发环境) Springboot vue2 elementui 物品出入库管…

夜莺浏览日志、filebeat采集日志(四)

文章目录 一、elasticsearch二、filebeat三、日志分析 一、elasticsearch docker启动 docker run -d -p 9200:9200 -p 9300:9300 --restartalways -e ES_JAVA_OPTS"-Xms512m -Xmx512m" \ -e discovery.typesingle-node -e xpack.security.enabledtrue -e ELASTIC_P…

plantegg-10+倍性能提升全过程–优酷账号绑定淘宝账号的TPS从500到5400的优化历程

原文地址:https://plantegg.github.io/2018/01/23/10%E5%80%8D%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87%E5%85%A8%E8%BF%87%E7%A8%8B/ 背景说明 2016年的双11在淘宝上买买买的时候&#xff0c;天猫和优酷土豆一起做了联合促销&#xff0c;在天猫双11当天购物满XXX元就赠送优酷会…

什么是生态智慧公厕@光明源

生态智慧公厕是一种结合生态环保理念和智能科技的公厕设施。这种公厕旨在提供更加环保、节能、可持续的卫生解决方案&#xff0c;同时通过智能化技术提升管理效率和用户体验。生态智慧公厕通常具有以下特点&#xff1a; 节能环保&#xff1a;生态智慧公厕采用了各种节能环保技…

npm淘宝镜像源更新

目录 前情提要&#xff1a; 背景&#xff1a; 镜像源更新&#xff1a; 清楚缓存&#xff1a; 直接切换镜像源&#xff1a; 补充&#xff1a; 错误解释&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 2024 /1 /22 &#xff0c;registry.npm.taobao.org淘宝镜像源的SSL…

【面试】Elasticsearch 在部署时,对 Linux 的设置有哪些优化方法?

Elasticsearch 在部署时&#xff0c;对 Linux 的设置有哪些优化方法&#xff1f; Elasticsearch是一个分布式搜索和分析引擎&#xff0c;它在Linux环境下的性能和稳定性可以通过一些优化方法进行提升。以下是一些针对Linux环境下Elasticsearch部署的优化方法&#xff1a; 1. 内…

uniapp 未配置appkey或配置错误的解决

报错解决&#xff1a;未配置appkey或配置错误 首先&#xff1a;HbuilderX Android sdk 3.1.10版本起需要申请Appkey 配置Appkey&#xff1a;打开Androidmanifest.xml&#xff0c; 导航到Application节点&#xff0c;创建meta-data节点&#xff0c;name为dcloud_appkey&#x…

快速部署docker-compose环境

快速部署docker-compose环境 快速安装docker安装docker-compose 快速安装docker 检查环境&#xff1a; # 移除旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engi…

【2024系统架构设计】案例分析- 3 数据库

目录 一 基础知识 二 真题 一 基础知识 1 ORM ORM(Object—Relationl Mapping

Java学习笔记(22)

缓冲流 真正操作数据的还是基本流 字节缓冲流 缓冲区是长度为8192的字节缓冲区 byte[] 8K Bufferedininputstream 读取数据就是把数据放到缓冲区中&#xff0c;字节长度默认长度8192 关流只需要关缓冲流&#xff0c;因为在底层会关基本流 一次读多个字节 字节缓冲流提高效…

XR虚拟直播间,引领创新风潮,打破直播局限!

随着互联网技术日新月异的发展&#xff0c;直播行业也迎来了蓬勃发展的春天。然而&#xff0c;大多数直播间在吸引观众眼球和延长用户观看时长方面&#xff0c;仍然面临着巨大的挑战。正是在这样的背景下&#xff0c;XR虚拟直播系统应运而生&#xff0c;以其多维度的直播场景、…

自然语言处理3(NLP)—— 机器学习

1. 自然语言处理在机器学习领域的主要任务 自然语言处理&#xff08;NLP&#xff09;在机器学习领域中扮演着至关重要的角色&#xff0c;旨在使计算机能够理解、解释和生成人类语言。以下是NLP在机器学习领域中的主要任务及其分类方法&#xff1a; 1.1 按照功能类型分类 1.1.…

Nacos的搭建和使用——SpringCloud Alibaba

1. 概要说明 在使用Nacos之前&#xff0c;请在你的虚拟机中下载好Nacos,再进行连接本机使用 port&#xff1a;8848 本机访问地址&#xff1a;http://{虚拟机ip}:8848/nacos/ 访问账号密码&#xff1a;nacos/nacos 2. Nacos的作用 2.1 服务发现中心 微服务将自身注册至Nacos&am…

Linux(centos7)部署hive

前提环境: 已部署完hadoop(HDFS 、MapReduce 、YARN) 1、安装元数据服务MySQL 切换root用户 # 更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysqL-2022 # 安装Mysql yum库 rpm -Uvh http://repo.mysql.com//mysql57-community-release-el7-7.noarch.rpm # yu…

Netty服务端基本启动流程源码刨析

前言: 希望看这篇文章之前对Java Nio编程比较熟悉&#xff0c;并有用过Netty开发简单代码 服务端代码 先大致说一下NioEventLoopGroup组件的作用&#xff0c;可以把它看是作内部维护了一个NioEventLoop数组的对象&#xff0c;它的构造方法的参数用来指定维护数组的大小。NioEve…

【Flutter 面试题】 Dart 是不是单线程模型?是如何运行的?

【Flutter 面试题】 Dart 是不是单线程模型&#xff1f;是如何运行的&#xff1f; 文章目录 写在前面口述回答补充说明示例&#xff1a;异步编程示例&#xff1a;使用 Isolates 处理计算密集型任务总结 写在前面 &#x1f64b; 关于我 &#xff0c;小雨青年 &#x1f449; CSD…