ES6真题合集(一)

news2024/10/2 21:26:32

ES6真题合集(一)

    • 1. var、let、const之间的区别
    • 2. ES6中数组新增了哪些扩展
      • 2.1 扩展运算符
      • 2.2 Array.from() 方法
      • 2.3 Array.of() 方法
      • 2.4 find() 和 findIndex() 方法
      • 2.5 箭头函数
      • 2.6 模板字符串
    • 3. ES6中对象新增了哪些扩展
      • 3.1 属性的简写
      • 3.2 属性名表达式
      • 3.3 方法简写
      • 3.4 计算得到的属性名
      • 3.5 Object 新增方法
    • 4. 函数新增了哪些扩展
      • 4.1 函数参数的默认值
      • 4.2 rest参数(剩余参数)
      • 4.3 函数的name属性
      • 4.4 箭头函数
      • 4.5 扩展运算符
    • 5. ES6中 Promise

1. var、let、const之间的区别

特性varletconst
作用域函数作用域或全局作用域块级作用域块级作用域
变量提升
暂时性死区
重新声明允许不允许不允许
重新赋值允许允许不允许(但对象/数组内容可以修改)
必须初始化不需要不需要需要
全局对象属性成为全局对象属性(如window)不成为全局对象属性不成为全局对象属性

2. ES6中数组新增了哪些扩展

2.1 扩展运算符

使用 … 语法可以将一个数组展开成多个独立的元素,或者将多个元素合并为一个数组。

// 展开数组  
const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]  
  
// 合并数组  
const arr3 = [6, 7];  
const arr4 = [...arr2, ...arr3]; // [1, 2, 3, 4, 5, 6, 7]

2.2 Array.from() 方法

通过类似数组的对象或可迭代对象创建一个新的数组。

// 字符串转换为数组  
const str = 'hello';  
const arr5 = Array.from(str); // ["h", "e", "l", "l", "o"]  
  
// 类似数组的对象转换为数组  
const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};  
const arr6 = Array.from(arrayLike); // ["a", "b", "c"]

2.3 Array.of() 方法

创建一个由传入参数组成的新数组。与Array构造函数不同,Array.of()不会因为单个数值参数而创建特殊类型的数组。

const arr7 = Array.of(1); // [1]  
const arr8 = Array.of(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

2.4 find() 和 findIndex() 方法

find() 方法用于在数组中查找满足指定条件的第一个元素。
findIndex() 方法用于查找满足指定条件的第一个元素的索引。

const numbers = [1, 2, 3, 4, 5];  
  
// 使用 find()  
const foundNumber = numbers.find(num => num > 3); // 4  
  
// 使用 findIndex()  
const foundIndex = numbers.findIndex(num => num > 3); // 3

2.5 箭头函数

虽然箭头函数本身不是数组的扩展,但它在数组方法(如.map()、.filter()和.forEach())中的应用,使得数组操作更加简洁。

const numbers = [1, 2, 3, 4, 5];  
  
// 使用箭头函数和 map()  
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]  
  
// 使用箭头函数和 filter()  
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

2.6 模板字符串

虽然模板字符串不是直接针对数组的扩展,但它与数组的结合使用可以创建动态的数组内容。

const items = ['apple', 'banana', 'cherry'];  
const list = `Fruits: ${items.join(', ')}`; // Fruits: apple, banana, cherry

3. ES6中对象新增了哪些扩展

3.1 属性的简写

允许在对象字面量中直接写入变量和函数作为对象的属性和方法。

const foo = 'bar';  
const baz = { foo }; // 等同于 { foo: foo }  
  
function hello() {  
  console.log('Hello, world!');  
}  
const obj = { hello }; // 等同于 { hello: hello }

3.2 属性名表达式

允许在对象字面量中使用表达式作为属性名,表达式需要放在方括号[]内。

let propName = 'myProp';  
let obj = {  
  [propName]: 'Hello',  
  ['a' + 'b']: 'World'  
}; // 等同于 { myProp: 'Hello', ab: 'World' }

