ES6（基础）

ES6的概念

• 新版本：ECMAScript5.1 ，ECMAScript6.0(ES6) 新的语法标签

• 解决了ES5的一些问题，增加了一些新的功能，新的方法

  var a = 10;

  var a = 20;

• ES版本

  1995年js诞生 -- 1997：ECMAScript1.0

  ES5:2009 ES6:2015

• ECMAScript与JavaScript的关系？

  • ECMAScript是JavaScript的语法标准

  • JavaScript是ECMAScript的具体体现

let与const命令

let声明变量，const用于声明常量

1 let命令，声明变量

• 语法：let 变量名 = 值；

  /*
      let:声明变量的
      语法：let 变量名 = 值
  */
  //1.let:声明变量的
  let a = 10;
  console.log(a);

• let不允许重名

  //1.let:声明变量的
  let a = 10;
  console.log(a);
  ​
  //2. let不允许重名
  let a = 20;
  console.log(a);  //Identifier 'a' has already been declared  重复声明

• 不存在变量提升

  //3.不存在变量提升
  console.log(bb);  //undefined
  console.log(b);   // Cannot access 'b' before initialization  没有声明变量b
  var bb = 10;
  let b = 10;

• 拥有暂时性死区（TDZ temporal dead zone）

   //4.let 拥有暂时性死区（TDZ  temporal dead zone）
  let c = 10;
  function fun1() {
      //console.log(c); // Cannot access 'c' before initialization   没有声明变量c
      let c = 20;
  }
  fun1();

• 块级作用域({}就是作用域,if for while switch function ,不包含對象)

   //5.块级作用域({}就是作用域,if for while switch function ,不包含對象)
  //注意：块级作用域同样存在作用域链
  {
      let d = 10;
      {
          // let d = 20;
          {
              // let d = 30;
              console.log(d);
          }
      }
  }
  if(1){
      let e = 10;
  }
  console.log(e); // e is not defined
  console.log(d); // d is not defined

• 区别：（let与val）

  • 不允许重名

  • 不存在变量提升

  • 拥有暂时性死区

  • 存在块级作用域

• let与循环

  //1.添加点击事件
  // for(var i = 0;i<oBtns.length;i++){
  //     oBtns[i].onclick = function(){
  //         alert(i);  //循环结束的i 6
  //     }
  // }
  ​
  //2.for()块级作用域，i是局部变量
  for(let i = 0;i<oBtns.length;i++){
      oBtns[i].onclick = function(){
          alert(i);  //局部变量，i=保存的是当前作用域的值
      }
  }

2 const命令，声明常量

• 常量：不能被改变的量

• 语法：const 变量名 = 值；

  //1.常量在声明时必须有值，后期不能修改
  // const A; 
  // console.log(A); //Missing initializer in const declaration
  ​
  ​
  const A = 10;
  console.log(A);
  ​
  //2.常量不能修改
  // A = 20; //Assignment to constant variable. 
  ​
  //不能修改 不能=其他值，内存地址不变就可以
  const O = {"name":"web"};
  O.name = "web07132"
  console.log(O); //{name: "web07132"}
  ​
  ​
  //3.常量名大写
  const NAME = "web"

• 注意点

  • 常量名大写

  • 常量在声明时必须有值

  • 常量不能修改（能=其他值，内存地址不变就可以)

4.数据类型和数据结构

• 数据类型：number string undefined null boolean，object(object,array,function) symbol

• 数据结构：Set Map（了解）

1 字符串扩展

1.1 扩展模板字符串

• 语法：${表达式};

  var oUl = document.getElementsByTagName("ul")[0];
  //1.扩展模板字符串
  let arr = [1,2,3];
  //存在问题：结构复杂，容易乱
  let str = "<li>"+arr[0]+"</li><li></li><li></li>";  
  ​
  ​
  //模板字符串  `:数字1左边的按键（ESC下面那个按键~)
  let s = ``;
  // 语法： `${表达式}`;
  s = `<li>${arr[0]}</li>
  <li>${10>20?"下课":"学习"}</li>
  <li>${10+20}</li>
  <li>${fun(8)}</li>
  `; 
  oUl.innerHTML = s;
  function fun(num){
      return num < 10 ? "0"+num : num;
  }

• 优点： 代码缩进美观，可以用表达式

1.2 新增的方法

（charAt,charCodeAt,indexOf,lastIndexOf,substring,slice,substr,trim,replace,toUpplerCase,toLowerCase,split,match,search)

