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.

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ssh远程管理yum源进阶

文章目录 sshNFS 共享存储服务实验yum的进阶使用Apanche做一个网页形式的源用vsftpd做一个源混合源 ssh ssh是一种安全通道协议,用来实现字符界面的远程登录,远程复制,远程文本传输 ssh对通信双方的数据进行了加密 用户名和密码登录 秘钥…

GitHub最大的开源算法库

GitHub 上最大的开源算法库 The Algorithms,值得每位算法工程师收藏! 该库收录了 Python、Java、C、JavaScript、Go 等多种主流编程语言的算法实现代码。 其中包含二分查找、快速排序、斐波那契数列等众多热门算法,可以说是应用尽有。 此外&a…

关于vue2 antd 碰到的问题总结下

1.关于vue2 antd 视图更新问题 1.一种强制更新 Vue2是通过用Object…defineProperty来设置数据的getter和setter实现对数据和以及视图改变的监听的。对于数组和对象这种引用类型来说,getter和setter无法检测到它们内部的变化。用这种 this.$set(this.form, "…

【问题复盘】第三方接口变慢导致服务崩溃

一、事件经过 -1、一个不在公司的下午,接到客户投诉,说平台不能访问了。 0、介入调查,发现服务器http请求无法访问,https请求却可以正常访问,一时有些无法理解;(后来发现,http和htt…

CMMI软件能力成熟度评估标准

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl CMMI概述 CMMI,全称为Capability Maturity Model Integration,即能力成熟度模型集成,是在原有的CMM(Capability Maturity Mo…

C语言小例程8/100

题目&#xff1a;输出特殊图案&#xff0c;请在c环境中运行&#xff0c;看一看 程序分析&#xff1a;字符共有256个。不同字符&#xff0c;图形不一样。 #include<stdio.h> int main() {char a176,b219;printf("%c%c%c%c%c\n",b,a,a,a,b);printf("%c%c%c…

【Python报错】已解决ModuleNotFoundError: No module named ‘packaging’

成功解决“ModuleNotFoundError: No module named ‘packaging’”错误的全面指南 在Python编程中&#xff0c;遇到ModuleNotFoundError: No module named packaging这样的错误&#xff0c;通常意味着你的Python环境中缺少名为packaging的模块&#xff0c;或者该模块没有被正确…

达梦 执行查询语句时报[-544]:Out of sort buf space

达梦数据库有时执行SQL中有时报[-544]:Out of sort buf space, try to adjust SORT_BUF_GLOBAL_SIZE, SORT_BUF_SIZE, SORT_BLK_SIZE. 第一反应是这条语句占用排序区太大。但真实原因是前面执行的语句耗光了全局排序区&#xff0c;后面SQL任何小的排序操作都会报这个错误从而执…

『哈哥赠书 - 54期』-『架构思维:从程序员到CTO』

文章目录 ⭐️ 架构思维&#xff1a;从程序员到CTO⭐️ 本书简介⭐️ 作者简介⭐️ 编辑推荐⭐️ 不想成为架构师的程序员不是好CTO 在程序员的职业规划中&#xff0c;成为软件架构师是一个非常有吸引力的选择。但是对于如何才能成为一名架构师&#xff0c;不少同学认为只要代码…

用langchain搭配最新模型ollama打造属于自己的gpt

langchain 前段时间去玩了一下langchain,熟悉了一下大模型的基本概念&#xff0c;使用等。前段时间meta的ollama模型发布了3.0,感觉还是比较强大的&#xff0c;在了解过后&#xff0c;自己去用前后端代码&#xff0c;调用ollama模型搭建了一个本地的gpt应用。 核心逻辑 开始搭…

智谱 GLM4 模型开源,意料之中的尺寸,意料之外的效果

最近智谱开了GLM-4-9B的模型&#xff0c;不是6B&#xff0c;是9B。 一共开源了四个模型&#xff0c;Base版本模型&#xff08;GLM-4-9B&#xff09;、Chat版本模型&#xff08;GLM-4-9B-Chat和GLM-4-9B-Chat-1M&#xff09;和多模态模型&#xff08;GLM-4V-9B-Chat&#xff09…

Vue3的ref创建一个全局变量,非常好用!

1. 前言 Vue3的ref对象我们都知道其用法,通过ref可以创建一个响应式对象使用,同时可以用compute,watch等Vue3的API对其进行操作 不同于Vue2的是,Vue3使用的是组合式API,这也就意味着,我可以在外部单独创建一个ref对象,然后保存,通过导出的方式,给其他的页面使用 理论存在,开始…

SOA的发展历史

1.SOA的发展历程 回顾SOA发展历程&#xff0c;我们把其大致分为了三个阶段&#xff0c;下面将分别介绍每个阶段的重要标准和规范。 1.1.萌芽阶段 这一阶段以XML技术为标志&#xff0c;时间大致从20世纪90年代末到21世纪初。XML系W3C所建&#xff0c;源自流行的标准通用标记语…

course-nlp——8-translation-transformer

本文参考自https://github.com/fastai/course-nlp。 注意力机制和 Transformer Nvidia AI 研究员 Chip Huyen 写了一篇很棒的文章《Top 8 trends from ICLR 2019》&#xff0c;其中的趋势之一是 RNN 正在失去研究人员的青睐。 这是有原因的&#xff0c;RNN 可能很麻烦&#…

网络编程(UPD和TCP)

//发送数据 //UDP协议发送数据 package com.example.mysocketnet.a02UDPdemo;import java.io.IOException; import java.net.*;public class SendMessageDemo {public static void main(String[] args) throws IOException {//发送数据//1.创建DatagramSocket对象(快递公司)//…

MySQL--MHA高可用及读写分离

一、什么是高可用 1.企业级高可用标准&#xff1a;全年无故障时间 全年无故障时间全年故障时间具体时间99.9%0.1%525.6 minkeeplive双主 &#xff08;切换需要人为干预&#xff09;99.99%0.01%52.56 minMHA &#xff08;半自动化&#xff09;99.999%0.001%5.256 minPXC、MGR、…

超详细!新手入门PMP®考试指南,收藏起来备考更高效​!

回复数字“6”&#xff0c;查看PMP考试过关口诀 无论你是刚刚踏入项目管理领域的新手&#xff0c;对于PMP考试充满好奇与期待&#xff1b; 还是已经在职场中摸爬滚打多年&#xff0c;希望通过PMP认证来进一步提升自己的项目管理能力和职业竞争力。 相信这份指南都会为你提供…

超速解读多模态InternVL-Chat1.5 ,如何做到开源SOTA——非官方首发核心技巧版(待修订)

解读InternVL-chat1.5系列 最近并行是事情太杂乱了&#xff0c;静下心来看一看优秀的开源项目,但是AI技术迭代这么快&#xff0c;现在基本是同时看五、六个方向的技术架构和代码&#xff0c;哪个我都不想放&#xff0c;都想知道原理和代码细节&#xff0c;还要自己训练起来&am…

企业自建邮件系统的优势,安全性更高,功能更灵活,维护更便捷

在当今企业信息管理的浪潮中&#xff0c;企业邮件系统显得尤为关键&#xff0c;它不仅加强了内部的沟通效率&#xff0c;还对外展示了企业的专业形象。然而&#xff0c;传统租用企业邮箱服务存在一些不足&#xff0c;如缺乏灵活性、数据管理混乱和难以实现个性化需求&#xff0…

自定义Springboot Starter

创建一个Springboot Starter&#xff0c;借助该Starter我们可以自定义欢迎消息。 本Starter的内容不是重点&#xff0c;重点是创建Starter的流程。 1. 创建Starter工程 1.1 创建Springboot项目 1.2 导入相关依赖&#xff0c;删除spring-boot-maven-plugin <?xml version&…