09.ES6 之 let ,conts.结构赋值

ES6

ECMAScript 6 （js语言的标准 规范） js是它是实现

编写复杂大型的项目

let var

var 函数作用域

let 块级作用域

-----------

function a(){
if(true){
var str = "shaozhu";
}
console.log(str);
};
a();

 

shaozhu

-----------

function a(){
if(true){
let str = "shaozhu";
}
console.log(str);
};
a();

 

报错

---------------------------------

let 变量不能重复声明一样的变量

let a=1;
let a=2;

 

报错

-------------

箭头函数

变量名= 参数 =>函数体

var f = function(v){

return v
}

var f = v => v;

不传参

var f = () =>"123";

---------

var f =(a1,a2,a3)=>a1+a2+a3;
f(5,5,5)
15

---------

 

 

---------------------------------------------------------------

ES6

ECMAscript 6.0 复杂/大型应用程序/企业开发语言

1. let var {} 大括号来区分

var 1.函数作用域

let 1.块级作用域 2.必须先定义然后再使用

这个要注意 不然在浏览器可能会出现取不到值

 

区别：作用域

--------------------------------------------

区别

变量 提升

let 不存在变量提升 不能再声明前使用

var 可以在变量声明前使用

在同一作用域里面 不予许重复声明

--------------------------------------------

2.暂时性的死区

 

var a = "123";

if(true){
a="qqq";
let a;
}

 

a is not defined

 

---------------------
暂时性的死区

var x=y,y=2;
function a(){
console.log(x,y);
}
a();

 

undefined 2

------------------------------------------

let x=y,y=2;
function a(){
console.log(x,y);
}
a();

 

VM112:1 Uncaught ReferenceError: y is not defined

 

ES6 更加严格了！

---------------------

函数内部重新声明参数

 

function fun(i){

let i;///xxxxxxxxx 不能这样定义 这个是错的

if(trun){let i};//这样就是可以 let 的作用域是块
conslole.log(1);
}

 

---------------------

谷歌 V8 引擎

var str = '124';
function f(){
console.log(str);
if(false){
var str = "1234";//进不去
}

}
f();

 

undefined （BUG）

变量提升的原因

1 1

---------------------

var str = '124';
function f(){
console.log(str);
if(false){
let str = "1234";//进不去
}

}
f();

124

 

能打出来

------------------------------------------------

为什么需要块级作用域？

变量提升

js是浏览器边解析边执行，解析器会优化代码，谷歌 v8引擎

函数作用域 引擎扫描函数体会对var优先执行，会变量提升。

---------------------------------------------------------

let 没有变量提升 严格的块级作用域

 

for(var i=0;i<5;i++){};//i 泄露全局

console.log(i);//取得到

 

5

---------------------------------

for(let i=0;i<5;i++){};

console.log(i);//取不到

 

i is not defined

前面一直在将 var 和 let

let 更加严谨

---------------------------------

总计下：

let 作用域 不存在变量的提升（预加载） 不存在暂时性的死区。

 

---------------------------------

const 声明一个只读的常量，常量的值 不能变化（包括 简单类型 数组/字符串/布尔）

const 和let 一样的 但是是一个常量！

复合类型：数组/对象 存的这些是可以改变的

 

const str ="12345";//不能在变化了 OK

str="12";//报错！！！！ 不能在赋值

const str;//报错 不能声明不赋值！！！ 一定要初始化 赋值

 

-------------------

存对象是可以改变的

const obj = {};
obj.name = "12";
obj.action = function(){

console.log(this.name);
};
pbj = {};//又重复声明，会报错
obj.action();

obj is not defined

 

---------------------------------

 

const arr = [];

arr.push("12");
//这样是可以的
console.log(arr);

 

 

---------------------------------

变量的解构赋值

从数组和对象中提取，对变量进行赋值，称为解构。

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

var x =1;
var y =2;
var z =3;

 

----------------------

let xx=1;
let yy=2;
let zz=3;

//数组 是按照次序来匹配

let[x,y,z] =[1,2,3];//模式匹配


let[x,y,z] =[1,,3];//模式匹配 中间空了个也可以 按照位置来匹配的

let [x,y,z] = [1,[1,2,3,4,5,6],3];//也可以放数组

 

 

//允许指定默认值

let[x,y='4',z] =[1,,3];//模式匹配 y默认4


let[x,y='4',z] =[1];//模式匹配 x1 y4 z undefinde


let[x,y='4',z] =[1,5,3];//模式匹配 y默认4

//这个时候 y是5 后面的赋值会高于默认值 会覆盖了。

 

 

 

let[x,y='4',z] =[1,,null];//模式匹配

//1 4 null //null 会被覆盖4

 

 

----------------------

function f(){
return '123';
};

let[x=f()]=[];
console.log(x)

123

 

后面这个值有 就给赋值后面的那个 没有就算前面那个

上面是数组的

------------------------------------------------------------------

对象的解构赋值 {}

 

let {x,y} = {y:'111',x:'222'};//按照名字来匹配 不是按照次序来的

//x

//"111"

 

--------------------------------------------

let {x:qq,y} = {y:'111',x:'222'};//按照名字来匹配

 

--------------------------------------------------

let {x:qq,y} = {y:'111',x:'222'};

//（x:qq x 是模式 qq才是变量名字）

//x 报错

//qq 不报错

 

个人学习笔记 喷子勿扰