ES6 基本语法

测试 Node 环境支持 ES6 的程度

# 在系统的终端中执行 npm 安装一个包
npm install -g es-checker

# 之后在系统的终端中执行如下命令
es-checker

把一个对象(变量的值) 输出到终端

console.log("Hello JavaScript")

在浏览器中把一个对象(变量的值) 以一个小弹窗的方式显示出来

alert("Hello JavaScript")

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量,一对大括号{}内的代码都称为一个作用域

Es6 中的 let 和 const 声明的变量

let 声明的变量只在它所在的代码块有效，在同一个代码块(作用域)下，不可以重复声明，可以被重新赋值

const 声明的常量只在它所在的代码块有效，在同一个代码块(作用域)下，不可以重复声明，并且不可以被重新赋值(基本类型的数据)。

逻辑运算符和判断

== 比较值相等 1 == "1" 会返回 true

!= 不等于

=== 同时比较值和类型相等 1 === "1" 会返回 false

|| 或

&& 且

if

if(条件){
        // 条件成立后执行的代码
    }else if(条件){
        // 条件成立后执行的代码
    }else{
        // 以上条件都不成立要执行的代码
    }

switch

switch(name){                 // name 一个变量
        case '1':             // 若果 name 的值等于 "1" 
            age = 123;        // 执行下面这段代码
            break;
        case '2':             //  若果 name 的值等于 "1"
            age = 456;        //  执行下面这段代码
            break;
        default :             //  上面的值都没有匹配到
            age = 777;        //  则执行这段代码
    }

三元运算符

//  var n = 判断条件 ? 条件为真时执行的表达式 : 条件为假时执行的表达式
var x = 3
var n = x >= 2 ? 5 + 1 : 10
console.log(n)  // 6

普通函数

// 普通函数
    function func(arg){
        return true;
    }

匿名函数

// 匿名函数  特点： 可以被当做参数传递；常用
function(arg){
    return "tony";
}
 
// 匿名函数的应用
function func(arg){
    arg()
}
func(function (){
    console.log(123);
})

自动执行 的函数

// 自动执行的函数
(function(arg){
    console.log(arg);
})('123')

数据类型及其操作

可以使用 typeof 查看类型

typeof(li)
typeof name
typeof true
typeof false

字符串常用的操作方法

/*长度，注意这是个属性，不是函数，不要加小括号()*/
obj.length
 
/*移除两端的空白字符*/
obj.trim()

/*移除左边空白 - 自修*/
obj.trimLeft()

/*移除右边空白 - 自修*/
obj.trimRight)

/*拼接*/     
obj.concat(value, ...)      
          

/*全部转换为小写*/
obj.toLowerCase()   

/*全部转换为大写*/
obj.toUpperCase()   

/*分割，返回的是分割好的列表形式；*/
obj.split(delimiter, limit)
          delimiter /*以此字符为标识进行分割，此字符不会出现在分割后的结果里；*/
       
          limit     /*从分割后的结果中，取出总共几个元素。*/

es6新加入的方法
// startsWith 判断字符串以什么字符为开始，返回一个布尔值
var str = "http://www.qfedu.com"
if (str.startsWith("http://")){
    console.log("http 地址")
} else if(str.startsWith("git")){
          console.log("git 地址")
};
// endsWith  判断字符串以什么为结尾
if (str.endsWith("com")){
    console.log("国际域名")
}

// includes  判断某些字符串是否存在其内
var s = "hello world ";
console.log(s.includes(' '));

数组常用操作方法

// 创建数组
var li = []
var obj = [1, 2, 3]

// 数组元素的数量
obj.length

// 尾部追加元素，会真实的改变原列表
obj.push('c')

// 会删除掉列表里的最后一个元素，并且将这个元素返回
obj.pop()

// 从头部插入一个元素
obj.unshift("shark") 

// 从头部移除一个元素
obj.shift()        

// 切片；start 起始索引位置，被包含；end 终止索引位置，不被包含
obj.slice(start，end)

// 反转
obj.reverse()      

// 将数组元素连接起来以构建一个字符串；
// sep 是一个任意字符
// 拼接后的结果，每个元素之间会以此字符为连接字符，元素类型没有限制，在Python中元素必须是字符。
obj.join(sep)      

// 拼接数组, 原来的数组不变，返回拼接好的新对象。
var new_arr = obj.concat(arr1,arr2,..)

// 查找元素的索引号
obj.indexOf(1)

