上的文章和教程很多，有经验的人能够根据他人的资料制定出属于自己的学习方法和路径，但对于小白来说，还是有些难度。所以我写了这篇文章，结合个人学习前端的经历。针对0基础，非科班，没有编程经验，想学前端，但是不知道如何入门的人群。

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。

一、计算机基础

前端也是编程，和计算机原理是分不开干系的。因此在学习前端之前，最好先大致了解一下，不需要有多深入。看这几本书就行：

• 《计算机是怎样跑起来的》[1]：通俗易懂的介绍了计算机的各个方面，见森林而不见树木，全书读下来你就能对计算机有个整体的了解。阅读难度：★ ，一个下午就能看完并理解。

• 《程序是怎样跑起来的》[2]：看书名你就知道这是同一个作者写的，从软件层面讲的，老实说我也没看太懂。阅读难度：★★，一个下午看完。一遍过，遇到不理解也没关系，一口气读完就行。

• 《深入了解计算机系统》[3]：被人们戏称“龙书”，如果说《计算机是怎样跑起来的》是“见森林而不见树木”，那这本书就是“带你探索亚马逊森林的每一个角落”，这里只是一提，不建议小白阅读。阅读难度：★★★，三星代表新手勿入！

• 《Github入门与实践》[4]：开始敲HTML代码之后，是不是需要管理自己的代码？但是打开Github发现全是英文也不知道怎么操作。看这本书就行。阅读难度：★，一个下午看完

• 《树莓派开始，玩转Linux》[5]：树莓派很有趣，也可以了解Linux。但是对前期学习HTML和CSS没有帮助。阅读难度：★，一个下午看完

二、前端知识体系图谱

这个前端工程师知识图谱很全面，达到这个程度已经是3-5年程度了，但是新手可能看不懂。没关系，大致浏览一遍里面的每个名词，然后跳到第三部分“制定计划”

三、制定计划

这是阿里云大学的《前端开发学习路线》[6]课程，是我综合了中国慕课网、黑马程序员、网易公开课、网易课堂、腾讯课堂 、慕课网、coursera等各个课程机构得出来最好的课程。非常适合新手小白一站式入门前端。

学习计划以此为准，可入门看懂代码。在此基础上，辅以书籍，便可进阶。再然后，就靠实战做项目积累经验了。

书籍推荐依次是：

• HTML：先看《HTML & CSS设计与构建网站》[7]1-9章，然后《HTML5秘籍》[8]1-4章。
• CSS：先看《CSS 实战手册》[9]，然后《CSS权威指南》[10]
• Javascript：先看《javascript高级程序设计》[11]，然后《javascript权威指南》[12]
• HTTP：看《HTTP权威指南》[13]

笔者经历到此，正在前进中，共勉。

四、建议

最后给点建议，读者在学习前端的时候，可能会陷入一个误区：

过于沉浸在获取资讯之中，以为自己看了这些，就能快速成为前端大神了。却没有下苦功夫对照课程去动手一行一行地敲代码。

这是本末倒置。

诚然，相比于枯燥的看书学课敲代码，看资讯是轻松且容易让人满足的，人心肯定会倾向做简单快乐的事情。但你想，一个人是踏踏实实敲1年代码之后获得的成就高，还是漂浮在表面看1年文章之后获得的成就高？

再举个例子。王麻子写博客，看了1年的教你如何写博客教程，才开始动笔去写。张二蛋写博客，把情况了解个大概后，每天就固定保持一篇原创。结果是，1年下来王麻子啥事都没干成，却以为自己思维得到了提升，飘在天上。而张二蛋1年下来却写了整整365篇原创文章，已然获得了不小的成就。

这便是术与道。

写代码是术，看教程是道。年轻人，先要有术，术练扎实了，道自然就从心中来了。倘若看不清楚，先追求宏观的大道，却没有扎实的术作为基础，那这就很危险，如乐高积木堆的楼，一碰就倒。练武之前，先扎马步，也是这个道理。

