一.基础
1.须知
1.1 在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
1.2 脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中也可以放置于外部文件中,文件文件扩展名是**.js**
2.输出
JavaScript 能够以不同方式“显示”数据:
2.1 使用 window.alert() 写入警告栏
2.2 使用 document.write() 写入 html 输出
2.3 使用 innerHtml 写入 HTML 元素
2.4 使用 console.log() 写入浏览器控制台
3.基础语法
使用 var 关键词来声明变量
使用 = 号用于为变量赋值
使用 算数运算符(+ - * /) 来计算值
使用 关键词 用于标识被执行的动作
双斜杠 // 或 /* 与 */ 之间的代码被视为 注释。
4.数据类型
基本类型:
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 空(Null)
- 未定义(Undefined)
- Symbol
引用类型:
- 对象(Object)
- 数组(Array)
- 函数(Function)
有趣的点
1.Javascript 中 == 与 === 的区别
参考:[Javascript中 == 与 === 的区别](javaScript中"=="和"==="的区别详解_基础知识_脚本之家 (jb51.net))
当使用 == 相等运算符时,相等字符串是相等的:
```js
var x = "Bill";
var y = new String("Bill");
// (x == y) 为 true,因为 x 和 y 的值相等
```
当使用 === 运算符时,相等字符串是不相等的,因为 === 运算符需要类型和值同时相等。
```js
var x = "Bill";
var y = new String("Bill");
// (x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)
```
```js
var x = new String("Bill");
var y = new String("Bill");
// (x == y) 为 false,因为 x 和 y 是不同的对象
```
2.NaN 非数值
NaN 属于 JavaScript 保留词,指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN(Not a Number):
```js
var x = 100 / "Apple"; // x 将是 NaN(Not a Number)
//假如字符串包含数值,则结果将是数:
var x = 100 / "10"; // x 将是 10
```
可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数:
```js
var x = 100 / "Apple";
isNaN(x); // 返回 true,因为 x 不是数
```
NaN 是数,typeof NaN 返回 number:
```js
typeof NaN; // 返回 "number"
```
3.this的指向
在函数内,`this`是非常特殊的关键词标识符,在每个函数的作用域中被自动创建。当函数被调用,一个上下文就被创建。上下文包括函数在哪调用,谁调用的,参数是哪些,等等,上下文中的this,指的就是函数指行期间的this。`this`的上下文基于函数调用的情况。
即:和函数在哪定义无关,但是和函数怎么调用有关。
this理解的关键:
this永远指向一个对象;
this的指向完全取决于函数调用的位置;
全局:
在全局上下文(任何函数以外),`this`指向全局对象。
```js
console.log(this === window); // true
```
函数:
在函数内部时,`this`由函数怎么调用来确定
```js
//简单调用,即独立函数调用
function f1(){
return this;
}
//当前调用者其实是window window.f1()
f1() === window;
```
当函数作为对象方法调用时,`this`指向该对象
```js
var obj = {
type: 1,
name: 'Tina',
age: 18,
sayHi:function(){
console.log(this)
console.log('hi~~')
}
}
//this === obj
obj.sayHi()
```
4.ES6语法 var let const 的区别
参考:[ES语法 var let const 的区别](详解javascript中var与ES6规范中let、const区别与用法_基础知识_脚本之家 (jb51.net))
let 声明的变量只在 let 命令所在的代码块内有效
```js
{
let a = 0;
a // 0
}
a // 报错 ReferenceError: a is not defined
```
let 只能声明一次 (var 可以声明多次)
```js
let a = 1;
let a = 2;
var b = 3;
var b = 4;
a // Identifier 'a' has already been declared
b // 4
```
let 不存在变量提升,var 会变量提升
```js
console.log(a); //ReferenceError: a is not defined
let a = "apple";
console.log(b); //undefined
var b = "banana";
```
const 声明一个只读的常量,一旦声明,常量的值就不能改变
```js
const PI = "3.1415926";
PI = '123' //Assignment to constant variable
```
5.箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
```
参数 => 函数体
```
```js
var f = v => v;
//等价于
var f = function(a){
return a;
}
f(1); //1
```
当箭头函数没有参数或者有多个参数,要用 () 括起来
```js
var f = (a,b) => a+b;
f(6,2); //8
```
当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回
```js
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8
```
当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来
```js
// 报错
var f = (id,name) => {id: id, name: name};
f(6,2); // SyntaxError: Unexpected token :
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}
```
箭头函数没有 this、super、arguments 和 new.target 绑定
```js
var func = () => {
// 箭头函数里面没有 this 对象,
// 此时的 this 是外层的 this 对象,即 Window
console.log(this)
}
func(55) // Window
var func = () => {
console.log(arguments)
}
func(55); // ReferenceError: arguments is not defined
```
箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象
```js
function fn(){
setTimeout(()=>{
// 定义时,this 绑定的是 fn 中的 this 对象
console.log(this.a);
},0)
}
var a = 20;
fn()
// fn 的 this 对象为 window 所以打印20
```