ES6 开发环境准备以及基础语法（JavaScript）

1、Node.js

　　Node.js 是服务器端运行的 JavaScript 的开源的，跨平台运行环境　

　　Node.js原始作者 瑞安-达尔，使用了 V8 引擎，并采用事件驱动，非阻塞，异步IO 模型　

　　2010年，npm软件包管理器诞生，通过他，可以方便的发布，分享Node.js的库和源代码

　　Node.js 4.0 引入了ES 6语言特性。

2、安装

　　阿里云镜像站：https://npm.taobao.org/mirrors/node

　　Linux：https://npm.taobao.org/mirrors/node/latest-v8.x/node-v8.11.4-linux-x64.tar.gz

　　windows：https://npm.taobao.org/mirrors/node/latest-v8.x/node-v8.0.0-x64.msi

　　mis安装不需要手动添加PATH 路径，自动回生成。

3、开发

　　文档：

　　　　搜索MDN，Mozilla Developer Network 提供非常完善的HTML，CSS，JS等技术资料。

　　　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

　　　　指南：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

　　开发使用任何的文本编辑器都可以，使用微软的Visual Studio Code 开发

　　　　下载：https://code.visualstudio.com/Download

　　　　　　有代码自动完成功能，还可以安装Node exec插件，将写的js 跑在Node.js上

　　　　

　　　　Node Exec 插件快键键：F8 运行 JS 脚本，F9 停止

　　　　前端开发中，JS 脚本一般来说是为了控制浏览器的网页的，这里使用了VS Code，只是为了调试方便

4、基础语法：

　　4.1、注释

　　　　和C 、Java 一样

　　　　//                单行注释

　　　　/* 注释 */     多行注释，可以写在语句中。　

str = 'hello' + /* this is a test deamo */'JS'
console.log(str)

　　4.2、常量和变量

　　　　标识符　　　　

　　　　　　标识符必须是字母，下划线，美元符号$ 和数字，不能以数字开头

　　　　　　标识符  区分大小写

　　　　声明

　　　　　　var 声明一个变量

　　　　　　let 声明 一个块作用域中的局部变量

　　　　　　const 声明一个常量

　　　　　　JS 中的变量声明和初始化 是可以分开的。

var a // 只是声明 一个变量 a ，console.log(a) a a为undefined
let b
console.log(a,b)
// undefined undefined

a = 1
b = 'a string'
console.log(a,b)
// 1 'a string'

// 常量 ，因为常量，所以声明的时候就需要赋值，负责报错
// 常量一旦声明后，就不能改变, 也不能重复 声明，虽然没有提示，但是打印会提示已经声明过了
const c = 100 

console.log(x)
var y
// 规范的声明并初始化，声明全局或局部变量
// var 会把变量提升到当前全局或函数作用域，也就是说在此之前调用可以找到，但是是undefined
// 如 上面的console.log(x) 返回结果是undefined
var x = 4 

// 不规范的额声明，不推荐，在严格模式下，会报错，
// 在赋值之前不能引用，因为它没有声明，一旦止痒赋值，就是全局作用域
z = 6 

function hello() {
    var q // q 是一个局部变量。作用域在函数中
    q = 100
}

hello()

console.log(q) // 没有定义 q，所以报异常

w = 200 // 不能声明提升
let w = 200 // 不能声明提升
var w = 200 // 声明提升

　　　　变量和常量的选择：

　　　　　　如果明确知道一个标识符方以后不在修改，应该尽量声明成const 常量，减少被修改的风险，减少bug

　　4.3、数据类型

　　　　

　　　　ES是动态语言，弱类型语言。

　　　　虽然先声明了变量，但是变量可以重新赋值任何类型

// 类型转换
// 弱类型
console.log('====== string ======')
console.log(a = 3 + 'jack', typeof(a)) // 只要有字符串，就先转换为字符串
console.log(a = null + 'jack', typeof(a))
console.log(a = undefined + 'jack', typeof(a))
console.log(a = true + 'jack', typeof(a))

