简介

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都可以使用 JavaScript。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

引入方式

内部标签

1
2
3

<script>
//js代码    
</script>

外部引入

先有一个js文件

html代码

1

<script src="路径"></script>

调试代码

浏览器F12

console.log( ) //输出代码，等价于java的sout

变量定义

var 变量名 = 变量值

js只需要var来定义变量

• 严格区分大小写
• 不能以数字开头

严格检查模式

使用’use strict’;严格检查模式来避免JS的随意性出现的问题

• 必须写在script第一行
• 局部变量都使用let定义

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

数据类型

js不区分小数和整数

判断数据类型使用typeof

1

typeof 数据

数值（Number）

整数和小数（比如1和3.14）

1
2
3
4
5
6

123 //整数		
123.1	//浮点数
1.123e3 //科学计数法
-99 //负数
NaN		//not a number
Infinity 	//无限大

字符串（String）

字符组成的文本（比如“Hello World”）

字符串长度

可以使用内置属性 length 来计算字符串的长度：

实例

1
2

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字符

在 JavaScript 中，字符串写在单引号或双引号中。

因为这样，以下实例 JavaScript 无法解析：

“We are the so-called “Vikings” from the north.”

字符串 “We are the so-called “ 被截断。

如何解决以上的问题呢？可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:

“We are the so-called "Vikings" from the north.”

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串方法我们将在下一章节中介绍。

字符串属性

字符串方法

布尔值（Boolean）

true（真）和false（假）两个特定值

Undefined未定义

Undefined 表示“未定义”或不存在，即此处目前没有任何值

出现Undefined的情况：
1，当声明了变量但未赋值时，这个变量的值就是undefined
2，调用函数（方法）时，函数有形参，但未提供实参，则参数为undefined
3.函数没有返回值，默认返回undefined

null空值

Null表示空缺，即此处应该有一个值，但目前为空

表示空值
使用Null类型值时注意以下几点
1）使用typeof操作符测试null返回object字符串。
2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等

数组

1

var arr = [1,2,3,5,null,"dada"]

• 数组下标越界会显示未定义

**push() **方法可以向数组的末尾添加一个或者多个元素，并返回新的长度.

**pop() **方法用于删除并返回数组的最后一个元素。

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

isArray() 这个方法用来判断一个对象是不是数组，是的话返回true，否则返回false

**map()**方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。方法按照原始数组元素顺序依次处理元素。

• 参数：currentValue当前元素的值

• index当前元素的索引值

• arr当前元素属于的数组对象

**filter()**方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。不会对空数组进行检测。不会改变原始数组。

• 参数：currentValue当前元素的值

• index当前元素的索引值

• arr当前元素属于的数组对象

**every()**方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。不会对空数组进行检测。不会改变原始数组。

• 参数：currentValue当前元素的值

• index当前元素的索引值

• arr当前元素属于的数组对象

**some()**方法用于检测数组中的元素是否满足指定条件（函数提供）。方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。不会对空数组进行检测。不会改变原始数组。

• 参数：currentValue当前元素的值

• index当前元素的索引值

• arr当前元素属于的数组对象

**splice()**方法用于添加或删除数组中的元素。这种方法会改变原始数组。如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

• 参数：index 必须，规定从何处添加/删除元素。该参数是开始插入和删除的数组元素的下标，必须是数字
• howmany 可选，规定应该删除多少元素。必须是数字，但可以是“0”，如果为规定此参数，则删除从index开始到原数组结 尾的所有元素。
• item…itemX 可选，要添加到数组的新元素

**slice()**方法可从已有的数组中返回选定的元素。方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。方法不会改变原始数组。

• 参数：start 规定从何处开始选取。如果该参数为负数，则表示从原数组的倒数第几个元素开始提取，slice(-2) 表示提取原数组中 的倒数第二个元素到最后一个元素（包含最后一个元素）。
• end() 规定从何处结束选取。没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取

**indexOf()**方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。indexOf() 方法区分大小写。

• 参数：search value 必须，规定需要检查的字符串值

• start 可选，规定在自负串开始检索的位置，如果省略，则将从字符串的首字符开始检索

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

• 参数：searchElement 必须，需要查找的元素值

• fromIndex 从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默 认为 0。

**concat()**方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

**join()**方法用于把数组中的所有元素放入一个字符串。该元素是通过指定的分隔符进行分隔的。

**split()**方法用于把一个字符串分割成字符串数组。方法不改变原始字符串。

• 参数：separator 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。

• limit 可选。该参数可指定返回的数组的最大长度。

