ES6知识总结------第1篇（什么是ES6，变量的声明方式，解构赋值，字符串）

一、什么是ES6？

ECMAScript：
   JavaScript分为几大模块，包含ECMAScript、DOM、BOM；ECMAScript就是js的核心语法
   ECMA-262： 国际标准化组织中的第262条标准

ECMA ： 国际标准化组织（欧洲计算机制造协会）。它是国际标准化机构，在这里面有很多标准，其中第262条标准就是ECMA-262就是ECMAScript。ECMAScript就是jJavaScript的核心语法，提供的原生对象。

ES6    ECMAScript6

ECMA的版本历史
  1997年  ECMAScript 1.0
  1998年6月  ECMAScript 2.0
  1999年12月  ECMAScript 3.0在业界得到广 泛支持，成为通行标准。
  2000年，ECMAScript 4.0开始酝酿，发生了严重分歧
  2008年7月发布为ECMAScript 3.1 Harmony (和谐)，ECMAScript 3.1就改名为ECMAScript 5。
  2015年6月，ECMAScript 6正式通过所以ES6 也叫ES2015

二、声明变量的方式（let、const）

1、let和var的区别

- [1] 增加块级作用域

  es6之前，js只有一种作用域叫函数作用域。
  {}会产出块级作用域

<button>1</button>
<button>2</button>
<button>3</button>

let btn = document.getElementsByTagName('button');
//使用let申明变量i
    for (let i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            alert(i);//依次点击按钮，弹出来的是0，1，2；使用var的话，弹出来的都是3，因为没有块级作用域
        }
    }

- [2] 没有预解析，不存在变量提升

使用var

alert(a);//undefined,只提升声明，不提升赋值
        var a = 1;

使用let

    alert(a);//报错：ReferenceError: Cannot access 'a' before initialization
    let a = 1;

- [3] 不能重复定义

- [4] var声明的变量属于window，let不是

   let声明的变量不属于顶层作用域

    var a = 1;
    alert(window.a);//1


    let b=3;
    alert(window.b);//undefined

2、const和var的区别

  与let和var的一样

3、const和let的区别

- [1] 初始化的时候必须赋值

    let a;
    a = 1;
    alert(a);

    const b;//'const' variable without initializer is not allowed

- [2] 一旦赋值无法改变

（规范：常量的命名一般全大写）

总结：在以后使用中，尽量不用var，变量使用let，常量使用const

三、解构赋值

按照一定模式，对变量进行赋值，被称为解构

1、数组模式

    let [a, b, c] = [1, 2, 3];
    console.log(a, b, c);//1 2 3
    
    let [a, [b, c], d, e] = [1, [2, 3], 5, 7];
    console.log(a, b, c, d, e); //1 2 3 5 7

2、对象模式

let json={a:1,b:2};
        let {a,b}=json
        console.log(a);//1
        console.log(b);//2

let [a, [b, c], {d}] = [1, [2, 3], {d:4}]
    console.log(a, b, c, d);//1  2   3   4

3、字符串模式

 let str='hello school';
    let [a,b,c,d,e,f,g,h,i,j]=str;
    console.log(a, b, c, d, e,f,g,h,i,j);//h e l l o   s c h o

解构不成功

 let [a,b,c]=[1,2];
console.log(c);//undefined

let {c}={a:1,b:2}
console.log(c);//undefined

4、默认值

let [a,b=3]=[4];
    console.log(a, b);//4,3
    
  let {a, b = 2,c=7} = {a: 1,c:9}
    console.log(a, b,c);//1,2,9

关于解构赋值的简单应用

  不借助第三个变量，使两个变量的值互换

    let x=1;
    let y=2;
    [x,y]=[y,x];
    console.log(x, y);//2,1

四、字符串

1、字符串模板

1-1： ``

  支持换行

let str='<div>我是一个' +
        'div</div>';//使用引号
    let str1=`<div>我是一个div</div>`//使用模板字符串
    console.log(str);
    console.log(str1);

1-2： ${}

  里面可以放变量、计算、函数调用

let b=2;
    let str2=`a${b+b}c`
    console.log(str2);//a4c

2、标签模板

alert`abcsdd`

3、字符串的遍历

  for…of

    let str='hello world';
    //es5
    for (let i=0;i<str.length;i++){
        console.log(str[i]);
    }
    //es6
    for (let i of str){
        console.log(i);
    }

4、字符串的方法

let str='hello world';

4-1、includes()

  返回布尔值，表示是否找到了参数字符串

alert(str.includes('t'))//false

4-2、startsWith()

  返回布尔值，表示参数字符串是否在原字符串的头部

alert(str.startsWith('hell'));//true

4-3、endsWith()

  返回布尔值，表示参数字符串是否在原字符串的尾部

alert(str.endsWith('old'));//false

4-4、repeat方法

  返回一个新的字符串，表示原字符串重复n次;

    alert(str.repeat(3));

4-5、padStart()

  用于头部补全

  数字为补完以后的位数

alert(str.padStart(13,'aa'))；//aahello world

4-6、padEnd()

  用于尾部补全
  数字为补完以后的位数

alert(str.padEnd(13,'bb'));//hello worldbb

4-7、trimStart()

let str1='  hello world   ';

  去除头部空格

console.log('|'+str1.trimStart()+'|');

4-8、trimEnd()

  去除尾部空格

console.log('|'+str1.trimEnd()+'|');