ES6 经典题附加答案

最新推荐文章于 2024-04-18 17:50:52 发布

克里斯蒂亚诺更新

最新推荐文章于 2024-04-18 17:50:52 发布

阅读量584

点赞数 29

分类专栏： JavaScript ES6 文章标签： es6 javascript

本文链接：https://blog.csdn.net/weixin_36152801/article/details/137860452

版权

JavaScript ES6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

var 和let的区别：

当使用 var 和 let 声明变量时，在循环中的行为会有所不同。由于 var 是函数作用域，而 let 是块级作用域，它们在循环中的行为会受到不同的影响。下面是一个简单的示例：
// 使用 var 声明变量的例子
console.log("使用 var 声明变量：");
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log("var 循环中的 i 值为：" + i);
  }, 100);
}
console.log("var 循环外的 i 值为：" + i); // 输出 3

// 使用 let 声明变量的例子
console.log("\n使用 let 声明变量：");
for (let j = 0; j < 3; j++) {
  setTimeout(function() {
    console.log("let 循环中的 j 值为：" + j);
  }, 100);
}
// console.log("let 循环外的 j 值为：" + j); // 这行会报错，因为 j 不在作用域内
在这个示例中，我们分别使用 var 和 let 声明了一个循环变量 i 和 j，然后在循环中使用 setTimeout 在 100 毫秒后输出当前循环变量的值。在循环外，我们也尝试输出这两个变量的值。

当使用 var 声明变量时，循环结束后，i 会被提升到函数作用域中，因此在循环外仍然可以访问到，输出结果为 var 循环中的 i 值为：3 和 var 循环外的 i 值为：3。
当使用 let 声明变量时，j 只在循环块内有效，因此在循环外无法访问到，尝试输出 j 的值会导致报错。

这个例子清楚地展示了 var 和 let 在循环中的行为差异，let 声明的变量具有块级作用域，在循环内部有效，而 var 声明的变量具有函数作用域，在函数内部有效。

ES6中的反引号（`）标识：

在 ECMAScript 6（ES6）中，反引号（``）被称为模板字面量（Template Literals），它是一种新的字符串语法，提供了一种更方便的方式来创建多行字符串和嵌入表达式。

模板字面量可以包含普通文本和插入表达式，插入表达式使用 ${} 来包裹，其中可以放置任何有效的 JavaScript 表达式。当模板字面量被求值时，插入的表达式会被计算并替换成其对应的值，最终形成一个完整的字符串。

下面是一个简单的示例，演示了如何使用模板字面量：
// 使用模板字面量创建多行字符串
const multiLineString = `
  This is a
  multi-line
  string.
