ES6学习

最新推荐文章于 2025-07-03 09:31:20 发布

new@*

最新推荐文章于 2025-07-03 09:31:20 发布

阅读量620

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript web前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yfcjava/article/details/121743968

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

web前端

3 篇文章

订阅专栏

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <button>b1</button>
        <button>b2</button>
        <button>b3</button>
        <button>b4</button>
        <button>b5</button>
    </body>
    <script>
        // ES6(2015年)为什么新增let和const声明变量的关键字:
        // var不好用: 1.var可以重复声明
        var a='9'
        var a='10'
        console.log(a)
        // var不好用: 2.没有块级作用域(var 对function才有块级作用域)
        if(true){
            var a=90
        }
       (function(i){var a=i})(99)
        
        console.log(a)

        
        var btns=document.getElementsByTagName("button")
        for(var i=0;i<btns.length;i++){

            btns[i].addEventListener("click",function(){
                console.log(i)
            })
        }

        // var不好用: 3.var无法限制修改
        const b=99
        // b=88 //浏览器会报错

        //obj声明为复合数据类型
        const obj={"name":"hello","age":18}
        // obj={}//修改obj的引用会报错
        console.log(obj)
        obj.name="ss"//修改引用对象的属性就不会报错
        console.log(obj)

    </script>
</html>

const与let声明的简单变量的存储格式：

复合数据类型的存储方式：

es6箭头函数与普通函数区别(包含this的区别):

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
        <div id="box"></div>

    </body>
    <style>
        #box{
            background:red;
            padding: 10px;
            display: inline;
        }
        #box.box{
            background: yellowgreen;
        }
    </style>
    <script>
        //javascript定义函数
        function fun1(x){
            return x**2;
        }
        //javascript定义匿名函数
        const fun2=function(x){
            return x**2;
        }
        //es6 新增箭头函数:
        //function换成'=>',箭头放在形参和函数体中间
        //1.如果没有参数或有多个参数就需要使用()来定义参数列表
        //2.如果有一个参数，可以不用()
        //3.如果函数体中只有一条语句，就可以不用{}并且会自动加上return
        const fun3=x=>x**2;
        const fun4=(x1,x2)=>{x1+=1;x2+=2;return x1+x2}
        console.log("普通函数 "+fun1(1))
        console.log("匿名函数 "+fun2(2))
        console.log("箭头函数 "+fun3(3))

        //  --------------------
        //箭头函数在回调函数中很好用
        a=[2,1,5,4,3]
        a.sort(function(a,b){return a-b}) //等价a.sort()
        a.sort((a,b)=>a-b) //使用箭头函数比直接function更简洁
        console.log(a)

        //箭头函数在返回json对象时,必须在json对象外加()
        const fun = id=>({id:id,name:"zhangsang"});
        console.log(fun(10).name)

        //-----------------------
        //普通函数的this：指向它的调用者，如果没有调用者则默认指向window
        const fun_this={
            fun:function(){
                console.log(this)
            }
        }
        fun_this.fun()//该函数中的this是fun_this

        // const box=document.getElementById("box")
        // box.onclick=function(){
        //     this.className="box"
        //     console.log(this.className)
        // }
        // box.onclick=function(){
        //     obj=this
        //     setTimeout(function(){
        //         //该函数的this指向是window对象
        //         obj.className="box"
        //         console.log("-")
        //     },3000)
        // }
        
        //箭头函数的this:指向箭头函数定义时所处的对象，
        // 而不是箭头函数使用时所在的对象，默认使用父级的this
        // 箭头函数没有自己的this，它的this是继承而来的
        const arrow_this={
            fun:()=>{console.log(this)}
        }
        arrow_this.fun()//此处的this指向是window对象非arrow_this对象

        const box=document.getElementById("box")
        box.onclick=function(){
            //这儿的this是box对象
            setTimeout(()=>{
                //这儿的this继承了它声明所在的父级对象(box)
                console.log(this)
                this.className="box"
            },1000)
        }

    </script>
</html>

es6数组新增高级用法

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
    </body>
    <style>
    </style>
    <script>

        //数组的新增高级用法 filter(过滤器)、map(映射)、reduce(汇总)
        goodsPrice=[10,5,30,20,9]//商品价格数组
        //取出价格大于10的商品,filter有几个数组就会回掉几次，
        //每次将返回值为true的数组值保存下来
        let goodsPrice_10=goodsPrice.filter(price=>price>10)
        //此处代码(传统方式)作用相当于以上代码
        // let goodsPrice_10=[]
        // for(let i of goodsPrice){
        //     goodsPrice_10.push(i)
        // }
        console.log(goodsPrice_10)
        //将价格大于10的商品打5折,map函数将每个数组中的值处理后返回
        let goodsPrice_5=goodsPrice_10.map(price=>0.5*price)
        console.log(goodsPrice_5)
        //求价格的和
        //last第一次的值是0，从第二次开始每次取到的值都是上一次的返回值。price每次从数组中取值
        let sumPrice = goodsPrice_5.reduce((last,price)=>last+price,0)
        console.log(sumPrice)

        //链式调用,一行代码代表上面的过程
        console.log(goodsPrice.filter(price=>price>10).map(price=>price*0.5).reduce((last,price)=>last+price,0))

    </script>