大道至简，悟在天成。复杂的事情简单做，简单的事情重复做，重复的事情用心做。写自媒体也是一样，没有成功的捷径，就是写文章，其他什么引流、什么运营都是表面，只是锦上添花。引流和运营得有土壤才能结果，这个土壤便是你的文章。

每天1篇，坚持写5年，你就成功了。道理永远这么简单。许多人一辈子只停留在知道，却永远也悟不透。所以，他们写不了5年。

日拱一卒，功不唐捐。全情投入，愿等花开。

References

[1]《计算机是怎样跑起来的》: https://book.douban.com/subject/26397183/

[2] 《程序是怎样跑起来的》: https://book.douban.com/subject/26365491/

[3] 《深入了解计算机系统》:https://book.douban.com/subject/26912767/

[4] 《Github入门与实践》:https://book.douban.com/subject/26462816/

[5] 《树莓派开始，玩转Linux》: https://book.douban.com/subject/30259573/

[6] 《前端开发学习路线》: https://edu.aliyun.com/roadmap/frontend?spm=5176.13345299.1392477.6.4520f153AYCZWC

[7] 《HTML & CSS设计与构建网站》: https://book.douban.com/subject/21338365/

[8] 《HTML5秘籍》:https://book.douban.com/subject/11610880/

[9]《CSS 实战手册》: https://book.douban.com/subject/26898555/

[10]《CSS权威指南》: https://book.douban.com/subject/33398314/

[11] 《javascript高级程序设计》:https://book.douban.com/subject/10546125/

[12] 《javascript权威指南》: https://book.douban.com/subject/10549733/

[13] 《HTTP权威指南》:https://book.douban.com/subject/10746113/

往期回顾：

第二代Web世界导航，互联网人必备

第一代Web世界导航，互联网人必备

武汉肺炎，怎么办？

语雀=新的红利？

广告巨头，字节跳动

文章订阅：

麻雀通讯每天发布一篇文章，类型是科技、互联网与生活。点击文章顶部“关注”，即可订阅。

大且广受欢迎的编程语言 JavaScript 具有庞大的内置函数库，可用于执行各种任务。

本文涵盖了每个开发人员都应该知道的 15 个 JavaScript 特性。无论您是新手还是经验丰富的开发人员，这些功能都会派上用场。那么，让我们来讨论一下这 15 个重要的 JavaScript 特性。

1.重复一个字符串

要在 JavaScript中多次重复一个字符串，您可以使用普通方法或速记方法。

速写：

您可以使用循环多次重复一个字符串。

以下是如何使用for循环执行此操作的示例：

function  repeatString ( string , num ) {
 let result='' ;
 for ( let i=0 ; i < num; i++) {
   结果 +=字符串;
}
 返回结果；
}

console.log ( repeatString ( '你好' , 5 ));  

// 输出："HelloHelloHelloHelloHello"

速记：

在速记方法中，我们使用该repeat()方法多次重复一个字符串。

repeat()仅支持现代浏览器，因此您必须使用普通方法来支持旧浏览器。

例子：

console.log（'你好'。重复（5））;  

// 输出："HelloHelloHelloHelloHello"

2.数组的组合

在 JavaScript 中，您可以使用普通方法和快捷方法来合并两个或多个数组。

速写：

以下是如何使用for循环执行此操作的示例：

让array1=[ 10 , 20 , 30 ];
让array2=[ 40 , 50 , 60 ];
让mergedArray=[];

for ( let i=0 ; i < array1.length ; i++) {
 mergedArray. 推（array1[i]）；
}

for ( let i=0 ; i < array2.length ; i++) {
 mergedArray. 推（array2[i]）；
}

控制台。日志（合并数组）；  

// 输出：[10, 20, 30, 40, 50, 60]

速记：

