ECMAscript

ECMAScript

1. ECMAScript

ECMAScript：JavaScript的规范
ECMA-262号文件 - JavaScript
循环的方法：

var ary = [1,2,3,4,5];

//  for循环   
for(var i = 0;i < ary.length;i++){
    console.log(ary[i]);
}

//  forEach 
ary.forEach(function(value){
    console.log(value);
})

//  for..in..
for(var i in ary){
console.log(ary[i]);    
}

for-of

//  for..of..用法 - ES6推出的循环 - 优点：
for(var k of ary){//k 指代循环中要循环多少次
    console.log(k);
    if(k == 3){
        break;
    }
}


for..of..的特点 - 用于遍历数据-例如数组中的值
1.是最直接、最简洁的遍历数组元素的语法
2.避免了for..in..(用于遍历对象属性)循环的所有缺陷
3.但与forEach()不同，它可以正确响应break、continue和return语句

for-of,不仅支持数组，还能支持大部分类数组对象，也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历
for(var chr of "){
    console.log(chr);
}

还支持Map和Set对象遍历
// 基于单词数组创建一个Set对象
var uniqueWoeds = new Set(words);
for(var word of uniqueWoeds){
    console.log(word);
}

安装bebal插件

安装bebal
npm list
npm install -g babel-cli   -  安装bebal插件

npm init  - 初始化整个项目
npm install bebal-preset-es2015  -  下载babel插件
babel 文件名 --prests es2015  - 对代码进行编译 
babel 文件名 -o 新的文件目录 --prests es2015  - 对代码进行编译再转入到新的文件中 

ES6生成器

function* addCount(){
    for(var i = 0;;i++){
        yield i;
    }       
}
var add = addCount();
var count = document.getElementById("count");
count.onclick = function(){
    console.log(add.next().value);
}

反撇号(`)的操作

var name = "小强";
var Student = function(name){
    this.name = name;
}
var str = new Student("张三");
console.log(`hi,${str.name}`);
${} 只能写在`` 两个`之间

不定参数...

var sayHello = function(...values){
    for(var k of values){
        console.log(k);
    }
}
sayHello("李四",20);

var sayHello = function(name="没有名字",...values){//name="没有名字" - 将name 设置默认参数 "没有名字"
    console.log(["name",name])
    for(var k of values){
        console.log(k);
    }
}
sayHello("李四",20);

解构器

把一个数组或对象的属性赋给各种变量
var ary = [];
var [first,second,third] = ary;
console.log(first,second,third);

对象的解构
var stu = {name:"张三",age:20}
var {name:a,age:b} = stu;
console.log(a,b);

({a} = {a:100});
console.log(a);

箭头函数

箭头函数的this是没有自己的作用域，指向的是外部继承的this

var func = (a)=>{console.log(a)}
func(100);//100

var func = (a)=>console.log(a)
func(100);//100

var func = (a)=>{a++;console.log(a)}
func(100);//101

document.getElementById("count").onclick = () => console.log(123)；//123

var stu = {name:"张三",age:20,show:function(){
    (() => console.log(this))()
}}
var {name:a,age:b} = stu;
console.log(a,b);
stu.show();//Object {name: "张三", age: 20}

第七种类型 - Symbols

可作为一个唯一的属性，它的值是独一无二
var key1 = Symbol();
var key2 = Symbol();
console.log(key1);//Symbol()
console.log(key2);//Symbol()
console.log(key1 == key2);//false

集合

Set(); - 本身就具有去重功能
var set1 = new Set();
set1.add(1);
set1.add(2);
set1.add(3);
set1.add(1);
for(var k of set1){
    console.log(k);//1 2 3 
}

Map(); - 
var map = new Map();
map.set("name","张飞");
map.set("age",20);
for(var [key,value] of map){
    console.log(key + " " + value)；//name 张飞 age 20
}

类 - Class

class Student{
    set name(name){
        this._name = name;
    }
    get name(){
        return this._name;
    }
    show(){
        console.log("hi,"+this.name);
    }
}
var stu = new Student();
stu.name = "tom";
stu.show();

super()；//调用父级的构造函数 - 必须写到第一句

let 和 const

let - 块作用域 - 在什么地方声明就属于谁，不存在变量提升的问题
const - 定义常量(不可变，变量不可更改)