重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32969 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

JavaScript语法(二):你知道哪些JavaScript语句?

winter 2019-04-02
你好,我是 winter。
我们在上一节课中已经讲过了 JavaScript 语法的顶层设计,接下来我们进入到更具体的内容。
JavaScript 遵循了一般编程语言的“语句 - 表达式”结构,多数编程语言都是这样设计的。我们在上节课讲的脚本,或者模块都是由语句列表构成的,这一节课,我们就来一起了解一下语句。
在 JavaScript 标准中,把语句分成了两种:声明和语句,不过,这里的区分逻辑比较奇怪,所以,这里我还是按照自己的思路给你整理一下。
普通语句:
声明型语句:
我们根据上面的分类,来遍历学习一下这些语句。

语句块

我们可以这样去简单理解,语句块就是一对大括号。
{
var x, y;
x = 10;
y = 20;
}
语句块的意义和好处在于:让我们可以把多行语句视为同一行语句,这样,if、for 等语句定义起来就比较简单了。不过,我们需要注意的是,语句块会产生作用域,我们看一个例子:
{
let x = 1;
}
console.log(x); // 报错
这里我们的 let 声明,仅仅对语句块作用域生效,于是我们在语句块外试图访问语句块内的变量 x 就会报错。

空语句

空语句就是一个独立的分号,实际上没什么大用。我们来看一下:
;
空语句的存在仅仅是从语言设计完备性的角度考虑,允许插入多个分号而不抛出错误。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(18)

  • mfist
    遍历了下window上面的全局对象,上面有Symbol.iterator的原生属性有15个,主要Array Set Map String相关的。当然还有很多宿主环境提供的全局对象有Symbol.iterator属性,他们有个共同的特征:都是些集合性质的数据结构。
    0: "Array"
    1: "String"
    2: "Uint8Array"
    3: "Int8Array"
    4: "Uint16Array"
    5: "Int16Array"
    6: "Uint32Array"
    7: "Int32Array"
    8: "Float32Array"
    9: "Float64Array"
    10: "Uint8ClampedArray"
    11: "BigUint64Array"
    12: "BigInt64Array"
    13: "Map"
    14: "Set"
    2019-04-04
    21
  • timik
    老师,我记得有的书上或者是资料上说超过五次的if else 就最好用 switch case来替换。这样效率更好。您这里为什么说不用这个呢?
    2019-05-07
    7
  • 阿成
    大概就这些?
    Array, Map, Set, String, Float32Array, Float64Array, Int8Array, Int16Array, Int32Array, Uint8Array, Uint16Array, Uint32Array, Uint8ClampedArray
    2019-04-02
    7
  • Chuck
    Object.getOwnPropertyNames(window).filter(prop => {
    return window[prop] && window[prop].prototype && window[prop].prototype[Symbol.iterator]
    })

    Array,String,Uint8Array,Int8Array,Uint16Array,Int16Array,Uint32Array,Int32Array,Float32Array,Float64Array,Uint8ClampedArray,BigUint64Array,BigInt64Array,Map,Set,SourceBufferList,RTCStatsReport,Plugin,PluginArray,MimeTypeArray,MIDIOutputMap,MIDIInputMap,AudioParamMap,URLSearchParams,TouchList,TextTrackList,TextTrackCueList,StyleSheetList,StylePropertyMapReadOnly,StylePropertyMap,SVGTransformList,SVGStringList,SVGPointList,SVGNumberList,SVGLengthList,RadioNodeList,NodeList,NamedNodeMap,MediaList,Headers,HTMLSelectElement,HTMLOptionsCollection,HTMLFormElement,HTMLFormControlsCollection,HTMLCollection,HTMLAllCollection,FormData,FileList,DataTransferItemList,DOMTokenList,DOMStringList,DOMRectList,CSSUnparsedValue,CSSTransformValue,CSSStyleDeclaration,CSSRuleList,CSSNumericArray,webkitSpeechGrammarList,KeyboardLayoutMap,MediaKeyStatusMap
    2019-06-10
    4
  • Format
    请问老师后面可以讲讲,例如手淘购物车这种较复杂的功能吗?详细的那种,封装方法,兼容,处理特殊情况之类的
    2019-04-02
    2
  • 许童童
    Some built-in types have a default iteration behavior, while other types (such as Object) do not. The built-in types with a @@iterator method are:
    Array.prototype[@@iterator]()
    TypedArray.prototype[@@iterator]()
    String.prototype[@@iterator]()
    Map.prototype[@@iterator]()
    Set.prototype[@@iterator]()
    2019-04-02
    2
  • K4SHIFZ
    为什么和第十九节中的分类不一样啊?
    2019-04-02
    1
  • 培根熏肉
    Switch那么好看难道我要写一堆if else??不明白原文说没有用switch的意义在哪里
    2019-11-21
    1
  • 尤璐洁
    老师可以讲讲arguments吗,它是挂在哪里的呢,是个可迭代对象,但是不知道它是哪个的属性

    作者回复: arguments是函数创建的环境记录上的一个变量,这个东西比较特殊的地方是它跟参数的绑定关系,其它没什么。

    看MDN好了

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

    2019-11-07
  • 洛克不菲勒
    for(let e of [1, 2, 3, 4, 5])
        console.log(e);
    老师你好,注意到文中有这样的写法,for()后面没有大括号这种写法好吗?
    一直都有这样的疑问,if语句也有这样的问题

    作者回复: 反正JS有这个用法,至于好不好,每个人有不同的审美,不过多数时候,这由你团队的代码规范决定。

    2019-09-11
  • lsy
    console.log('有 iterator:');
          for (let key in window)
            window[key] && window[key][Symbol.iterator] && console.log(key);

          console.log('实例有 iterator:');
          Object.getOwnPropertyNames(window).forEach(
            key =>
              window[key] &&
              window[key]['prototype'] &&
              window[key]['prototype'][Symbol.iterator] &&
              console.log(key)
          );
    2019-08-01
  • 渴望做梦
    winter老师,这个异步生成器函数是个什么东东啊,从网上搜了一下,也没找到相关介绍。

    作者回复: 搜 async generator function

    2019-07-29
    1
  • 润群
    关于switch和ifelse的效率我有个疑问呢,假设ifelse的判断很多,然后判断到末尾才找到匹配的项,这样的话是不是比switch多了好多判断呢,因为我理解的switch不是只判断一次么?

    作者回复: 说了半天这点性能意义不大。

    2019-06-28
  • break
    感觉这文章应该从后往前看😆
    2019-06-14
  • 让时间说真话
    Map,set,arguments
    2019-04-12
  • 翰弟
    Array、Map、Set、String、TypedArray、函数的arguments、NodeList对象
    2019-04-04
  • qqq
    catch 中可以使用 var 重新声明
    2019-04-03
  • K4SHIFZ
    请问老师,规范中的Statement和Declaration到底有什么区别?不都是声明的意思吗?

    作者回复: Statement是语句,Declaration是声明,但是我觉得这个分类不好,因为语句里还有var语句也是声明性质的。

    2019-04-02
收起评论
18
返回
顶部