JS-ES6初识详解

let和const

let

块级作用域：一种普遍存在于各个语言中的作用域范围；

    {
      var a = 10;
      let b = 20;
     }
     console.log(a)//10
     console.log(b)// b is not defined

在一个大括号中用let声明的变量在外部不可访问了，每个大括号都是独立的作用域

有了let声明我们在函数外部就无法访问到 i ，i作为下标只存在于for循环中， 所以，这个时候每个i都是独立的；我们在点击的时候可以轻易的获取当前元素的下标，而不用做很多繁琐的处理了

var aLi = document.querySelectorAll("li");
for(let i = 0;i<aLi.length;i++){
  aLi[i].onclick = function(){
    alert(i);
  }
  console.log(i);//0  1  2  3
}

JS中var声明一个变量是存在声明提升的，这是JS中的一个缺陷所在， 但是现在的let不存在声明提升

        // console.log(a);//undefined
        // console.log(b);//b is not defined
        // var a = 10;
        // let b = 20;
        let a = 20;
        function foo(){
            console.log(a);
            let a = 10;
        }
        foo();//a is not defined
        //报错,暂时性死区
        //js预编译的时候发现有一个局部的a,所以就不会再去寻找全局的a
        //但是在执行的时候他发现局部的a在后面let声明的,所以报错

ES6规定在某个区块中， 一旦用let或const声明一个变量，那么这个区块就变成块级作用域，用let 或者const声明的变量即为该区块绑定， 该变量不受任何变量影响。 在该变量使用let声明前不可以用。在语法上，我们叫这种情况为：暂时性死区 (temporal dead zone，简称 TDZ)

const常量

声明常量:

const a = 20;//常量:不能被修改的量
a = 30;    
//Uncaught TypeError:Assignment to constant variable.(未捕获的类型错误:赋值给常量变量)

console.log(Math.PI);//3.141592653589793
        Math.PI = 4;
        console.log(Math.PI);//3.141592653589793

const arr = [2,3,4,5];
        //arr = [3,4,4,6];
        //不能修改数组或对象的引用,但是可以通过API取修改内部结构
        arr.push(6,7);
        console.log(arr);//[2, 3, 4, 5, 6, 7]

扩展运算符 ...

三个点号，功能是把数组或类数组对象展开成一系列用逗号隔开的值

var arr = [1,2,3,4,5];
        console.log(arr);//Array(5)
        console.log(...arr);//1 2 3 4 5   console.log 不会显示逗号，中间其实是有逗号的
        function add(arr){
            arr.pop();
            console.log(arr);
        }

 var foo = function(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);
//使用扩展运算符
foo(...arr);
//1
//2
//3

rest运算符

rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

 //主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}
bar(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]

字符串扩展(了解)

1.字符串的 Unicode 表示; 规则为\u + 四位十六进制;

 //例如: console.log("\u0061");

打印结果是 a；

这种新的字符表示方式只能表示 \u 0000 ~ \u ffff 之间的数字。 如果超出范围必须用双字节表示;

  console.log("\uD842\uDFB6"); 

打印结果是 𠮶 如果不按照规则熟悉书写 例如 console.log("\uD842\uDFB69") 这个9是多余字符； 那么则认为这段字符是 \uD842\uDFB6 + 9 所以打印结果是 𠮶9；

如果想要一次性表示超出范围的字符那么我们可以使用{}来表示； 例如: console.log("\u20BB9"); 这个的打印结果是 拆分开来的 ₻9 console.log("\u{20BB9}"); 这个打印的结果是一个完整的字符

ES6支持多种格式的字符表示;

字符串模板扩展：

ES6中存在一种新的字符串， 这种字符串是 以 (波浪线上的那个字符 > 反引号)括起来表示的；

通常我们想要拼接一个带有标签的字符串， 是用这样的方式:

      bianliang + " <strong>这是一个文字" + obj.name + "</strong> " + bianliang

但是有了ES6字符串一切都变得非常简单了;

      `  ${bianliang} <strong>这是一个文字${obj.name}</strong>${bianliang} `

用 ${ } 扩住变量让拼接变得非常容易; 非常简单的换行；

      `In JavaScript \n is a line-feed.`     
      console.log(`string text line 1
      string text line 2`);

当我们想要在字符串中使用 `反引号的时候我们需要进行转义；

      `\`Yo\` World!`    //"`Yo` World!"

模板还可以调用函数；

      function fn() {
      return "Hello World";
}
      `foo ${fn()} bar`

字符串的新增方法:

repeat()重复功能

 'x'.repeat(3)  //xxx；
  重复字符串;

includes() startsWith() endsWith();

判定字符串中是否存在某个字符串;

var s = 'Hello world!';

s.startsWith('Hello') // true   以参数开头

s.endsWith('!') // true            以参数结尾

s.includes('o') // true             包括参数;

