《现代JavaScript教程》内容汇总——JavaScript基础知识
⼊职以后由于公司技术栈更多的使⽤JS,所以决定给⼀边学习JS⼀边写⼀些⼼得体会。本⽂只会着重讲⼀些学习过程中发现的JavaScript相⽐于其它语⾔具有的特性或者优点和区别。
现代JavaScript教程的链接是,在学习过程中我也逐渐发现了JS的精妙之处。只能说⼀门流⾏的语⾔不管先天上带着多少缺陷,带着这些历史包袱前⾏究竟有多费⼒。都不能掩盖语⾔本⾝演化过程中所创造出的精妙思想。
JavaScript的特点
JavaScript最开始是专门为浏览器设计的⼀门语⾔,但是现在也被⽤于很多其他的环境。譬如Node.js
JavaScript 与 HTML/CSS 完全集成的,是使⽤最⼴泛的浏览器语⾔。
javascript的特性有很多其他的语⾔可以被“编译”成 JavaScript,这些语⾔还提供了更多的功能。⽐如常⽤的添加了“严格的数据类型”的TypeScript,它被⼴泛应⽤于复杂系统开发
"script"标签
<script>标签中包裹了 JavaScript 代码,当浏览器遇到<script>标签,代码会⾃动运⾏。
脚本⽂件可以通过src特性(attribute)添加到 HTML ⽂件中,可以提供从⽹站根⽬录开始的绝对路径,当前⽬录的相对路径以及完整的URL地址。
当引⼊模块时,由于模块⽀持特殊的关键字和功能,因此我们必须通过使⽤<script type="module">特性(attribute)来告诉浏览器(只通过HTTP(s)⼯作,在本地⽂件不⾏。)
语句
通常情况下换⾏意味着分号,但这不是绝对的,所以不建议省略分号。
"use strict"
确保"use strict"位于最顶部,否则严格模式可能⽆法开启。(包括脚本⽂件或者函数体)
⽆法取消严格模式。
现代 JavaScript ⽀持 “classes” 和 “modules” —— ⾼级语⾔结构(本教程后续章节会讲到),它们会⾃动启⽤use strict。因此,如果我们使⽤它们,则⽆需添加"use strict"指令。
变量
使⽤关键字let⽽⾮var
变量名称必须仅包含字母,数字,符号$和_,⾸字符必须⾮数字。
使⽤⼤写字母和下划线来命名常量。
数据类型
JavaScript共有七种原始类型,分别是string,number,bigint,boolean,symbol,null和undefined,和⼀个特殊类型object。
Number
特殊数值:Infinity(⽆穷⼤∞)、-Infinity和NaN(计算错误,且为粘性的任何对NaN的进⼀步操作都会返回NaN)。
BigInt
可以通过将n附加到整数字段的末尾,或者调⽤BigInt函数,该函数从字符串、数字等中⽣成 bigint。
不可以把 bigint 和常规数字类型混合使⽤,应该显式转换。
⽐较运算符可以⽤于bigint和number类型数字的⽐较,但由于bigint和number属于不同类型,可能在 == ⽐较时相等但在===(严格⽐较)时不相等。
String
必须被括在括号内,可使⽤双引号"",单引号'',反引号``,反引号是功能扩展引号,允许我们将变量或表达式括在${…}中来嵌⼊字符串
Boolean
仅包含'true'和'false'两个值。
null
仅代表⼀个“⽆”、“空”、和值未知的特殊值。
undefined
代表⼀个变量已经被声明但未被赋值,所以不建议使⽤undefined来为变量赋值
object
object类型相⽐上述“原始类型”(值只包含⼀个单独的内容),⽤于储存数据集合和更复杂的实体。
symbol
创建对象的唯⼀标识符
交互:alert、prompt和confirm
关于这三个函数其实可以讲的不多,但有⼀点很重要。
这些⽅法都是模态的:它们暂停脚本的运⾏,且不允许⽤户与该页⾯的其他部分互动,直到窗⼝被解除。
在这⾥推荐⼀篇⽂章讨论了为什么现代⽹页很少看到confirm模态框
类型转换
字符串转换
转换发⽣在输出内容的时候,也可以通过String(value)进⾏显式转换。原始类型值的 string 类型转换通常是很明显的。
数字型转换
undefined => NaN
null => 0
true / false => 1 / 0
string => “按原样读取”字符串,两端的空⽩会被忽略。空字符串变成0。转换出错则输出NaN。
布尔型转换
0, null, undefined, NaN, "" => false
其他值 => true
由于原始类型只提供单个值,但JavaScript 允许访问字符串,数字,布尔值和 symbol 的⽅法和属性。所以提供提供了额外功能的特殊“对象包装器”
String、Number、Boolean、Symbol
基础运算符
数字转换,⼀元运算符+
⼀元运算符加号,或者说,加号+应⽤于单个值,对数字没有任何作⽤。但是如果运算元不是数字,加号+则会将其转化为数字。
逗号运算符
逗号运算符,是最少见最不常使⽤的运算符之⼀。有时候它会被⽤来写更简短的代码,因此为了能够理解代码,我们需要了解它。
逗号运算符能让我们处理多个语句,使⽤,将它们分开。每个语句都运⾏了,但是只有最后的语句的结果会被返回。
var x = [0,1,2,3,4,5,6,7,8,9]
var a = [x, x, x, x, x];
for (var i = 0, j = 9; i <= j; i++, j--)
console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
值的⽐较
⽐较运算符始终返回布尔值。
字符串的⽐较,会按照“词典”顺序逐字符地⽐较⼤⼩。
当对不同类型的值进⾏⽐较时,它们会先被转化为数字(不包括严格相等检查)再进⾏⽐较。
在⾮严格相等==下,null和undefined相等且各⾃不等于任何其他的值。
在使⽤>或<;进⾏⽐较时,需要注意变量可能为null/undefined的情况。⽐较好的⽅法是单独检查变量是否等于null/undefined。
空值合并运算符'??'
在本⼩节中我们把既⾮null亦⾮undefined的表达式称为“已定义的defined”
举例:a??b
如果a是已定义的,则结果是a;
如果a不是已定义的,则结果是b
由此我们发现??与||类似,在??诞⽣前我们使⽤||,但与||相⽐??具有以下特点:
||返回第⼀个真值,⽽真值包括除了(fasle、0、""、以及null和undefined),在实际环境中我们可能只想要过滤null和undefined
除此之外??还具有两个特点:
优先级低,仅⽐=和?⾼,因此使⽤时请加上括号
为了避免||切换到??时出错,??不允许和&&、||⼀起使⽤。(不过可以通过增加括号来避开)
"switch"语句严格相等
函数表达式和函数声明
函数声明:function sayHi() { alert( "Hello" ); }
函数表达式: let sayHi = function() { alert( "Hello" ); };
由于在JavaScript中函数也是⼀种特殊的值,所以上述两段代码都代表着将函数存放到变量sayHi中,函数表达式需要在末尾加上分号代表语句结束。
函数表达式是在代码执⾏到达时被创建,并且仅从那⼀刻起可⽤;
但函数声明在被定义之前,它就可以被调⽤,函数声明具有块作⽤域。
例⼦:
箭头函数
箭头函数的形式类似: let func = (arg1, arg2, ...argN) => expression
这⾥创建了⼀个函数func,它接受参数arg1..argN,然后使⽤参数对右侧的expression求值并返回其结果。
举⼏个例⼦:
let sum = (a, b) => a + b; 创建⼀个函数sum,传⼊参数a和b,返回a + b的计算结果。
let double = n => n * 2; 当只有⼀个参数时可以省略括号,传⼊参数n,返回n * 2的结果。
let sayHi = () => alert("Hello!"); 如果没有参数时则应该保留括号。
let welcome = (age < 18) ? () => alert('Hello') : () => alert("Greetings!"); 箭头函数可以像函数表达式⼀样使⽤。
let sum = (a, b) => { let result = a + b; return result; }; 如果是多⾏的表达式或者语句需要使⽤花括号括起来,并添加返回语句return。
箭头函数没有"this",会从外部中获取"this",所以也没有构造函数,因此不能使⽤new;没有;没有super
Polyfill
Babel
Babel 是⼀个转换编译器,它能将 ES6 转换成可以在浏览器中运⾏的代码。Babel 可以处理 ES6 的所有新语法,并且内置了 React JSX 扩展及 Flow 类型注解⽀持。
Polyfill
Polyfill 是⼀块代码(通常是 Web 上的 JavaScript),⽤来为旧浏览器提供它没有原⽣⽀持的较新的功能。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论