3.3 方法简写

允许直接写函数名作为对象的方法,不需要使用冒号和function关键字。

const obj = {  
  sayHello() {  
    console.log('Hello, world!');  
  }  
};  
// 等同于 const obj = { sayHello: function() { console.log('Hello, world!'); } };

3.4 计算得到的属性名

类似于属性名表达式,但特别指出,这种方式可以用于定义方法名。

let methodName = 'greet';  
let obj = {  
  [methodName]() {  
    return 'Hello';  
  }  
};  
// obj.greet() 会返回 'Hello'

3.5 Object 新增方法

  • Object.is(): 用于比较两个值是否严格相等,它与严格相等运算符(===)的行为基本一致。
console.log(Object.is(NaN, NaN)); // true  
console.log(Object.is(+0, -0)); // false  
console.log(Object.is(5, 5)); // true  
console.log(Object.is('foo', 'foo')); // true
  • Object.assign(): 用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
const target = { a: 1 };  
const source1 = { b: 2 };  
const source2 = { c: 3 };  
  
Object.assign(target, source1, source2);  
  
console.log(target); // { a: 1, b: 2, c: 3 }
  • Object.getOwnPropertyDescriptors(): 返回一个给定对象所有自身属性(包括不可枚举属性但不包括Symbol值作为名称的属性)的属性描述符组成的对象。
const obj = {  
  name: 'Alice'  
};  
  
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');  
  
console.log(descriptor); // { value: 'Alice', writable: true, enumerable: true, configurable: true }  
  
// 注意:Object.getOwnPropertyDescriptors()通常用于更复杂的场景,比如合并对象时保留属性描述符
  • Object.setPrototypeOf(): 设置一个对象的原型(即,内部[[Prototype]]属性)到另一个对象或null。
const obj = {  
  name: 'Alice'  
};  
  
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');  
  
console.log(descriptor); // { value: 'Alice', writable: true, enumerable: true, configurable: true }  
  
// 注意:Object.getOwnPropertyDescriptors()通常用于更复杂的场景,比如合并对象时保留属性描述符
  • Object.getPrototypeOf(): 返回指定对象的原型(即,内部[[Prototype]]属性的值)。
  • Object.keys(), Object.values(), Object.entries(): 分别返回给定对象所有可枚举属性的键名、值、键值对数组。
const obj = {  
  name: 'Alice',  
  age: 30,  
  city: 'New York'  
};  
  
console.log(Object.keys(obj)); // ['name', 'age', 'city']
console.log(Object.values(obj)); // ['Alice', 30, 'New York']
console.log(Object.entries(obj)); // [['name', 'Alice'], ['age', 30], ['city', 'New York']]
  • Object.fromEntries(): 是Object.entries()的逆操作,把键值对列表转换为一个对象。
const entries = [['name', 'Alice'], ['age', 30], ['city', 'New York']];  
  
const obj = Object.fromEntries(entries);  
  
console.log(obj); // { name: 'Alice', age: 30, city: 'New York' }

4. 函数新增了哪些扩展

4.1 函数参数的默认值

不能直接为函数的参数指定默认值,只能采用变通的方法。ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。

function log(x, y = 'World') {  
  console.log(x, y);  
}  
log('Hello'); // Hello World  
log('Hello', 'China'); // Hello China

4.2 rest参数(剩余参数)

rest参数(形式为…变量名)用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {  
  let sum = 0;  
  for (var val of values) {  
    sum += val;  
  }  
  return sum;  
}  
add(1, 2, 3); // 6

4.3 函数的name属性

ES6为每个函数都提供了一个name属性,返回该函数的函数名。

function foo() {}  
console.log(foo.name); // "foo"  
  
const bar = function() {};  
console.log(bar.name); // "bar"  
  
const baz = () => {};  
console.log(baz.name); // "baz" 或可能是 "anonymous" 在某些环境中

4.4 箭头函数

箭头函数提供了一种更简洁的函数语法。它没有自己的this、arguments、super或new.target。这些值由外围的正常函数或全局作用域定义。