第二种方法接受第二个参数，第二个参数表示从第几位开始;

  var s = 'Hello world!';

  s.startsWith('world', 6) // true

  s.endsWith('Hello', 5) // true

  s.includes('Hello', 6) // false

for of

一种新的遍历方式; for of 可以用于遍历字符串：

      var s = "abc";
      for(let  b of s){
           console.log(b) // "a"  "b"  "c"
       }

=>箭头函数

var test = function(x){
    return x+2;
}

使用箭头函数： var test = x =>x+2; var 函数名 = 参数 => 运算规则;

如果箭头函数只有一个形参,那么可以省略小括号

    var foo = str => {
    console.log(str);
            }

如果函数体只有一句话,那么可以省略大括号

    var foo = str => console.log(str);

如果只有一句话,并且这句话就是return,可以省略return关键字

var foo = str => str+"abc";
console.log(foo("fooo"));

箭头函数会自动绑定this(箭头函数没有自己的this)

document.querySelector("button").onclick = function(){
                setTimeout(() => {
                    console.log(this);
                },1000);
            }

缺陷

第一： 箭头函数是不能new的，它的设计初衷就跟构造函数不太一样 第二： 箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=>({id:3, val=20})

解构赋值

var obj = {name:"lisi", age:80, gender: "female"};
            var {age, name, gender="male"} = obj;
            console.log(age, name, gender); 
            
var json = [
    {name:"lisi", age:80, gender: "female"},
    {name:"liwu", age:70, gender: "male"},
    {name:"liliu", age:60, gender: "female"}
        ]
            
var [{age},{name},{gender}] = json;
    //var {name} = b;
    console.log(name);

Symbol类型 第六种基本数据类型Symbol

Symbol函数会生成一个唯一的值可以理解为Symbol类型跟字符串是接近的 但每次生成唯一的值，也就是每次都不相等，至于它等于多少，并不重要 这对于一些字典变量，比较有用

var s1 = Symbol();
var s2 = Symbol();
var s3 = Symbol("abc");
var s4 = Symbol("abc");

s1不等于s2
s3不等于s4

利用Symbol类型的案例：点击div变色

var obj ={
                red: Symbol(),
                blue: Symbol(),
                green: Symbol(),
                yellow: Symbol()
            }
            var color = obj.red;
            //适用于只需要关心状态(属于哪个状态)
            //但是不用知道内部结构(不关心值为多少)
            document.querySelector("div").onclick = function(){
                if(color === obj.red){
                    this.style.background = "blue";
                    color = obj.blue;
                }else if(color === obj.blue){
                    this.style.background = "green";
                    color = obj.green;
                }else if(color === obj.green){
                    this.style.background = "yellow";
                    color = obj.yellow;
                }else if(color === obj.yellow){
                    this.style.background = "red";
                    color = obj.red;
                }
            }

Set和Map结构

set

Set集合是默认去重复的，但前提是两个添加的元素严格相等 所以5和"5"不相等，两个new出来的字符串不相等

Set集合，本质上就是对数组的一种包装 例如：

 let imgs = new Set();
imgs.add(1）;
imgs.add(1）;
imgs.add(5）;
imgs.add("5"）;
imgs.add(new String("abc")）;
imgs.add(new String("abc")）;
// 打印的结果： 1  5  '5'  'abc'  'abc'

下面展示了一种极为精巧的数组去重的方法

var newarr = [...new Set(array)];

set集合遍历:

1.根据KEY遍历

 var imgs = new Set(['a','b','c']); 
 //根据KEY遍历
for(let item of imgs.keys()){
    console.log(item);
} //a //b //c

2.根据VALUE遍历

 //根据VALUE遍历
for(let item of imgs.values()){
    console.log(item);
} //a //b //c

3.根据KEY-VALUE遍历

for(let item of imgs.entries()){
    console.log(item);
 } //['a','a'] //['b','b'] //['c','c']

4.普通for...of循环

 //普通for...of循环(for...of跟for-in的区别很明显，就是直接取值，而不再取下标了)
for(let item of imgs){  
  console.log(item);
} //a //b //c

map

Map集合,即映射

 let map = new Map();
map.set("S230", "张三");
map.set("S231", "李四");
map.set("S232", "王五");
map.get("s232"); // 获取某一个元素   王五
for(let [key,value] of map)
{console.log(key,value);}
 //循环遍历，配合解构赋值 

class的写法 语法糖(了解)

Class保留字终于成了关键字 以前编写一个构造函数（类）

function Pad(color){
    this.color = color;
}

现在的写法跟Java更接近了

class Iphone{
    constructor(color, size){
            this.color = color;
            this.size = size;    
     }    
playgame(){
           //.............    
}    
toString(){
          return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;
    }
}

我们定义了一个类，名字叫Iphone 通过类生成一个实例： var iphone = new Iphone("白色", 5);

其中constructor被称之为构造方法，在我们new 一个对象的时候，自动被调用

不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已 跟以前的构造函数没有区别。

要注意的是，使用了class来定义类，必须先定义再使用