ES6常用语法

一、变量的声明let与const

let声明的变量不存在预解析

例如，使用var调用如下代码，不会出错

  alert(iNum);
  var iNum = 10; // 预解析 预编译 不报错

但是使用let会报错

// let不能预解析  下面的写法会报错
 alert(iNum);
 let iNum = 10;

let声明的变量不允许重复（同一个作用域）

下面方式不会报错

// 如下方式不会出报错
var flag = 123;
var flag = 456
console.log(flag)

let声明的变量不允许重复，下面的代码会报错

// let声明的变量不允许重复，下面的代码会报错
let flag = 123;
let flag= 456
console.log(flag)

块级作用域

以下代码不会报错：

if (true){
    var flag = "哈哈";
}
console.log(flag)

以下代码会报错

if (true){
    let flag = "哈哈";
}
console.log(flag)

const声明的常量不允许重新赋值，必须初始化

以下代码会报错

//常量不能修改
const i = 10;
i= 5；

二、结构赋值

变量的结构赋值

正常我们给三个变量a,b,c赋值是

 var a = 1;
 var b = 2;
 var c = 3;
 var a = 1,b = 2, c = 3;

ES6我们而可以这样

 // 数组的结构赋值
 var [a,b,c] = [1,2,3];

 let [a,b,c] = [1,2,3];
 let [a,b,c] = [,2,];
 // 给a一个默认值
 let [a=2,b,c] = [,2,3];

对象的结构赋值

如下根据对象内的名称进行赋值

// 对象的结构赋值
let {name, age} = {name:'zhangsan', age: 20}
console.log(name,age)

输出：
zhangsan 20

对象属性别名

如果有了别名，那么原来的名称就不能用了。
如下，给name起了别名xm, 则name不能再用。

let {name:xm, age} = {name:'zhangsan', age: 20}
console.log(xm,age)

字符串的结构赋值

let [a,b,c,d] = 'hello';
console.log(a,b,c,d,e);

输出：
h e l l o

把hello拆开 分别赋值给a,b,c,d,e

三、字符串相关扩展

includes

1.判断一个字符串当中是否包含指定字符串

例如：判断hello world字符串是否包含world字符串

console.log('hello world'.includes('world'));

输出结果：
true

2.判断字符串指定位置是否包含指定字符串

例如：判断hello world字符串从索引5开始，是否包含world字符串

// 判断hello world字符串从索引5开始，是否包含world字符串
console.log('hello world'.includes('world'，5));

startsWith

判断字符串是否以指定子符串开头

例如：判断hello world字符串是否以sta字符串开头

console.log('hello world'.startsWith('sta'));

输出：
true

endsWith

判断字符串是否以指定子符串结束

例如：判断hello world字符串是否以world字符串结尾

console.log('hello world'.endsWith('world'));

输出：
true

模板字符串

没有模板字符串之前：

let obj = {
	name:'zhangsan',
	age:'12',
}
let tag = '姓名：' + obj.name + '; 年龄' + obj.age;
console.log(tag);

使用了模板字符串后：

反引号标识模板，模板中通过 ${ } 方式填充数据

// 反引号标识模板，模板中通过 ${ } 方式填充数据
let temp = `姓名：${obj.name}; 年龄${obj.age}；使用表达式${1+1}`;
console.log(temp);

四、函数扩展

参数默认值

ES6之前我们使用参数默认值的方式

 function foo(param){
 	// 不传递参数时，默认打印haha
 	// 传递了参数，打印参数值
     let str = param || 'haha';
     console.log(str);
 }
 // 打印haha
 foo();
 // 打印hehe
 foo('hehe')

ES6使用参数默认值

 function foo(param = 'haha'){
 	// 不传递参数时，默认打印haha
 	// 传递了参数，打印参数值
     console.log(str);
 }
 // 打印haha
 foo();
 // 打印hehe
 foo('hehe'

参数结构赋值

// name的默认值为lisi,age的默认值为13
function foo({name='lisi',age='13'}){
	console.log(name,age);
}
foo({name:'zhangsan',age:17});

rest参数 (剩余参数的处理)

function foo(a,...param){
	console.log(a,param);
}
foo(1,2,3,4);

输出结果:
a [2,3,4]

多余的参数通过一个集合[ ] 来装

扩展运算符

function foo(a,b,c,d,e){
	console.log(a+b+c+d+e);
}
foo(1,2,3,4,5);

输出结果：
15

如果我们要传递一个数组怎么办？

function foo(a,b,c,d,e){
	console.log(a+b+c+d+e);
}
let arr = [1,2,3,4,5];
foo(...arr);

输出结果:
15

扩张运算符的具体应用
合并数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);

输出结果:
[1,2,3,4,5,6]

箭头函数

正常我们定义一个函数：

function foo(){
	console.log('hahaha');
}
foo();

使用箭头函数定义：

let foo = () => conlole.log('hahaha');
foo();

箭头函数的注意事项：

• 箭头函数中的this取决于函数的定义，而不是定义
  例如：

  function foo(){
  	setTimeout(()=>{
  		// 这里this，还是foo对象
  		console.log(this.num;);
  	},200);
  }
  foo.call({num:1})
  

• 箭头函数不可以new

• 箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替。