ES6学习（一）
（一）let和const
①块级作用域的引入
在ES6之前，js只有全局作用域和函数作用域，ES6中let关键字为其引入了块级作用域。let声明的变量只能在其所在的代码块内才能访问，var声明的变量由于是全局变量，因此可以在代码块外访问。
②暂时性死区
var声明的变量可以在声明之前使用，相当于默认为其声明其值为undefined了；但是，let声明的变量一旦用let声明，那么在声明之前，此变量都是不可用的，术语称为“暂时性死区”。所以我们要养成变量先声明再使用的好习惯。
console.log(a);
console.log(b);
var a=6;//undefined
let b=5;//报错 b 没有定义
//相当于
var a;
console.log(a);
console.log(b);
a=6;
let b=6;
const定义变量：是用const定义的变量的值是不可以改变的。
（二）解构赋值
概念：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值。变量和数组的解构如下代码：
//变量解构
var a,b;
[a,b]=[3,4];
console.log(a,b);//3,4
// 数组 一一对应的
var arr=[1,2,3,4,5];
var [x,y,z]=arr;
console.log(x,y,z);//1,2,3
var q,w;
[q=10,w=5]=[2];
console.log(q,w);//2,5
//剩余模式 剩余元素必须是在数组的最后
var [m,...n]=[1,2,3,4];
console.log(m,n);//1,[2,3,4]
//判断是不是数组
console.log(Array.isArray(n));//true
// 交换变量
var i=15;
var j="qwe";
[i,j]=[j,i];
console.log(i,j);//qwe , 15
// 解析函数返回数组
function show(){
return [10,11,12];
}
var [u,o,p]=show();
console.log(u,o,p);//10 11 12
// 忽略某些返回值
var s,d;
function sho(){
return [4,5,6];
}
[s,,d]=sho();
console.log(s,d)//4 6
对象的解构代码如下;
// 基本赋值
var o = {
q: 12,
p: 25
};
var {
q,
p
} = o;
//注；对象名称要对应
console.log(p, q);//25 12
// 无声明赋值
var a, b;
({
a,
b
} = {
a: 10,
b: 20
});
//需要用小括号包起来
console.log(a, b);//10 20
// 给新的变量名赋值
var x = {
y: 11,
z: 22
};
var {
y: ys,
z: zs
} = x;
console.log(ys, zs);//11 22
//for of迭代和解构
var people = [{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for(var {name: n,family: {father: fa}} of people) {
console.log(n, fa);
}
for (var {age,family:{mother}} of people) {
console.log(age,mother);
}
//从函数中提取
function userId({id}) {
return id;
}
function whois({displayName: ds,fullName: {firstName: name}}) {
console.log(ds + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log(userId(user));
whois(user);
其中包括for of 迭代和解构，从作为函数实参的对象中提取数据。
（三）Symbol()函数
symbol是一种基本数据类型。symbol()函数返回唯一的symbol类型的值，目的是作为对象的唯一的标识符。
语法：
// 返回唯一的symbol类型的值,目的是作为对象属性的唯一标识符
var sym1=Symbol();
var sym2=Symbol("foo");
var sym3=Symbol("foo");
console.log(sym2===sym3);
// 作为属性名的symbol
let mysym=Symbol();
// 第一种方法
// let a={};
// a[mysym]="hello";
//第二种方法
// let a={[mysym]:"hello"};
//第三种方法
let a={};
Object.defineProperty(a,mysym,{value:"hello"});
console.log(a);
//属性名遍历
var obj={};
obj.m="123";
var c = Symbol("c");
var b = Symbol("b");
obj[c]="hello";
obj[b]="world";
var objsym=Object.getOwnPropertySymbols(obj);
console.log(objsym);
for (var sym of objsym) {
console.log(obj[sym]);
}
// 遍历对象的属性名为数组
var s=Reflect.ownKeys(obj);
for (var i in s) {
console.log(obj[s[i]]);
}
（四）字符串函数
在es6中字符串函数添加了很多方法，有字符串补全长度padStart在字符串的前补全，padEnd在字符串后补全、includes查找包含的内容、startsWith查找是不是以什么字符开始、endsWith查找是不是以什么字符结束，还添加了模板字符串。详细代码如下：
//补全长度
//在字符串前面补全 加字符
var num=8;
var res=(num+"").padStart(2,"0");
console.log(res);//08
var red=(num+"").padStart(3,"a");
console.log(red);//aa8
var num1=90;
var rea=(num1+"").padStart(2,"0");
console.log(rea)//90
//在字符串后补全 加字符
var numb=5;
var reb=(numb+"").padEnd(3,"x");
console.log(reb);//5xx
//查找包含内容includes 区分大小写
var str="hello world";
console.log(str.includes("o"));//ture
console.log(str.includes("a"));//false
//以什么开始startsWith
console.log(str.startsWith("h"));//true
console.log(str.startsWith("l"));//false
//以什么结束 endsWith
console.log(str.endsWith("d"));//ture
console.log(str.endsWith("w"));//false
//模板字符串
var st="world";
var stu=`hello
${st} se6
haha xixi`;
console.log(stu);
（五）函数的扩展
在es6中函数的扩展使函数的定义的时候更加便捷，添加了rest参数和箭头函数。详细代码如下：
//默认值
function Point(x=0,y=0){
this.x=x;
this.y=y;
}
var obj=new Point(10);
console.log(obj.x,obj.y)//10 0
//rest参数
function show(...val){
var sum=0;
for (var i in val) {
sum+=val[i];
}
console.log(sum);
}
show(10,20,30,40,50);
//使用...表示,rest参数通常放在最后
//val是一个数组存储了参数的内容
function Poin(x,y){
this.x=x;
this.y=y;
this.add=function(){
var x=1,y=2;
console.log(this.x,y)
}
}
var obj=new Poin(10,20);
obj.add();
//函数的基本组成
function show(x,y){
return x+y;
}
//箭头函数
var add=(x,y)=>{return x+y};
console.log(add(10,20))
var f=()=>5;
//相当于
var fs=function(){return 5};
（六）数组的扩展
es6给数组扩展了一些方法，其中就包括克隆数组、合并数组、find查找，并返回元素，findIndex查找返回下标。详细代码如下：
//es5
const array1=[1,2,3];
const array2=array1.concat();
array2[0]=2;
console.log(array2);//2 2 3
var arr=[1,2,3,4];
var arr1=[1,2,3,5];
var arr2=arr.concat(arr1);
console.log(arr2);//1 2 3 4 1 2 3 5
//es6
const arra=[1,2,3,4];
const arra2=[...arra];
arra2[0]=2;
console.log(arra2);//0 2 3 4
var arry1=[1,2,3,4];
var arry2=["a","b",...arry1];
console.log(arry2);//"a" "b" 1 2 3 4
（七）对象的扩展
对象的扩展内容有属性的简写，方法的简写，assign合并对象，5中遍历对象的属性。详细代码如下：
//es5对象属性
var obj={
name:"name",
age:20
}
//es6简写
let foo="bar";
let objs={foo};
console.log(objs);//{foo: "bar"}
//es5对象中的方法定义
var obj={
show:function(){
console.log("hello");
}
}
obj.show();
//es6中简写
var objs={
method(){
console.log("world!");
}
}
objs.method();
//合并对象
var target={
a:1
}
var obj={
name:"小郑",
age:40
}
var objs={
sh:"小何",
age:30
}
Object.assign(target,obj,objs);
console.log(target);//{a: 1, name: "小郑", age: 30, sh: "小何"}
var obj1={name:"name",age:20};
var tar={};
Object.assign(tar,obj1);
console.log(tar);//{name: "name", age: 20}
console.log(tar.name===obj1.name);//ture 浅拷贝
对象的5种遍历包括：
①：for...in遍历
②：Object.keys(obj)遍历
③：Object.getOwnPropertyNames(obj)遍历
④：Object.getOwnPropertySymbols(obj)遍历
⑤：Reflect.ownKeys(obj)遍历