// 报错
// console.log(a = symbol + 'jcak', typeof(a))
// console.log(a = object + 'jack', typeof(a))

// 数字
console.log('====== number =======')
console.log(a = null + 8, typeof(a))
console.log(a = undefined + 8, typeof(a)) // undefined 是无法转换成一个对应的数字
console.log(a = true + 8, typeof(a))
console.log(a = false + 8, typeof(a))

// boolean
// & ==> 位与
console.log('====== boolean =======')
console.log(a = null + true, typeof(a))
console.log(a = null + false, typeof(a))
console.log(a = undefined + true, typeof(a))// NaN  ==> not a number
console.log(a = undefined +false, typeof(a)) // NaN
console.log(a = null & true, typeof(a)) // 0
console.log(a = undefined | true, typeof(a)) // 1
console.log(a = undefined | false, typeof(a)) // 0
console.log('====== boolean =======')
console.log(a = undefined & true, typeof(a)) // 0
console.log(a = undefined & false, typeof(a)) // 0


// 短路，从打印结果看，console.log（）后 会有一个空格
// and ===> &&
console.log('====== 短路 =======')
38 console.log(a = null && true, typeof(a)) ------类型是 object

console.log(a = false && null, typeof(a))
console.log(a = false && 'llll', typeof(a))

console.log(a = true && 'llll', typeof(a))
console.log(a = true && '', typeof(a))

// null
console.log('===== null ===== ')
console.log(a = null + undefined, typeof(a))

　　　　　　结果：

Info: Start process (21:17:33)
====== string ======
3jack string
nulljack string
undefinedjack string
truejack string
====== number =======
8 'number'
NaN 'number'
9 'number'
8 'number'
====== boolean =======
1 'number'
0 'number'
NaN 'number'
NaN 'number'
0 'number'
1 'number'
0 'number'
====== boolean =======
0 'number'
0 'number'
====== 短路 =======
null 'object'
false 'boolean'
false 'boolean'
llll string
 string
===== null ===== 
NaN 'number'
Info: End process (21:17:34)

　　　　弱类型，不需要强制类型转换，会隐式类型转换

　　　　NaN 即not a numober 转换数字失败，它和任何值都不等，和自己也不等，只能使用Number.isNaN(NaN)

　　　　总结：

• • • 遇到字符串，加号就是拼接字符串，所有非字符串隐式转换为字符串
    • 如果没有字符串，加号把其他所有类型都当作数字处理，非数字类型隐式转换为数字，undefined特殊，因为它没有定义值，所有转换数字失败得到一个特殊值NaN
    • 如果运算符是逻辑运算符，短路符，返回就是短路时的类型，没有隐式转换
    • 除非十分明确，否知不要依赖隐式转换，往往为了程序的健壮，显示转换

　　4.4、字符串

　　　　将一个值使用 单引号或者 双引号 引用起来就是字符串。

　　　　ES6 提供了反引号 定义一个字符串，可以支持多行，还支持插值、

let a = 'abc'
let b = "123"
let c = `jack
    like
        love
`// 支持多行
console.log(c)

// 字符串插值，要求在反引号字符串中，python3.6支持
let name = 'tom', age = 12
console.log(`hi, my name is ${name}. I am ${age}`)

　　　　结果：

jack
    like
        love

hi, my name is tom. I am 12

　　

　　4.5、转义字符

　　　　

　　4.6、字符串操作方法

　　　　字符串操作方法很多，但是和Python 类似

let school = 'magedu'
console.log(school.charAt(2))
console.log(school[2])
console.log(school.toUpperCase())
console.log(school.concat('.com'))
// 左包右不包，跟python类似
console.log(school.slice(3))
console.log(school.slice(3,5))
console.log(school.slice(-2,-1))
console.log(school.slice(-2))

console.log('================================')
let url = 'www.magedu.com'
console.log(url.split('.'))
console.log(url.substr(7,2)) // 2 是步进数
console.log(url.substring(7,10))// 是 索引范围