• startWith

  • 语法：字符串.startWith(参数字符)

  • 作用：判断字符串的头部是否有参数字符，返回布尔值

    //1.字符串.startWith(参数字符):判断字符串的头部是否有参数字符，返回布尔值
    let str = "page2/index";
    let s = str.startsWith("page2/");
    console.log(s); //true

  • 需求

    //需求：找出放在page1文件夹的下书，返回数组
    let arr = [
        { "name": "JavaScript权威指南", "filepath": "page2/index" },
        { "name": "JavaScript高级程序设计", "filepath": "page1/index" },
        { "name": "坏蛋是怎么炼成的", "filepath": "page1/index" },
        { "name": "莽荒记", "filepath": "page2/index" }
    ]

• endsWith

  • 语法：字符串.endsWith(参数字符)

  • 作用：判断字符串的尾部是否有参数字符，返回布尔值

    //2.字符串.endsWith(参数字符):判断字符串的尾部是否有参数字符，返回布尔值  （常用）；
    let str1 = "str.jpg";
    let s1 = str1.endsWith(".png");
    console.log(s1); //false

• repeat

  • 语法：字符串.repeat(num)

  • 作用：将原字符串重复num次，返回一个新的字符串

    //3.字符串.repeat(num)：将原字符串重复num次，返回一个新的字符串
    let str2 = "哈";
    let str3 = str2.repeat(10);
    console.log(str3);

• padStart

  • 语法：字符串.padStart(目标长度,填充的字符)

  • 作用：在头部填充字符(常用)

    //4.字符串.padStart(目标长度,填充的字符)：在头部填充字符(常用)
    let str4 = "19";
    console.log(str4.padStart(2,"0")); // "19"--->"19"  "9"--->"09"

• padEnd

  • 语法：字符串.padEnd(目标长度,填充的字符)

  • 作用：在尾部填充字符

    //5.字符串.padEnd(目标长度,填充的字符)：在尾部填充字符
    let str5 = "19";
    console.log(str5.padEnd(5,"!")); //19!!!

2 Symbol（了解）

做为了解即可，用途比较少。为了我们后续学习iterator做铺垫。Symbol可以当作对象的键。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。

它是 JavaScript 语言的第七种数据类型。 string number undefined bollean function null object array ...

Symbol 值通过Symbol函数生成。

• 概念：ES6新增的原始数据类型，表示独一无二值

• 基本语法

  //1.ES6新增的原始数据类型，表示独一无二值  ,由Symbol函数创建
  let sym1 = Symbol();
  let sym2 = Symbol();
  console.log(sym1); //Symbol()
  console.log(sym2); //Symbol()
  console.log(sym1 == sym2); //false

• 标识符

  //2.标识符：美观，好区分是哪一个Symbol
  let sym3 = Symbol("userName");
  let sym4 = Symbol("passWord");
  console.log(sym3); //Symbol(userName)
  console.log(sym4); //Symbol(passWord)

• 使用场景

  //3.使用场景：可以当做对象的键（key）使用，一般用于框架封装，js内置对象与函数中
  //之前的对象会存在一个问题：属性会很容易被修改
  let obj = {
      "user":"田",
      "age":18
  }
  obj.user = "文";
  console.log(obj); //{user: "文", age: 18}
  ​
  ​
  let obj1 = {
      [sym3]:"田",
      [sym4]:123456
  }
  console.log(obj1); //{Symbol(userName): "田", Symbol(passWord): 123456}
  obj1[sym3] = "文";
  console.log(obj1); //{Symbol(userName): "文", Symbol(passWord): 123456}
  ​
  ​
  //封装
  function fun(){
      let syma = Symbol("userName");
      let symb = Symbol("passWord");
  ​
      return {
          [syma]:"田",
          [symb]:123456
      }
  }
  ​
  let obj2 = fun();
  console.log(obj2); //{Symbol(userName): "田", Symbol(passWord): 123456}

3 数组扩展

数组可以存储多个数据，在JavaScript中已经学习了数组定义和一些方法包含添加、删除、获取等。es6中对数组一些方法进行了扩展。数组这种数据结构的特点：有序的。

push，pop，unshift，shift，indexOf，slice，concat，join，sort，reverse，
every，some，filter，map，forEach

3.1 数组新增的方法(静态方法)

• 静态方法：不需要创建对象，直接使用对象名.方法()