对于速记，您可以使用concat()、...和reduce()方法。concat()and方法通过...将第二个数组的元素附加到第一个数组的末尾来组合两个或多个数组的元素。

以下是如何使用contact(),...方法的示例：

// concat()
让array1=[ 10 , 20 , 30 ];
让array2=[ 40 , 50 , 60 ];
让mergedArray=array1。连接（数组 2）；

控制台。日志（合并数组）；  // 输出：[10, 20, 30, 40, 50, 60]


// ...
let array1=[ 10 , 20 , 30 ];
让array2=[ 40 , 50 , 60 ];
让mergedArray=[...array1, ...array2];

控制台。日志（合并数组）；  // 输出：[10, 20, 30, 40, 50, 60]

如果您想以不同的方式组合数组，可以使用reduce()方法。

例子：

// reduce()
let array1=[ 10 , 20 , 30 ];
让array2=[ 40 , 50 , 60 ];
让mergedArray=array1。reduce ( ( acc, val )=> acc.concat (val), array2);

控制台。日志（合并数组）；  // 输出：[40, 50, 60, 10, 20, 30]

3.函数接受的参数

您可以通过 3 种不同的方式找到函数接受的参数数量。

方法一：

根据函数定义中命名参数的数量，函数的length属性返回函数期望接收的参数数量。

function  myFunction ( a, b, c ) {
 // 函数体
}

console . 日志（myFunction.length ）；  // 输出：3

方法二：

传递给函数的参数存储在一个名为 的对象中argument，它看起来像一个数组。使用length参数对象的属性，您可以找出有多少参数传递给函数。

由于对象arguments不是真正的数组，因此并非所有数组方法都可以访问。如果您希望在对象上使用数组方法，请使用该Array.from()函数将arguments对象转换为实际数组。

函数 myFunction(a, b, c) {myFunction (a, b, c) {
 console .log (arguments.length);  // 输出：3
}

myFunction ( 1 , 2 , 3 );

您不能使用该arguments对象来计算函数期望从函数外部获得多少参数，因为它只能在函数内部访问。length然后需要使用该属性，就像在方法 1 中一样。

4. JavaScript 中的循环

JavaScript 提供了几种类型的循环来重复重复代码块。

一些常用的循环示例是：

for循环

自增或自减表达式、循环条件和 for 循环的变量是它的三个主要部分。只要条件为真，循环就会一直运行。

从 1 计数到 5 的 for 循环示例：

for (让i=1 ; i <=5 ; i++) {
 console.log（一）；
}

输出：

1
2
3
4
5

for-in 循环

您可以使用循环遍历对象的属性for-in。

在此示例中，我们使用循环遍历对象的属性for-in。

例子：

让对象={a: 1, b: 2, c: 3}; 对象={a: 1 , b: 2 , c: 3 };
for (let property  in  object ) {
 console.log( property + ": " + object [ property ]);
}

输出：

一个：1
乙：2
丙：3

for循环

如果可迭代对象是数组或字符串，您可以使用for-of循环来迭代这些值。

for-of使用循环迭代元素数组：

让数组=[ 1 , 2 , 3 ];
for ( let数组元素) {
 console . 日志（元素）；
}

输出：

1
2
3

5. 字符串转数组

您可以使用该split方法在 JavaScript 中将字符串转换为数组。此方法使用分隔符字符串或正则表达式将字符串拆分为子字符串。

以下示例显示如何使用 方法将字符串转换为数组split：

let string="apple,banana,orange"; string="苹果、香蕉、橘子" ;
let array=string .split( "," );
安慰。日志（数组）；// 打印 [ "apple" , "banana" , "orange" ]

使用速记方法，您可以获得相同的结果：

let string="apple,banana,orange"; string="苹果、香蕉、橘子" ; 
let array=[... string .split( "," )]; 
安慰。日志（数组）；// 打印 [ "apple" , "banana" , "orange" ]

您可以使用for loop. 使用此方法，您可以通过将每个字符推入其自己的数组来将字符串转换为数组。

一个例子是：

let string="apple,banana,orange"; string="苹果、香蕉、橘子" ;
让数组=[];
for (let i=0 ; i < string .length; i++) {
 array.push( string [i]);
}
控制台。日志（数组）；// 打印 [ "a" , "p" , "p" , "l" , "e" , "," , "b" , "a" , "n" , "a" , "n" , "a " , ", ", "n" , "g" , "e" ]

在此方法中，不是将字符串拆分为子字符串，而是字符串的每个字符都是数组中的一个单独元素。split 方法允许您根据分隔符分隔字符串，如前两个示例所示。

6. 数组中的最大值和最小值

您可以使用下面的 JavaScript 示例查找数组中的最大数和最小数。

速写：

// 找出数组中的最大数
const  array=[ 3 , 7 , 1 , 9 , 2 , 5 ];
让 maxNumber=array [ 0 ];
for (let i=1 ; i < array .length; i++) {
 if ( array [i] > maxNumber) {
   maxNumber=array [i]; }
}
}
控制台。日志（最大数量）；  // 输出：9
// 找到数组中的最小数
const  array=[ 3 , 7 , 1 , 9 , 2 , 5 ];
让 minNumber=array [ 0 ];
for (let i=1 ; i < array .length; i++) {
 if ( array [i] < minNumber) {
   minNumber=array [i]; }
}
}
控制台。日志（最小数量）；  // 输出：1