**forEach()**方法用于调用数组的每个元素，并将元素传递给回调函数。

**sort()**方法用于对数组的元素进行排序。数组在原数组上进行排序，不生成副本。

**reverse()**方法用于颠倒数组中元素的顺序。

**find()**方法返回通过测试（函数内判断）的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
。对于空数组，函数是不会执行的。 并没有改变数组的原始值。

**findIndex()**方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1
。对于空数组，函数是不会执行的。并没有改变数组的原始值。

fill() 方法用于将一个固定值替换数组的元素。

• 参数：value 必须，填充的值
• start 可选，开始填充的位置
• end 可选，停止填充的位置，默认为array.length

keys()、values()、entries()
keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

对象

1

var person = {键1：值1,键2：值2,键2：值2}

对象使用键值对定义

对象（object）（引用）：各种值组成的集合

动态增删

1
2
3

delete 对象名.属性 //删除

对象名.属性 = xxx //增加

判断对象是否存在属性

1

'属性名' in 对象名

• JS中属性都是以字符串形式存储

判断属性是否为该对象独有的

1

对象名.hasownProperty('属性名')

运算符

逻辑运算符

1
2
3

&&		//与
||		//或
!		//非

比较运算符

1
2
3

=		//赋值
==		//等于（当两个变量字面值一致时会判定等于,不区分类型）
===		//绝对等于（判断类型、值相等时为true）

• NaN === NaN为false，NaN与所有数字都不相等，包括自己
• 通过isNa(NaN)方法判断是不是一个数

浮点数精度问题

1

console.log((1/3)===(1-2/3)) //false

使用绝对值函数abs来判断是否小于一定位数来判断两个数是否相等

1

console.log(Math.abs((1/3)===(1-2/3))<0.0000001)

流程控制

if…else

switch

while

for

数组遍历

1
2
3
4

const arr = [1, 6, 456, 15, 123, 1, 3];
    for (let i in arr) {
    console.log(arr[i]);
    }

Set和Map

简述：
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。

Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。

集合 与 字典 的区别：

• 共同点：集合、字典 可以储存不重复的值

• 不同点：集合 是以 [value, value]的形式储存元素，字典 是以 [key, value] 的形式储存

集合（Set）：

• ES6 新增的一种新的数据结构，类似于数组，成员唯一（内部元素没有重复的值）。且使用键对数据排序即顺序存储。

• Set 本身是一种构造函数，用来生成 Set 数据结构。

• Set 对象允许你储存任何类型的唯一值，无论是原始值或者是对象引用。

1
2
3
4
5
6
7
8

const s = new Set()
[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))
for (let i of s) {
    console.log(i)	// 1 2 3 4
}
// 去重数组的重复对象
let arr = [1, 2, 3, 2, 1, 1]
[... new Set(arr)]	// [1, 2, 3]

• 注意：向 Set 加入值的时候，不会发生类型转换，所以5和”5”是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。

1
2
3
4
5
6
7
8
9
10
11

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

let set1 = new Set()
set1.add(5)
set1.add('5')
console.log([...set1])	// [5, "5"]

方法

• add(value)：新增，相当于 array里的push。

• delete(value)：存在即删除集合中value。

• has(value)：判断集合中是否存在 value。

• clear()：清空集合。

遍历方法：遍历方法（遍历顺序为插入顺序）

• keys()：返回一个包含集合中所有键的迭代器。
• values()：返回一个包含集合中所有值得迭代器。
• entries()：返回一个包含Set对象中所有元素得键值对迭代器。
• forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作，如果提供了 thisArg 参数，回调中的this会是这个参数，没有返回值。

WeakSet：

WeakSet 对象允许你将弱引用对象储存在一个集合中。

WeakSet 与 Set 的区别：

WeakSet 只能储存对象引用，不能存放值，而 Set 对象都可以。
WeakSet 对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑 WeakSet 对该对象的应用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了），WeakSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素。

• add(value)：在WeakSet 对象中添加一个元素value。
• has(value)：判断 WeakSet 对象中是否包含value。
• delete(value)：删除元素 value。

字典（Map）：

• 是一组键值对的结构，具有极快的查找速度。

1
2
3
4
5
6
7

const m = new Map()
const o = {p: 'haha'}
m.set(o, 'content')
m.get(o)	// content
m.has(o)	// true
m.delete(o)	// true
m.has(o)	// false

操作方法：

• set(key, value)：向字典中添加新元素。

• get(key)：通过键查找特定的数值并返回。

