JavaScript学习1-快速入门

实验室项目要用到，学长项目前端全是JS写的，而且用的是angular.js框架。

来源：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

这里只是抽取了主干，至于一些细节的东西，具体可以回去查阅，不要想着把工具书背下来。

不强制要求末尾加分号，但是加了会更好理解。

一、数据类型和变量

Number：js只有Number，没有浮点和整数。

字符串：被单引号或双引号括起来的东西。

布尔值：true false

数组：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined

对象：

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};

xiaoming.name; // '小明'
xiaoming.birth; // 1990

Set和Map

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

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

变量

变量本身类型不固定的语言称之为动态语言（js），与之对应的是静态语言（java）

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

显示变量内容

在浏览器里面就能直接跑js了

var x = 100;
console.log(x);

二、if else和Java一样，没什么好说

三、循环

遍历数组，和Java一样

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

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'
}

Iterable是个重要的东西。

Map和Set的遍历。

在Java里面，想遍历Map还挺麻烦。

JS具有iterable类型的集合可以通过新的for ... of循环来遍历（数组/Map/Set）

for of 关注的是里面的元素，for in关注的是对象的属性。

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

iterable内置的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

Set和Map的话，函数参数不一样，因为是不同的数据结构了

//Set回调函数的前两个参数都是元素本身
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

//Map
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});