console.log('================================')

let s = 'magedu.edu'
console.log(s.indexOf('ed'))
console.log(s.indexOf('ed',4))// 开始索引
console.log(s.replace('.edu','.com'))


console.log('================================')

s = ' 	mag edu 
'
// 去掉两端空白字符
console.log(s.trim())

// 一下是非标准函数，少用
console.log(s.trimLeft())
console.log(s.trimRight())

　　　　　　结果：

Info: Start process (22:01:56)
g
g
MAGEDU
magedu.com
edu
ed
d
du
================================
[ 'www', 'magedu', 'com' ]
ed
edu
================================
3
7
magedu.com
================================
mag edu
mag edu 

     mag edu
Info: End process (22:01:56)

　　4.6、数值型number

　　　　在JS 中，数据均为双精度浮点型，范围只能在 -（2^53 -1）和 2^53 -1 之间，整形也不例外。

　　　　数字类型还有三种符号值：

　　　　　　　　+infinity（正无穷）

　　　　　　　　-infinity（负无穷）

　　　　　　　　NaN：非数字

　　　　二进制：0b0011, 0B0011

　　　　八进制：0755，ES6中最好使用0O最前缀，0o72

　　　　十六进制：0xAA

　　　　指数表示：1E3（1000）， 2e-2(0.02), e 大小写都可以

　　　　常量属性：

var biggestNum = Number.MAX_VALUE
var smallestNum = Number.MIN_VALUE
var infiniteNum = Number.POSITIVE_INFINITY
var negIngfiniteNum = Number.NEGATIVE_INFINITY
var notANUm = Number.NaN

console.log(biggestNum)
console.log(smallestNum)
console.log(infiniteNum)
console.log(negIngfiniteNum)
console.log(notANUm)

console.log(1/0) // Infinity

　　　　　　结果：

1.7976931348623157e+308
5e-324
Infinity
-Infinity
NaN
Infinity

　　　　数学方法：

　　　　

　　　　测试：

a = Number.parseFloat('3')
console.log(a, typeof(a))

console.log(Number.parseInt('3e-3'))

console.log(Number.isFinite(1/0))
console.log(Number.isFinite(1))


console.log(Number.isInteger(1/3))

console.log(Number.isNaN(undefined))
console.log(Number.isNaN(NaN))

　　　　结果：

3 'number'
3
false
true
false
false
true

 　　　　内置数学对象Math　

console.log(Math.PI)
console.log(Math.abs(-1))
console.log(Math.log2(16))
console.log(Math.sqrt(2))
console.log(Math.random()) // 0-1之间的随机数，全开



Info: Start process (22:31:58)
3.141592653589793
1
4
1.4142135623730951
0.2193407529306861
Info: End process (22:31:59)

　　4.7、运算符

　　　　算数运算符： + - *  / % 等跟python一样

　　　　测试：

console.log(1/2) // 该怎么除就怎么除
console.log(1/0) // 没有异常，且正无穷 
console.log(5 % 3) // 余数，取模
console.log('=========================================')
console.log(parseInt(1/2)) // 同Number.parseInt()
console.log(parseInt('1/2')) // 同Number.parseInt()
console.log(parseInt(3/2)) // 同Number.parseInt()
console.log(parseInt('3/2')) // 同Number.parseInt()
console.log(parseInt(2e3)) // 同Number.parseInt()
console.log(parseInt('2e3')) // 同Number.parseInt()
console.log('=========================================')
console.log(Math.floor(3/2))
console.log(Math.ceil(3/2))
console.log(Math.round(3/2))
console.log(Math.round(1/2))// 四舍五入，不同于python
console.log(Math.round(2/5))
console.log(Math.round(3/5))

　　　　结果：

Info: Start process (10:44:15)
0.5
Infinity
2
=========================================
0
1
1
3
2000
2
=========================================
1
2
2
1
0
1
Info: End process (10:44:16)

　　　　++ 和 --

　　　　单目运算符，代表变量自增，自减

