JavaScript 基础

1. 简介

2. 快速入门

2.1 引入

• 内部标签

  <script>
      alert('hello, world!');
  </script>
  1
  2
  3

• 外部引入

  <script src="js/first_js.js"></script>
  1

2.2 数据类型

• number

  整数：123
  浮点数：123.1
  科学计数法：1.123e3
  负数：-123
  非数字：NaN
  无限大：Infinity
  1
  2
  3
  4
  5
  6

• 字符串：'abc' 和 "abc"

• 布尔值：true 和 false

• 逻辑运算：&& 、|| 、!

• 比较运算符

  赋值：=
  等于：== （值一样为true）
  绝对等于：=== （类型和值都一样为true）
  1
  2
  3

• 空：null

• 未定义：undefined

• 数组

  var arr = [1,2,'hello',null];
  new Array(1,2,'hello',null);
  1
  2

• 对象

  var person = {
      name: "弗罗多",
      age: 50,
      like: ['smoke','drink']
  }
  1
  2
  3
  4
  5

2.3 语法

严格检查模式：'use strict';，必须在script代码的第一行。

(1) 定义变量

var score = 60;
let score = 60; // ES6
1
2

(2) 条件判断

if (score > 60) {
	...
} else if (score > 80) {
 	...
} else {
	...
}
1
2
3
4
5
6
7

(3) 控制台输出

console.log('及格');
1

(4) 弹窗

alert('不及格');
1

3. 数据类型

3.1 字符串

• 正常字符串使用 '' 或者 "" 包裹

  let student = 'frodo';
  let level = "不及格";
  1
  2

• 转义字符串使用 "\####"

  let str = "\u4e2d"; // 中
  1

• 多行字符串

  let msg = `
  Time
  
  Time is the currency of your life, spend it wisely
  时间就像是生命的金钱，要学会合理支配
  Don’t let others no matter how well intentioned spend it for you, it’s all you’ve got
  不要让别人为你浪费时间，你该自己去处理你应做的
  In the end, you may falter, but rest assured, time will not
  你最后也许会动摇，但时间不会
  ...
  `;
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 模板字符串

  let msg = `成绩${level}`;
  1

• 字符串长度

  let strLength = student.length;
  1

• 大小写转换

  let strUp = student.toUpperCase();
  let strLow = student.toLowerCase();
  1
  2

• 下标索引

  let dLocal = student.indexOf('d');
  1

• 截取字符串

  let subStr = student.substring(1);	// 1到最后
  let subStr = student.substring(1,4);	// 1到4
  1
  2

3.2 数组

• 数组定义

  let arr = [1,2,3,'frodo'];
  1

• 长度

  let arrLength = arr.length;	// 4
  1

• 下标索引

  let frodoIndex = arr.indexOf('frodo');	// 3
  1

• 数组截取

  let subArr = arr.slice(2);	// [3, 'frodo']
  1

• 尾部添加元素

  /*
   * pushArr = 6
   * arr = [1, 2, 3, 'frodo', 'a', 'b']
   */
  let pushArr = arr.push('a',"b");
  1
  2
  3
  4
  5

• 尾部弹出元素

  /*
   * popArr = 'b'
   * arr = [1, 2, 3, 'frodo', 'a']
   */
  let popArr = arr.pop();
  1
  2
  3
  4
  5

• 头部添加元素

  /*
   * unshArr = 7
   * arr = ['c', 'd', 1, 2, 3, 'frodo', 'a']
   */
  let unshArr = arr.unshift('c','d');
  1
  2
  3
  4
  5

• 头部弹出元素

  /*
   * shArr = 'c'
   * arr = ['d', 1, 2, 3, 'frodo', 'a']
   */
  let shArr = arr.shift();
  1
  2
  3
  4
  5

• 排序

  // arr = ['d', 1, 2, 3, 'frodo', 'a']
  let sortArr = arr.sort();	
  /*
   * arr = [1, 2, 3, 'a', 'd', 'frodo']
   * sortArr = [1, 2, 3, 'a', 'd', 'frodo']
   */
  1
  2
  3
  4
  5
  6

• 元素反转

  // arr = [1, 2, 3, 'a', 'd', 'frodo']
  let reArr = arr.reverse();
  /*
   * arr = ['frodo', 'd', 'a', 3, 2, 1]
   * reArr = ['frodo', 'd', 'a', 3, 2, 1]
   */
  1
  2
  3
  4
  5
  6

• 拼接

  /*
   * arr = ['frodo', 'd', 'a', 3, 2, 1]
   * conArr = ['frodo', 'd', 'a', 3, 2, 1, 'A', 'B']
   */
  let conArr = arr.concat("A","B");
  1
  2
  3
  4
  5

