【找工作系列②】【大四毕业】【复习】巩固JavaScript，了解ES6。-CSDN博客

本文链接：https://blog.csdn.net/IDApprentice/article/details/148036002

文章目录

前言

前言

督促自己,同时分享所得,阅读完本篇大约需要10分钟,希望为朋友的技术精进之路尽到绵薄之力.码字不易,望能给个点赞和收藏,以激励笔者源源不断的创作.在此以表谢意,同时因为笔者实力有限,如果发现错误,请及时指正,以免误导后人,谢谢!

Tasks:

- [ ] 类型	- [ ] 资源名	- [ ] 推荐理由
- [ ] 视频	- [ ] B站：尚硅谷 JavaScript 教程（最新版）	- [ ] 讲解通俗、覆盖面全，适合巩固
- [ ] 文档	- [ ] MDN JavaScript 教程	- [ ] 权威参考，重点查语法细节
- [ ] 练习	- [ ] JS30 - 30 个 JS 小项目	- [ ] 无框架纯 JS，锻炼逻辑能力

ES6视频和练习
书：
- 你不知道系列
- 红宝书
写一个“Todo List”
写一个“登录表单”（包含输入验证）
面试会问的问题

每日学新的东西之前必须先复习，不然只会事倍功半

复习笔记：

每个人都有自己的时区，你没有领先也没有落后，不用看轻或过于看重某人，因为每个人都有自己的节奏和生活，工作固然是收入来源，但是别忘了，家人和你爱的人才是陪伴你终身的，请笔者自己不要忘记这点，工作，生意，学历等等都是为了更好的生活，而不是最终目的。

学习技术，一定要独立完成，独立思考，不要去抄代码，要先去思考，然后不要手懒，科比也是每天练习接近一万次投篮

JS的三种输出？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    alert('你好JS~')
    document.write('JavaScript 我来了')
    console.log('它~会魔法吧~');


  </script>
</body>

</html>

JS代码执行顺序？

除了alert()，prompt()会跳过页面渲染先被执行，其他的都是正常顺序执行

什么是字面量？

变量命名规则与规范

JS数据类型？

分两大类：基础数据类型和引用数据类型

基本数据类型：number,string,boolean,undefiend,null

引用数据类型：Object

运算优先级：

模板字符串？

隐式转换？

笔者观视频有感：理论知识很重要，这个毋庸置疑，但我在想，我现在是要做什么，我是要准备面试工作，做过生意的朋友们都知道，老板的角度，我是要能做事的，所以更应该能做什么，而不是视频几百集从头刷到尾，so,开始有目的的学习吧。理论就在实践中琢磨吧，虽然也知道八股文不好，既然是为了过HR的关，那还是有必要八股文一下的，花更多时间在实操上，才是王道，是符合企业价值，为老板和用户创造价值的“道”。

从此行以下，包括后面的涉及JS篇章，均是以 MDNhttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity和实操主，以黑马程序员视频+你不知道JS系列+红宝书+JS权威指南+GPT为辅助。

原因很简单，至少对于笔者来说文档的文字捕捉信息的效率高于视频，这样更高效，毕竟在这个月底就要复习完，笔者也是在不断优化方法而不是焦虑效率。当然看个人习惯噢。-致我亲爱的读者朋友们。

梳理一下JS常用输出？

alert

console.log

document.wirte

promt

promt?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识一下Prompt</title>
</head>

<body>

  <script>
    let sign = prompt("你是什么星座的？");

    if (sign == "天蝎座") {
      alert("哇！我也是天蝎座的耶！");
    }

    // 有多种使用 prompt 方法的方式
    // sign = window.prompt(); // 打开空的提示窗口
    // sign = prompt(); // 打开空的提示窗口
    // sign = window.prompt("你觉得很幸运吗？"); // 打开显示提示文本为"你觉得很幸运吗？"的提示窗口
    // sign = window.prompt("你觉得很幸运吗？", "是的"); // 打开显示提示文本为"你觉得很幸运吗？"并且输入框默认值为"是的"的提示窗口



  </script>