使用Math.max()and Math.min()，您可以轻松计算最大值或最小值：

// 找出数组中的最大数
const array=[ 3 , 7 , 1 , 9 , 2 , 5 ];
常数maxNumber=数学。最大值（...数组）；
控制台。日志（最大数量）；  // 输出：9
// 找到数组中的最小数
const array=[ 3 , 7 , 1 , 9 , 2 , 5 ];
const minNumber=数学。分钟（...数组）；
控制台。日志（最小数量）；  // 输出：1

7.将字符串转换为数字

要在 JavaScript 中将字符串转换为数字，有几种方法。

使用parseInt()或parseFloat()功能：

// 将字符串转换为整数
const num1="42" ;
const num2=parseInt (num1);  // num2 现在是值为 42 的数字类型

// 将字符串转换为浮点数
const num3="3.14" ;
const num4=parseFloat (num3);  // num4 现在是数字类型，值为 3.14

使用一元加运算符(+)：

// 将字符串转换为数字
const num1="42" ;
常量num2=+num1;  // num2 现在是值为 42 的数字类型

// 将字符串转换为负数
const num3="-42" ;
常量num4=+num3;  // num4 现在是数字类型，值为 -42

8. 为多个变量赋值

JavaScript 提供了普通函数和速记函数来为多个变量赋值：

使用单独的赋值语句方法：

让x;
让你；
让z;

x=1;
y=2；
z=3;

解构赋值简写法：

让x, y, z;

[ x, y, z ]=[ 1 , 2 , 3 ];

解构赋值也可用于从对象分配变量：

const obj={ a : 1 , b : 2 , c : 3 };
设a、b、c；
({a, b, c}=对象);

9.指数幂

在 JavaScript 中有几种方法可以计算一个数的指数幂。这里有些例子：

使用for循环：

function  power ( base, exponent ) {
 让结果=1 ;
 for ( let i=0 ; i < exponent; i++) {
   结果 *=base;
}
 返回结果；
}
控制台。日志(功率( 2 , 3 ));  // 输出：8

使用Math.pow()功能：

函数 幂（基数，指数）{
 返回 数学。pow（基数，指数）；
}
控制台。日志(功率( 2 , 3 ));  // 输出：8

此外，您还可以使用求幂运算符 ( **) 求出数字的指数幂：

常量 基础=2 ;
常量指数=3 ;
常量结果=基数** 指数；  // 结果现在是 8

