day02-前端ES6

最新推荐文章于 2024-07-25 15:03:56 发布

JustMove0n

最新推荐文章于 2024-07-25 15:03:56 发布

阅读量241

点赞数

分类专栏：谷粒商城文章标签：前端 es6 javascript

本文链接：https://blog.csdn.net/weixin_53060535/article/details/126713114

版权

谷粒商城专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.ES新特性

什么是ES6？

是脚本浏览器语法的规范，而各种我们熟悉的js语言，如javascript则是规范的具体实现
创建es6文件夹，创建一个let.html

**shirt+！**生成

1.let&const

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // var声明的变量会越域
        // let声明到变量会有严格的作用域
        // {
        //     var a = 1;
        //     let b = 3;
        // }
        // console.log(a);
        // console.log(b);   //  b is not defined

        // var可以声明多次
        // let只能声明一次
        // var m = 1;
        // var m = 2;

        // let n = 3;
        
        // console.log(m);
        // console.log(n);


        // var会存在变量提升
        // let不会变量提升
        // console.log(a);
        // var a = 1;
        // console.log(b);  // Cannot access 'b' before initialization
        // let b  = 2;

        // const声明常量
        const a = 1;
        a = 3;  // Assignment to constant variable.
    </script>
    
</body>
</html>

2.结构表达式&字符串

    <script>
        // let arr = [1, 2, 3];
        // // 数组赋值
        // let [a, b, c] = arr;
        // console.log(a, b, c);


        // 对象值打印
        const person = {
            name: "liubo",
            age: 18,
            language: ['a', 'b', 'c']
        }

        const { name, age, language } = person;

        console.log(name, age, language);


        // 字符串扩展
        let str = "hello.vue";

        console.log(str.startsWith("hello")); // true
        console.log(str.endsWith(".vue"));  // true
        console.log(str.includes("hello")); // true
        console.log(str.includes("e"));  //true

     
        function fun(){
            return "这是一个函数"
        }

        // 字符串插入变量和表达式
        let info = `我叫${name},我今年${age}岁，我想说一句话:${fun()}`;
        console.info(info);  

    </script>

3.箭头函数

    <script>
        // 函数不传就设置默认值
        function fun(a, b = 1) {
            return a + b;
        }
        console.log(fun(10));

        // 传可变参数
        function fun1(...values) {
            console.log(values.length);
        }

        fun1(1, 2, 3, 4);
        fun1(1, 2);

        // 计算值
        let sum = (a, b) => {
            c = a + b;
            return a + c;
        }

        console.log(sum(10, 20));

        let person = {
            name: "liubo",
            age: 18
        }
        // 函数直接打印对象的name
        let hello = ({ name }) => console.log("hello," + name);
        hello(person);
    </script>

4.对象优化

    <script>
        const person = {
            name: "javk",
            age: 12,
            language: ['java', 'js']
        }

        console.log(Object.keys(person));  // ["name","age","language"]
        console.log(Object.values(person)); // ["javk",12,Array(3)]
        console.log(Object.entries(person)); // [Array(2),Array(2),Array(2)]


        const target = {a:1};
        const source1 = {b:2};
        const source2 = {c:3};

        Object.assign(target,source1,source2);

        console.log(target);  // {a:1,b:2,c:3}


        // 声明对象的简写方式
        const name = "张三";
        const age = 21;
        const person1 = {name,age};
        console.log(person1);

        // 对象函数简写
        let person3 = {
            name : "里斯",
            // 箭头函数里面不能使用this. 必须使用对象.
            eat : food => console.log(person3.name +"在吃"+food),
            eat2(food){
                console.log(person3.name +"在吃"+food);
            }
        }

        person3.eat("苹果");
        person3.eat2("香蕉");

        // 对象扩展运算符
        // 1.拷贝对象
        let p1 = {name:"abc",age :12}
        let someone = {...p1}
        console.log(someone)    
        // 2.合并对象
        let age1 = {age:14}
        let name1 = {name :"kk"}
        let p3 = {...age1,...name1}
        console.log(p3)
    </script>

5.map和reduce

    <script>
        // map : 将arr数组中的元素都*2
        var arr = ['1', '2', '3'];

        arr = arr.map(item => item * 2);

        console.log(arr);

        // reduce：为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未赋值的元素
        let result = arr.reduce((a, b) => {
            console.log("上一次处理的值" + a);
            console.log("当前处理的值" + b);
            return a + b;
        })

        console.log(result);
    </script>