</body>

</html>

感受for…of语句，以及for…of获取的是下标还是整个数组的重命名？

First Question:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识一下for...of....</title>
</head>

<body>

  <script>
    let success = ['技术', '雅思', '健身', '科研'];
    var i = 0;
    for (const eilit of success) {
      console.log(i, eilit);
      i = i + 1;
    }


  </script>
</body>

</html>

Second Question:

获取的每次迭代的数组里面的值，不是下标。

感受forEach?

对for循环可以进一步优化，不习惯箭头函数没关系（next Quetion咱们就复习一下箭头函数）。用代码直接感受一下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识一下forEach</title>
</head>

<body>

  <script>
    let success = ['技术', '雅思', '健身', '科研'];
    var i = 0;
    // before
    // for (const eilit of success) {
    //   console.log(i, eilit);
    //   i = i + 1;
    // }

    // after
    success.forEach((ele) => console.log(ele));

  </script>
</body>

</html>

箭头函数？

这一块笔者看了MDN，红宝书，但是感觉讲的还是会有些晦涩所以就GPT引导一下，发现好理解很多了。

✅ 什么是箭头函数？

箭头函数是写函数的一种简洁语法形式，形式如下：

const add = (a, b) => a + b;

等价于传统写法：

function add(a, b) {
  return a + b;
}

📌 示例 1：最基础的箭头函数

const sayHello = () => {
  console.log("Hello!");
};

sayHello();

输出：

Hello!

📌 示例 2：带参数并返回值

const square = (x) => {
  return x * x;
};

console.log(square(4)); // 输出 16

简写形式（如果只有一个表达式，可以省略 `return` 和大括号）：

const square = x => x * x;

📌 示例 3：箭头函数 + `map()`（常用于数组处理）

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // 输出 [2, 4, 6]

⚠️ 箭头函数的一个重要特性：不绑定自己的 `this`

来看个经典对比：

普通函数会改变 `this`：

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(function() {
      console.log("Hi, I'm " + this.name);
    }, 1000);
  }
};

person.greet(); // ❌ 输出 "Hi, I'm undefined"

箭头函数解决这个问题：

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log("Hi, I'm " + this.name);
    }, 1000);
  }
};

person.greet(); // ✅ 输出 "Hi, I'm Alice"

➡️ 因为箭头函数不会创建自己的 this，它会捕获外层作用域的 this。

✅ 总结箭头函数特点：

特性	描述
简洁语法	不需要写 `function` 和 `return` （在表达式时）
自动绑定 `this`	它继承外层的 `this` ，适合在回调中使用
没有自己的 `arguments`	如果你需要用 `arguments` ，就不要用箭头函数

arguments？

✅ 先看传统函数中的 `arguments`

function showArguments() {
  console.log(arguments);
}

showArguments(1, 2, 3);

输出：

[Arguments] { '0': 1, '1': 2, '2': 3 }

➡️ arguments 是一个类数组对象，包含了传入的所有实参。

❌ 箭头函数中没有自己的 `arguments`

const showArguments = () => {
  console.log(arguments);
};

showArguments(1, 2, 3); // ❌ 报错：ReferenceError: arguments is not defined

因为 箭头函数不会创建自己的 **arguments** 对象，所以会报错或引用的是外层作用域的 arguments。

✅ 如果你要在箭头函数中接收多个参数，推荐使用剩余参数（Rest Parameter）

const showArguments = (...args) => {
  console.log(args);
};

showArguments(1, 2, 3); // 输出 [1, 2, 3]

...args 是现代 JavaScript 推荐的方式，比 arguments 更安全且清晰。

✅ 总结：`arguments` 与箭头函数

特性	传统函数	箭头函数
是否支持 `arguments`	✅ 有自己的	❌ 没有自己的
推荐使用方式（多个参数）	`arguments` 或 `...args`	`...args`
是否绑定自己的 `this`	✅ 是	❌ 否（继承外层）

map？

✅ 什么是 `map()`？

map() 是 数组的方法，用于对数组中的每个元素进行处理，并返回一个 新数组，不修改原数组。

