JavaScript复习总结一（入门）

总是执着想学各种框架，但忘了基础学好才最重要。每次打开菜鸟教程想重温基础内容，然后就像翻开英文字典，永远在abandon...还是需要做个笔记。

一来加深学习印象，二来等下次打开学习可以知道自己上次学到哪里了。就不至于abandon了。

JS可以放在任何地方，通常放在<head> <script></script> </head>中，或者外部引入

JS调试可在Chrome浏览器 --> 开发者工具 --> Console控制台中使用Console.log(); 打印查看内容

基本语法

每个语句以;结尾，中间语句块使用{...}

//...为行注释，/* ... */为块注释

JavaScript严格区分大小写

数据类型和变量

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。(Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。)

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JS中数值类型不区分整数和浮点数，统一用Number。

字符串用单引号双引号

布尔值 true false

比较运算符 > >= ==

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；// false==0 (结果为true)

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。// false===0 (结果为false)

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己 // NaN === NaN; (结果为false)

唯一能判断NaN的方法是通过isNaN()函数 // isNaN(NaN); (结果为true)

最后要注意浮点数的相等比较：

1 / 3 === (1 - 2 / 3); // false

这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null表示空，与0和' '不同，0是数值，' '表示长度为0的字符串。

数组

[1,2,3,null,'hello'] 或 new Array(1,2,3);//创建 [1,2,3] 的数组

var arr=[1,2,3,null,'hello']; //arr(0) 返回为1 ,arr(4) 返回为hello

对象

以键-值方式组成的无序集合

var person = {

    name: 'Bob',

    age: 20,

    tags: ['js', 'web', 'mobile'],

    city: 'Beijing',

    hasCar: true,

    zipcode: null

};

获取对象的属性

person.name;//Bob

变量

变量名是大小写英文、数字、$和_的组合，且不能用数字开头，也不能是关键字。

var a; // 申明了变量a，此时a的值为undefined

var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1

var s_007 = '007'; // s_007是一个字符串

var Answer = true; // Answer是一个布尔值true

var t = null; // t的值是null

操作字符串

var s = 'Hello, world!';

s.length; // 13

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

var s = 'Test';

s[0] = 'X';

alert(s); // s仍然为'Test'

JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

toUpperCase() //转为大写

var s='hello world'; var up=s.toUpperCase();

toLowerCase() //转为小写

indexOf() //搜索指定字符串出现的位置

var s = 'hello, world';

s.indexOf('world'); // 返回7

s.indexOf('World'); // 没有找到指定的子串，返回-1

substring() // 返回指定索引区间的子串：

var s = 'hello, world'

s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'

s.substring(7); // 从索引7开始到结束，返回'world'

slice是对应字符串(String)的substring()版本

push()向数组(Array)的末尾添加元素，pop()则是把末尾最后一个元素删除

var arr=[ 1 , 2 ];

arr.push('A' , 'B');

console.log(arr); //输出为[ 1, 2, A, B]

console.log(arr.pop()); // 输出为B

console.log(arr); // 输出为[ 1, 2, A]

unshift ()像数组头部添加元素，shift ()则是把头部第一个元素删除

sort()对元素进行排序，直接调用时则默认顺序排列

var arr=new Array(2, 5, 1, 8);

console.log(arr.sort()); // 显示 1 2 5 8

reverse()则是把顺序反转

var arr = ['one', 'two', 'three'];

arr.reverse();

arr; // ['three', 'two', 'one']

splice()从指定位置删除若干元素，再从该位置开始添加一些元素

var arr=['Hello', 'This', 'And', ‘You’, 'Nice', 'To', 'meet'];

arr.splice(1, 3, 'World', '!'); // 表示从下标为1的元素开始，删除3个元素，添加两个元素，即删除了This，And，You

arr; // ['Hello', 'World', '!', 'Nice', 'To', 'meet'];

concat()将两个数组连接起来，返回一个新的数组

var arr = ['A', 'B', 'C'];

var added = arr.concat([1, 2, 3]);

added; // ['A', 'B', 'C', 1, 2, 3]

arr; // ['A', 'B', 'C']

join()方法能将数组中的每个元素都连接起来

var arr = ['A', 'B', 'C', 1, 2, 3];

arr.join('-'); // 'A-B-C-1-2-3'

多维数组

var arr = [[1, 2, 3], [400, 500, 600], '-'];//该数组包含3个元素，其中头两个元素本身也是Array数组

对象

