前端培训-初级阶段(13)-ECMAScript(语法,变量 ,值 , 类型,运算符 , 语句)

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。该文为前端培训-初级阶段(13、18) (介绍了 ECMAScript 历史,ES6 常用点)的补充内容。本文介绍ECMAScript基础知识。

bVbqEW6.webp.jpg

我们要讲什么


  1. 语法


  1. 变量


  1. 类型、值


  1. 运算符


  1. 语句


语法


如果是熟悉任意一门高级编程语言的开发者会发现 ECMAScript 的语法很容易掌握,因为差距不是很大,其中也有借鉴的地方。尤其是与 Java 有一些关键的语法特性相同,名字都是蹭热度。


  1. 区分大小写var 与 Var 是不同的变量


  1. 变量是弱类型的 这点和其他语言有很大区别,(前端也有TS)。


  1. 结尾分号不是必须的 但是比如(()=>console.log('ln'))(),有时候容易出现异常错误


window.a
;(v=>console.log(v))(1)
window.a
(v=>console.log(v))(1)


1.注释


  1. 单行注释以双斜杠开头(//)
  2. 多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)


2.括号表示代码块 不会生成块级作用域(老版本)


变量


  1. 命名规则
    第一个字符必须是字母、下划线(_)或美元符号($),余下的字符可以是下划线、美元符号或任何字母或数字字符


  1. 声明方式
  1. var 声明变量,变量提升
  2. let 会生成块级作用域
  3. const 生成一个不可以改变的常量


类型、值


  1. 原始类型存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。原型类型有 Undefined、Null、Boolean、Number 和 String 。由于这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域中(栈)。这样存储便于迅速查寻变量的值。可以使用typeof来判断是什么类型


bVbqES9.webp.jpg


注释:您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

a.Undefined 当声明的变量未初始化时,或者对象中不存在的值。认为是一个暂未赋值的值。


b.Null 对象占位符,认为是一个空的值。


c.Boolean 布尔类型 true 和 false。


d.Number 可以表示 32 位的整数,还可以表示 64 位的浮点数。对于浮点字面量的有趣之处在于,用它进行计算前,真正存储的是字符串。


用 64 位 IEEE 754 形式存储浮点值,这意味着十进制值最多可以有 17 个十进制位。17 位之后的值将被裁去,从而造成一些小的数学误差。

e.String 字符串类型


  1. 引用类型


存储在堆(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(); 循环遍历 完成多个相同功能的任务


相关文章
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
629 4
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
533 20
|
存储 前端开发 JavaScript
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
【8月更文挑战第8天】10min快速入门java的基础语法
513 2
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
|
缓存 前端开发 Java
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
【8月更文挑战第10天】java基础巩固,工具类的封装
216 1
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
|
前端开发 JavaScript
前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)
本文介绍了JavaScript中的算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性以及数据类型的隐式转换。
516 3
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
490 2
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
435 4
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第1天】小程序的前端 display 有什么类型?
529 2

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1410
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    681
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    548
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    553
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    641
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    823
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1617
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    387
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1341
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    654