全栈工程师必须要掌握的前端JavaScript技能

王皓爸爸 · 发表于 2023-9-26 08:50:25

作为一名全栈工程师，在日常的工作中，可能更侧重于后端开发，如：C#，Java，SQL ，Python等，对前端的知识则不太精通。在一些比较完善的公司或者项目中，一般会搭配前端工程师，UI工程师等，来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师，在一些小型项目或者初创公司中，职能划分并不明确，往往要一个人前后端全都会做， 所以作为一名全栈工程师或者后端工程师，掌握必备的前端知识，也是必不可少的一项技能。今天就着重讲解一下，作为一名全栈工程师，前端JavaScript方面的必须要掌握的相关知识。

什么是JavaScript?

在前端Web开发中，共有3种语言是开发者必须要掌握的，这3种语言一起组成了Web开发的基石：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

JavaScript作为一种函数式优先，解释执行，轻量级的编程语言，是目前最为流行的编程语言之一。JavaScript起于浏览器脚本编程，兴于Web开发，却不止于前端脚本语言。目前JavaScript也已经支持后端编程，面向对象等，如Node.js。当然本文讲解的内容，主要是侧重于Web前端脚本语言进行讲解。

创建JavaScript方式

在日常开发中，创建JavaScript脚本一共有2种方式：

内嵌式：在Html页面中，通过定义【】标签，内嵌JavaScript脚本。这种内嵌式写法，适用于和当前页面强相关的业务逻辑内容。
外链式：在通常开发中，为了方便维护，便于移植，JavaScript代码通常写在独立的文件中【如：index.js】，然后在前端Html页面中进行引入。外链式也是目前普遍使用的一种方式。

关于两种创建形式，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

复制代码

变量定义

变量在进行业务逻辑处理及数据运算中，主要用于存储数据，是承载数据的载体。主要通【var 变量名 = 变量值;】的形式进行定义。
构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。变量命名，建议具有明确的含义，这样会更加方便理解与维护。

数据类型

在JavaScript中，根据变量所存储的数据内容的类型不同，可以分为不同的数据类型，主要有以下几种：

数值类型number：用于表示数字，包括整数，单精度浮点数，双精度浮点数等，如： var num=10;//数值类型
文本类型string：用于表示字符串，如： var text=”文本”;//字符串类型
布尔类型boolean：用于表示逻辑上的真和假，只有两个值：true，false。如： var flag=true; //两个值，true,false表示真或假
空类型：用于表示空，如：var kong=null;//用于清空变量内容，表示空
未定义：表示此变量只是被声明，并未赋值。如： var aa;// undefined 默认值。
数组类型：用于存储多个相同类型的值。
对象类型object：用于表示复杂的结果体，可以存储多个不同类型的值。注意：空类型，数组类型，都属于对象类型。

如何查看数据类型？通过typeof(数量名)的形式获取数据类型，然后再通过console.log()在浏览器输出的形式查看，如下所示：

var arr=[1,2,3,4,5];
console.log(typeof(arr));//输出object

复制代码

运算符

运算符主要用于在不同的变量之间进行相应的业务逻辑处理，如：加，减，乘，除等，运算符主要有以下几种：

算术运算符：用于对数字执行算数运算，如：加，减，乘，除：var sum=1+2-3*4/2;
字符串拼接，用于将多个字符串拼接成一个字符串，不同文本之间用加号进行拼接。
比较运算符：主要用于对不同变量之间进行比较，如：大于，小于，等于，大于等于，小于等于，恒等于，恒不等于，三元表达式等。
逻辑运算符：主要是与，或，非，等逻辑上的运算。
位运算符：主要是针对数字进行的一些位之间的运算，如：位与，位或，位非，异或，左移，右移等。

关于运算符之间的一些示例，如下所示：
[code]var a=10;var b=2.1;var c=a+b;console.log('a+b='+c);var arr=[1,2,3,4,5];console.log(typeof(arr));var flag1 = 2>3;var flag2=2

全栈工程师必须要掌握的前端JavaScript技能

本帖子中包含更多资源