　　　　i++, 先用 i， 用完之后 i 再自增 加 1

　　　　++ i ，先加 1 ，在使用 i

　　　　测试：

let i = 0
let a = i++
console.log(a, i) // 0,1
console.log(a, i++)//0,1
a = ++i// 3,
console.log(a, ++i)// 3,4


i = 0;
let b = ++i+i+++i+++i;
console.log(b, i)

// 单目优先级高于双目
//  ++i   +   i++  +  i++  + i
//    1       1       2       3


----------------------------------------------------------------
Info: Start process (10:55:33)
0 1
0 1
3 4
7 3
Info: End process (10:55:34)

　　　　比较运算符：

　　　　　　> ,  < ,  >=,   <=,  !=,  ==,  !==,  ===

　　　　　　==：宽松相等，进行类型转换

　　　　　　===：严格相等，不进行类型转换

　　　　　　测试：

console.log(100 > '200')
console.log(300 > '200')
console.log(300 > '2000')
console.log(3000 > '2a')
console.log('3000' > '2a')
console.log('3e' > '2a')
console.log('3000' > '2000')
console.log('===============================')
console.log(300 == '300')
console.log('200' =='200')
console.log(300 === '300')
console.log('200' === '2000')
console.log('200' !== 200)



---------------------------------------------------------------
Info: Start process (11:06:23)
false
true
false
true
true
true
===============================
true
true
false
false
true
Info: End process (11:06:23)

　　　　　像上面的是3000 > '2a' 就没法比较了，所以使用宽松比较的时候，尽可能保证 类型相同，，否则会引起隐式转换，而且隐式转换的规则很复杂不好把控

　　　　　如果不知道类型是否一致，就使用严格等 ，也是建议使用的。

　　逻辑运算符：

　　　　　&& || ！  与，或， 非

　　　　　　这些运算符和其他高级语言都一样，支持短路

　　位运算符：

　　　　& | ^ ~ <<  >> 位与，位或，异或，取反，左移，右移，和python一样

　　三元运算符：

　　　　条件表达式 ？ 真值：假值

　　逗号操作符：

　　　　JS 运行多个表达式写在一起

let a = 4+5, b = true, c=a >20 ? 't':'f'
/**
 * 分别执行：
 *      a = 4+5  // 9
 *      b = true
 *      c = 'f
 */
console.log(a) // 9
console.log(c) // 'f'

function test(){
    return 3, a + b, c = a++;
    /**
     * 因为 return 返回一个值，就是最后一个逗号之后的结果
     * 前面有几个结果都不管
     */
}

console.log(test())
console.log(c)
console.log(a) // 10
console.log('==================================')

　　　　结果;

9
f
9
9
10
==================================

　　　　测试：函数可以后定义？？，测试发现，调用了后面的函数

let a = 4+5, b = true, c=a >20 ? 't':'f'
/**
 * 分别执行：
 *      a = 4+5  // 9
 *      b = true
 *      c = 'f
 */
console.log(a) // 9
console.log(c) // 'f'

function test(){
    return 3, a + b, c = a++;
    /**
     * 因为 return 返回一个值，就是最后一个逗号之后的结果
     * 前面有几个结果都不管
     */
}

console.log(test())
console.log(c)
console.log(a) // 10
console.log('==================================')

///////////////////////////////////////////////////
function test(){
    a++;
    return a++;
}

console.log(test())
console.log(a)


------------------------------------------------------------------------

9
f
10
f
11
==================================
12
13

 　　

　　其他一些方法：

　　

 　　

console.log('a' instanceof String)
console.log(1 instanceof Number)


a = new String('b')
console.log(a instanceof String)
console.log(new Number(1) instanceof Number)
console.log(a instanceof Object)

console.log(typeof('a'))
console.log(typeof 'a')
console.log(typeof a)


----------------------------------------------------------------------
Info: Start process (11:41:32)
false
false
true
true
true
string
string
object
Info: End process (11:41:33)