const arrowFunc = (x, y) => x + y;  
console.log(arrowFunc(1, 2)); // 3  
  
// 当函数体中只有一个表达式时,{} 和 return 可以省略  
const double = x => x * 2;  
console.log(double(3)); // 6

4.5 扩展运算符

扩展运算符(…)可以在函数调用/函数体内部,展开一个数组(或类似数组对象)为多个独立的参数。

function greet(name, age, city) {  
  console.log(`Hello, ${name}. You are ${age} years old and live in ${city}.`);  
}  
  
const person = ['Alice', 30, 'New York'];  
greet(...person); // Hello, Alice. You are 30 years old and live in New York.

5. ES6中 Promise

用于处理异步操作的对象,它表示一个最终可能完成(也可能被拒绝)的异步操作及其结果值。Promise 对象代表了一个异步操作的最终完成(或失败)及其结果值的状态。

Promise 对象有三种状态:

  • pending(待定):初始状态,既不是成功,也不是失败状态。
  • fulfilled(已实现):意味着操作成功完成。
  • rejected(已拒绝):意味着操作失败。
    在这里插入图片描述
    1.开始:从调用 new Promise(executor) 开始,其中 executor 是一个执行函数,它接收两个参数:resolve 和 reject。
    2.Pending(待定):这是 Promise 的初始状态。
    3.resolve(value):当异步操作成功完成时,调用 resolve 函数并传入一个值。这会将 Promise 的状态从 Pending 变为 Fulfilled,并将结果值传递给 .then 方法中注册的 onFulfilled 回调函数。
    4.Fulfilled(已实现):这是 Promise 操作成功的状态。一旦进入这个状态,就不能再改变。此时可以调用 .then 方法来处理成功的结果。
    5.reject(reason):当异步操作失败时,调用 reject 函数并传入一个原因。这会将 Promise 的状态从 Pending 变为 Rejected,并将失败原因传递给 .catch 方法中注册的 onRejected 回调函数。
    6.Rejected(已拒绝):这是 Promise 操作失败的状态。一旦进入这个状态,就不能再改变。此时可以调用 .catch 方法来处理失败的情况。
    7.then(onFulfilled, onRejected):用于处理 Promise 的成功或失败结果。它返回一个新的 Promise 对象,以便进行链式调用。
    8.catch(onRejected):是 .then(null, onRejected) 的简写形式,专门用于处理 Promise 的失败情况。
    9.循环:.then 和 .catch 方法返回的都是新的 Promise 对象,这意味着可以进行链式调用,形成一个 Promise 链。每个 Promise 都可以有自己的成功或失败处理函数。

注意点:
1.一旦 Promise 被 resolve 或 reject,它的状态就不能再改变。
2.如果没有在 Promise 链的末尾处理失败情况(即没有 .catch),则可能导致未捕获的拒绝(Unhandled rejection),这通常是编程错误,应该避免。
3.Promise 的链式调用允许你更优雅地处理异步操作的流程,避免了传统的“回调地狱”。

// 创建一个新的 Promise 对象  
function fetchData() {  
  return new Promise((resolve, reject) => {  
    // 假设这是一个异步操作,比如网络请求  
    // 这里我们使用 setTimeout 来模拟异步操作  
    setTimeout(() => {  
      // 模拟网络请求成功,返回数据  
      let data = { message: 'Data fetched successfully!' };  
      resolve(data); // 将 Promise 的状态设置为 Fulfilled,并传递结果  
    }, 2000); // 假设异步操作需要 2 秒完成  
  
    // 如果需要模拟网络请求失败,可以调用 reject 函数  
    // reject(new Error('Failed to fetch data'));  
  });  
}  
  
// 使用 Promise  
fetchData()  
  .then(data => {  
    // 这个回调函数会在 Promise 状态为 Fulfilled 时被调用  
    console.log(data.message); // 输出:Data fetched successfully!  
    // 可以继续返回一个新的 Promise 或其他值  
    // return fetchAnotherData(); // 假设这是另一个异步操作  
  })  
  .catch(error => {  
    // 这个回调函数会在 Promise 状态为 Rejected 时被调用  
    console.error('An error occurred:', error.message);  
  })  
  .finally(() => {  
    // finally 方法无论 Promise 是成功还是失败都会被调用  
    console.log('Promise processing completed.');  
  });  
  