• 连接符

  /*
   * arr = ['frodo', 'd', 'a', 3, 2, 1]
   * joArr = 'frodo-d-a-3-2-1'
   */
  let joArr = arr.join("-");
  1
  2
  3
  4
  5

• 多维数组

  /*
   * (3) [Array(2), Array(2), Array(2)]
   * 0: (2) [1, 2]
   * 1: (2) ['a', 'b']
   * 2: (2) ['壹', '贰']
   * length: 3
   */
  let mulArr = [[1,2],['a','b'],["壹","贰"]];
  1
  2
  3
  4
  5
  6
  7
  8

3.3 对象

• 对象定义

  // person = {name: 'frodo', age: 50, sex: '男', like: 'drink', race: 'Hobbit'}
  let person = {
      name:"frodo",
      age:50,
      like:"drink",
      race: 'Hobbit'
  }
  1
  2
  3
  4
  5
  6
  7

• 对象属性赋值

  // person = {name: 'frodo', age: 50, sex: '男', like: 'smoke', race: 'Hobbit'}
  person.like="smoke";
  1
  2

• 删除对象属性

  /*
   * delper = true
   * person = {name: 'frodo', age: 50, sex: '男', race: 'Hobbit'}
   */
  let delper = delete person.like;
  1
  2
  3
  4
  5

• 添加对象属性

  // person = {name: 'frodo', age: 50, sex: '男', race: 'Hobbit', height: 168}
  person.height = 168;
  1
  2

• 判断属性是否包含在此对象及父对象内

  let ageInPer = 'age' in person;			// true
  let strInPer = 'toString' in person;	// true
  1
  2

• 判断实行是否包含在此对象内

  let perHasSex = person.hasOwnProperty('sex');		// true
  let perHasStr = person.hasOwnProperty('toString');	// false
  1
  2

4. 流程控制

4.1 条件判断

if (score > 60) {
	...
} else if (score > 80) {
 	...
} else {
	...
}
1
2
3
4
5
6
7

4.2 循环

(1) while

while(...) {
	...
}
1
2
3

(2) do while

do{
    ...
} while (...)
1
2
3

(3) for

for (let i = 0; i < 10 ; i++) {
    ...
}
1
2
3

/*
 * array 为数组 value 为元素值
 */
arr.forEach(function (value) {
    ...
});
1
2
3
4
5
6

/*
 * array 为数组 key 为下标
 * array 为对象 key 为关键字
 */
for (const key in array) {
    ...
}
1
2
3
4
5
6
7

/*
 * arr 为数组 element 为数组元素
 * arr 为 Map，element 为键值对
 * arr 为 set，element 为元素值
 */
for (const element of arr) {
    ...
}
1
2
3
4
5
6
7
8

5. Map 和 Set

• Map

  // score = {'tom' => 100, 'jerry' => 80}
  let score = new Map([['tom',100],['jerry',80]]);
  // tomScore = 100
  let tomScore = score.get('tom');
  // score = addSpikeScore = {'tom' => 100, 'jerry' => 80, 'spike' => 90}
  let addSpikeScore = score.set('spike', 90);	
  /*
   * delSpikeScore = true
   * score = {'tom' => 100, 'jerry' => 80}
   */
  let delSpikeScore = score.delete('spike');
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• Set：无须不重复的集合

  // set = {0, 1, 2, 3}
  let set = new Set([0,1,2,3,2,1,0]);
  // set = add = {0, 1, 2, 3, 9}
  let add = set.add(9);
  /*
   * del = true
   * set = {0, 1, 2, 3}
   */
  let del = set.delete(9);
  // has = true
  let has = set.has(3);
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

6. 函数

6.1 函数定义

• 方式一

  function abs(x) {
      if (x>=0) return x;
      else return -x;
  }
  1
  2
  3
  4

• 方式二

  let abs = function (x) {
      if (x>=0) return x;
      else return -x;
  }
  1
  2
  3
  4

6.2 手动抛出异常

function abs(x) {
    if (typeof x !== 'number') throw 'Not a number';
    if (x>=0) return x;
    else return -x;
}
1
2
3
4
5

6.3 可变参数

javascript 的函数调用没有参数限制，超出函数定义的参数将会被隐藏，使用 arguments 关键字可以获取到所有的参数。

function abs(x) {
    if (typeof x !== 'number') throw 'Not a number';
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if (x>=0) return x;
    else return -x;
}
1
2
3
4
5
6
7
8

