ES6 入门讲解

现在项目中用到ES6的地方越来越多，这边就一起来学习下。

声明变量

let str = “hello world”

不能重复声明

let a = "sdf";
let a = "sdd";

报错信息：

Uncaught SyntaxError: Identifier ‘a’ has already been declared

只在当前代码块内有效

{
    // 只能在局部访问到他  而es5中var声明可以全局访问
    let names = "zyc";
}
name;

报错信息：

Uncaught ReferenceError: names is not defined

实例一：

for(var i = 0 ; i< 10 ; i++){
    console.log(i)
}
console.log(" 最后的i：", i);   //循环之外可以得到 i为10  （坏处是可能造成全局变量的污染）



for(let j=0; j<10; j++){
    console.log(j);
}
 console.log("let",j)   //  访问不到 

实例二：

var arr = [];
for(var i=0;i<10;i++){
    arr[i] = function() {
        console.log(i);
    }    //  没有执行
    arr.push(arr[i]);
}
console.log("输出结果是：",arr[3]())  //都是输出10

var arr = [];
for(let i=0;i<10;i++){
    arr[i] = function() {
        console.log(i);
    }
    arr.push(arr[i]);
}
console.log("输出结果是：",arr[3]())    // 3  值是多少  输出多少

不存在变量提升
es6规定变量必须先定义在使用；否则报错：

xxx not defined

es5中不会报错，只会显示undefined
实例：

var foo = "myname";
if(true){
//  在let声明变量foo之前都是其暂时性死区
    typeof foo;
    let foo = 123;
}

报错：

Uncaught ReferenceError: foo is not defined

• 只要后面有let声明，不管使用什么引用foo变量都会报错
• ES6规范明确规定，如果代码块出现let、const声明，那么一旦形成了封闭作用域，在声明之前使用就会报错
• 不允许全局访问局部声明的变量/对象

const

const NUMBERS = 112233;

• 使用它声明之后，必须在声明的时候同时赋值
• 声明之后“不允许”更改存在的值，简而言之就是不允许修改内存地址
  实例：

	const arr = [];
    arr.push("hahahaha");
    arr.push("lalalal");
    console.log(arr);
    //  ["hahahaha", "lalalal"]

    const arrs = [];
    arrs.push("hahahaha");
    arrs.push("lalalal");
    arrs = [];
    报错：
    // Uncaught TypeError: Assignment to constant variable.

• const 的作用域同let；

解构赋值

let a = 1;
let b = 2;
let c = 3;

// 你可以直接：

let [d,e,f] = [4,5,6];  //一一对应
let [o, p, q] = [, 23, 34]   //  还是一一对应
let [, , [a,b]] = [, , [1,2]]

let [name, ...ect] = ["zyy", 12, 23, 43]
ect   //  [12, 23, 43]

函数

可以像这样指定默认值；

function abc(name = 1, age= 34){
    console.log(name, age)
}

箭头函数:

name = (val) => val;
// name 函数名  （val）接受的变量，一个变量可以不用括号   =>val 函数体，返回val
//可以写成
my = (name, age) => { console.log("do something") }
Set

数组去重：

var s =new Set();    //es6提供的新的数据解构  Set
[1,2,3,4,5,3,2,5].forEach(x=> s.add(x));
   // {1, 2, 3, 4, 5}

Map

字符串的扩展

1、字符串扩展方法

传统上，JavaScript中只有indexOf方法可以来确定一个字符串是否包含在另一个字符串中；
ES6新增三种：

• includes()：返回布尔值表示是否找到了参数字符串
• startsWith():返回布尔值，表示参数字符串是否在源字符串的头部
• endsWith():返回布尔值，表示参数字符串是否在源字符串的尾部

这三个方法都支持第二个参数 表示开始搜索的位置

let t = "hello world";
t.includes("e",4);//false

2、repeat()

repeat方法返回一个新的字符串，表示将原字符串重复n次。

"hello".repeat(3); //hellohellohello
"hello".repeat(0); //""

如果是小数，会取整

"hello".repeat(2.7); //hellohello

如果是负数或者Infinity，会报错

"hello".repeat(-2)；//Uncaught RangeError: Invalid count value
"hello".repeat(Infinity); //Uncaught RangeError: Invalid count value

如果是0到-1之间的小数，则等同于0，因为先进行取整计算，0到-1取整是-0，repeat视为0

"hello".repeat(-0.8); //""
参数NaN等同于0
"hello".repeat(NaN); //""

如果repeat参数是字符串，则会先转换成数字

"hello".repeat("he"); //""
"hello".repeat("2"); //"hellohello"

3、字符串补全

padStart用于头部补全
padEnd用于尾部补全

x.padStart(5,"ab");//ababx
x.padStart(4,"ab");//abax

x.padEnd(5,"ab");//xabab
x.padEnd(4,"ab");//xaba

第一个参数指定字符串长度，第二个参数是用来补全的字符串

如果源字符串长度大于指定的最小长度，则返回源字符串

xxx.padEnd(2,"ab");//xxx

如果第二个参数省略，则用空格补全

x.padEnd(3);//'  x'
x.padEnd(3);//'x  '

4、模版字符串

模版字符串是增强版的字符串，用反引号(`)标识；他可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

let name="Tom",time="today";
`hello ${name},how arw your ${time}`

大括号里面可以放任意的JavaScript表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;
`${x}+${y}=${x+y}`//1+2=3

let obj = {x:1,y:3};
`${obj.x+obj.y}`
// 4

模版字符串中还能调用函数

function fn(){
    return "hehe";
}
`test ${fn()}`
// test hehe

如果模版字符串中的变量没有声明，会报错