// 控制台输出将会是:  
// Data fetched successfully!  
// Promise processing completed.

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

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

相关文章

[SQL-SERVER:数据库安全及维护]:MSSM工具对用户进行用户授权和角色授权操作

文章目录 直接为用户授权(20分)1. 创建登录TLogin,自行指定登录密码服务器层面选择 安全性 > 点击 登录名 > 点击右键 > 点击 新建登录名 > 选择sqlserver验证 > 关闭强制登录更改密码异常解决:sqlserver 配置管理…

Docker+JMeter+InfluxDB+Grafana 搭建性 能监控平台

JMeter原生报告的缺点: 无法实时共享 报告信息的展示不美观 需求方案 为了解决上述问题,可以通过 InfluxDB Grafana解决 : InfluxDB :是一个开源分布式指标数据库,使用 Go 语言编写,无需外部依赖 应用&am…

【C++】类和对象——构造和析构函数

目录 前言类的六个默认构造函数构造函数1.构造函数的概念2.构造函数的特性 初始化列表1.构造函数整体赋值2.初始化列表 析构函数1.析构函数的概念2.析构函数的特性 前言 类和对象相关博客:【C】类和对象   我们前面一个内容已经讲了关于类好对象的初步的一些知识&…

Linux——nginx部署

部署Nginx 构建Nginx服务器 (实验需要DNS支持,或添加hosts条目,例如: ) 安装Nginx(yum安装即可) 安装依赖软件包: 重启、启用服务并查看服务状态: 默认页面&#xff0…

AIGC会带来失业潮吗?紧紧跟时代第一步,如何学习AIGC

会,但AI淘汰的始终是跟不上时代的人。 现在很多公司都有AI培训,不仅GPT,还有Midjourney、Stable DIffusion等一系列AI工具。 像我们公司虽然今年招的少,但也会对新招的应届生统一进行AI培训。 用任正非先生的话来说就是&#x…

ubuntu top命令的参数和快捷键

命令选项 -1 单个、所有cpu信息切换 top -1-b 批处理 top -b > top.txt这将保存top命令的输出到文件,直到手动终止或关机。所以使用这个命令要注意和其他命令配合,否则文件速度增长会很快。 在文件中,将会重复输入top命令。 -c 切换命…

干货!以医疗行业为例,讲解数据安全级别划分以及归纳敏感数据的处理策略

数据分类分级是一项基础工作,也是提供数据分级保护的基础措施之一,是企业长期的一项技术、管理措施。企业通过制定数据分类分级策略、模板、管理规范能够有助于帮助企业梳理清楚企业数据资产,在面向合规监管、内部数据安全控制时能够提供更完…

pyspark中使用mysql jdbc报错java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决

报错信息: py4j.protocol.Py4JJavaError: An error occurred while calling o33.load. : java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 我的解决方法: 这个报错就是提示你找不到jar包,所以你需要去下载一个和你mysql版本匹配的j…

摸鱼大数据——Hive调优16-19

16、JVM 重用 此操作, 在hive2.x已经不需要配置了, 默认支持 jvm重用: 默认情况下, container资源容器 只能使用一次,不能重复使用, 开启JVM重用, 运行container容器可以被重复使用,在hive2.x已经默认支持了 17、推测执行 调优举例: 大数据小组,假设…

Android14 WMS-窗口绘制之relayoutWindow流程(二)-Server端

本文接着如下文章往下讲 Android14 WMS-窗口绘制之relayoutWindow流程(一)-Client端-CSDN博客 然后就到了Server端WMS的核心实现方法relayoutWindow里 WindowManagerService.java - OpenGrok cross reference for /frameworks/base/services/core/java/com/android/server…

