Javascript基础

171 阅读4分钟

一.基础

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
```