数据遍历

const arr = ['a', 'b'];

//  ES5 中得到 索引号
for (let i in li){
    console.log(i); 
}


ES6 还提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
for (let index of arr.keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of arr.values()) {
  console.log(elem);
}
// 或者
for (let i of li){
    console.log(i); 
}
// 'a'
// 'b'

// 同时遍历值和索引号
for (let [index, elem] of arr.entries()) {
  console.log(index, elem);
}

// 或者使用 forEach 需要配合函数
li.forEach(function (value,index) {
    console.log(index,value)
});
// 0 "a"
// 1 "b"

Map的使用

Map 更像是 python 中的字典

const m = new Map();
m.set("a", 'hello');
console.log(m.get("a"));  //hello

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"


5）delete(key)

delete方法删除某个键，返回true。如果删除失败，返回false。

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false
（6）clear()

clear方法清除所有成员，没有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

序列化 JSON

JSON.stringify(obj) 序列化 将 JS 的数据类型（对象或数组）转化为 JSON 标准数据，在 开发语言中这个数据的类型是字符串。
JSON.parse(str) 反序列化 将含有 标准的 JSON 数据转化为 JavaScript 相应的对象

// 序列化，转化为 JSON
var json_arr = [1,'a',2,'b']
var json_str = JSON.stringify(json_arr)

var json_o = {'a': 1}
var json_str = JSON.stringify(json_o)

// 反序列化，转换为 对象
JSON.parse(json_str)
JSON.parse('{"a":1}')

注意：
留心 JSON 数据的单、双引号。
JSON 的数据中，字符串表示的，都必须使用双引号，最外层使用单引号。

JSON 的简写 重要

let a = 10
let b = 20

var json = {
    a,    // 相当于'a': a
    b,
    'c': 30,
    show(){
    console.log(this.a)
    }
}

json.show()   //10

获取时间

var da = new Date();
 
// 获取当前年份： 2018
var year = da.getFullYear();
 
// 获取当前的月份，注意 JavaScript 的月份是从 0 - 11 的，所以需要加上 1
var month = da.getMonth()  + 1;
 
// 当前日期 ：
 var day = da.getDate();
 
// 当前小时：
var hours = da.getHours();
 
// 当前分钟：
var minutes = da.getMinutes();
 
// 当前秒 ：
var seconds = da.getSeconds();
 
// 把获取到的字符串，按照一定的格式（自定义的）拼接起来
// ES 5
var date_str = "当前时间： " + year + "-" + month + "-" + day + " " + hours+":"+ minutes + ":" + seconds;

// ES 6
var date_fmt = `当前时间: ${year}-${month}-${day}
    ${hours}:${minutes}:${seconds}`;
alert(date_fmt);

ES5 中实现对象的方式

但是在定义一个类的时候不同的版本是不同的。
ES5 中，定义一个函数，并且这个函数名的首字母大写即可。 首字母大写是规则，不是必须的语法。

ES6 中，可以使用 class 这个关键字了。

this 关键字相当于 python 中的 self， 不同的是在定义一个类方法时 this 关键字不是必须的参数。所以 this 一般总是用在定义变量和使用上变量上。
原型 prototype

之前的方式会在每次创建实例的时候，函数是属于每个对象的，所以在每次创建新对象的时候，函数都会被创建一次。

利用原型可以实现方法的重用，不论创建多少实例，方法不会每次都被重新创建。

function Foo(name,age){
    this.Name = name;
    this.Age = age;
}

Foo.prototype.show = function(){
    console.log(this.Name);
}

ES6 中实现对象的方式： class

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    showName() {
        return  this.name;
    }
}

var p1 = new Person("shark",18);
console.log(p1.showName())
constructor 方法
类似 python 中的 __init__

constructor 方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

一个类必须有 constructor 方法，如果没有显式定义它，一个空的 constructor 方法会被默认添加。

其实和 python 差不多，语言都是相通的。

class Person {
}

// 等同于
class Person {
  constructor(){}
}

继承(扩展)
Class 可以通过extends关键字实现继承。

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

showName() {
    return  this.name;
}

}

class TeacherPerson extends Person {
constructor(name, age, level) {
super(name, age); // 调用父类的constructor(x, y)
this.level = level;
}

showLevel() {
    return `${this.showName()} - ${this.level}`;
}

}
var t = new TeacherPerson("shark", 18, 12);
console.log(t);
console.log(t.level);
console.log(t.showLevel());
super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。