2024年【面试题】如何使用ES6 ，近期面试题

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 剩余参数运算符

• 在定义函数的时候使用运算符(…)，会将传过来的多余参数合到一起
• 剩余参数永远是个数组，即使没有值，也是空数组
• 剩余参数只能作为最后一个参数

const fn = (num1, num2, ...nums) => {
  console.log(num1, num2, nums);
};
fn(1, 2); // 1 2 []
fn1(1, 2, 3, 4, 5, 6); // 1 2 [3,4,5,6]

2. 展开运算符

const arr = ["css", "js", "ts", "vue"];
console.log(...arr); // css js ts vue 

3. 展开运算符和剩余参数运算符的区别

• 剩余参数运算符：1,3,5 --> [1,3,5]
• 展开运算符：[1,3,5] --> 1,3,5

const diff = (...args) => {
  console.log(args); // 剩余参数运算符：[1,3,5]
  console.log(...args); // 展开运算符：1,3,5
};
diff(1, 3, 5);

二、 …的用法举例

1. 数组

（1）数组复制

const citys = ["南京", "北京", "上海", "成都", "杭州"];
const citysCopy = [...citys];
console.log(citysCopy); // ["南京", "北京", "上海", "成都", "杭州"]

（2）数组去重

const colors = ["red", "orange", "yellow", "green", "orange"];
const onlyColors = [...new Set(colors)];
console.log(onlyColors); // ["red", "orange", "yellow", "green"]

（3）数组合并

const animals = ["cat", "dog"];
const seasons = ["spring", "summer"];
const animalsAndSeasons = [...animals, ...seasons];
console.log(animalsAndSeasons); // ["cat", "dog", "spring", "summer"]

（4）数组切片

const digitals = ["pc", "watch", "camera", "keyboard", "mouse"];
const [pc, ...otherDigitals] = digitals;
console.log(otherDigitals); // ["watch", "camera", "keyboard", "mouse"]

（5）数组作为参数进行传递

• 数组个数等于形参个数：一一对应
• 数组个数小于形参个数：缺少值为 undefined
• 数组个数大于形参个数：多的参数值被忽略
• 在调用函数的时候使用运算符(…)，会把原本聚拢在一起的数据拆分传递给各个参数

const phone1 = ["apple", "vivo", "oppo"];
const phone2 = ["apple", "vivo"];
const phone3 = ["apple", "vivo", "oppo", "华为"];
const mixer = (brand1, brand2, brand3) => {
  console.log(brand1, brand2, brand3);
};
mixer(...phone1); // 等于：一一对应，apple vivo oppo
mixer(...phone2); // 小于：缺少值为undefined，apple vivo undefined
mixer(...phone3); // 多于：多的参数值被忽略，apple vivo oppo

（6）将类数组转换为数组

const argsTransformArr = (...args) => console.log(args);
argsTransformArr("pineapple"); // ["pineapple"]
argsTransformArr(66, 88, 99); // [66, 88, 99]

2. 对象

（1）复制对象

const student = {
  name: "Jack",
  school: {
    class: "Software Engineering Class 2"
  }
};
const studentCopy = { ...student };
console.log(studentCopy); // {name: "Jack",school:{class: "Software Engineering Class 3"}}

（2）合并对象——属性各不相同

• 新对象包含了合并的对象的所有属性

const personName = { name: "nina" };
const personSex = { sex: "female" };
const personAge = { age: 18 };
const person = { ...personName, ...personSex, ...personAge };
console.log(person); // {name: "nina", sex: "female", age: 18}

（3）合并对象——包含相同属性

• 合并的对象中包含有同名的属性，则后面对象中的属性值覆盖前面的同名的属性值

const fruit1 = {
  name: "apple",
  color: "red"
};

const fruit2 = {
  name: "strawberry",
  weight: "20g"
};

const fruit = { ...fruit1, ...fruit2 };
console.log(fruit); // {name: "strawberry", color: "red", weight: "20g"}

（4）内部属性为对象进行展开——内部对象不会展开

const fruit3 = {
  detail: {
    name: "apple",
    size: "big",
    weight: "300g"
  }
};
console.log({ ...fruit3 });

（5）非对象展开

• 展开的是空对象，则仍然是空对象
• 展开的不是对象，则会自动将其转为对象，但是新创建的对象由于并不包含任何属性，故为空对象

console.log({ ...{} }); // {}

console.log({ ...1 }); // {}
console.log({ ...undefined }); // {}
console.log({ ...null }); // {}
console.log({ ...true }); // {}

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

console.log({ …undefined }); // {}
console.log({ …null }); // {}
console.log({ …true }); // {}

### 最后

**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-BZwFJ2jC-1715477508643)]