es6初始
es6就是js
准确来说 es6是js的语法规范
之前 所学的是js第5代版本
es6（ECMAscript）是 2015年6月 由欧洲工业标准组织 所以制定新的一套 js语法标准 也算是js第6套版本
ECMAscript 6.0 简称es6
es6 是 js的标准
js是es6的实现
es6 中提供了模块化开发的语法 主要应用于 企业级复杂的web开发
对数组 对象 字符串 都进行了一些方法扩展 提供 了几个新的数据类型
es6实现同步的效果
2.let_const
let
console.log(i)
for(var i=0;i<10;i++){
console.log(i);
var a = i;
}
console.log(i);结果10
console.log(a);结果9

i和a都能取到 说明js中 用var 在for中声明的变量 可以在外部访问

for(let i=0;i<10;i++){
console.log(i);
let a =i;
}
console.log(i);//报错
在js/es6中 用let 在for找那个声明的变量 无法在外部访问

var a =0;
let a = 1;
console.log(a);
let 声明的变量 变量名不能重复
而且必须先声明后使用
换句话来说 let没有变量的提升和变量的污染染
块级作用域 相D当与局部作用域
在js中 只有函数才能创造一个局部作用域
但是 在es6中 只要 是个{} 他都是局部作用域(块级作用域)
{
var a =0;
let b =1;
}
console.log(a);//10
console.log(b);//报错 找不到
let a = 0;
{
cosole.log(a);
let a = 1;
console.log(a);//1
}
console.log(a);//0
在js中 全局变量 可以在局部环境下使用 局部不能再全局下使用
在es6 中 全局 可以在 局部环境下使用 局部也只能在局部使用
而且 全局声明的变量 跟局部环境的变量 没有任何关系
变量名 都可以一样
let 声明的变量 只能在当前作用域使用
const关键字 在es6中 用来 声明静态常量
常量 所有字母必须全部大写
const PI = 3.1415926;
console.log(PI);
PI = 0;
console.log(PI)//报错 常量无法修改
const ABC; 常量在声明必须赋值 不然会报错
console.log(ABC)；//常量在声明是必须赋值
const 在作用域特性上 个let完全一样
var c = 0;
let aaa =1;
console.log(window);
var 声明的变量 是写在了 window 对象上 是window 的属性或方法
let 声明的变量 跟window 完全没有关系
let ppp =123;
function fn1(p){
let a = p;
console.log(a)
}
fn1(ppp)

解构赋值

正常赋值
let x= 0;
let y =1;
解构赋值
let(x,y)=[0,1];
本质上就是一种模式匹配
只要等号两边的模式相同 左边的变量 就会赋予相对应的值
let [a,[b1,b2],c] =[0,[1,2],3];
console.log(a);
console.log(b1);
console.log(b2);
console.log(c);
let [a,,b]=[1,2,3]
console.log(b);按位置匹配
let [aaa=100]= [1000];//a=1000;
let[a=100] = [,1000];//a=100
console.log(a);//结果 a =100; 解构中的默认值

let obj ={
names:'张三',
age:18,
sex:'女',
data:[0,1,2,3,4],
say:function(){
console.log('你好我是张三')
}
}
es5的写法
var name1 = obj.name;
var age1 = obj.age;
es6解构赋值 解构对象时
变量名 必须和属性名相同 但是 顺序没有要求
以对象的形式解构数组
let arr = [1,2,3,4,5]

let{
[0]:a,
[4]:b,
}=arr;

当对象中 含有数组时
let obj = {
data:[0,1,2,3,4]
}
let{
data,//以变量取出相对应的值 变量名必须和属性名相同
data:arr,//以属性名 取出 相对应键值对的值 并保存在变量arr中
data:[a,b,c,d,e]//将上一步中的arr彻底解构
}= obj;
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e);
当对象中含有数组 数组内又有对象
let obj = {
data:[{
age:1,
},{
name:2,
}]
}
let {data:[{age},{name}]} = obj;
console.log(age,name)

let str = 'hellow';
let [a,b,c] =str;
let{
[0]:d,
}=str
console.log(a,b,c,d);
解构赋值 解构字符串 会将字符串当做一个数组来解构

函数的扩展

形参默认参数
function fn1(x){
var a = x || 10;//js中默认值
}
function fn2(x=10){
var a= x;//es6中 默认值；
consolle.log(x);
}
形参默认值 不是赋值 而是惰性传值
function fn3(x){
var x= 0;
let x= 0;
console.log(x)

在es6中 不能用let或const声明与形参重复的变量或常量
其实 不管是在es6 还是js中 形参跟变量名都尽量不要重复
}
fn3(10)

箭头函数

普通函数
命名函数
function fn1(a){
console.log(a)
}
//字面量的形式
var fn2 = function(a){
console.log(a)
}
箭头函数
两个参数
var fn3 = (a,b)=>{
console.log(a,b)
}
fn3(10,11)
一个参数可以省略括号
var fn4 = a =>{
console.log(a)
}
fn4(2)

没有参数
没有参数 不能省略括号
var fns =()=>{
console.log(123)
}
//返回值
function aa(){
return 123;
}
let aa1 = ()=>123;箭头函数

箭头函数中如果只有一条 return 语句
则可以省略 大括号
如果这个箭头函数 还有且只有一个形参
则小括也可以省略

let aa1=a=>a+1;
function b(){
return function(a){
return a+1;
}
}
let b =()=>a=>a+1;//b 没有参数 就是一个括号
var a =b();
a(12)
let b1 = b()(1);
console.log(b1)
btn.onclick = function(){
console.log(this);//标签
}
btn1.onclick=()=>{
console.log(this)//window
}
//一般绑定事件函数的时候 不要使用 箭头函数
btn.onclick = function(){
setInterval(function(){
console.log(this);//window
},3000)
}
btn1.onclick = function(){
setInterval(()=>{
console.log(this);标签本身
}，300)
}
btn.onclick = function(){
btn1.onclick =()=>{
console.log(this);//btn
}
}
当内部韩大户使用 箭头函数时 不会改变 外部函数到this指向
//总结
普通函数 谁调用 this指向谁
箭头函数 自己被定义时 定义的环境中的this指向谁 我的this就执行谁

let obj = {
say:function(){
console.log(this);//obj
},
eat:()=>{
console.log(this);window
}
}
console.log(obj.say());
console.log(obj.eat())
构造函数
给对象定义方法 不要使用 箭头函数
function Dog(){
this.say = function(){
console.log(this)
}
this.eat =()=>{
console.log(this)
}
}
let f1 = new Dog()
f1.say();
f1.eat();