前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。
该文为前端培训-初级阶段(13、18) (介绍了 ECMAScript 历史,ES6 常用点)的补充内容。
本文介绍ECMAScript基础知识。
我们要讲什么
- 语法
- 变量
- 类型、值
- 运算符
- 语句
语法
如果是熟悉任意一门高级编程语言的开发者会发现 ECMAScript 的语法很容易掌握,因为差距不是很大,其中也有借鉴的地方。尤其是与 Java 有一些关键的语法特性相同,名字都是蹭热度。
- 区分大小写
var
与Var
是不同的变量 - 变量是弱类型的 这点和其他语言有很大区别,(前端也有TS)。
结尾分号不是必须的 但是比如(()=>console.log('ln'))(),有时候容易出现异常错误
window.a ;(v=>console.log(v))(1) window.a (v=>console.log(v))(1)
注释
- 单行注释以双斜杠开头(
//
) - 多行注释以单斜杠和星号开头(
/*
),以星号和单斜杠结尾(*/
)
- 单行注释以双斜杠开头(
- 括号表示代码块 不会生成块级作用域(老版本)
变量
- 命名规则
第一个字符必须是字母、下划线(_)或美元符号($),余下的字符可以是下划线、美元符号或任何字母或数字字符 声明方式
- var 声明变量,变量提升
- let 会生成块级作用域
- const 生成一个不可以改变的常量
类型、值
原始类型
存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
原型类型有 Undefined、Null、Boolean、Number 和 String 。由于这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域中(栈)。这样存储便于迅速查寻变量的值。
可以使用typeof
来判断是什么类型- Undefined 当声明的变量未初始化时,或者对象中不存在的值。认为是一个暂未赋值的值。
- Null 对象占位符,认为是一个空的值。
- Boolean 布尔类型 true 和 false。
Number 可以表示 32 位的整数,还可以表示 64 位的浮点数。对于浮点字面量的有趣之处在于,用它进行计算前,真正存储的是字符串。
- String 字符串类型
- 引用类型
存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
该类型指 Object ,当然还有 Array,Array 也是对象的一种。
运算符
. [] () | 1 | Math.random();arr[0];(a+1)*b | 字段访问、数组下标、函数调用以及表达式分组 |
++ -- + - ~ ! delete new typeof void | 2 | ++a;a++;+a;-a;~a;!a; | 一元运算符 |
* / % | 3 | ++a;a++;+a;-a;~a;!a; | 二元运算符,算数运算符,乘、除、余 |
+ - | 4 | a+b;a+'';a-b | 二元运算符,算数运算符,加减、字符串连接 |
<< >> >>> | 5 | 2>>1 | 二元运算符,位运算符,位移,无符号位移 |
< <= > >= instanceof | 6 | 2>1 | 二元运算符,比较运算符 |
== != === !== | 7 | 2==1 | 二元运算符,比较运算符 |
& | 8 | 2&1 | 二元运算符,位运算符,按位与 |
^ | 9 | 2^1 | 二元运算符,位运算符,按位异或 |
1 | 10 | 211 | 二元运算符,位运算符,按位或 |
&& | 11 | 2&&1 | 二元运算符,逻辑运算符,短路 |
11 | 12 | 2111 | 二元运算符,逻辑运算符,短路 |
?: | 13 | `` | 三元运算符,条件运算符 |
= oP= | 14 | `` | 二元运算符,赋值运算符 |
, | 15 | `` | 逗号,多重 |
语句
if | 逻辑判断 | if(a % 2 == 0){console.log('偶数')} | 用来判断条件成立执行代码 |
if(){}else{} | |||
if(){}else if(){}else{} | |||
switch(){case:break;default:break;} | 类似于if但是是单值匹配 | 找到对应状态执行代码 | |
for(初值;判断;步长){} | 循环遍历 | for(var = 1;i < 10; i++) console.log(i) | 完成多个相同功能的任务 |
while(判断){} | 循环遍历 | 完成多个相同功能的任务 | |
do{}while(); | 循环遍历 | 完成多个相同功能的任务 |