或者可以为函数定义 ...rest 参数获取定义外的参数。

function abs(x,...rest) {
    if (typeof x !== 'number') throw 'Not a number';
    console.log(rest);
    if (x>=0) return x;
    else return -x;
}
1
2
3
4
5
6

6.4 方法

方法就是对象内的函数

let person = {
    name: 'jack',
    birth: 2000,
    age: function () {
        let year = new Date().getFullYear();
        return year-this.birth;
    }
};
1
2
3
4
5
6
7
8

this 默认指向当前对象

apply 可更改 this 的指向，使此对象调用另一个对象的方法或属性。

let person = {
    age:function () {
        let year = new Date().getFullYear();
        return year - this.birth;
    }
};
let jack = {
    name: 'jack',
    birth: 2000,
    age: function () {
        let year = new Date().getFullYear();
        return year-this.birth;
    }
};
let apply = person.age.apply(jack);	// 21
let age = person.age();	// NaN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7. 变量

作用域

• 函数内变量在函数外无效
• 内部函数可调用外部函数变量
• 若有同名变量采用就近原则
• 若调用全局都没有的变量，则会报错
• js 默认将所有变量的声明提升为全局，因此规范中将所有变量定义为全局变量来保证安全性。

全局变量

定义在函数外的变量即是全局变量，所有的全局变量都会绑定到 window 对象上，因此会有变量冲突问题，规范中通过定义唯一全局变量来解决。

// 唯一全局变量
var app = {};
app.attribute = '属性';
app.function = function (a, ...rest) {
    ...
}
1
2
3
4
5
6

局部变量

同一函数内的代码块中使用 var 定义的变量在代码块外依然有效，js 使用 let 解决局部作用域冲突问题

// vF(12) = '正数'
function vF(a) {
    if (a > 0) {
        var vOut = '正数';
    } else {
        vOut = '负数';
    }
    return vOut;
}
1
2
3
4
5
6
7
8
9

// 报错，ReferenceError: lOut is not defined
function lF(a) {
    if (a > 0) {
        let lOut = '正数';
    } else {
        lOut = '负数';
    }
    return lOut;
}
1
2
3
4
5
6
7
8
9

常量

const PI = 3.14;
1

8. 标准对象

8.1 Date

let dateTime = new Date();
let fullYear = dateTime.getFullYear();
let month = dateTime.getMonth();
// 日
let date = dateTime.getDate();
// 星期
let day = dateTime.getDay();
let hours = dateTime.getHours();
let minutes = dateTime.getMinutes();
let seconds = dateTime.getSeconds();
// 时间戳
let time = dateTime.getTime();
// 时间戳转换为时间
let transDate = new Date(time);
// 转换为字符串
let dateStr = transDate.toLocaleString();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

8.2 JSON

JSON 是一种轻量级的数据交换格式

数组用 []，对象用 {}，格式为：key:value

// JSON
let person = {
    name: "json",
    age: 0,
    sex: "男"
}
// perJson = '{"name":"json","age":0,"sex":"男"}'
let perJson = JSON.stringify(person);
// perObj = {name: 'json', age: 0, sex: '男'}
let perObj = JSON.parse(perJson);
1
2
3
4
5
6
7
8
9
10

8.3 Ajax

9. 面向对象编程

class Person {
    name = '';
    sex = '';
    age = '';
    constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    run () {
        return this.name + " is running...";
    }
}

class Student extends Person {
    like = '';
    constructor(name, sex, age, like) {
        super(name, sex, age);
        this.like = like;
    }

    run() {
        return super.run();
    }
    study() {
        return this.name + " is studying...";
    }
}

let tom = new Student("Tom","man",10,'drink');
console.log(tom);	// Student {name: 'Tom', sex: 'man', age: 10, like: 'drink'}
console.log(tom.study());	// Tom is studying...
console.log(tom.run());		// Tom is running...
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

10. 操作 BOM 对象

BOM（Brow Object Model）即浏览器模型。

• window ：浏览器窗口
• screen ：电脑屏幕
• location： 当前页面信息
• document ：当前页面
• cookie ：缓存

11. 操作 DOM 对象

浏览器网页本质上是一个 DOM 树形结构，对网页的操作相当于操作树形结构的结点。

11.1 获取 DOM 结点

获取 DOM 结点即查找HTML元素

<div id="father">
    <h1>Dom</h1>
    <p id="p1">P1</p>
    <p class="p2">P2</p>
</div>
<script>
    'use strict';
    // 获取 DOM 结点
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
</script>
1
2
3
4
5
6
7
8
9
10
11
12

HTML5 之前版本的 document 对象属性