• Aarray.of(...args)：实例化数组

  //1.Array.of(...rags) : 实例化数组
  //之前创建数组的问题：如果参数只有一个并且是number类型，表示创建一个长度为n的空数组
  let prevArr = new Array(2);
  console.log(prevArr); // [empty × 2]
  ​
  //现在Array.of()
  let currentArr = Array.of(2);
  console.log(currentArr);

• Array.from(arrayLink)：将伪数组转换为真正的数组

  //2.Array.from(arrayLink):将伪数组[可以通过下标获取，有length属性]转换为真正的数组
  //元素集合，arguments，节点列表，字符串
  let str = "59381046";
  let oLis = document.getElementsByTagName("li");
  Array.from(oLis).forEach(function(elem){
      elem.onclick = function(){
          console.log("fdfdfd");
      }
  })
  strArr = Array.from(str).sort();
  console.log(strArr);

4 对象扩展

对象（object）是 JavaScript 最重要的数据类型。ES6 对它进行了重大升级，包括（数据结构本身的改变和Object对象的新增方法）

4.1 对象表现形式扩展

• 简写

  let age = 30;
  let obj1 = {
      "name": "梁",
      //1.简写---属性简写
      age,
      "hobby": "敲代码",
      "skill": function () {
          console.log("开玩笑");
      },
      //2.简写---函数简写
      skill1() { console.log("开玩笑"); }
  }
  console.log(obj1);
  obj1.skill1();

• []用法

  //2.[]用法  ,[]里面解析变量，表达式
  let name = "user";
  let obj2 = {
      "name": "梁",
      [name]: "lj",
      ["a"+"g"+"e"]:30
  }
  console.log(name); //"user"
  console.log(obj2);//{name: "梁", user: "lj", age: 30}

4.2 对象的方法的扩展（静态方法）

对象的数据是无序

• Object.assign(target，source1,source2...) : 对象合并,浅拷贝

  let obj1 = {
      "name":"梁",
      "detail":{
          "age":30
      }
  }
  let obj2 = {
      "name":"lj",
      "sex":"男"
  }
  ​
  //1.Object.assign(target,source1,source2...) : 合并对象，将源对象的属性复制到目标对象上
  Object.assign(obj2,obj1);
  console.log(obj2); //{"name":"梁进","detail":{"age":30},"sex":"男"} key值同名会覆盖
  ​
  obj2.detail.age = 31;
  console.log(obj2);//{"name":"梁进","detail":{"age":31},"sex":"男"}
  console.log(obj1);//{"name":"梁进","detail":{"age":31},"sex":"男"}
  ​
  //$.extend(deep,target,source1,source2...)

• Object.keys(object):返回一个数组，数组元素是参数对象的key

• Object.values(object)：特点：对象是无序的

  //2.Object.keys(object):返回一个数组，数组元素是参数对象的key
          let obj3 = {
              "name":"梁",
              "detail":{
                  "age":30
              },
              "sex":"男"
          }
          let keyArr = Object.keys(obj3);
          console.log(keyArr); //["name", "detail", "sex"]
  ​
  ​
          //3.Object.values(object):返回一个数组，数组元素是参数对象的value
          let valueArr = Object.values(obj3);
          console.log(valueArr);

  ​

5 新增的数据结构（了解）

5.1 Set

ES6新增的数据结构，它类似数组，成员值唯一

• 创建Set数据

  • 语法：new Set(arr)

    //1.ES6新增的数据结构，它类似数组(伪数组），成员值唯一
    let arr = [1,2,3,3,4,3];
    let set = new Set(arr);
    console.log(set); //Set(4) {1, 2, 3, 4}  

• 常见方法

  • size 获取set集合的长度

  • add(值) 给集合添加值，返回新set

  • delete(值) 删除某个值，返回布尔值，表示是否删除成功

  • has(值) 查询这个值是否时集合的成员，返回布尔值

  • clear() 清空集合,没有返回值

  //2.1 size:获取set集合的长度
  let size = set.size;
  console.log(size); //4
  ​
  //2.2 add(值)：在set集合中添加成员，返回一个新的set
  let set1 = set.add(9);
  console.log(set1,set); //{1, 2, 3, 4, 9}  原来的也会受影响
  ​
  set.add(NaN);
  set.add(NaN);
  console.log(set); //{1, 2, 3, 4, 9,NaN}   在ES6里面NaN==NaN
  ​
  //2.3 delete(值) ：在set集合中删除成员，返回是否删除成功
  let del = set.delete(NaN);
  console.log(set,del); //Set(5) {1, 2, 3, 4, 9}，true
  ​
  //2.4 has(值)：判断set集合中是否有某个元素的存在
  let is = set.has(1);
  console.log(is); //true
  ​
  //2.5 clear():清空
  set.clear();
  console.log(set); //Set(0) 

  ​

