语言前端
JavaScript

JavaScript基础

JavaScript能够以不同方式显示数据：使用window.alert()写入警告框、使用document.write()写入HTML输出（在HTML文档完全加载后使用document.write()将删除所有已有的HTML）、使用innerHTML写入HTML元素、使用console.log()写入浏览器控制台;

使用var关键词来声明变量，所有JavaScript标识符对大小写敏感，容易申明变量未赋值则其值是undefined，若再次声明某JavaScript变量，其值不会丢失，var关键字声明的变量没有块作用域：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var carName = "porsche";
var carName; // 此时carName值还是porsche

/***************全局作用域**********************/
var carName = "porsche";
// 此处的代码可以使用 carName
function myFunction() {
  // 此处的代码也可以使用 carName
}

/***************var声明的变量没有块作用域**********************/
{ 
  var x = 10; 
}
// 此处可以使用 x

/***************函数作用域**********************/
// 此处的代码不可以使用 carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// 此处的代码不可以使用 carName

使用var关键字重新声明变量会带来问题，在块中重新声明变量也将重新声明块外的变量

1
2
3
4
5
6
7
var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

ES2015引入了let关键字用于定义块作用域的变量和const关键字用于定义块作用域的常量； const定义的变量与let变量类似但不能重新赋值，const没有定义常量值其定义了对值的常量引用，不能更改常量原始值，但可以更改常量对象的属性；在函数内声明变量和在块外声明变量时使用var和let很相似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{ 
  let x = 10;
}
// 此处不可以使用 x

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7


// 创建const对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 可以更改属性
car.color = "White";
// 可以添加属性
car.owner = "Bill";

// 创建常量数组
const cars = ["Audi", "BMW", "porsche"];
// 可以更改元素
cars[0] = "Honda";
// 可以添加元素
cars.push("Volvo");

使用JavaScript的情况下全局作用域是JavaScript环境，在HTML中全局作用域是window对象，通过var关键词定义的全局变量属于window对象，通过let关键词定义的全局变量不属于window对象，在相同作用域或相同块中，不允许通过let重新声明一个var变量，且不允许通过let重新声明一个let变量，且不允许通过var重新声明一个let变量，在不同作用域或块中允许通过let重新声明变量；同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var carName = "Audi";
// 此处的代码能够使用 window.carName

let carName = "porsche";
// 此处的代码不可使用 window.carName

var x = 10;      // 允许
let x = 6;       // 不允许
{
  var x = 10;    // 允许
  let x = 6;     // 不允许
}

let x = 10;       // 允许
let x = 6;        // 不允许
{
  let x = 10;   // 允许
  let x = 6;    // 不允许
}

let x = 10;       // 允许
var x = 6;        // 不允许
{
  let x = 10;   // 允许
  var x = 6;    // 不允许
}

let x = 6;       // 允许
{
  let x = 7;   // 允许
}
{
  let x = 8;   // 允许
}

通过var声明的变量会提升到顶端，即可以在声明变量之前就使用它，通过let定义的变量不会被提升到顶端，在声明let变量之前就使用它会导致ReferenceError，变量从块的开头一直处于暂时死区直到声明为止；

1
2
3
4
5
6
7
8
carName = "Volvo";	// 在此处可以使用 carName
var carName;

// 在此处不可以使用 carName
let carName;

// 在此处不可以使用 carName
const carName = "Volvo";

运算符

  • ==：等于
  • ===：等值等型
  • !=：不等于
  • !==：不等值或不等型
  • typeof：返回变量的类型
  • instanceof：若对象是对象类型的实例返回true
  • **：幂，属于ECMAScript 2016 proposal (ES7) 实验部分，跨浏览器表现并不稳定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var x = 5;
var z = x ** 2;   // 结果是 25

// 不同的次序会产生不同的结果
var x = 911 + 7 + "Porsche"; // 918Porsche
var x = "Porsche" + 911 + 7; // Porsche9117

// 超大或超小的数值可以用科学计数法
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

// 没有值的变量，其值是undefined，typeof也返回undefined
typeof (7)            // 返回 "number"
typeof (7 + 8)        // 返回 "number"
person = undefined;   // 值是 undefined，类型是 undefined
// null 的数据类型是对象
var person = null;    // 值是 null，但是类型仍然是对象
// Undefined与null的值相等，但类型不相等
typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

typeof运算符可返回string、number、boolean、undefined四种原始类型之一，可返回function、object两种复杂数据类型，把对象、数组或null返回object，但不会把函数返回object；

字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// (x == y) 为 true，因为 x 和 y 的值相等
// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）
var x = "Bill";             
var y = new String("Bill");

// (x === y) 为 false，因为 x 和 y 是不同的对象
var x = new String("Bill");             
var y = new String("Bill");

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School"); // 大小写不敏感的替换
var n = str.replace(/Microsoft/g, "W3School"); // 替换所有匹配
str.indexOf("vis", 15)    // 第二个参数作为搜索的开始位置
str.lastIndexOf("vis", 15)    // 第二个参数作为搜索的开始位置
常用方法

  • length：返回字符串的长度

  • indexOf：返回字符串中指定文本首次出现的索引位置，无法设置更强大的搜索值，若正则表达式

  • lastIndexOf：返回指定文本在字符串中最后一次出现的索引位置，从末尾到开头

  • search：搜索特定值的字符串，并返回匹配的位置，无法设置第二个开始位置参数

  • slice(start, end)：提取字符串的某个部分并在新字符串中返回被提取的部分

  • substring(start, end)：同slice，无法接受负的索引

  • substr(start, length)：同slice，第二个参数规定被提取部分的长度

  • replace：用另一个值替换在字符串中指定的值，使用正则表达式/i执行大小写不敏感的替换

  • toLowerCase：把字符串转换为小写

  • trim：删除字符串两端的空白符，Internet Explorer 8或更低版本不支持trim()方法

  • charAt：返回字符串中指定下标位置的字符串

  • charCodeAt：回字符串中指定索引的字符unicode编码

函数

没有()的函数将返回函数定义，在函数定义中this引用该函数的拥有者，方法实际上是以属性值的形式存储的函数定义，通过关键词new来声明变量，则该变量会被创建为对象，请避免字符串、数值或逻辑对象，会增加代码的复杂性并降低执行速度；

1
2
3
var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

事件

事件 描述
onchange HTML元素已被改变
onclick 用户点击了HTML元素
onmouseover 用户把鼠标移动到HTML元素上
onmouseout 用户把鼠标移开HTML元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载