语法：

const newArray = oldArray.map((item, index, array) => {
  // 对 item 做操作并返回新值
});

📌 示例 1：每个数乘以 2

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);

console.log(doubled); // 输出: [2, 4, 6, 8]

原数组 numbers 没变，返回的是一个新数组。

📌 示例 2：把字符串数组转成大写

const fruits = ['apple', 'banana', 'cherry'];

const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // 输出: ["APPLE", "BANANA", "CHERRY"]

📌 示例 3：从对象数组中提取字段

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 22 }
];

const names = users.map(user => user.name);

console.log(names); // 输出: ["Alice", "Bob", "Charlie"]

📌 示例 4：带下标 index 的用法

const letters = ['a', 'b', 'c'];

const withIndex = letters.map((letter, index) => `${index}: ${letter}`);

console.log(withIndex); // 输出: ["0: a", "1: b", "2: c"]

⚠️ 注意：

map()不会修改原数组
map() 的返回值必须是你想要放入新数组的内容（每个 .map() 回调函数必须 return 值）
map() 和 forEach() 不一样，forEach() 不返回新数组

🧠 类比理解

你可以把 map() 想象成数组的「映射器」或者「加工厂」：

原数组 [1, 2, 3]
每个元素进 map 加工（*2）
返回新数组 [2, 4, 6]

`==`和`===`的区别？

✅ `===` 与 `==` 的区别在于：

运算符	名称	是否进行类型转换	是否推荐使用
`==`	宽松等于（Loose equality）	✅ 会转换类型	❌ 不推荐
`===`	严格等于（Strict equality）	❌ 不转换类型	✅ 推荐

📌 示例对比：

0 == false       // ✅ true：类型转换后相等
0 === false      // ❌ false：类型不同（number vs boolean）

'123' == 123     // ✅ true：字符串被转换为数字
'123' === 123    // ❌ false：类型不同

null == undefined  // ✅ true：特殊规则
null === undefined // ❌ false：类型不同

true == 1        // ✅ true：true 转为数字 1
true === 1       // ❌ false

🔒 推荐：永远使用 `===`，除非你非常清楚在做什么

使用 === 可以避免隐式类型转换带来的 bug，提高代码可读性和安全性。

✅ 一个好习惯的例子

const input = '0';

if (input === 0) {
  console.log('Zero!');
} else {
  console.log('Not zero');
}

➡️ 输出：Not zero（因为 '0' !== 0）

🧠 总结口诀：

用 ==，JavaScript 可能会“帮你想太多”；

用 ===，你说什么它就信什么。

什么是事件

事件指的就是用户或浏览器对页面所做的某个动作，我们可以对这些事件做出反应。

在 JavaScript（尤其是网页开发中），事件（Event）就是指用户或浏览器对页面所做的某种“动作”或“发生的一件事”，你可以用代码对这些事件作出反应。

✅ 常见的事件类型（举例）：

事件名称	触发条件
`click`	用户点击一个元素
`mouseover`	鼠标移入元素时
`keydown`	用户按下键盘时
`submit`	表单提交时
`load`	页面或图片加载完成时
`change`	表单输入内容改变

🧪 示例：点击按钮时触发事件

<button id="myBtn">点我</button>

<script>
  const btn = document.getElementById('myBtn');

  btn.addEventListener('click', () => {
    alert('按钮被点击了！');
  });
</script>

➡️ 用户点击按钮时，触发 click 事件，执行回调函数（显示弹窗）。

🧠 事件的本质：

事件是浏览器或用户和页面交互时的“信号”，你可以使用 JavaScript 监听这些信号，并在信号发生时执行某些代码（回调函数）。

🧩 常见的事件监听方法：

element.addEventListener('事件类型', 回调函数);

例如：

input.addEventListener('change', function() {
  console.log('内容变了');
});

✅ 总结：

术语	含义
事件	某个交互行为（点击、输入、加载等）
事件监听器	你用来“监听”事件发生的代码
回调函数	事件发生时要执行的动作