袁磊老师的课，ES6（一）

最新推荐文章于 2021-10-20 12:00:07 发布

赵俸堃是我的名字

最新推荐文章于 2021-10-20 12:00:07 发布

阅读量255

点赞数

分类专栏：前端基础袁磊老师的课文章标签： ES6 前端基础

本文链接：https://blog.csdn.net/qq_43511842/article/details/88824528

版权

前端基础同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

老师说：这个部分，应该是在这个阶段，最有市场价值的部分。
没有ES6，就学各种框架，可能会越学越困难

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{let a  = 10; var b = 1}
//a 只在括号内有效

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.14.5

模板字符串

const name = 'lux'
concle.log(`hello${name}`)
//在反引号里面写内容，就可以不用写反斜杠来连接多行代码了。
//多行文本：反引号·

解构赋值：自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值作为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会被解析到对应接受该值的变量中。

return[1,2];

var[x,y] = getVal()
//这里面，x就是1，y就是2；
let{foo, bar}={foo:"yuan", bar:"lei"};
[foo, bar] = [bar, foo]  //交换两个变量的值，不需要第三个变量了。
const[a,b,d,e] = "yuanlei"
//a对应后边字符串的y， b对应u，d对应a，e对应n
let{foo:baz} ={foo:'aaa', bar:'bbb'};
//这里面，前面的foo和bar和后面的foo和bar一定是一一对应的，不能改变名字。
//

例子：
注意，let和const的作用域都是在括号内！在外面打印，不能输出哦


<body>
    <script>
        {
            let a = 10;
            const b = 20;
            var c = 30;

        }
        // console.log(a);
        //a不能输出
        // console.log(b);
        //b也不能输出 
        //a和b都是在块内有用的
        console.log(c);
    </script>
</body>

函数参数默认值

function Point(x = 0, y = 0){this.x = x; this.y = y}
//没有默认值的一定放在前面，有默认值的放在后面，所以，当两个都是0的时候，前面的x是可以被去掉的

箭头函数（其实就是定义函数的一种语法结构）
更多的用于写回调函数

var f = v => v;//一个参数的箭头函数
//我定义了一个函数叫f， 参数名字叫v，返回值叫v
var f = function(v){return v;};
var f2=()=>{//0个参数书的箭头函数的定义}
var f3 = (n,m) => n*m;//两个函数的箭头函数
var f4 = (n...m)=>{
//rest参数， m是一个不定长度的数组
let sum = 0;
for(v of m){
sum+=v;
}
return n*sum;
}
var  f =() =>5//等同于 var f = function(){return 5};
//如果箭头函数的代码块部分多于一条语句，就要使用大括号把他们括起来，并使用return语句返回。

下面这个练习，自己拿去玩耍


<body>
    <script>
        //一个参数
        var f1 = v => v * v;
        console.log(typeof f1);
        // 输出的是一个f1的类型，类型是：function
        console.log(f1(10));
        // 没有参数
        var f2 = () => Math.floor(Math.random() * 100);
        console.log(f2());
        // 多参数
        var f3 = (n, m) => {
            return n * (m - 1);
        }
        console.log(f3(2, 5));
        var f4 = (n, m = 2) => {
            return n * (m - 1);
        }
        console.log(f4(3))
        // 箭头函数是可以默认参数的
    </script>
</body>

简化回调函数

//正常函数写法
[1,2,3].map(function(x){
return x*x;
}
}
//箭头函数写法
[1,2,3].map(x =>x*x);

箭头函数中的this？


<body>
    <script>
        // 箭头函数的this！！！十分重要！！！
        function foo() {
            // setTimeout是属于window.setTimeout的
            setTimeout(() => {
                console.log(this);
                //请问，这个this输出的是什么？？
            }, 100)
        }
        foo();
        // 所有的函数默认都是window的，所有这里调用foo函数，输出的是window
        setTimeout(function () {
            console.log(this)
        }, 100);
        new foo();
        // 用箭头函数输出的是window，不用箭头函数，输出的是这个对象，更具体的说是，这个对象的实例
    </script>
</body>

在这里插入图片描述
好了，今天的笔记就倒这里啦

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，ES6（一）

老师说：这个部分，应该是在这个阶段，最有市场价值的部分。没有ES6，就学各种框架，可能会越学越困难ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{let a = 10; var b = 1}//a 只在括号内有效const声明一个只读的常量。一旦声明，常量的值就不能改变。const PI = 3.14.5...
复制链接

扫一扫