　　　　instanceof 要求必须明确使用类型定义变量，就是对象必须是 new关键字 声明创建的，它可以用于继承关系的判断。

　　　　typeof 就是返回对象的类型字符串

 　　　　测试：删除

x = 42;
var y = 43;
let z = 60;
myobj = new Number();
myobj.h = 4;
console.log(delete x) //可以删除 隐式定义的
console.log(delete y) // 不可以 删除var， let声明的变量
console.log(delete z)
console.log(delete Math.PI) // 不能删除预定义的属性
console.log(delete myobj.h) //可以删除用户定义的对象属性
console.log(delete myobj) // 可以删除，隐式定义的 对象
console.log('========================================')

var trees = new Array('a', 'b', 'c', 'd', 'e')
for(var i=0;i<trees.length;i++){
    console.log(trees[i])
}


可以看到 即便删除了某个元素，但是这个位置还在。
console.log('========================================')
delete trees[3]
for(var i=0;i<trees.length;i++){
    console.log(trees[i])
}

　　　　　　结果；

Info: Start process (12:04:55)
true
false
false
false
true
true
========================================
a
b
c
d
e
========================================
a
b
c
undefined
e
Info: End process (12:04:56)

 　　　　测试：索引，数组

let trees = new Array('a','b','c','d','e')
console.log(0 in trees)// 0 在属组对象的 index中
console.log(3 in trees)
console.log('a' in trees) // a 不是属性，是一个数组中的值
console.log('length' in trees) // length 是对象的属性
console.log(trees.length)
console.log('===========================================')
delete trees[3]
console.log(3 in trees);// 虽然位置在，但是索引 里已经删除了，也不会挪动
for(var i=0;i<trees.length;i++){
    console.log(trees[i])
}
console.log('===========================================')
let mycar = {
    color:'red',
    year:1999,
}
console.log('color' in mycar)
console.log('model' in mycar)

　　　　结果：

Info: Start process (12:15:40)
true
true
false
true
5
===========================================
false
a
b
c
undefined
e
===========================================
true
false
Info: End process (12:15:40)

 　　运算符优先级：从高到底

　　　　

 　表达式：

　　　　基本表达式，和python差不多

　　　　解析式也和Python差不多，但是在ES6 中非标准 不推荐使用

　　　　生成器推荐使用生成器函数，ES6 开始支持

 　　测试：生成器函数

function * inc(){
    let i = 0;
    let j = 4;
    while (true) {
        yield i++;
        if(!j--) return 100;
    }
}

let gen = inc()
for(let i=0;i<10;i++){//循环10次
    console.log(gen.next())
}

 　　结果：不同于python， 即便是return值，也会返回，结束后，不会抛异常

