编程语言 | JavaScript 学习（一）

基本概念

先说几个基本概念：

1. Javascript 和 Java 只有半毛钱关系， 就是当时推广它的公司想蹭java的热点。

2. JavaScript 是解释型语言，他的解释器就是我们的浏览器，由于浏览器版本不同，对同一段JS代码会有不同的解释

3. Web开发必学JavaScript

4. 编译器，我推荐谷歌浏览器的F12键的console

有些公司会在console写点奇奇怪怪的东西

基本语法

变量赋值 var x = 1;
变量：用于表示一组定好的数据结构，javascript是动态语言，不需要声明数据类型，var x =1，但是一个变量只能声明一次。
如果不是以var x=1形式声明的变量都是全局变量。如果一个页面有多个js文件，且都有相同的变量名，那么就会相互影响导致错误。因此ECMA在后续的规范推出了’strict’模式，在js文件前添加'use strict'即可。古老的浏览器未必支持。

语句结束 ;`` 语句块{}注释://`/* */

数据类型和结构

数据类型

数据类型， 计算机用于 表示 不同类型的数据

• Number： 整数和浮点不做区分

• 字符串 '' ""

• 布尔值 true false, 布尔值可以由比较产生 && || !, >, <, <=, >=, ===, isNaN(NaN)

• null表示“虚无之境”，类似于Pyhthon的’None’和R的‘NULL’， undefined表示“未定义”。undefined仅仅在判断函数参数是否传递的情况下有用。

字符串必要知识：

1. 单行字符串用单引号或双引号，多行字符串用反引号

2. 模板字符串，var name ='xzg'; var message = 'hello' + name' 或 var name = 'xzg'; var message = \hello ${name} ` `

3. 字符串操作： var s = 'hello world'. s.length, s[0], s.toUpperCase(), s.toLowerCase(), s.indexOf(‘world’), s.substring(0,5).

4. 字符串不可变

数据结构

数据结构，用于 存放 数据
数组必要知识： [1,2,3’Hello’, true, null], 和Python的[]相同。 可以通过new Array()定义, 不推荐。索引以0为始

1. js的数组可以‘越界’，但不推荐

2. 常用方法: 搜索 indexOf, 切片 slice, 增加删除末尾元素 push,  pop， 头部增加删除元素， unshift, shift, 排序 sort reverse

3. 万能方法： splice(), 在指定索引区域增加和/或若干元素。 连接多个数组 concat, 用指定字符串联数组中的元素 join

4. 多维数组：var arr[[1,2,3], [400,500,600]]

对象必要知识

• 类似Python的字典，C的结构体，由一系列键值对组成，只不过提取数据的方式为对象变量.属性名

• 判断属性，in 包括继承自父类，hasOwnProperty， 自身拥有

var person = {  name:'Bob',  age:20,  tags: ['js','web','mobile'],  city: 'Beijing',  hasCar: true,  zipcode: null}

ES6规范Map和Set

尽管‘对象’长的其他语言的字典很像，但是它不能将除字符串的数据类型当作key。因此，ES6规范引入的两类数据结构，Map和Set。
Map就是字典，存储键值对。

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

Map允许创建后新增，删除，查找键值对。注，Map的一个key只能对于一个value， 不过你可以传入数组Array。

m.set('Adam', 67); // 添加新的key-value

m.set('Bob', 59); m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

Set就是数学的集合，存放非重复元素

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

控制流

JS控制流有两种，条件判断，循环
条件判断, 看一个多层判断语句就好了。 对了，JS把null, undefined, 0, ‘’ 视作false, 因此其他都是true

var age = 20;if (age < 18){  alert('less than 18'); } else if( age < 40){  alert('less than 40'); } else{  alert('big than 40'); }

循环有两种写法，for 和 while

//for
var x = 0;var i;for ( i=1,; i <=1000; i++){  x = x+i } x;

for 常用于遍历数组或者是遍历对象的所有属性。并且提供了 for ... in ... 这类方法。

// 遍历数组
var x = [1,2,3,4,5,6]for (var i in x){  alert(i);  alert(x[i]); }// 遍历所有属性
for (var key in person){  alert(key) }

ES6: iterable 类型

为了处理ES6引入的无下标数据类型， Map和Set, ES6 引入了 ‘iterable’类型， 包括Array、Map和Set。
‘iterable’类型数据用for ... of进行遍历，或者是内置的forEach方法。

//遍历数组
var a = ['A', 'B', 'C'];for (var x of a){
  alert(x);
}/
/遍历集合
var s = new Set(['A', 'B', 'C']);for (var x of s){
  alert(x);
}/
/ 遍历字典
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of m){
  alert(m);
}
//forEach
var a = ['A', 'B' ,'C'];
a.forEach(function(element, index, array){
  alert(elemtn);
})

下次学习函数和面向对象编程

参考资料：

廖雪峰的JavaScripts教程： https://www.liaoxuefeng.com/