"上层"语言
- 允许开发者使用另一种语言编写代码并会将其“自动转换”为 JavaScript。
- CoffeeScript
- JavaScript 的一种语法糖。它引入了更加简短的语法，使我们可以编写更清晰简洁的代码。
- TypeScript
- 专注于添加“严格的数据类型”以简化开发，以更好地支持复杂系统的开发。
- Flow
- 也添加了数据类型，但是以一种不同的方式。
- Dart
- 是一门独立的语言。它拥有自己的引擎，该引擎可以在非浏览器环境中运行（例如手机应用），它也可以被编译成 JavaScript。
script标签
- JavaScript 程序可以在
<script>标签的帮助下插入到 HTML 文档的任何地方。 <script\>标签中包裹了 JavaScript 代码，当浏览器遇到<script\>标签，代码会自动运行。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html> <body> <p>script 标签之前...</p> <script> alert('Hello, world!'); </script> <p>...script 标签之后</p> </body> </html> |
外部脚本
- 如果你有大量的 JavaScript 代码，我们可以将它放入一个单独的文件。
- 脚本文件可以通过
src特性（attribute）添加到 HTML 文件中。
|
1 |
<script src="/path/to/script.js"></script> |
URL
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script> |
多个脚本
|
1 2 3 |
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> … |
注意
- 如果设置了
src特性，script标签内容将会被忽略。
基础知识一
分号
- 即使语句被换行符分隔了，我们依然建议在它们之间加分号。
注释
- 需要注意的是不支持注释嵌套
|
1 2 3 4 |
// 这行注释独占一行 alert('Hello'); alert('World'); // 这行注释跟随在语句后面 |
|
1 2 3 4 5 |
/* 两个消息的例子。 这是一个多行注释。 */ alert('Hello'); alert('World'); |
use strict
- 当它处于脚本文件的顶部时，则整个脚本文件都将以“现代”模式进行工作。
- 要确保
"use strict"出现在脚本的最顶部，否则严格模式可能无法启用。 - 一旦进入了严格模式，没有返回默认模式的方法。
|
1 2 3 4 |
"use strict"; // 代码以现代模式工作 ... |
变量
- 在 JavaScript 中创建一个变量，我们需要用到
let关键字。 var关键字与let大体 相同，也用来声明变量，但稍微有些不同，也有点“老派”。- 作用域方面的区别：
var声明的变量在其声明的函数内是局部的，而在函数外部是全局的var在函数外部声明的变量，将成为全局变量，并且被添加到全局对象let声明的变量是块级作用域，只在包含他们的块内部{}可用
- 变量提升方面的区别：
var声明的变量存在变量提升现象，意味着变量可以在其声明之前被访问，但是其值是undefined。因为变量声明会被提升到其作用域的顶部let声明的变量同样存在变量提升，但是在声明前访问会报ReferenceError错误，因为变量在生灵之前不会被初始化
|
1 2 |
console.log(x); // 输出 undefined var x = 10; |
- 重复声明方面的区别：
var声明的变量可以被多次声明而不会引发错误，新的声明会覆盖旧的声明let声明的变量不能在同一作用域内被重复声明
|
1 2 3 4 |
let message; message = 'Hello!'; alert(message); // 显示变量内容 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 使用 var 声明变量 var x = 10; console.log(x); // 输出 10 { var x = 20; console.log(x); // 输出 20 } console.log(x); // 输出 20 // 使用 let 声明变量 let y = 10; console.log(y); // 输出 10 { let y = 20; console.log(y); // 输出 20 } console.log(y); // 输出 10 |
- 关于变量提升：
- 变量提升的行为在于
JavaScript引擎在执行代码之前会扫描代码，将变量和函数声明提升到作用域的顶部 - 具体来说，当
JavaScript引擎在执行代码之前扫描代码时，它会查找并记住所有变量和函数的声明，并将它们添加到作用域的顶部，这意味着它们在代码中的实际位置之前被“提升” - 如下示例：虽然变量 x 和函数 foo 的声明出现在它们的实际使用之后，但由于变量提升的存在，它们在作用域的顶部被提升，因此代码仍然有效
- 变量提升的行为在于
|
1 2 3 4 5 6 7 |
console.log(x); // undefined var x = 10; foo(); // "Hello, world!" function foo() { console.log("Hello, world!"); } |
变量命名
- 变量名称必须仅包含字母，数字，符号
$和_。 - 首字符必须非数字。
保留字
breakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseexportextendsfinallyforfunctionifimportininstanceofnewreturnsuperswitchthisthrowtrytypeofvarvoidwhilewithyield
常量
|
1 |
const myBirthday = '18.04.1982'; |
数据类型
- 在 JavaScript 中有 8 种基本的数据类型（译注：7 种原始类型和 1 种引用类型）
- 我们可以将任何类型的值存入变量。
|
1 2 3 |
// 没有错误 let message = "hello"; message = 123456; |
- Number类型
Infinity、-Infinity和NaN。
|
1 2 |
let n = 123; n = 12.345; |
- BigInt类型
- 在 JavaScript 中，“number” 类型无法表示大于
(253-1)（即9007199254740991），或小于-(253-1)的整数。 BigInt类型是最近被添加到 JavaScript 语言中的，用于表示任意长度的整数。- 可以通过将
n附加到整数字段的末尾来创建BigInt值。
- 在 JavaScript 中，“number” 类型无法表示大于
|
1 2 |
// 尾部的 "n" 表示这是一个 BigInt 类型 const bigInt = 1234567890123456789012345678901234567890n; |
- String类型
- 双引号：
"Hello". - 单引号：
'Hello'. - 反引号：
<code>Hello. - 双引号和单引号都是“简单”引用，在 JavaScript 中两者几乎没有什么差别。
- 反引号是 功能扩展 引号。它们允许我们通过将变量和表达式包装在
${…}中，将它们嵌入到字符串中。
- 双引号：
|
1 2 3 |
let str = "Hello"; let str2 = 'Single quotes are ok too'; let phrase = `can embed another ${str}`; |
|
1 2 3 4 5 6 7 |
let name = "John"; // 嵌入一个变量 alert( `Hello, ${name}!` ); // Hello, John! // 嵌入一个表达式 alert( `the result is ${1 + 2}` ); // the result is 3 |
- Boolean类型
|
1 2 3 4 5 |
let nameFieldChecked = true; // yes, name field is checked let ageFieldChecked = false; // no, age field is not checked let isGreater = 4 > 1; alert( isGreater ); // true（比较的结果是 "yes"） |
- "null"值
- 它是一个独立的类型，只包含null值
- JavaScript 中的
null仅仅是一个代表“无”、“空”或“值未知”的特殊值。
|
1 |
let age = null; |
- "undefined"值
- 含义是未被赋值
- 如果一个变量已被声明，但未被赋值，那么它的值就是
undefined：
|
1 2 3 4 5 6 7 |
let age; alert(age); // 弹出 "undefined" let age = 100; // 将值修改为 undefined age = undefined; alert(age); // "undefined" |
-
object类型和symbol类型
- 其他数据类型都被称为”原始类型“，因为它们的值只包含一个单独的内容（字符串、数字或其他）。object则用于存储数据集合和更复杂的实体。
- symbol类型用于创建对象的唯一标识符。
-
typeof运算符
- 返回参数的类型。
- 作为运算符：
typeof x - 函数形式：
typeof(x)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" typeof Math // "object" (1) //这是官方承认的 typeof 的行为上的错误，这个问题来自于 JavaScript 语言的早期，并为了兼容性而保留了下来。 //null 绝对不是一个 object。null 有自己的类型，它是一个特殊值。 typeof null // "object" (2) typeof alert // "function" (3) |
alert
- 弹出的这个带有信息的小窗口被称为 模态窗。
- “modal” 意味着用户不能与页面的其他部分（例如点击其他按钮等）进行交互，直到他们处理完窗口。
|
1 |
alert("Hello"); |
prompt
- title:显示给用户的文本
- default:可选的第二个参数，指定 input 框的初始值。
- 将返回用户在
input框内输入的文本，如果用户取消了输入，则返回null
|
1 2 3 |
result = prompt(title, [default]); let test = prompt("Test", ''); // <-- 用于 IE 浏览器 |
confirm
- 显示一个带有
question以及确定和取消两个按钮的模态窗口。 - 点击确定返回
true，点击取消返回false。
|
1 2 3 4 |
result = confirm(question); let isBoss = confirm("Are you the ok?"); alert( isBoss ); // 如果“确定”按钮被按下，则显示 true |
声明：本文为原创文章，版权归Aet所有，欢迎分享本文，转载请保留出处！
