ES6学习总结(一)

ES6简介

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
在ES6中，我们解决了很多的代码重复的问题，开发者们可以使用更少的事件去实现更多的功能。

新增关键字

let

let声明的变量只在let命令所在的代码块内有效，它常常用于声明局部变量，在同一个作用域下，let不同于var，只能对变量声明一次，不能重复声明。
let不存在变量提升的问题，如果不了解什么是变量提升，下面有个小例子可以帮助理解变量提升。

console.log(a)//undefined
var a = 5;
console.log(b);//报错，b is not defined
let b = 5;

const

对于值类型，变量一旦声明便不能更改，同样不存在变量提升，作用域与let相同，都为块级作用域。并且常量声明时就需要赋值，不可以先声明再赋值，否则会报错。const虽然不能更改值类型的变量，但是引用类型的变量可以进行修改，在赋值时，建议变量名大写。

const PI = 3.14;
PI = 5.6;//报错

解构赋值

解构赋值是对赋值运算符的扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

数组模型的解构

1.基本解构

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

2.嵌套解构

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

3.忽略解构

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

4.不完全解构

let [a=1,b] = [] //a=1,b=undefined

5.剩余运算符

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

6.字符串解构

let [a,b,c,d,e] = "hello";
//a = "h"
//b="e"
//c = "l"
//d = "l"
//e = "o"

7.解构默认值

let [a=2] = [undefined];//a=2
let [a=3,b=a] = []//a = 3,b = 3;
let [a=3,b=a] = [1]//a =1,b=1;
let [a= 3,b=a] = [1,2]//a = 1,b = 2;

对象模型的解构

对象模型进行解构时，不同于数组对象的有：解构符不是中括号而是大括号，对象的解构操作必须保持对象的key值相同。
1.基本解构

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

2.可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

3.不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

4.剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

5.解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

新增的字符串方法

1.repeat()
repeat方法可以使字符串重复，在括号中赋值即可产生重复的字符串

let str = "我爱你";
str.repeat(100)//输出100次我爱你

2.includes()
includes方法既可以用在字符串的包含中，也可以检查一个数组是否包含元素，返回值为boolean值

let arr = [1,2,3,4];
console.log(arr.includes(2)//true
let str = "我爱你";
console.log(str.includes("爱"));//true

3.startsWith()/endsWith()
startsWith与endsWith分别是否以…开头，是否以…结尾，返回值为boolean值

let str = "我爱你";
console.log(str.starsWith("我"))//true
console.log(str.endsWith("你")//true

4.padStart()/padEnd()
这两种方法为填充方法，括号内传两个参数，第一个为字符串的长度，第二个为补齐所添加的字符，padStart为左补齐，padEnd为右补齐,注意，这个方法在字符串的参数

let str = "1";
console.log(str.padStart(2,"0");//01
console.log(str.padEnd(2,"0");//10

5.trim()/trimLeft()/trimRight()
trim方法可以去除空格，trim去除两端的空格，trimLeft去除左边的空格，trimRight去除右边的空格
这个方法不能去除字符串里面的空格，如果需要出去需要遍历字符串

let str = "  我爱 你  ";
console.log(str.trim());//我爱 你;
console.log(str.trimLeft());//我爱 你 （这里有空格）
console.log(str.trimRight());// 我爱 你(这里没有空格)