</html>

map和set

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
    </body>
    <style>
    </style>
    <script>
        //Set是集合类型，与数学中的集合是一致的
        let v=new Set()
        v.add(1)
        v.add(2)
        v.add(1)
        console.log(v.size)//返回元素的个数
        console.log(v)
        v.forEach(n=>console.log(n))//遍历集合中的元素
        console.log(v.has(1))//集合中是否有1的元素
        v.delete(1)//删除集合中为1的元素
        v.clear()//全部删除
        console.log(v)

        //map是存储键值对的
        let k=new Map()
        k.set("k1",1)//增加一个键值对
        console.log(k.get("k1"))
    </script>
</html>

字符串中的新方法

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
    </body>
    <style>
    </style>
    <script>
        //字符串中的新方法 startsWith和endsWith
        let url="https://www.baidu.com"
        if(url.startsWith("https"))
            console.log("是以https开头")
        else
            console.log("不是以https开头")

        if(url.endsWith(".com"))
            console.log("是以.com结尾")
        else
            console.log("不是以.com结尾")

        //增强版字符串:支持换行并且可以嵌入变量
        let str1="es6"
        let str2="learn"
        console.log(`

        <h1>${str1}</h1>-<h2>${str2}</h2>

        `)
        
    </script>
</html>

解构赋值与三点运算符

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
    </body>
    <style>
    </style>
    <script>

        //解构赋值:左边可以少于右边
        // let arr=[1,2,3]
        // let a = arr[0]
        // let b = arr[1]
        // let c = arr[2]
        let[a,b,c] = [1,2,3]//数组解构赋值,可替换上方
        let{name,age,sex}={name:"zhangsan",age:10,sex:"男"}//json对象的解构赋值
        console.log(a,name)
        let[{a1,b1},[x,y,z],three,four] = [{a:10,b:20},[1,2,3],8,'hello']

        //三点运算符
        let coor=[1,2,3]
        let coor1=[...coor,0]
        function coor2(a,...b){
            //a是一个数值,b会是一个列表
            console.log(a,b)
        }
        console.log(coor1)
        coor2(0,1,2,3,4)


        
    </script>
</html>

面向对象

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
    </body>
    <style>
    </style>
    <script>

        class Person{
            constructor(name,age,sex){
                this.name=name;
                this.age=age;
                this.sex=sex;
            }
            tostring(){
                console.log(this.name,this.age,this.sex);
            }
        }

        const p=new Person("张三",19,"男");
        p.tostring();

        //

        class Student extends Person{
            constructor(name,age,sex,school){
                super(name,age,sex);
                this.school=school;
            }

            tostring(){
                super.tostring();
                console.log(this.school);
            }
        }

        const s=new Student("小米",16,"男","小学");
        s.tostring()
        
    </script>
</html>

json对象新特性

<html>
    <head>
        <title>标题</title>
        
    </head>
    <body>
    </body>
    <style>
    </style>
    <script>//json对象新应用
        const name="张三"
        const age=14
        const sex="男"
        //json对象
        console.log({name:name,age:age,sex:sex})//传统这样写太麻烦
        console.log({name,age,sex})//es6中变量名的简写,如果key和变量名一样可以这样简写

        //方法作为json对象的值
        let m={say:function(){console.log("say goodbye.")}}//传统写法
        let m1={say(){console.log("say goodbye..")}}//es6中的方法的简写,如果方法名与kdy名一样可简写
        console.log(m.say(),m1.say())

        //串行化:将json对象转为字符串，这样方便在网络中传输
        let x1=JSON.stringify({name,age,sex});
        let x2=JSON.parse(x1)//反串行化
        console.log(x2.name);
    </script>
</html>

模块化编程(一个js文件可按需使用其它js文件中的变量和方法等)

a.js:

let name="小红"

function add(){
    return 1+1;
}

class Person{
    constructor(name){
        this.name=name
    }
}

//每个js文件可看成一个模块，模块间是相互独立的
//export让这个对象对外暴露，以便外部的js文件能够使用该js文件中的方法和对象
export {name,add,Person};//json简写

// export {name as name1} 导出也可起别名

b.js:

export let name = "小米"

export function mutex(){
    return 9*4;
}

//缺省导出，一个模块中只能有一个export default
//default 导出时不定义名字，而是在导入时起别名
export default function(){
    return "hello world."
}

index.js:

//这儿使用的是解构赋值
import {name,add} from "./a.js"  //将a.js中暴露的对象导入:可按需导入
import {name as name1,Person} from "./b.js" //可将name取别名,因为两个js文件中都有相同的名字会出现变量重复定义
import default_method1 from "./b.js"

add()
p=new Person()

console.log(default_method1())
//-----------------------------------
//整体导入并起别名
// import * as p from "./a.js";
// p.add()
// p.name
// new p.Person()

a.html:

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
    </body>
    <!-- module定义引入的js文件为模块 -->
    <script src="index.js" type="module"></script>
</html>