es6 新特性的学习

程序员文章站 2024-03-18 10:34:22

...

let const

主要是看var 与 let const 至少有一下的几种其区别

区别一：作用域类型

1:全局作用域 window

2:函数作用域 function(){} ()=>{}

3:块状作用域也就是 {}

var 的作用域为 1，2

let const 的作用域为 1，2，3

区别二：var 了可以重复声明（创建） let const 只可创建一次

区别三： var有变量的生命 let const没有

1区别示例： 作用域的不同
{
    var a = 2;
    let b = 1;
    const c = 3 ; 
    console.log('在块状作用域的打印下')
    console.log('a:',a);
    console.log('b:',b);
    console.log('b:',b);

}
  console.log('在块状作用域的外面打印')
  console.log('a:',a);
  console.log('b:',b);
  console.log('b:',b);
如上在块状作用域外面，进行打印块状作用域内的变量只有var能拿到，let const 拿不到

2区别示例：var 了可以重复声明（创建） let const 只可创建一次
var a = 10;
var a = 20;
console.log(a);

let b = 10;
let b = 11; 
console.log(b);

解构赋值

下面一个例子是我们正常情况下的赋值
let  A = B;
然后呢，解构赋值就是在上面形式的基础上做出来了一些体调整

规则：

1 ，A与B 必须是同一类型的东西一般是[] 或者是{}

2，B必须是一个符合语法的类型

3，声明( let )与赋值( = ) 必须同时存在

1规则示例： A与B 必须是同一类型的东西一般是[] 或者是{}
let A = [a,b,c] = [1,2,3]
console.log('A:',A,'单独:',a,b,c)

let B ={q,w,e,r} = {q:1,w:2,e:3,r:4}
console.log('B:',B,'单独:',q,w,e,r)

let C = {z,x,c,v,b} = {a:{a:1,b:2},c:[1,2,3],d:100,e:'string',f:true}
console.log('C:',C,'单独:',z,x,c,v,b) 
错误书写 ：看个错误的写法左边是{} 右边是[] , 没有办法赋值因为左右不等
let D = {z,x,c,v,b} = [{a:1,b:2},[1,2,3],100,'string',true]
2规则示例： B必须是一个符合语法的类型

错误书写 ：下面的示例 B（等号右边）根本就是错的没有这个类型的（{}是块状作用域）
let D = {z,x,c,v,b} = {{a:1,b:2},[1,2,3],100,'string',true}//解析错误，又是obj 但是不是key:value的格式
3规则示例： 声明( let )与赋值( = ) 必须同时存在

错误书写 ：let 与 = 没在一起声明
let a;
[a] = [2];
coonsole.log(a);

括号函数

为了方便函数的书写，于是变换了一个书写格式的模板
let a = function(){
   console.log('fn:',a);
}
let b=()=>{
 console.log('fn:',b);
} 
上面的两个不同的格式而已

括号规则：

1：当只有一个传参的时候（）可以不写

2：当函数内容仅仅只有一个返回语句的时候 {} 可以不写

1规则示例： 当只有一个传参的时候（）可以不写
let a=parameter=>{
    console.log('parameter:',parameter);
}
a(0123456789);
2规则示例： 当函数内容仅仅只有一个返回语句的时候 {} 可以不写
let a = (parameter)=>{
    return parameter*2
}
let b = (parameter)=> parameter*2

console.log('a:',a(2))
console.log('b:',b(5))
 

函数

参数的传递与展开
//...args 必须要是最后的一个参数
function fn(a,b,...args){
    console.log(a,b,...args) 
}
fn(1,2);
fn(1,2,3,4,5);
展开（字面的意思就是展开放在里面的东西）
let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b];
console.log('a:',a[0],a[1],a[2]);
console.log('b:',b[0],b[1],b[2]);
console.log('...a:',...a);
console.log('...b:',...b); 
console.log('...c:',...c);
这个在vue中使用vuex中 mapState mapGetter（在computed） mapMutatains mapActions (methods)中很实用。

有点就是放在,相隔环境里很好用
let obj={};
let arryList =[];
let fn=()=>{console.log('fn')};
let fn1=()=>{console.log('fn1')};
let fn2=()=>{console.log('fn2')};
arryList.push(fn);
arryList.push(fn1);
arryList.push(fn2);
obj={
...arryList,
}
console.log('obj:',obj);
参数的默认
let a = function(a,b=2,c=3){
    console.log(a,b,c) 
}
a();
a(1);
a(10,20);
a(10,20,30)
传递参数的时候，在参数中用 = 赋值，很人性化