先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
如果你需要这些资料，可以添加V获取：vip1024c （备注前端）
正文
const v = “Hi! I’m a strict mode script!”;
函数内开启严格模式：
// index.js
function strict() {
‘use strict’;
function nested() {
return “And so am I!”;
}
return "Hi! I’m a strict mode function! " + nested();
}
3. 注意点
-
"use strict"需要定义在脚本最顶部（函数内除外），否则严格模式可能无法启用。 -
一旦进入了严格模式，就无法关闭严格模式。
4. 体验
启用 "use strict" 后，为未定义元素赋值将抛出异常：
“use strict”;
leo = 17; // Uncaught ReferenceError: leo is not defined
启用 "use strict" 后，试图删除不可删除的属性时会抛出异常：
“use strict”;
delete Object.prototype; // Uncaught TypeError: Cannot delete property ‘prototype’ of function Object() { [native code] }
详细介绍可以阅读《MDN 严格模式章节 》。
四、变量
====
1. 介绍
变量是数据的“命名存储”。
2. 使用
目前定义变量可以使用三种关键字：var / let / const。三者区别可以阅读《let 和 const 命令》 。
let name = “leo”;
let name = “leo”, age, addr;
let name = “leo”, age = 27, addr = “fujian”;
3. 命名建议
变量命名有 2 个限制：
-
变量名称必须仅包含**「字母，数字，符号」**
$和_。 -
首字符必须**「非数字」**。变量命名还有一些建议：
-
常量一般用全大写，如
const PI = 3.141592； -
使用易读的命名，比如
userName或者shoppingCart。
4. 注意点
-
JavaScript 变量名称区分大小写，如变量
leo与Leo是不同的； -
JavaScript 变量名称允许非英文字母，但不推荐，如
let 平安 = "leo"； -
避免使用
a、b、c这种缩写。
五、数据类型
======
JavaScript 是一种**「弱类型」或者说「动态语言」**。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据：
var foo = 42; // foo is a Number now
foo = “bar”; // foo is a String now
foo = true; // foo is a Boolean now
详细介绍可以阅读《MDN JavaScript 数据类型和数据结构 》。
1. 八大数据类型
前七种为基本数据类型，也称为原始类型（值本身无法被改变），而 object 为复杂数据类型。八大数据类型分别是：
-
number用于任何类型的数字：整数或浮点数，在 ±2 范围内的整数。 -
bigint用于任意长度的整数。 -
string用于字符串：一个字符串可以包含一个或多个字符，所以没有单独的单字符类型。 -
boolean用于true和false。 -
null用于未知的值 —— 只有一个null值的独立类型。 -
undefined用于未定义的值 —— 只有一个undefined值的独立类型。 -
symbol用于唯一的标识符。 -
object用于更复杂的数据结构。「每个类型后面会详细介绍。」
2. 检测数据类型
通过 typeof 运算符检查：
-
两种形式：
typeof x或者typeof(x)。 -
以字符串的形式返回类型名称，例如
"string"。 -
typeof null会返回"object"—— 这是 JavaScript 编程语言的一个错误，实际上它并不是一个object。
typeof “leo” // “string”
typeof undefined // “undefined”
typeof 0 // “number”
typeof NaN // “number”
typeof 10n // “bigint”
typeof true // “boolean”
typeof Symbol(“id”) // “symbol”
typeof [1,2,3,4] // “object”
typeof Math // “object” (1) Math 是一个提供数学运算的内建 object。
typeof null // “object” (2) JavaScript 语言的一个错误，null 不是一个 object。null 有自己的类型，它是一个特殊值。
typeof alert // “function” (3) alert 在 JavaScript 语言中是一个函数。
六、类型转换
======
JavaScript 变量可以转换为新变量或其他数据类型：
-
通过使用 JavaScript 函数
-
通过 JavaScript 自身自动转换
1. 字符串转换
通过全局方法 String() 将 「其他类型数据（任何类型的数字，字母，布尔值，对象）」 转换为 String 类型：
String(123); // “123”
// Number方法toString()/toExponential()/toFixed()/toPrecision() 也有同样效果。
String(false); // “false”
// Boolean方法 toString() 也有同样效果。
String(new Date()); // “Sun Jun 07 2020 21:44:20 GMT+0800 (中国标准时间)”
// Date方法 toString() 也有同样效果。
String(leo);
2. 数值转换
通过以下几种方式能将其他类型数据转换为 Number 类型：
- 一元运算符
+
const age = +“22”; // 22
Number方法
const age = Number(“22”); // 22
Number.parseFloat(“22”); // 22
Number.parseInt(“22”); // 22
- 其他方式转 Number 类型
// 布尔值
Number(false) // 返回 0
Number(true) // 返回 1
// 日期
const date = new Date();
Number(date); // 返回 1591537858154
date.getTime(); // 返回 1591537858154，效果一致。
// 自动转换
5 + null // 返回 5 null 转换为 0
“5” + null // 返回"5null" null 转换为 “null”
“5” + 1 // 返回 “51” 1 转换为 “1”
“5” - 1 // 返回 4 “5” 转换为 5
3. 布尔值转换
转换规则如下：
-
直观上为“空”的值（如
0、空字符串、null、undefined和NaN）将变为false。 -
其他值变成
true。
Boolean(1); // true
Boolean(0); // false
Boolean(“hello”); // true
Boolean(“”); // false
Boolean(“0”); // true
Boolean(" "); // 空白, 也是 true (任何非空字符串是 true)
4. 小结
image2.png
七、运算符
=====
1、运算符概念
常见运算符如加法 + 、减法 - 、乘法 * 和除法 / ，举一个例子，来介绍一些概念：
let sum = 1 + 2;
let age = +18;
其中：
-
加法运算
1 + 2中，1和2为 2 个运算元，左运算元1和右运算元2，即**「运算元就是运算符作用的对象。」** -
1 + 2运算式中包含 2 个运算元，因此也称该运算式中的加号+为 「二元运算符。」 -
在
+18中的加号+对应只有一个运算元，则它是 「一元运算符」 。
2、+ 号运算符
let msg = "hello " + “leo”; // “hello leo”
let total = 10 + 20; // 30
let text1 = “1” + “2”; // “12”
let text2 = “1” + 2; // “12”
let text3 = 1 + “2”; // “12”
let text4 = 1 + 2 + “3”; // “33”
let num = +text1; // 12 转换为 Number 类型
3、运算符优先级
运算符的优先级决定了表达式中运算执行的先后顺序，优先级高的运算符最先被执行。下面的表将所有运算符按照优先级的不同从高（20）到低（1）排列。
| 优先级 | 运算类型 | 关联性 | 运算符 |
| — | — | — | — |
| 20 | 圆括号 | n/a（不相关） | ( … ) |
| 19 | 成员访问 | 从左到右 | … . … |
|
| 需计算的成员访问 | 从左到右 | … [ … ] |
|
| new (带参数列表) | n/a | new … ( … ) |
|
| 函数调用 | 从左到右 | … ( … ) |
|
| 可选链（Optional chaining） | 从左到右 | ?. |
| 18 | new (无参数列表) | 从右到左 | new … |
| 17 | 后置递增(运算符在后) | n/a |
|
| … ++ |
|
|
|
|
| 后置递减(运算符在后) |
| … -- |
| 16 | 逻辑非 | 从右到左 | ! … |
|
| 按位非 |
| ~ … |
|
| 一元加法 |
| + … |
|
| 一元减法 |
| - … |
|
| 前置递增 |
| ++ … |
|
| 前置递减 |
| -- … |
|
| typeof |
| typeof … |
|
| void |
| void … |
|
| delete |
| delete … |
|
| await |
| await … |
| 15 | 幂 | 从右到左 | … ** … |
| 14 | 乘法 | 从左到右 |
|
| … * … |
|
|
|
|
| 除法 |
| … / … |
|
| 取模 |
| … % … |
| 13 | 加法 | 从左到右 |
|
| … + … |
|
|
|
|
| 减法 |
| … - … |
| 12 | 按位左移 | 从左到右 | … << … |
|
| 按位右移 |
| … >> … |
|
| 无符号右移 |
| … >>> … |
| 11 | 小于 | 从左到右 | … < … |
|
| 小于等于 |
| … <= … |
|
| 大于 |
| … > … |
|
| 大于等于 |
| … >= … |
|
| in |
| … in … |
|
| instanceof |
| … instanceof … |
| 10 | 等号 | 从左到右 |
|
| … == … |
|
|
|
|
| 非等号 |
| … != … |
|
| 全等号 |
| … === … |
|
| 非全等号 |
| … !== … |
| 9 | 按位与 | 从左到右 | … & … |
| 8 | 按位异或 | 从左到右 | … ^ … |
| 7 | 按位或 | 从左到右 | … | … |
| 6 | 逻辑与 | 从左到右 | … && … |
| 5 | 逻辑或 | 从左到右 | … || … |
| 4 | 条件运算符 | 从右到左 | … ? … : … |
| 3 | 赋值 | 从右到左 | … = … |
|
|
|
| … += … |
|
|
|
| … -= … |
|
|
|
| … *= … |
|
|
|
| … /= … |
|
|
|
| … %= … |
|
|
|
| … <<= … |
|
|
|
| … >>= … |
|
|
|
| … >>>= … |
|
|
|
| … &= … |
|
|
|
| … ^= … |
|
|
|
| … |= … |
| 2 | yield | 从右到左 | yield … |
|
| yield* |
| yield* … |
| 1 | 展开运算符 | n/a | ... … |
| 0 | 逗号 | 从左到右 | … , … |
3 > 2 && 2 > 1
// return true
3 > 2 > 1
// 返回 false，因为 3 > 2 是 true，并且 true > 1 is false
// 加括号可以更清楚：(3 > 2) > 1
八、值的比较
======
1. 常见比较
在 JS 中的值的比较与数学很类型：
-
大于/小于/大于等于/小于等于：
a>b/a<b/a>=b/a<=b； -
判断相等：
// 使用 ==，非严格等于，不关心值类型
// == 运算符会对比较的操作数做隐式类型转换，再比较
‘1’ == 1; // true
// 使用 ===，严格相等，关心值类型
// 将数字值 -0 和 +0 视为相等，并认为 Number.NaN 不等于 NaN。
‘1’ === 1; // false
（图片来自：《MDN JavaScript 中的相等性判断》）
- 判断不相等：和判断相等一样，也有两种：
!=/!==。
2. 相等性判断（Object.is()）
另外 ES6 新增 Object.is 方法判断两个值是否相同，语法如下：
Object.is(value1, value2);
以下任意项成立则两个值相同：
-
两个值都是
undefined -
两个值都是
null -
两个值都是
true或者都是false -
两个值是由相同个数的字符按照相同的顺序组成的字符串
-
两个值指向同一个对象
-
两个值都是数字并且
-
- 都是正零
+0
- 都是正零
-
都是负零
-0 -
都是
NaN -
都是除零和
NaN外的其它同一个数字 使用示例：
Object.is(‘foo’, ‘foo’); // true
Object.is(window, window); // true
Object.is(‘foo’, ‘bar’); // false
Object.is([], []); // false
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
兼容性 Polyfill 处理：
if (!Object.is) {
Object.is = function(x, y) {
// SameValue algorithm
if (x === y) { // Steps 1-5, 7-10
// Steps 6.b-6.e: +0 != -0
return x !== 0 || 1 / x === 1 / y;
} else {
// Step 6.a: NaN == NaN
return x !== x && y !== y;
}
};
}
3. null 与 undefined 比较
对于相等性判断比较简单：
null == undefined; // true
null === undefined; // false
对于其他比较，它们会先转换位数字：null 转换为 0 ， undefied 转换为 NaN 。
null > 0; // false 1
null >= 0; // true 2
null == 0; // false 3
null < 1; // true 4
需要注意：null == 0; // false 这里是因为：undefined 和 null 在相等性检查 == 中**「不会进行任何的类型转换」**，它们有自己独立的比较规则，所以除了它们之间互等外，不会等于任何其他的值。
undefined > 0; // false 1
undefined > 1; // false 2
undefined == 0; // false 3
第 1、2 行都返回 false 是因为 undefined 在比较中被转换为了 NaN，而 NaN 是一个特殊的数值型值，它与任何值进行比较都会返回 false。第 3 行返回 false 是因为这是一个相等性检查，而 undefined 只与 null 相等，不会与其他值相等。
九、alert / prompt / confirm
==========================
1. alert
显示一个警告对话框，上面显示有指定的文本内容以及一个“确定”按钮。「注意：弹出模态框，并暂停脚本，直到用户点击“确定”按钮。」
// 语法
window.alert(message);
alert(message);
// 示例
alert(‘hello leo!’);
message是要显示在对话框中的文本字符串，如果传入其他类型的值,会转换成字符串。
2. prompt
显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。**「注意：弹出模态框，并暂停脚本，直到用户点击“确定”按钮。」**当点击确定返回文本，点击取消或按下 Esc 键返回 null。语法如下：
let result = window.prompt(text, value);
-
result用来存储用户输入文字的字符串，或者是 null。 -
text用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写。 -
value文本输入框中的默认值，该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中，省略该参数会导致输入框中显示默认值"undefined"。
3. confirm
Window.confirm() 方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。**「注意：弹出模态框，并暂停脚本，直到用户点击“确定”按钮。」**语法如下：
let result = window.confirm(message);
-
message 是要在对话框中显示的可选字符串。
-
result 是一个布尔值，表示是选择确定还是取消 (true表示OK)。
十、条件运算符：if 和 ‘?’
================
1. if 语句
当 if 语句当条件表达式，会将表达式转换为布尔值，当为 truthy 时执行里面代码。转换规则如：
-
数字
0、空字符串""、null、undefined和NaN都会被转换成false。因为他们被称为 “falsy” 值。 -
其他值被转换为
true，所以它们被称为 “truthy”。
2. 三元运算符
**「条件（三元）运算符」**是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号（?），如果条件为 truthy ，则问号后面的表达式A将会执行；表达式A后面跟着一个冒号（:），如果条件为 falsy ，则冒号后面的表达式B将会执行。本运算符经常作为 [if]( ) 语句的简捷形式来使用。语法：
condition ? exprIfTrue : exprIfFalse
-
condition 计算结果用作条件的表达式。
-
exprIfTrue 如果表达式 condition 的计算结果是 truthy（它和 true 相等或者可以转换成 true ），那么表达式 exprIfTrue 将会被求值。
-
exprIfFalse 如果表达式 condition 的计算结果是 falsy（它可以转换成 false ），那么表达式 exprIfFalse 将会被执行。示例：
let getUser = function(name){
return name === ‘leo’ ? ‘hello leo!’ : ‘unknow user’;
}
// 可以简写如下：
let getUser = name => name === ‘leo’ ? ‘hello leo!’ : ‘unknow user’;
getUser(‘leo’); // “hello leo!”
getUser(‘pingan’); // “unknow user”
十一、逻辑运算符
========
详细可以阅读《MDN 逻辑运算符》 。
1. 运算符介绍
逻辑运算符如下表所示 (其中_expr_可能是任何一种类型, 不一定是布尔值):
| 运算符 | 语法 | 说明 |
| — | — | — |
| 逻辑与，AND（&&） | _expr1_ && _expr2_ | 若 expr**1** 可转换为 true，则返回 expr**2**；否则，返回 expr**1**。 |
| 逻辑或，OR（||） | _expr1_ || _expr2_ | 若 expr**1** 可转换为 true，则返回 expr**1**；否则，返回 expr**2**。 |
| 逻辑非，NOT（!） | !_expr_ | 若 expr 可转换为 true，则返回 false；否则，返回 true。 |
如果一个值可以被转换为 true，那么这个值就是所谓的 truthy，如果可以被转换为 false，那么这个值就是所谓的 falsy。会被转换为 false 的表达式有：
-
null； -
NaN； -
0； -
空字符串（
""or''or ````）； -
undefined。尽管&&和||运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值（或者表达式）转换为布尔值，请使用双重非运算符（即!!）或者Boolean构造函数。JavaScript 里有三个逻辑运算符：||（或），&&（与），!（非）。
2. 运算符示例
- 逻辑与（&&） 所有条件都为 true 才返回 true，否则为 false。
a1 = true && true // t && t 返回 true
a2 = true && false // t && f 返回 false
a3 = false && true // f && t 返回 false
a4 = false && (3 == 4) // f && f 返回 false
a5 = “Cat” && “Dog” // t && t 返回 “Dog”
a6 = false && “Cat” // f && t 返回 false
a7 = “Cat” && false // t && f 返回 false
a8 = ‘’ && false // f && f 返回 “”
a9 = false && ‘’ // f && f 返回 false
- 逻辑或（ || ） 所有条件有一个为 true 则返回 true，否则为 false。
o1 = true || true // t || t 返回 true
o2 = false || true // f || t 返回 true
o3 = true || false // t || f 返回 true
o4 = false || (3 == 4) // f || f 返回 false
o5 = “Cat” || “Dog” // t || t 返回 “Cat”
o6 = false || “Cat” // f || t 返回 “Cat”
o7 = “Cat” || false // t || f 返回 “Cat”
o8 = ‘’ || false // f || f 返回 false
o9 = false || ‘’ // f || f 返回 “”
- 逻辑非（ ! ）
n1 = !true // !t 返回 false
n2 = !false // !f 返回 true
n3 = !‘’ // !f 返回 true
n4 = !‘Cat’ // !t 返回 false
- 双重非运（ !! ）
n1 = !!true // !!truthy 返回 true
n2 = !!{} // !!truthy 返回 true: 任何 对象都是 truthy 的…
n3 = !!(new Boolean(false)) // …甚至 .valueOf() 返回 false 的布尔值对象也是！
n4 = !!false // !!falsy 返回 false
n5 = !!“” // !!falsy 返回 false
n6 = !!Boolean(false) // !!falsy 返回 false
3. 布尔值转换规则
- 将 && 转换为 ||
condi1 && confi2
// 转换为
!(!condi1 || !condi2)
- 将 || 转换为 &&
condi1 || condi2
// 转换为
!(!condi1 && !condi2)
4. 短路取值
由于逻辑表达式的运算顺序是从左到右，也可以用以下规则进行"短路"计算：
-
(some falsy expression) && (_expr)_短路计算的结果为假。 -
(some truthy expression) || _(expr)_短路计算的结果为真。短路意味着上述表达式中的expr部分**「不会被执行」**，因此expr的任何副作用都不会生效（举个例子，如果expr是一次函数调用，这次调用就不会发生）。造成这种现象的原因是，整个表达式的值在第一个操作数被计算后已经确定了。看一个例子：
function A(){ console.log(‘called A’); return false; }
function B(){ console.log(‘called B’); return true; }
console.log( A() && B() );
// logs “called A” due to the function call,
// then logs false (which is the resulting value of the operator)
console.log( B() || A() );
// logs “called B” due to the function call,
// then logs true (which is the resulting value of the operator)
5. 注意
与运算 && 的优先级比或运算 || 要高。所以代码 a && b || c && d 完全跟 && 表达式加了括号一样：(a && b) || (c && d)。
十二、循环：while 和 for
=================
1. while 循环
详细可以阅读《MDN while》 。**「while 语句」**可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。如：
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
当循环体为单行时，可以不写大括号：
let i = 3;
while(i) console.log(i --);
2. do…while 循环
详细可以阅读《MDN do…while》 。do...while 语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次。如：
var result = ‘’;
var i = 0;
do {
i += 1;
result += i + ’ ';
} while (i < 5);
3. for 循环
详细可以阅读《MDN for》 。for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。语法如：
for (begin; condition; step) {
// ……循环体……
}
示例：
for (let i = 0; i < 3; i++) {
console.log(i);
}
描述：
| begin | i = 0 | 进入循环时执行一次。 |
| — | — | — |
| condition | i < 3 | 在每次循环迭代之前检查，如果为 false，停止循环。 |
| body（循环体） | alert(i) | 条件为真时，重复运行。 |
| step | i++ | 在每次循环体迭代后执行。 |
4. 可选的 for 表达式
for 语句头部圆括号中的所有三个表达式都是可选的。
- 不指定表达式中初始化块
var i = 0;
for (; i < 3; i++) {
console.log(i);
}
- 不指定表达式中条件块，这就必须要求在循环体中结束循环，否则会出现死循环
for (var i = 0;; i++) {
console.log(i);
if (i > 3) break;
}
- 不指定所有表达式，也需要在循环体中指定结束循环的条件
var i = 0;
for (;😉 {
if (i > 3) break;
console.log(i);
i++;
}
5. break 语句
详细可以阅读《MDN break》 。break 语句中止当前循环，switch语句或label 语句，并把程序控制流转到紧接着被中止语句后面的语句。在 while 语句中：
function testBreak(x) {
var i = 0;
while (i < 6) {
if (i == 3) {
break;
}
i += 1;
}
return i * x;
}
另外，也可以为代码块做标记，并在 break 中指定要跳过的代码块语句的 label：
outer_block:{
inner_block:{
console.log (‘1’);
break outer_block; // breaks out of both inner_block and outer_block
console.log (‘😦’); // skipped
}
console.log (‘2’); // skipped
}
需要注意的是：break 语句需要内嵌在它所应用的标签或代码块中，否则报错：
block_1:{
console.log (‘1’);
break block_2; // SyntaxError: label not found
}
block_2:{
console.log (‘2’);
}
6. continue 语句
continue 声明终止当前循环或标记循环的当前迭代中的语句执行，并在下一次迭代时继续执行循环。与 break 语句的区别在于， continue 并不会终止循环的迭代，而是：
-
在
while循环中，控制流跳转回条件判断； -
在
for循环中，控制流跳转到更新语句。注意：continue 也必须在对应循环内部，否则报错。
i = 0;
n = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
n += i;
}
带 label：
总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
{
console.log(i);
}
- 不指定表达式中条件块，这就必须要求在循环体中结束循环，否则会出现死循环
for (var i = 0;; i++) {
console.log(i);
if (i > 3) break;
}
- 不指定所有表达式，也需要在循环体中指定结束循环的条件
var i = 0;
for (;😉 {
if (i > 3) break;
console.log(i);
i++;
}
5. break 语句
详细可以阅读《MDN break》 。break 语句中止当前循环，switch语句或label 语句，并把程序控制流转到紧接着被中止语句后面的语句。在 while 语句中：
function testBreak(x) {
var i = 0;
while (i < 6) {
if (i == 3) {
break;
}
i += 1;
}
return i * x;
}
另外，也可以为代码块做标记，并在 break 中指定要跳过的代码块语句的 label：
outer_block:{
inner_block:{
console.log (‘1’);
break outer_block; // breaks out of both inner_block and outer_block
console.log (‘😦’); // skipped
}
console.log (‘2’); // skipped
}
需要注意的是：break 语句需要内嵌在它所应用的标签或代码块中，否则报错：
block_1:{
console.log (‘1’);
break block_2; // SyntaxError: label not found
}
block_2:{
console.log (‘2’);
}
6. continue 语句
continue 声明终止当前循环或标记循环的当前迭代中的语句执行，并在下一次迭代时继续执行循环。与 break 语句的区别在于， continue 并不会终止循环的迭代，而是：
-
在
while循环中，控制流跳转回条件判断； -
在
for循环中，控制流跳转到更新语句。注意：continue 也必须在对应循环内部，否则报错。
i = 0;
n = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
n += i;
}
带 label：
总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
[外链图片转存中…(img-G2lWOE4Q-1713470143020)]
[外链图片转存中…(img-7BwR23RP-1713470143021)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-tBWncEiD-1713470143021)]
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