javascript的对象是一种无序的集合数据类型，由一些键值对组成

var xiaoming = {

    name: '小明',

    birth: 1990,

    school: 'No.1 Middle School',

    height: 1.70,

    weight: 65,

    score: null

};

使用{...}来表示一个对象，属性名：值的方式来表示，使用,来隔开，最后一个不需要加,因为容易造成低版本浏览器的不兼容。

xiaoming.name;//获取到`小明`这个值

xiaoming.weight;//获取到`65`

属性名若是特殊字符，则用' '引号表示起来

var xiaohong = {

    name: '小红',

    'middle-school': 'No.1 Middle School'

};

获取该特殊属性的方式如下：

xiaohong['middle-school']; //获取到'No.1 Middle School'

xiaohong['name'];   xiaohong.name;   //这两种方式都获取到值`小红`

当访问一个不存在的属性时，返回为undefined；例如xiaohong.age;将提示undefined

javascript的对象是动态的，即可以自由的为其对象进行增加/删除属性

如上方获取xiaohong.age;将提示undefined。

当给其赋值 xiaohong.age=18; 再输出 xiaohong.age; 则获取到值18

删除属性： delete xiaohong.name;

检测该对象是否拥有该属性可使用in

'name' in xiaohong; //返回true

'age' in xiaohong; //false

使用in判断出的属性也可能是该对象由继承得到的。

要判断该属性是否其自身所拥有，可使用hasOwnProperty()

xiaohong.hasOwnProperty('name'); //true

条件判断

使用if...else

var age = 20;

if (age >= 18) { // 如果age >= 18为true，则执行if语句块

    alert('adult');

} else { // 否则执行else语句块

    alert('teenager');

}

if...else if...else多行条件判断

var age = 3;

if (age >= 18) {

    alert('adult');

} else if (age >= 6) {

    alert('teenager');

} else {

    alert('kid');

}

循环

for循环

var x = 0;

var i;

for (i=1; i<=10000; i++) {

    x = x + i;

}

x; // 50005000

for...in将对象的属性循环出来

var o = {

    name: 'Jack',

    age: 20,

    city: 'Beijing'

};

for (var key in o) {

    console.log(key); // 'name', 'age', 'city'

}

循环数组中的对象属性

var a = ['A', 'B', 'C'];

for (var i in a) {

    console.log(i); // '0', '1', '2'

    console.log(a[i]); // 'A', 'B', 'C'

}

还有while 循环和do..while 循环

Map和Set

用键值对表示对象时，其属性必须为字符串类型；但实际上Number或者其他数据类型作为键也是非常合理的。所以在ES6中引入了新的数据类型Map

举例

要查找某个同学的分数时，通常如下表示方式

var names = ['Michael', 'Bob', 'Tracy'];

var scores = [95, 75, 85];

给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。

如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

m.get('Michael'); // 95

Map有以下的方法

var m = new Map();

m.set('name1',97);

m.set('name2',66);

m.has('name1'); //返回为true，即表示存在该name1的键

m.get('name1'); //返回为 97

m.delete('name1'); //删除name1的键

m.get('name1'); //再获取则显示 undefined

一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();

m.set('Adam', 67);

m.set('Adam', 88);

m.get('Adam'); // 88

Set

Set和Map类似，也是一组key的集合，但不存储value

var s1 = new Set(); // 空Set

var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤：

var s = new Set([1, 2, 3, 3, '3']);

s; // Set {1, 2, 3, "3"}

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);

s; // Set {1, 2, 3, 4}

s.add(4);

s; // 仍然是 Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);

s; // Set {1, 2, 3}

s.delete(3);

s; // Set {1, 2}

iterable

遍历数组可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过for ... of（是ES6的新语法）循环来遍历

var a = ['A','B','C'];

var s = new Set(['A','B','C']);

var m = new Map(['A',1],['B',2],['C',3]);

for (var x of a) { // 遍历Array

    console.log(x); //A B C

}

for (var x of s) { // 遍历Set

    console.log(x); //A B C

}

for (var x of m) { // 遍历Map

    console.log(x[0] + '=' + x[1]); A=1 B=2 C=3

}

相比于前两种循环输出，可以使用forEach()

var a = ['A', 'B', 'C'];

a.forEach(function (element, index, array) {

    // element: 指向当前元素的值

    // index: 指向当前索引

    // array: 指向Array对象本身

    console.log(element + ', index = ' + index);

});

// 输出

// A, index = 0

// B, index = 1

// C, index = 2