10.双位非运算符(~~)

在 ( ~~) 运算符的帮助下，您可以将数字四舍五入为最接近的整数。

例子：

const num=3.14 ;
const roundedNum=~~num;  // roundedNum 现在是 3

您可以使用 ( ~~) 运算符代替Math.floor().

const num=3.14 ;
const roundedNum=数学。楼层（数量）；  // roundedNum 现在是 3

您还可以使用 ( ~~) 将非整数值转换为整数。

例如：

const num="3.14" ;
const intNum=~~num;  // intNum 现在是 3

这类似于使用parseInt()函数：

const num="3.14" ;
const intNum=parseInt (num);  // intNum 现在是 3

11.函数参数的默认值

在 JavaScript 中，您可以通过不同的方式为函数参数分配默认值。

速写：

函数 问候（名称）{
 名称=名称|| '匿名' ;
 控制台。日志（`你好，${name}！`）;
}

在上面的示例中，name参数的默认值为'Anonymous'。name如果调用函数时没有为参数传递值greet，它将使用默认值。

速记：

功能 问候（名称='匿名'）{
 控制台。日志（`你好，${name}！`）;
}

在此示例中，参数的默认值是使用语法name在函数定义中直接指定的。如果调用函数时没有为参数=传递值，它将使用默认值。name``greet

12. 三元运算符

它也被称为条件运算符或三元条件运算符。

JavaScript 中三元运算符的语法是：

健康）状况 ？value_if_true : value_if_false;

如果别的

您可以使用 if-else 语句获得与三元运算符相同的结果。

例子：

让x=10 ;
让y=20 ;

如果(x > y) {
 最大值=x;
} else {
 最大值=y;
}
控制台。日志（最大值）；  // 输出 20

在下面的示例中，我们将使用 JavaScript 三元运算符：

让x=10 ;
让y=20 ;
让maxValue=(x > y) ? x：y；
控制台。日志（最大值）；  // 输出 20

在此示例中，条件x > y被评估为false，因此 的值y被分配给maxValue。如果条件为true，x则将分配给的值maxValue。

三元运算符有助于在单行代码中表达条件逻辑，尽管它比 if-else 形式更难阅读和理解。

当条件逻辑变得更加复杂时，使用三元运算符是个好主意。

13.交换两个变量

在 JavaScript 中，要交换两个变量的值，可以使用不同的方法。

这里有些例子：

速写：

让x=1;
让y=2;

让温度=x；
x=y;
y=温度；

在上面的示例中，我们创建了一个临时变量（temp）来存储 x 的值，然后将 x 的值赋给 y 的值，将 y 的值赋给 temp。

让x=1 ;
让y=2 ;
[ x, y ]=[y, x];

在此示例中，使用解构赋值方法交换 x 和 y 的值。您可以使用解构赋值将变量分配给数组或对象的元素。无需临时变量，它可以成为交换值的便捷方式。

如果使用任何一种方法，x 将为 2，y 将为 1。

14.检查多个条件

有几种不同的方法可以在 JavaScript 中检查多个条件。

这里有几个选项：

1. 使用**&&**运营商：

此运算符允许您检查多个条件是否为真。

例如：

if (x > 0 && y < 10) {0 && y < 10 ) {
 // 执行一些代码
}

如果两个条件（x > 0 和 y < 10）都为真，这将只执行 if 语句中的代码。

2. 使用**||**运营商：

此运算符允许您检查多个条件中是否至少有一个为真。

例如：

if (x===1 || x===2 || x===3) {1 || x===2 || x===3 ) {
 // 执行一些代码
}

如果 x 等于 1、2 或 3，这将执行 if 语句中的代码。

3.使用switch语句：

这允许您检查多个条件并根据给定表达式的值执行不同的代码块。例如：

switch (x) {
 case  1 :
   // 执行一些代码
   break ;
 case  2 :
   // 执行一些代码
   break ;
 case  3 :
   // 执行一些代码
   break ;
 default :
   // 执行一些代码
}

