es6中的一些新特性

最新推荐文章于 2024-08-07 11:31:18 发布

xingxing12323

最新推荐文章于 2024-08-07 11:31:18 发布

阅读量269

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xingxing12323/article/details/104773716

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript">
    var cc = "sdf"
    console.log("###########新关键字#######")
    for (let i=0;i<5;i++){
        console.log(i);
    }
    //console.log(i); //let控制变量的作用域

    const  a = 10;  //const控制常量
    //a=20;         //直接报错
    console.log("###########新字符串扩展类#######")
    let  s = "hello world";
    console.log("以什么开始"+s.startsWith("hello"))
    console.log("以什么结束"+s.endsWith("hello"))
    console.log("以什么结束"+s.endsWith("world"))
    console.log("包含什么内容"+s.includes("hello"))
    //字符串新的定义方式
    let s1= `sdfsdfsd
        sdfsdfsd
        eweewrwer`
    console.log(s1)


    console.log("#############解构表达式#########")
    console.log("数组解构")
    let arr = [1,2,4]
    let [a1,a2,a3] = arr;
    console.log(a1,a2,a3);
    console.log("对象解构")
    let person = {name:"张三",age:"18"}
    let {name,age} = person;
    let {name:a4,age:a5} = person;
    console.log(name,age,a4,a5);

    console.log("#############函数的优化#########")
    //箭头函数类似lamb表达式
    console.log("箭头函数和默认值")
    let fun1 =(a,b=1)=>console.log(a+b);//添加默认值得方式
    fun1(4)

    console.log("对象中的函数应用")
    let student = {
        name: "zhangsan",
        eat: function (food) {
            console.log(this.name+food);
        },
        eat2:(food) => console.log(this+food),
        eat3(food){
            console.log(this.name+food);
        }
    }
    student.eat("苹果")
    student.eat2("梨")
    student.eat3("香蕉")

    console.log("箭头函数结合解构表达式")
    let fun2 = ({name})=> console.log(name)
    fun2(student)

    console.log("#############数组中的map和reduce方法#########")
    //mvvm model view  view-model 双向绑定
    let arr2 = [2,3,4,6,5]
    let arr3 = arr2.map((a)=>a+10) //此处参数a表示将原有数组中的元素分别使用有map中的函数
    console.log(arr3)
    //reduce函数第一个参数为一个函数，第二个函数为初始值 将初始值和数组中元素依次带入第一个函数，
    // 并且将结果重新付给初始值并与函数中下一个元素进行操作，知道遍历所有函数元素得出一个确切的结果。
    let result = arr3.reduce((a,b)=>a+b,100)
    console.log(result)

    console.log("#############对象的扩展#########")
    let stu2 = {
        name: "zouqi",
        walk(){
            console.log("走路去西藏！")
        }
    }
    let keyss = Object.keys(stu2)
    let values = Object.values(stu2)
    let entry = Object.entries(stu2)
    console.log(keyss)
    console.log(values)
    console.log(entry)

    let stu3 = {
        age: 13
    }

    Object.assign(stu3,stu2);
    console.log(stu3)
    console.log("#############数组扩展方法#########")
    let arr5 = [1,2,3,6,8]
    let re1 = arr5.find((i) =>{
        return false;
    })

    let re2 = arr5.findIndex((n) => {return n<5})
    console.log(re1);
    console.log(re2);
    //let re2 =arr5.findIndex(1)
    let re3 =arr5.includes(10)
    console.log(re3)


</script>
</html>