首页
   /       /   
Es6语法笔记(部分)
5月
21
Es6语法笔记(部分)
作者:大彭Sir    分类: 学习笔记

Es6语法介绍

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        .box-item{
            width:100px;
            background-color: aquamarine;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin: 10px;
        }
        #ad{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
    </style>
    <body>
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div id="ad"></div>
        <script>
            //let小demo
            item = document.getElementsByClassName("box-item");
            for (let i = 0; i < item.length; i++) {
                item[i].onclick=function(){
                    this.style="background-color:red";
                    this.innerText="我被点击了"
                }
            }
            // 数组的解构
            const F4 = ['小沈阳','刘能','赵四','宋小宝'];
            let [xiao,liu,zhao,song]=F4;
            console.log(xiao);
            console.log(liu);
            console.log(zhao);
            console.log(song);
            // 对象的解构
            const zhaobs = {
                name:'赵本山',
                age:'不详',
                xiaoping:function(){
                    console.log("我也可以演小品")
                }
            }
            let {name,age,xiaoping}=zhaobs;
            console.log(name);
            console.log(age);
            console.log(xiaoping);
            xiaoping();
            // es6引入新的声明字符串的方式【``】
            // 1.声明
            let str = `我是字符串`;
            console.log(str,typeof str)
            // 2.内容中可以直接出现换行符
            let strTwo = `  <ul>
                            <li>box1</li>
                            <li>box2</li>
                            <li>box3</li>
                            </ul>`;
            // 3.变量拼接
            let lovest = '杨幂';
            let out = `${lovest}是我最喜欢的演员`;
            console.log(out)

            // Es6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
            // 这样写更简洁
            let namee = '大彭Sir';
            let change=function(){
                console.log('我贼能吃!!!')
            }
            const bi ={ namee,change}
            console.log(bi)
            // Es6允许使用箭头(=>)定义函数。
            let fn = (a,b) => {
                return a+b;
            }
            let sum = fn(10,20)
            console.log(sum)
            // this是静态的.this始终指向函数声明时所在作用域下的this得值
            function getName(){
                console.log(this.name);
            }
            let getName2 = () =>{
                console.log(this.name);//无法改变指向
            }
            window.name = '彭Sir'
            const es = {
                name:'PengSir'
            }
            getName.call(es);
            getName2.call(es);
            // 不能作为构造函数实例化对象
            // let person = (name,age) =>{
            //  this.name = name;
            //  this.age = age;
            // }
            // let me = new person('xiao',30);
            // person is not a constructor
            // console.log(me);
            // 箭头函数的简写,当型参有且只有一个可以省略括号
            let add = n =>{
                console.log(n+n)
            }
            add(1)
            // 当代码体只有一条语句的时候可以省略花括号,return必须省略
            // 语句执行结果就是函数的返回值
            let pow = n =>n*n;
            console.log(pow(10));
            // 箭头函数demo
            // 需求一:点击div 2s 后颜色变成 粉色
            let ad = document.getElementById('ad');
            ad.onclick = function(){
                setTimeout(()=>{
                    this.style.background="pink"
                },2000)
            }
            // 需求二:从数组中返回偶数的元素
            const arr = [1,6,9,10,100,25];
            // 普通方法
            // const result = arr.filter(function(item){
            //  if (item % 2 === 0) {
            //      return true
            //  } else{
            //      return false;
            //  }
            // });
            // 箭头函数
            const result =arr.filter(item=>item%2===0)
            console.log(result)
            // 箭头函数适合与this无关的回调。定时器、数组方法的回调
            // 箭头函数不适合与this有关的回调。时间回调,对象的方法
        </script>
    </body>
</html>
本文标签:标签: javaScript web Es6 箭头函数
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录