`;
console.log(multiLineString);

// 使用模板字面量插入表达式
const name = 'John';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // 输出：My name is John and I am 30 years old.
在这个示例中，我们使用模板字面量创建了一个多行字符串和一个包含插入表达式的字符串。模板字面量内部可以包含换行符和任意的空白字符，这样就可以更方便地创建格式化的字符串。同时，插入的表达式可以是任何有效的 JavaScript 表达式，包括变量、函数调用等等。

ES6 函数默认参数：

ES6 引入了函数的默认参数功能，使得在定义函数时可以为参数设置默认值，如果调用函数时没有传递相应的参数，则会使用默认值。下面是一个简单的示例：
// 使用 ES6 函数默认参数的示例
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

// 调用函数，不传递参数
greet(); // 输出：Hello, Guest!

// 调用函数，传递参数
greet('John'); // 输出：Hello, John!
在这个示例中，greet 函数定义了一个参数 name，并使用 = 符号为其设置了默认值 'Guest'。当调用函数时没有传递参数时，函数会使用默认值 'Guest'；当传递了参数 'John' 时，函数会使用传递的参数值。

使用默认参数可以方便地处理函数参数的缺失情况，并提供了一种简洁的方式来定义函数的默认行为。

ES6 箭头函数：

// 使用箭头函数的示例
// 传统函数定义
function add(a, b) {
  return a + b;
}

// 箭头函数定义
const addArrow = (a, b) => a + b;

// 调用函数
console.log(add(2, 3)); // 输出：5
console.log(addArrow(2, 3)); // 输出：5

箭头函数的this是来自父级作用域：

// 在全局作用域中定义一个对象
const obj = {
  name: 'John',
  greet: function() {
    // 传统函数内部的 this 是调用者对象 obj
    console.log(`Hello, ${this.name}!`);

    // 箭头函数继承了父级作用域中的 this，即 obj 对象
    const greetArrow = () => {
      console.log(`Hello, ${this.name}!`);
    };
    greetArrow();
  }
};

// 调用对象方法
obj.greet(); // 输出：Hello, John!  Hello, John!

在定时器中使用箭头函数和不使用箭头函数的区别：

// 在全局作用域中定义一个对象
const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);

    // 定义一个定时器，回调函数不是箭头函数
    setTimeout(function() {
      console.log(`Timeout: Hello, ${this.name}!`); //this.name 的值是 undefined
    }, 1000);
  }
};

// 调用对象方法
obj.greet();

// 在全局作用域中定义一个对象
const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);

    // 使用箭头函数定义定时器的回调函数
    setTimeout(() => {
      console.log(`Timeout: Hello, ${this.name}!`);// this.name 始终为 'John'
    }, 1000);
  }
};

// 调用对象方法
obj.greet();

箭头函数不能用于构造函数：

// 箭头函数作为构造函数的示例
const Person = (name) => {
  this.name = name; // 在箭头函数内部使用 this
};

// 尝试使用箭头函数创建实例
const person = new Person('John'); // 抛出错误：Person is not a constructor

ES6 prototype 是什么：

在 JavaScript 中，每个函数都有一个 prototype 属性，它是一个对象，可以用来添加方法和属性，以便所有该函数的实例都可以访问和共享这些方法和属性。

下面是一个简单的示例，演示了如何使用 ES6 中的 prototype 属性：
// 定义一个构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 使用 prototype 属性添加方法
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 创建 Person 的实例
const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);

// 调用添加到原型中的方法
person1.greet(); // 输出：Hello, my name is John and I am 30 years old.
person2.greet(); // 输出：Hello, my name is Alice and I am 25 years old.
在这个示例中，我们定义了一个 Person 构造函数，它接受 name 和 age 两个参数，并将它们分配给构造函数创建的实例的属性。然后，我们使用 Person.prototype 对象的 greet 方法来添加一个 greet 方法，该方法用于打印出实例的姓名和年龄信息。

通过将方法添加到 prototype 属性中，所有 Person 的实例都可以共享这个方法，这样可以节省内存空间，因为所有实例共享相同的方法代码。这种方式也使得我们可以在创建对象后动态地为其添加新的方法，而无需修改构造函数本身。

ES6属性的简写：

// 定义变量
const name = 'John';
const age = 30;

// 传统写法
const person1 = {
  name: name,
  age: age
};

// 属性的简写语法
const person2 = {
  name,
  age
};

// 输出对象
console.log(person1); // 输出：{ name: 'John', age: 30 }
console.log(person2); // 输出：{ name: 'John', age: 30 }

ES6 方法的简写：

// 定义一个对象
const person = {
  name: 'John',
  age: 30,
  // 传统写法
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
  // ES6 方法的简写语法
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

// 调用方法
person.greet(); // 输出：Hello, my name is John and I am 30 years old.
person.sayHi(); // 输出：Hi, my name is John and I am 30 years old.

ES6 中的 for...of 和 for...in 循环区别：

ES6 中的 for...of 和 for...in 循环都是用来遍历可迭代对象的，但它们的行为有所不同。

1. for...of 循环：

用于遍历可迭代对象（例如数组、字符串、Map、Set 等）的值。
不遍历对象的属性名，只遍历对象的属性值。
无法遍历普通对象（Plain Object），因为普通对象不是可迭代对象。
可以使用 break、continue 和 return 来控制循环的行为。

下面是一个使用 for...of 循环遍历数组的示例：
const arr = [1, 2, 3, 4, 5];

for (const value of arr) {
  console.log(value);
}
2. for...in 循环：

用于遍历对象的可枚举属性名（包括继承的属性）。
不适用于遍历数组等可迭代对象，因为它会遍历对象的属性名，而不是属性值。
可以使用 hasOwnProperty() 方法过滤只获取对象自身的属性。
在遍历数组时，索引会被当作属性名，而不是迭代的值。

下面是一个使用 for...in 循环遍历对象属性的示例：
const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}
综上所述，for...of 循环适用于遍历可迭代对象的值，而 for...in 循环适用于遍历对象的属性名。在实际使用中，要根据需求选择合适的循环方式。

ES Modules（ECMAScript Modules）和 CommonJS 是两种不同的模块系统：

ES Modules-----

// 导出模块
// math.js
export function add(a, b) {
  return a + b;
}

// 导入模块
// main.js
import { add } from './math.js';

console.log(add(2, 3)); // 输出：5

CommonJS-------

// 导出模块
// math.js
exports.add = function(a, b) {
  return a + b;
};

// 导入模块
// main.js
const math = require('./math.js');

console.log(math.add(2, 3)); // 输出：5

promise和async和await的区别：

Promise、async/await 是 JavaScript 中处理异步操作的不同方式，它们各自有不同的特点和用法。

Promise：

Promise 是 ES6 引入的一种异步编程解决方案，用于处理异步操作。
Promise 对象代表了一个异步操作的最终完成或失败，并且其状态只能从未完成（pending）变为已完成（fulfilled）或失败（rejected），一旦状态改变，就不会再变。
可以通过 then() 方法来处理异步操作的结果，通过 catch() 方法来处理异步操作的错误。
Promise 可以通过链式调用来解决回调地狱的问题。

async/await：

async/await 是 ES2017（ES8）引入的一种异步编程解决方案，基于 Promise 实现。
async 函数是 Promise 的语法糖，它使得异步代码看起来更像同步代码。
async 函数返回一个 Promise 对象，可以使用 await 关键字来等待一个 Promise 对象的解决或拒绝。
await 关键字只能在 async 函数内部使用，用于暂停 async 函数的执行，等待 Promise 对象的状态变更，并返回其解决值。
async/await 可以更直观地处理异步代码，避免了回调函数的嵌套，使代码更加清晰和易于理解。

区别：

Promise 是一种构造函数，用于处理异步操作，通过 then() 和 catch() 方法来处理异步操作的结果和错误；而 async/await 是一种语法糖，基于 Promise 实现，使得异步代码看起来更像同步代码。
Promise 适用于处理异步操作，通过链式调用来解决回调地狱的问题；而 async/await 则更加直观和简洁，使得异步代码更容易编写和理解。
Promise 是一种较早的异步编程解决方案，在 ES6 中引入；而 async/await 是在 ES2017（ES8）中引入的更现代的异步编程解决方案。

综上所述，Promise 和 async/await 都是处理异步操作的有效方式，具有不同的特点和用法，可以根据实际需求选择合适的方式。async/await 基于 Promise 实现，提供了更加直观和简洁的异步编程方式。

ES6 解构赋值：

ES6 中的解构赋值是一种方便的语法，可以从数组或对象中提取数据，并赋值给变量。下面分别演示数组解构赋值和对象解构赋值的例子：

数组解构赋值：
// 定义一个数组
const numbers = [1, 2, 3, 4, 5];

// 使用数组解构赋值
const [first, second, ...rest] = numbers;

// 输出解构得到的变量
console.log(first); // 输出：1
console.log(second); // 输出：2
console.log(rest); // 输出：[3, 4, 5]
在这个例子中，我们定义了一个数组 numbers，然后使用数组解构赋值将数组的前两个元素赋值给变量 first 和 second，剩余的元素则赋值给变量 rest，并使用展开运算符 ... 来收集剩余的元素。

对象解构赋值：
// 定义一个对象
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// 使用对象解构赋值
const { name, age, city } = person;

// 输出解构得到的变量
console.log(name); // 输出：'John'
console.log(age); // 输出：30
console.log(city); // 输出：'New York'
在这个例子中，我们定义了一个对象 person，然后使用对象解构赋值将对象的属性值分别赋值给同名的变量 name、age 和 city。

解构赋值使得从数组或对象中提取数据变得更加简洁和直观，能够提高代码的可读性和可维护性。

ES6 set 快速去重：

const arr = [1, 2, 2, 3, 4, 4, 5];

// 使用 Set 进行快速去重
const uniqueValues = [...new Set(arr)];

console.log(uniqueValues); // 输出：[1, 2, 3, 4, 5]

ES6 展开运算符：

当谈及 ES6 展开运算符时，你提到的用例都是很常见的。下面是你提到的四种情况的示例：

1. 将字符串转为数组：
const str = "hello";
const arr = [...str];

console.log(arr); // 输出：['h', 'e', 'l', 'l', 'o']
2. 将集合转为数组：
const set = new Set([1, 2, 3, 4, 5]);
const arr = [...set];

console.log(arr); // 输出：[1, 2, 3, 4, 5]
3. 两个数组的合并：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];

console.log(combinedArr); // 输出：[1, 2, 3, 4, 5, 6]

forEach遍历数组和 For..in 遍历对象的区别：

//遍历数组
const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index) => {
  console.log(`Element at index ${index} is: ${number}`);
});



//遍历对象
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

ES6 中map 的使用：

ES6 中的 Map 是一种键值对的集合，其中的键可以是任意值（包括对象或者其他基本类型），而值也可以是任意值。下面是一个简单的示例，演示了如何使用 Map：
// 创建一个 Map 对象
const myMap = new Map();

// 向 Map 中添加键值对
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.set('key3', 'value3');

// 获取 Map 中的值
console.log(myMap.get('key1')); // 输出：value1
console.log(myMap.get('key2')); // 输出：value2
console.log(myMap.get('key3')); // 输出：value3

// 检查 Map 中是否存在指定的键
console.log(myMap.has('key1')); // 输出：true
console.log(myMap.has('key4')); // 输出：false

// 删除 Map 中的指定键值对
myMap.delete('key2');

// 获取 Map 中键值对的数量
console.log(myMap.size); // 输出：2

// 遍历 Map 中的键值对
myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 清空 Map
myMap.clear();

console.log(myMap.size); // 输出：0
在这个示例中，我们首先创建了一个空的 Map 对象 myMap，然后使用 set 方法向其中添加了三组键值对。接着，我们通过 get 方法获取了指定键对应的值，并使用 has 方法检查了指定的键是否存在于 Map 中。我们还演示了如何使用 delete 方法删除指定键值对，以及如何使用 forEach 方法遍历 Map 中的键值对。最后，我们使用 clear 方法清空了整个 Map 对象。