ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set...

我不是女神ヾ 2023-08-17 17:16 62阅读 0赞

这篇es6的学习笔记来自于表哥 表严肃，是我遇到过的讲课最通透，英文发音最好听的老师，想一起听课就去这里吧 [https://biaoyansu.com/i/hzhj1206][https_biaoyansu.com_i_hzhj1206]

ES6就是JS6，JS的第六个版本，ES可以理解为一个标准，JS可以理解为一个标准的实现。

ES6现在各大浏览器都在全力支持，ES6强大、严谨、简洁。兼容问题可以用一些工具解决，把es6转化成es5，开发时写es6，生产环境跑es5。

# 1 let命令 #

## 1.1作用域 ##

let和var一个功能，但是作用域不同，

var可以作为全局变量，和局部变量，

let是只要遇到一个代码块，就算作一个域，

例：

if(1){
        let b=2;
        console.log("b：",b);
    }
    console.log("b：",b);

![1478663-20190904170750494-1846312691.png][]

let一般用到for语句中，

例：

for(var i=0;i<5;i++){
        console.log(i);
    }
    console.log("循环外的i:"+i);

![1478663-20190904170826430-83728761.png][]

其实这里已经不需要i了，这就是用var定义的一个弊端。

如果改成let：

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

console.log(i);

console.log("循环外的i:"+i);

![1478663-20190904170904459-1869705726.png][]

这样更安全了。

## 1.2 es5的变量提升问题 ##

例1:

只写一句console.log(a);

![1478663-20190904170919893-18048017.png][]

如果把a定义在下面，

console.log(a);

var a;

![1478663-20190904170929988-1031887916.png][]

例2：

var a=1;
    function fun(){
        if(false){
            var a=2;
        }
        console.log(a);
    }
    fun();

![1478663-20190904170955373-944654083.png][]

es5的变量提升是为了防止一些错误的发生，迁就了开发者。但是这个功能在实际开发中是不利的，需要的是更加严谨的代码，所以改成用let就可以了。

console.log(a);

let a;

![1478663-20190904171006540-412659714.png][]

# 2 const命令 #

const就是constant，常量的意思，

1）在程序执行过程中，常量不会被改变，

2）在声明时一定要赋值，否则会报错，

3）作用域和let相同，在代码块中，

4）不但可以赋值为简单的值，还可以为一个对象

那么问题来了，如果一个常量指向一个对象，然后把这个对象的值改变，行不行呢？

例：

let user={
        name:'你的名字',
        age:18
    };            
    const User=user;            
    console.log(user);
    user.age=19;
    console.log(user);

![1478663-20190904171200917-29246197.png][]

结论：如果常量的值是一个对象，那么对象本身是可以改变的，不变的是常量指向对象的指针。

# 3变量的解构赋值 #

## 3.1数组 ##

1）最简单的赋值：

var a=1,b=2,c=3;可以写成var [a,b,c]=[1,2,3];

2）比较复杂的结构也可以：

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

3）还可以跳着赋值：

var [a,,c]=[1,2,3];
    console.log("a:"+a);
    console.log("c:"+c);
    console.log("b:"+b);

![1478663-20190904171241644-1122533996.png][]

4）把第一个值赋给a，剩下的全给c，可以用...来写：

var [a,...c]=[1,2,3];
    console.log("a:"+a);
    console.log("c:"+c);

![1478663-20190904171259005-1942193869.png][]

5）还可以指定默认值：

var [a,b,c="default",d="default"]=[1,2,3];
    console.log("a:",a);
    console.log("b:",b);
    console.log("c:",c);
    console.log("d:",d);

![1478663-20190904171338042-300259331.png][]

6）等号两边数量不同也没关系

var [a,b,c]=[1,2];
    console.log("a:",a);
    console.log("b:",b);
    console.log("c:",c);

![1478663-20190904171350106-1672269362.png][]

用解构赋值，简单、清晰、强大，

只简单的几个符号，就把之前需要借助函数才能完成的功能完成了。

## 3.2对象 ##

1）例1：

var obj={
        a:1,
        b:2
    }
    let {a,b}=obj;
    console.log("a:",a);
    console.log("b:",b);

![1478663-20190904171408594-828293693.png][]

2）例2：

var obj={
        a:1,
        b:2
    }
    let {c,b}=obj;
    console.log("c:",c);
    console.log("b:",b);

![1478663-20190904171435052-498656855.png][]

名称要相同，但是没有时也不会报错，是undefined

3）例3：改变名称

var obj={
        a:1,
        b:2
    }
    let {a:A,b}=obj;
    console.log("A:",A);
    console.log("b:",b);
    console.log("a:",a);

![1478663-20190904171452521-1405310149.png][]

这里的a只作为一个定位存在，前面let \{a,b\}=obj;就是let \{a:a,b:b\}=obj;只是省略没写。

4）注意，这种写法是不行的：

![1478663-20190904171458724-630945447.png][]

![1478663-20190904171502954-1881326326.png][]

大括号不能出现在最前面，会被解析成代码块。

可以加个小括号，就行了，说明是一条语句：

var obj={
        a:1,
        b:2
    }
    let a;
    ({a,b}=obj);
    console.log("a:",a);
    console.log("b:",b);

![1478663-20190904171539187-2109603470.png][]

5）稍微复杂一点的解构：

var obj={
        arr:[
            "abc",
            {
                a:1
            }
        ]
    }
    let {arr:[str,{a}]}=obj;
    console.log("str:",str);
    console.log("a:",a);

![1478663-20190904171601804-541383067.png][]

6）指定默认值：

let {a=1,b=2}={a:10};
    console.log("a:",a);
    console.log("b:",b);

![1478663-20190904171742880-218685332.png][]

let {a:A=1,b=2}={a:10};
    console.log("A:",A);
    console.log("b:",b);

![1478663-20190904171757597-742181671.png][]

7）真实的项目中应用：处理服务器返回的数据

let res={
        status:200,
        id:12,
        data:[
            {
                name:"龙龙"
            },
            {
                name:"巍巍"
            }
        ]
    }
    
    let {status,id,data}=res;
    if(status==200){
        console.log(data);
    }

![1478663-20190904171823120-1065342760.png][]

8）不但可以解构数据，还可以解构方法：

let {floor,pow}=Math;
    let a=1.9;
    console.log("floor(a):",floor(a));
    console.log("pow(2,3):",pow(2,3));

![1478663-20190904171837091-301384479.png][]

对象的解构赋值简洁又强大。

## 3.3其他 ##

1）例如求字符串的长度：

var len="abc".length;
    console.log(len);

用解构的方式可以直接写成：

var {length}="abc";
    console.log("length:",length);

![1478663-20190904171909045-1273205778.png][]

这样写语法非常简洁。

2）解构字符串

let [a,b,c]="abc";
    console.log(a,b,c);

![1478663-20190904171925974-1319024245.png][]

3）可以对函数的传参进行解构

常规写法：

![1478663-20190904171934082-269065131.png][]

解构写法：

var arr=[1,2];
    function test([a,b]){
        console.log("a:",a);
        console.log("b:",b);
    }
    test(arr);

![1478663-20190904171951055-1223695978.png][]

传数组有个弊端，必须遵循顺序，那么可以传个对象，

var obj={    
        b:2,
        a:1
    };
    
    function test({a,b}){
        console.log("a:",a);
        console.log("b:",b);
    }
    test(obj);

![1478663-20190904172011868-843307864.png][]

还可以指定默认值：

var obj={    
        b:2    
    };
    
    function test({a=10,b}){
        console.log("a:",a);
        console.log("b:",b);
    }
    test(obj);

![1478663-20190904172028202-229425691.png][]

这种方式大大简化了代码，而且更加易懂，更易于维护

# 4新增字符串方法 #

1）测试一个字符串中是否存在另一个字符串

之前：

console.log("abc".indexOf("a")!==-1);

新方法：

console.log("abc".includes("a"));

![1478663-20190904172106622-14808243.png][]

代码更简洁，更易读

2）startsWith是不是以某个字符串开头，endsWith是不是以某个字符串结尾

console.log("abc".startsWith("a"));

![1478663-20190904172143262-1677048099.png][]

console.log("abc".endsWith("ab"));

![1478663-20190904172153519-956568793.png][]

3）repeat把一个字符串重复，参数为重复的次数

console.log('abc '.repeat(3));

![1478663-20190904172212354-1423400492.png][]

# 5模板字符串 #

es6引入了一个新的字符串概念---模板字符串

模板，可以理解为一个填空题，那么数据就是“空”。只有模板和数据结合起来，才有意义。模板是用于找规律的，重复的地方写死，动态的地方通过数据动态加载。

在es6中可以使用反引号\`\`，反引号里面可以断行，这样格式上就可以跟写html一样了，还可以直接把变里写进去，语法为$\{变量名\}。

例：

let title="这是一个标题";
    
    var tpl_es5='<div>'+
        '<span>'+title+'</span>'+
    '</div>';
    
    let tpl_es6=`
        <div>
            <span>${title}</span>
        </div>
    `;
    console.log("tpl_es5:",tpl_es5);
    console.log("tpl_es6:",tpl_es6);

![1478663-20190904172314472-1403099637.png][]

还可以在模板里嵌套模板

例：

let title="这是一个标题";
    let tpl_2=`
        <div>
            <span>${title+`
                <em>${1234}嵌套的</em>
            `}</span>
        </div>
    `;
    console.log("tpl_2:",tpl_2);

![1478663-20190904172332357-568778831.png][]

# 6 Symbol类型 #

Symbol是es6引入的新的数据类型。Symbol有一个特性，每次创建一个Symbol，它的值都是不一样的，具体值是多少，不需在乎。

//创建一个Symbol

let a=Symbol();

可以传一个参数，用于描述创建的Symbol，这个描述对于这个Symbol的值是毫无影响的，传不传，传什么，无所谓。

Symbol最大的作用就是可以作为一个对象的属性名称，防止对象的属性被重写。

用于临时且局部更改对象的属性，并不会更改对象原始属性的值。

# 7 Proxy #

Proxy的意思是代理，用于在语言层面上操作一个对象，

创建一个Proxy

有两个参数，第一个是想传入的对象，第二个是配置项。

在配置项中有get方法，参数为：对象、方法名

例：

![1478663-20190904172433097-2016518700.png][]

对比一下es5的写法：

var user={
        fname:'名字',
        lname:'姓',
        full_name:function(){
            return this.lname+' '+this.fname;
        }    
    }    
    console.log(user.full_name());    
    console.log(user.full_name);

![1478663-20190904172453042-2108178877.png][]

定义成Proxy，就不用再另外写方法了，可以用prop写分支，就能实现不同的功能了。

get方法就像一个边滤器，在对象取值的过程中加了一层。

set方法：可以针对不同的属性设置一些值。

更多详细用法，我找到了阮一峰大神写的：

[http://es6.ruanyifeng.com/?search=Proxy&x=4&y=8\#docs/proxy][http_es6.ruanyifeng.com_search_Proxy_x_4_y_8_docs_proxy]

# 8 Set #

es6引入的新的数据结构，和数组相似，只是值全都是唯一的，不允许重复，如果传入重复的，则只取一个，其他丢掉。

例：

var s=new Set([1,2,3,3]);
    console.log("s:",s);

![1478663-20190904172521257-919058741.png][]

常用属性：

size，长度

常用方法：

add()，添加

delete()，删除

has()，检查是否拥有某个值

clear()，清空

例：

//创建            
    var s=new Set([1,2,3,3]);
    console.log("s:",s);
    //长度
    console.log("s.size:",s.size);
    //添加
    s.add(4);
    console.log("s:",s);
    //删除
    s.delete(2);
    console.log("s:",s);
    //判断
    console.log("s.has(5):",s.has(5));
    //清空
    s.clear();
    console.log("s:",s);

![1478663-20190904172545923-1859671471.png][]

转载于:https://www.cnblogs.com/hzhjxx/p/11460420.html

[https_biaoyansu.com_i_hzhj1206]: https://biaoyansu.com/i/hzhj1206
[1478663-20190904170750494-1846312691.png]: /images/20230808/c71c7b61fd7e4ab9b503656613fa2dcd.png
[1478663-20190904170826430-83728761.png]: /images/20230808/ea78b404d0634dc6b941e36fb44c2e5e.png
[1478663-20190904170904459-1869705726.png]: /images/20230808/b91bd83ebef84917a4620bd3970b8105.png
[1478663-20190904170919893-18048017.png]: /images/20230808/5e24eb92aa84478689b827e046ccb96f.png
[1478663-20190904170929988-1031887916.png]: /images/20230808/144d04d53e844c068cace5cb8cd7efac.png
[1478663-20190904170955373-944654083.png]: /images/20230808/423f1670b030475386ac260c9764c4ee.png
[1478663-20190904171006540-412659714.png]: /images/20230808/b8afb84b458f403fa6e291ee6d12a70f.png
[1478663-20190904171200917-29246197.png]: /images/20230808/5eb4c7b47f054ee09d1d55c0392f10a7.png
[1478663-20190904171241644-1122533996.png]: /images/20230808/56ef543f4f1c4b1bb5f12a0586d1c66c.png
[1478663-20190904171259005-1942193869.png]: /images/20230808/6fae31d3429e44a8b17549e4abc5425b.png
[1478663-20190904171338042-300259331.png]: /images/20230808/204e378f8a4a4873b7092aec74956792.png
[1478663-20190904171350106-1672269362.png]: /images/20230808/f46aa68f9fa4406784708c7852ef6d30.png
[1478663-20190904171408594-828293693.png]: /images/20230808/3421b164f46f444ab769dd93a32dd07e.png
[1478663-20190904171435052-498656855.png]: /images/20230808/7f90690af0b14f2ab43415675df5be4d.png
[1478663-20190904171452521-1405310149.png]: /images/20230808/a79eed42ab8e427fa2e7ee6223e76d5c.png
[1478663-20190904171458724-630945447.png]: /images/20230808/646e4f157c9045b6b5afecc79a4a303b.png
[1478663-20190904171502954-1881326326.png]: /images/20230808/56e731efda8b463496ef1aee9bd13604.png
[1478663-20190904171539187-2109603470.png]: /images/20230808/46af1532b6f7466fa67fe855b2682c58.png
[1478663-20190904171601804-541383067.png]: /images/20230808/3e82eaf16b2e43789469195ec78470d4.png
[1478663-20190904171742880-218685332.png]: /images/20230808/2af6022ad0e54b28a43e516fccae3ddc.png
[1478663-20190904171757597-742181671.png]: /images/20230808/3638cfdf74b940a3b03a99931c6c1a6d.png
[1478663-20190904171823120-1065342760.png]: /images/20230808/ab21b32f49f84f09983d44c6b85ddb8b.png
[1478663-20190904171837091-301384479.png]: /images/20230808/dd70b779dd6a423d8131530954b1ba46.png
[1478663-20190904171909045-1273205778.png]: /images/20230808/eb2e6f1b0fa44f4bb731626981a89605.png
[1478663-20190904171925974-1319024245.png]: /images/20230808/f72f9a4057cb42f28b0a79a676978ce4.png
[1478663-20190904171934082-269065131.png]: /images/20230808/c27f42299bb1450796f61fdc3008b094.png
[1478663-20190904171951055-1223695978.png]: /images/20230808/236e4378bf5347cf8a626b23f69826a0.png
[1478663-20190904172011868-843307864.png]: /images/20230808/f06fead8ff494bcfa72d07a48b8498be.png
[1478663-20190904172028202-229425691.png]: /images/20230808/7f30787f3421441489357fb7e97c7b01.png
[1478663-20190904172106622-14808243.png]: /images/20230808/b1db151e8fc840fa8c2cb01eb0a174b3.png
[1478663-20190904172143262-1677048099.png]: /images/20230808/976af89142a4468f944cc2315dbc08a5.png
[1478663-20190904172153519-956568793.png]: /images/20230808/cab84dd2857b490895cb4632f5d743c7.png
[1478663-20190904172212354-1423400492.png]: /images/20230808/f6f0c2d37e114086b6b214ae4b1863e6.png
[1478663-20190904172314472-1403099637.png]: /images/20230808/68d0538feb4d46f6951eaf8e8d7104eb.png
[1478663-20190904172332357-568778831.png]: /images/20230808/2ce66fd6007541f0ae7fc8f8b99177db.png
[1478663-20190904172433097-2016518700.png]: /images/20230808/c9c4e9db620a4bf4ae2a106a3eff7f91.png
[1478663-20190904172453042-2108178877.png]: /images/20230808/d49d06f565044fceae1c58731aebe96c.png
[http_es6.ruanyifeng.com_search_Proxy_x_4_y_8_docs_proxy]: http://es6.ruanyifeng.com/?search=Proxy&x=4&y=8#docs/proxy
[1478663-20190904172521257-919058741.png]: /images/20230808/e67932129f754a9e89dc1f242e7f6ee8.png
[1478663-20190904172545923-1859671471.png]: /images/20230808/9d25454de8f841b59a3b204dac00da21.png