• has(key)：判断字典中是否存在键key。

• delete(key)：通过键 key 从字典中移除对应的数据。

• clear()：将这个字典中的所有元素删除。

遍历方法：

• Keys()：将字典中包含的所有键名以迭代器形式返回。
• values()：将字典中包含的所有数值以迭代器形式返回。
• entries()：返回所有成员的迭代器。
• forEach()：遍历字典的所有成员。

WeakMap:

WeakMap 对象是一组键值对的集合，其中的键是弱引用对象，而值可以是任意。
注意，WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。
WeakMap 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakMap 的 key 是不可枚举的。

方法：

• has(key)：判断是否有 key 关联对象。
• get(key)：返回key关联对象（没有则则返回 undefined）。
• set(key)：设置一组key关联对象。
• delete(key)：移除 key 的关联对象。

总结:
Set：
成员唯一、无序且不重复。
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）。
可以遍历，方法有：add、delete、has。
WeakSet：
成员都是对象。
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏。
不能遍历，方法有add、delete、has。
Map：
本质上是键值对的集合，类似集合。
可以遍历，方法很多可以跟各种数据格式转换。
WeakMap：
只接受对象作为键名（null除外），不接受其他类型的值作为键名。
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不能遍历，方法有get、set、has、delete。

函数

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

1
2
3
4

function *functionname*()
{
  *// 执行代码*
}

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

1

myFunction(*argument1,argument2*)

当您声明函数时，请把参数作为变量来声明：

1
2
3
4

function myFunction(***var1***,***var2***)
{
*代码*
}

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

1
2
3
4
5

function myFunction()
{
  var x=5;
  return x;
}

arguments传递参数

可变参数rest

形参和实参

在了解不定参数和rest语法之前我们先介绍下参数的概念。JavaScript的参数有形参(parameter)和实参(argument)，形参相当于函数中定义的变量，实参就是运行函数调用时传入的参数。简单的说，形参就是函数声明时的变量，实参是我们调用该函数时传入的具体参数。

例如下面代码：

1
2
3
4
5
6

<script>
    function f(a,b){
        console.log(a+b);
    }
    f(1,4); // 输出 5
</script>

代码中f(a, b)中的a和b就是形参，f(1,4)中的1和4就是实参。

不定参数

谈到不定参数，我们就必须要了解arguments对象。

arguments对象是一个类数组对象(但不是Array的实例)，因此可以使用中括号语法访问其中的元素(第一个参数是 arguments[0]，第二个参数是 arguments[1])。而要确定传进来多少个参数，可以访问arguments.length属性。

arguments对象是函数中默认就有的对象，它可以接收到多个不定数量的参数，并且以数组的形式存在。

1
2
3
4
5
6
7
8
9
10
11

<script>
    function f(a,f,t,...rest){
        console.log(rest);
    }
    f(1,3,4,5,6); //输出[5,6]
    
	function f(...rest){
		console.log(rest);
	}
    f(1,3,4,5,6);   // 输出[1,3,4,5,6]
</script>

当不确定要传入多少参数时可以使用 …rest 表示，rest是一个数组，数组中的数据是没有对应形参的数据。

作用域

函数作用域。。。同Java

有同名变量时，函数会屏蔽外部变量

提升作用域

• 所有变量定义都放在函数头部

全局函数

局部作用域

常量

方法

this

apply

Date类

基本使用

转换

JSON

什么是 JSON?

• JSON 英文全称 JavaScript Object Notation
• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 *****
• JSON 易于理解。

JSON 实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:

1
2
3

{"sites":[ {"name":"Runoob", "url":"www.runoob.com"},     
           {"name":"Google", "url":"www.google.com"},    
           {"name":"Taobao", "url":"www.taobao.com"} ]}

JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

JSON 字符串转换为 JavaScript 对象

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

1
2
3
4

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

1

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

1
2
3
4
5
6
7

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

面向对象

原型指定

定义了一个对象，可以通过__proto__(注意是前后分别两个下划线)来指定原型对象，相当于继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//定义原型对象
var person = {
            name:"xiao",
            age:18,
            run: function(){
                alert("run...")
            }
        }

//新对象
var son = {
    name:"wang"
}
//指定原型对象
son.__proto__= person;//可以使用原型对象的方法

class继承

es5方式

es6方式

1. 定义一个类、属性、方法

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class NewStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    
    //定义本类的方法
    hi(){
        alert("hi")
    }
}

var newstu = new NewStudent("li",100);

本质还是原型

原型链

prototype可以找到实现原型