JavaScript-ES6新特性详解

1.ES6的概念

ES6 :ESMAScript 6,新的javascript语法标准
2015正式推出
作用：为了js更加快捷与方便

2. 声明变量

在es6中我们通常用let来定义变量和const来定义常量，这两种方式和var(全局变量)有什么区别的？接下来详解：

1.var(全局变量)
在JavaScript中之前定义变量，我们用 var 关键字；它对比let有如下主要缺点：

• 存在变量提升问题，降低 js 代码的可阅读性(变量会提升，变量值不会提升)
• 没有块级作用域，容易造成变量污染全局

2.let(局部变量)

1. 局部作用域,(在一对{}启用)
2. 不能变量提升
3. 在一个作用域里面不能重复声明

var lis = document.querySelectorAll("ul li");
for(let i=0;i<lis.length;i++){
	lis[i].onclick = function(){alert(i)}
}

3.const(常量)

1. let 一样
2. 变量名建议大写
3. 声明必须赋值
4. 值类型不允许修改

{
const PI = 3.1415926;
const PI;
console.log(PI);
}

4.字符串

1.遍历

for(let s of str){
  console.log(s)
}

2.检测

indexOf,lastIndexOf :返回值下标|-1
includes(查找字符串) true | false
startsWith(查找字符串) true | false
endsWith(查找字符串) true | false

3.填充

repeat(重复的次数)
padStart(填充总位数,填充字符串)
padEnd(填充总位数,填充字符串)

4.拼接
这里的拼接指的是用字符串模板的方式，即 `` + ${}
用一对反引号（模板字符串）标识 ，它可以当普通字符串使用（‘普通字符串’），也可以用来定义多行字符串 ，在模板字符串中可以嵌入变量 ，js表达式或函数等

var num = "小娄同学";
var  str = `你好${num}`

输出的结果为: "你好小娄同学"

3.字符串ES6的扩展方法

1. trim移除空白
2. repeat重复
3. includes查找是否包含,返回的是true或者false
4. startWith 以…开头
   endWidth以…结尾
5. 字符串模板
   ``定义字符串,用${}定义js

5.解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。
1.数组的解构
等号左边的变量放到中括号内部，匹配右侧数组中的元素。

var [a,b,,c=20,...rest] = [1,2,3,4,5,6];
[] 数组解构符号
, 一个数值
...rest 剩余
c=20 默认参数
(按顺序排序)

2.对象的解构
等号左边的变量放到大括号内部，匹配右侧数组中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值

var {name,age,leg=20,...rest} = obj;
{} 对象解构符号
...rest 剩余
（没有顺序）

6.箭头函数

• 箭头函数就是函数的简写形式
• 箭头左边是参数
• 箭头右边是返回值
• 0个或多个参数要用括号包括
• 执行语句:如果执行有多行,返回语句要用return 执行语句要用{} 包裹
  例:

function(str){return "love"+str;}
箭头函数:str => "love"+str;

7.函数参数

1.默认参数

function say(str="我爱你"){}
say();
say("我很你");

2.扩展参数(执行参数)

function metting(a1,a2,a3){}
var  arr = ["A","B","D"];
// metting(arr[0],arr[1],arr[2])
// metting.apply(null,arr);
metting(...arr);

不定参(定义)

function add(...list){
  return  list.reduce((a,b)=>a+b);
  //retrun  Array.from(arguments).reduce((a,b)=>a+b)
}

8.calss 类

extends继承
super父构造函数(要在所有方法最前面执行)
constructor构造函数
this指向实例
static静态的
new Box() 实例化类