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

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

bVbqEW6.webp.jpg

我们要讲什么


  1. 语法


  1. 变量


  1. 类型、值


  1. 运算符


  1. 语句


语法


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


  1. 区分大小写varVar 是不同的变量


  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`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
336 4
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
148 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
前端开发 程序员
【前端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;`)。
293 20
|
存储 前端开发 JavaScript
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
【8月更文挑战第8天】10min快速入门java的基础语法
214 2
【前端学JAVA】有手就会!10min快速入门java的基础语法(2)
|
缓存 前端开发 Java
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
【8月更文挑战第10天】java基础巩固,工具类的封装
98 1
【前端学java】java基础巩固复习巩固语法练习-工具类的封装(14)
|
前端开发 JavaScript
前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)
本文介绍了JavaScript中的算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性以及数据类型的隐式转换。
292 3
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
262 1
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
245 3
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
280 4
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第1天】小程序的前端 display 有什么类型?
282 2

热门文章

最新文章

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