Info: Start process (12:27:58)
{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: 100, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
Info: End process (12:27:58)

 　　每次调用next() 方法返回一个对象，这个对象包含两个属性：value 和done

　　value：属性表示本次yield 表达式的返回值

　　done：属性为布尔值，false表示后续还有yield语句执行，ture：如果执行完或return后

 5、语句块：

 　　JS 使用大括号 构成语句块

　　ES6 之前的语句块是没有 作用域的，从ES6 开始支持 块作用域的， let只能在块作用域内可见。

　　测试：自定义变量的作用范围，隐式定义，var ， let

function hello(){
    let a = 1
    var b = 2
    c = 3
}

// let d = 10
if (1) {
    let d = 4;
    var e = 5;
    f = 6
    if (true) {
        console.log(d)// 可以看到 d
        console.log(e)
        console.log(f)
        console.log('================')
        g = 10
        var h = 11
    }
}

hello() // 先调用

// console.log(a) // 不可见，因为let 只要遇到{} 就出不去
// console.log(b) // 不可见，因为var 遇到函数 就出不去
console.log(c) // 可见，c 隐式定义，在哪里都是全局的
// console.log(d) // 不可见，遇到 {} 出不去，但是内部的看可以看到
console.log(e) // 可见
console.log(f) // 隐式声明，可见
console.log(g) // 可见
console.log(h) // 可见

　　

　　

　　

　　js,css 是支持压缩的。python是不支持压缩 的，严格缩进

6、流程控制：

　　6.1、条件分支：

 　　　　

　　　　条件的False 等效：

　　　　　　　　false， undefined，null， 0， NaN， 空字符串

　　　　　　测试：等效 false　　　　　　

a = [null, NaN,0, undefined,false, '', [], {}]
for (let i=0;i<a.length;i++){
    console.log(a[i], i, typeof(a[i]), '==================')
    if (a[i]) {
        console.log('true')
    } else {
        console.log('false')
    }
}

　　　　　　结果：

Info: Start process (12:33:09)
null 0 'object' '=================='  // null 是object 类型
false
NaN 1 'number' '=================='
false
0 2 'number' '=================='
false
undefined 3 'undefined' '=================='
false
false 4 'boolean' '=================='
false
 5 string ==================
false
[] 6 'object' '=================='
true
{} 7 'object' '=================='
true
Info: End process (12:33:09)

　　　　

　　6.2、 switch...case 分支语句

　　　　

　　　　　　这里最大的问题，就是会有 穿透问题，一定要在case中恰当的使用break，否则就会继续顺序执行下去

　　　　测试：穿透， 如果 x 值不在case 中，就执行default

　　　　

　　6.3、for循环

　　　　

　　　　测试：　　

　　　　

　　　　* ------条件满足，才进入，初始化条件，不满足条件，直接退出。

　　　　* ------执行完后，在到循环条件执行

　　　　* ------在执行循环条件，做判断，如果不满足，就直接退出

　　6.4、while， do...while 循环

　　　　

　　　　while：先判断，在循环

　　　　do...while： 先循环， 在判断

　　　　测试：　　

let x = 10
while (x--) {//先用10，判断10 是等价 true，再-- 就是9
    console.log(x)
}
console.log('===========') 
// 上面执行结束之后 x == -1
do {
    console.log(x);
} while(x++ < 10) // -1 < 10, x += 1

　　　　结果：

Info: Start process (13:30:01)
9
8
7
6
5
4
3
2
1
0
===========
-1
0
1
2
3
4
5
6
7
8
9
10
Info: End process (13:30:02)

 　　九九乘法表：（正常模式）

for (let i=1;i<10;i++) {
    line = ''
    for (let j=1;j<=i;j++) {
        line += `${j}*${i}= ${i*j}  `;
    }
    console.log(line)
}

 　　　　结果：

 1 Info: Start process (13:42:18)
 2 1*1= 1  
 3 1*2= 2  2*2= 4  
 4 1*3= 3  2*3= 6  3*3= 9  
 5 1*4= 4  2*4= 8  3*4= 12  4*4= 16  
 6 1*5= 5  2*5= 10  3*5= 15  4*5= 20  5*5= 25  
 7 1*6= 6  2*6= 12  3*6= 18  4*6= 24  5*6= 30  6*6= 36  
 8 1*7= 7  2*7= 14  3*7= 21  4*7= 28  5*7= 35  6*7= 42  7*7= 49  
 9 1*8= 8  2*8= 16  3*8= 24  4*8= 32  5*8= 40  6*8= 48  7*8= 56  8*8= 64  
10 1*9= 9  2*9= 18  3*9= 27  4*9= 36  5*9= 45  6*9= 54  7*9= 63  8*9= 72  9*9= 81  
11 Info: End process (13:42:19)

 　　6.5、for... in 循环

 　　　　对象操作语句 用来遍历 对象的属性。

 　　　　

 　　　　测试：

　　　　 

 　　　　注意：for in 循环返回的是索引，需要间接的访问值，数组反正返回的是索引，，C风格for循环操作可能方便点

 　　6.6、for...of 循环

 　　　　ES6 新语法

 　　　　

 　　　　注意: for...of 不能迭代对象，

　　　　　　原因是 of 后面必须是一个迭代器，

　　　　break，continue：

　　　　for迭代的 差别：