这将执行 case 块内匹配 x 值的代码。如果所有情况都不匹配，则将执行 default 块内的代码。

请务必注意，&&and||运算符具有特定的优先顺序，因此您可能需要使用括号以您想要的方式对条件进行分组。

4.数组.prototype.include()

您可以使用 Array.prototype.include() 方法检查 JavaScript 中的多个条件。

例子：

常数值=2 ;
if ([ 1 , 'one ', 2 , 'two '] .includes (value)) {
 控制台。log ( '该值为1、"one"、2或"two" ');
} else {
 控制台。log ( '该值不是1、"one"、2或"two" ');
}
// 输出：值为 1、“one”、2、

该Array.prototype.include() the函数检查值是否存在。如果存在该值，则 if 块内的代码将在上面的示例中运行。如果找不到该值，将执行 else 块中的代码。

15. 删除属性

delete 运算符允许您从对象中删除多个属性。

以下面为例：

让obj={
 prop1 : 'value1' ,
 prop2 : 'value2' ,
 prop3 : 'value3' ,
 prop4 : 'value4'
};

删除对象。支柱1；
删除对象。支柱 3 ;

控制台。日志（对象）；  // 输出 { prop2: 'value2', prop4: 'value4' }

或者，您可以使用该Object.assign()方法创建一个删除了所需属性的新对象。

例子：

让obj={
 prop1 : 'value1' ,
 prop2 : 'value2' ,
 prop3 : 'value3' ,
 prop4 : 'value4'
};

让newObj=对象。分配（{}，对象）；
删除新对象。支柱1；
删除新对象。支柱 3 ;

控制台。日志（新对象）；  // 输出 { prop2: 'value2', prop4: 'value4' }

在现代 JavaScript（ES6 及更高版本）中，您可以使用Object.entries()和Object.fromEntries()方法从对象中删除多个属性。

例子：

让obj={
 prop1 : 'value1' ,
 prop2 : 'value2' ,
 prop3 : 'value3' ,
 prop4 : 'value4'
};

让newObj=对象。fromEntries (
 Object . entries (obj). filter ( ( [key] )=> key !=='prop1' && key !=='prop3' )
);

控制台。日志（新对象）；  // 输出 { prop2: 'value2', prop4: 'value4' }

如果对你有帮助，记得点赞支持哦，目前我们的系统班正在讲解JavaScript正则表达式，这个课程讲完系统班的JavaScript阶段就算完结了，正式开始进入ES6阶段了，这几个月我们在JavaScript课程中融入了大量的面试题、算法以及底层原理知识，目的就是为了帮助大家夯实基础，查漏补缺，有 扎实的JavaScript基础，对于学到后面阶段更加有帮助！这也是2023年通向职业道路，面试求职必须要懂得的技术能力！感兴趣可以联系我参与！

为了更好的让大家认识到JavaScript的精髓，我们在三十天计划群里推出了几节非常重要的JavaScript课程体系，而且每个系列知识点都保障是完整的。感兴趣可以通过下方的练习方式参与课程哦 。如果你正在学习JavaScript，我们已经在三十天计划中完成了4个综合项目实战，那不妨可以听下这个课程体系，三十天计划群里还提供了算法、数组等知识体系！

前端工程师成长方法

更多完整 JavaScript 课程体系在我们的系统班里有完整的呈现，包含了 JavaScript 基础篇、重点、算法、原理、面试题、实战案例讲解！同时也为你提供了前端高级工程师成长体系！(详细看下图内容)

如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式！（不定期会推出活动，有大额优惠券推出，活动详情联系助理老师了解即可！）如果你才开始学习前端，那么可以先学习我们的三十天计划（零基础的同学报名系统班同学可以和老师沟通制定学习计划，可以得到更快的成长！）

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自！老师会邀请你进入学习，并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程