5.2 Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

本质上Map 是一个构造函数（实例化对象：创建一个map数据结构）

• 创建Map数据

  let oBt = document.getElementsByTagName("button")[0];
  //对象的key都是字符串 
  let obj1 = {1:"fd"};
  // console.log(obj1.1);
  ​
  //和对象类似，map的key可以是任意数据类型
  //1.创建Map对象 ：new Map([[key1,value1],[key2,value2]。。])
  let map = new Map([
      [true,"1"],
      [1,"2"],
      [[1],"3"],
      [oBt,"4"]
  ]);
  console.log(map); //Map(4) {true => "1", 1 => "2", Array(1) => "3", button => "4"}
  ​

  ​

• 常见方法

  • size 获取Map的长度

  • set(key,val) 添加一条数据

  • get(key) 根据key获取val

  • has(key) 是否存在key

  • delete(key) 删除某条数据

  • clear() 清空所有数据

    /* 
            - **size**  获取Map的长度
            - **set(key,val)**  添加一条数据
            - **get(key)**  根据key获取val
            - **has(key)**  是否存在key
            - **delete(key)** 删除某条数据
            - **clear()** 清空所有数据
            */
    console.log(map.has(oBt));  //true

5.变量解构赋值

5.1 数组的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

更加方便地从数组或对象中取值。

• 语法：

  let [ 变量1,变量2,... ] = [ value1,value2,... ]

• 完全结构（掌握）

  //1.完全解构
  let [a1,b1,c1] = [1,2,3];
  console.log(a1,b1,c1); //a1 = 1  b1=2 c1=3

• 不完全结构

  //2.不完全解构，变量比内容少
  let [a,b] = [1,2,3];
  console.log(a,b); //a = 1 ,b = 2

• 解构失败

  //3.解构失败，有变量没有解构到值
  let [x,y,z,t] = arr1; //[1,2,3]
  console.log(x,y,z,t); //x=1,y=2,z=3,t = undefined

• 解构默认值

  //4.解构默认值,默认值当值严格===undefined有效
  let [n,m=3] = [10,undefined];  
  console.log(n,m); //10,20

• 缺省

  //5. 缺省
  let [,i]  = [10,20];
  console.log(i); //20

• 使用场景

  //6.使用场景：数据交换
  let x1 = 20;
  let x2 = 200;
  [x1,x2] = [x2,x1];
  console.log(x1,x2); //200 20
  ​
  //解构返回值
  function sum(){
      return [300,10000];
  }
  let [s,c] = sum();

5.2 对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，而对象的属性没有次序。

和键名有关

• 语法：

  完整语法
  let { key2:变量名2,key1:变量名1 } = { key1:value1,key2:value2,... }
          把key2属性中的值赋值给变量名2  ，把key1属性中的值赋值给变量名1                         
  简写语法：
  let { key2,key1 } = { key1:value1,key2:value2,... }     
   简写代表把同名属性的值给了一个和属性名相同的变量（我们就不用再思考起变量名）

• 简写解构

  //1.简写语法：{key1，key2} = 对象    根据对象key去赋值
  let {age,name,height,weight} = {"age":18,"name":"下课","height":180,"weight":180}

• 完整解构

  let age = 10; //重名的时候就可以使用完整语法，重新定义一个变量名
  // 2.完整语法：{key1:变量名，key2：变量名} = 对象
  let {age:age1} = {"age":18,"name":"下课","height":180,"weight":180}
  console.log(age1); //18

• 解构默认值（重点）

   let person = {
          username: 'swk',
          age: 20
      }
      console.log( person.sex ); //undefined
      let { username,sex="猴" } = person
      console.log( sex );//"猴"

• 解构失败

  let person = {
          username: 'swk',
          age: 20
      }
  ​
      let { username,sex } = person
      console.log( sex );//undefined

  3.5 使用场景

• 使用场景

   //3.使用场景
  document.onclick = function(){
      let {clientX,clientY}  = event;
      console.log(clientX,clientY);
  }
  ​
  ​
  //4.优化函数参数
  function ajax(obj){
      let {url,post,data,dataType,success} = obj;
  }
  ​
  ajax({
      "url":"请求地址",
      "post":"请求方式",
      "data":"请求参数",
      "dataType":"jsonp",
      "success":function(){}
  })
  ​