QT系列教程(9) 主窗口学习

简介 任何界面应用都有一个主窗口,今天我们谈谈主窗口相关知识。一个主窗口包括菜单栏,工具栏,状态栏,以及中心区域等部分。我们先从菜单栏说起 菜单栏 我们创建一个主窗口应用程序, 在ui文件里的菜单栏里有“在这里输入”的一个…

四、Window整理右键扩展

一、桌面右键和文件右键扩展整理 简而言之整理下面图示内容 桌面右键: 对文件右键: 工具:火狐自带工具 二、新建扩展管理 简而言之整理下面图示内容 Win R输入regedit 寻找:计算机\HKEY_CURRENT_USER\Software\Microsof…

中科数安 | 透明加密防泄密系统!如何有效防止企业内部核心数据资料外泄?

中科数安提供的透明加密防泄密系统是一种专为企业设计的数据保护解决方案,它通过以下关键特性有效防止企业内部核心数据资料外泄: PC地址:——www.weaem.com 自动智能透明加密:系统能够在操作系统级别无缝集成,对指定类…

重生之 SpringBoot3 入门保姆级学习(15、内容协商返回不同数据类型)

重生之 SpringBoot3 入门保姆级学习&#xff08;15、内容协商返回不同数据类型&#xff09; 3.3.3 改变 Accept 实现内容协商3.3.4 改变 application.proerties 实现内容协商 3.3.3 改变 Accept 实现内容协商 添加支持写出 xml 内容的 Maven 依赖并刷新 Maven <!-- …

日语里「ずつ」和「づつ」有什么不同,柯桥成人日语培训

在生活中&#xff0c;我们常用「1人ずつ」「一歩ずつ」表示固定数量的重复出现&#xff0c;但有时候也会写作「1人づつ」「一歩づつ」&#xff0c;究竟哪种写法才是正确的呢&#xff1f;今天这篇文章将对「ずつ」和「づつ」的正确用法进行说明。 01 使用情况 根据日本文部科学…

RLHF(从人类反馈中进行强化学习)详解(三)

在经过了前两节的内容学习之后&#xff0c;我们对于RLHF&#xff08;从人类反馈中进行强化学习&#xff09;有了比较深入的认知&#xff0c;并且初步了解了RLHF中偏好数据集的引入&#xff0c;奖励模型的设置以及baseLLM的训练过程。在本节的学习中&#xff0c;我们将深入LLM的…

Visual Studio Installer 点击闪退

Visual Studio Installer 点击闪退问题 1. 问题描述2. 错误类型3. 解决方法4. 结果5. 说明6. 参考 1. 问题描述 重装了系统后&#xff08;系统版本&#xff1a;如下图所示&#xff09;&#xff0c;我从官方网站&#xff08;https://visualstudio.microsoft.com/ ) 下载了安装程…

如何把几个pdf文件合成在一个pdf文件

PDF合并&#xff0c;作为一种常见的文件处理方式&#xff0c;无论是在学术研究、工作汇报还是日常生活中&#xff0c;都有着广泛的应用。本文将详细介绍PDF合并的多种方法&#xff0c;帮助读者轻松掌握这一技能。 打开 “轻云处理pdf官网” 的网站&#xff0c;然后上传pdf。 pd…

入门Consul注册、配置中心(代码演示)

1、安装与使用 2、注册服务到consul 3、调用consul上注册的服务 4、配置中心 1、安装与使用 官网地址&#xff1a;Install | Consul | HashiCorp Developer 下载对应的系统 解压缩后文件 打开命令行运行 consul.exe agent -dev 即可运行 可以编写一个bat脚本每次运行ba…

C# MQTTNET 服务端+客户端 实现 源码示例

目录 1.演示效果 2.源码下载 3.服务端介绍 4.客户端介绍 1.演示效果 2.源码下载 下载地址&#xff1a;https://download.csdn.net/download/rotion135/89385802 3.服务端介绍 服务端用的控制台程序进行设计&#xff0c;实际使用可以套一层Windows服务的皮&#xff0c;进…