ES6真题合集(一)

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.mzph.cn/pingmian/23150.shtml

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

相关文章

vue2中使用tinymce

vue2中使用tinymce的记录 本篇文章主要实现的功能: (1)【查看】时禁用编辑 (2)【编辑】时某些内容是不可编辑的 (3)【内容】前端拼接编辑器模板 (4)【内容】编辑器模板中…

泛微开发修炼之旅--06自定义Action接口开发示例、源码及使用场景

文章链接:泛微开发修炼之旅--06自定义Action接口开发示例、源码及使用场景

杨校老师项目之SpringBoot整合Vue超市管理系统

1.获取代码: 有偿获取:mryang511688 2.技术栈 SpringBoot MySQL mybatis Plus Redis 摘 要 随着信息化时代的到来,管理系统都趋向于智能化、系统化,超市进销存系统也不例外,但目前国内仍都使用人工管理&#xff…

qlv文件怎么转换成mp4,qlv文件转换成mp4文件的工具软件

qlv转MP4的方法,一直是广大视频爱好者关注的问题。qlv是一种较为特殊的视频格式,而MP4则以其广泛的兼容性和优秀的播放效果,成为众多设备上的首选格式。因此,掌握qlv转MP4的技巧,对于提升视频观看体验至关重要。本文将…

pytorch(其他操作)

文章目录 1.torch.atleast_1d()2.torch.atleast_2d()3.torch.bincount()4.torch.block_diag()5.torch.broadcast_tensors()6.torch.broadcast_shapes()7.torch.bucketize()8.torch.cartesian_prod()9.torch.cdist()10.torch.clone()11.torch.cummax()12.torch.cummin()13.torch…

队列及其应用

实验内容 请设计一个简单的模拟银行排队系统,要求程序具有以下4项菜单: 1.取号。选择该菜单后,为客户产生一个排队号。 2.叫号。选择该菜单后,显示可服务的客户排队号。 3.查看队伍。从队首到队尾列出所有排队客户的排队号。 4.退…

【机器学习】YOLOv10与YOLOv8分析

YOLOv10与YOLOv8:实时目标检测技术的演进与对比 一、YOLOv8与YOLOv10的概述二、YOLOv8的特点与优势三、YOLOv10的改进与创新四、YOLOv10与YOLOv8的性能对比五、总结与展望 随着深度学习技术的飞速发展,实时目标检测技术已成为计算机视觉领域的研究热点。…

关于yolov8识别滑块关键点

1,images,annotations创建 IMAGES:放图片材料的 ANNTATIONS:放labelImg标记的xml文件 2,labels,txt怎么来的 labels :可以手动创建,里面还配置了train,val,test文件夹。可手动(以下代码中没有写…

【渗透测试】DC-1靶机实战(下)SSH爆破提权

【渗透测试】DC-1靶机实战(上)漏洞扫描获取反弹shell-CSDN博客 7.SSH爆破 hydra ssh://172.20.10.4 -l flag4 -P /usr/share/john/password.lst -t 64 -f -vV -o /tmp/hydra.sshssh://10.10.10.31:指定了要攻击的 SSH 服务的地址。 -l flag…

医学编码系统说明

简介 流程说明 登录系统 在浏览器中访问FNEHR的站点,输入医院编号、用户和密码,选择“Other”,点击“Login”按钮,登录系统: 登录后,在左边显示系统的菜单: 系统设置 医院设置 点击左侧的“Acc…

【电赛】STM32-PID直流减速电机小车【寻迹+避障+跟随】【更新ing】

一.需求分析 1.主控:STM32C8T6(没什么好说的哈哈) 2.电机:JAG25-370电机 【问】为什么要用直流减速电机?? PID控制器需要依靠精确的反馈信号来调整其输出,确保电机按照预定的速度和位置运行…

用python写一个基于PyQt5和OpenAI的智能问答项目

摘要: 使用python写一个可以对话的智能问答机器人,界面是使用PyQt5写的,通过调用OpenAl的免费接口,实现实时聊天功能。 1.申请免费的API key 前往页面https://github.com/chatanywhere/GPT_API_free 点击下面链接: …

SQL实验 SQL Server数据库的安全性控制

一、实验目的 1.熟悉通过SQL对数据进行安全控制。 2.掌握GRANT与REVOKE语句的使用,熟悉数据库用户的创建和授权。 二、实验内容 (一)、第一部分:以上先采用图形用户界面进行设置权限,然后试…

65、API攻防——接口安全WebPackRESTSOAPWSDLWebService

文章目录 一、接口类型二、Webservice类——Wsdl&ReadyAPI-SQL注入三、SOAP类——Swagger&SoapUI&EXP-信息泄露四、HTTP类——WebPack&PackerFuzzer-信息泄露 一、接口类型 HTTP类接口PRC类接口 客户端和服务端的连接,非web上的接口,可…

计算机网络9——无线网络和移动网络1 无线局域网 WLAN2

文章目录 一、802.11局域网的 MAC 层协议1、CSMA/CA协议2、时间间隔 DIFS 的重要性3、争用信道的过程4、对信道进行预约 二、802.11局域网的 MAC 帧1)关于 802.11 数据帧的地址2)序号控制字段、持续期字段和帧控制字段 一、802.11局域网的 MAC 层协议 1…

实战:Zig 编写高性能 Web 服务(2)

1.1 编写 HTTP server 我们从python -m http.server 8000启动得到灵感,先确定好目标: 编写一个HTTP/1.1 http serverzig version 0.12.0 使用zig init搭建项目的前置工作你先自行搭建好,不会的翻看前面铺垫的章节熟悉zig的项目结构。 关键…

神经网络 | 深度学习背后的数学

神经网分析 机器学习处理的是数据,通过学习输入的数据,从而建立模型,以便预测新的数据的输出 按照类型可以进行如下分类 监督分类 非监督分类 强化学习 神经元 生物学中,人的大脑是由多个神经元互相连接形成网络而构成的。也…

2024国内热门大语言模型在科研方面的应用

本博客总结了几款热门的国产大语言模型,帮助大家利用这些大语言模型更好的进行科研。 模型介绍 1.文心一言 链接:https://yiyan.baidu.com/ 开发方:百度 特点:专注于中文语言理解与生成,适合中文文本的语义理解任务。 百度推出…

设计模式-抽象工厂(创建型)

创建型-抽象工厂 角色 抽象工厂: 声明创建一个族产品对象的方法,每个方法对应一中产品,抽象工厂可以是接口,也可以是抽象类;具体工厂: 实现抽象工厂接口,复杂创建具体的一族产品;抽…

web学习笔记(六十三)

目录 1.钩子函数onActivated和onDeactivated 1.1 onActivated 1.2 onDeactivated 2. KeepAlive补充 2.1 include 和 exclude 2.2 的作用是什么? 2.3 组件包含什么prop属性及作用? 2.4 对应那两个生命周期?生命周期什么时机执行? 2.5 …