简介

ES全称ECMAScript，是脚本语言的规范，而JavaScript是ES的一种实现，所以ES的新特性也可以叫作JavaScript的新特性。

为啥要学习：

  • 语法简洁，功能丰富。
  • 利用框架开发应用，例如利用Vue进行前端开发，需要使用很多ES6的知识。

为什么要专门学习ES6：

  • ES6是ES版本中变动内容最多的，具有里程碑式意义。
  • ES6加入了许多新的语法特性，编程实现更简单、高效。
特性一：let关键字

let关键字是用于声明变量的，类似于var，但是他有些特殊的特性。

  • 用let声明的变量不能重复声明：
    在这里插入图片描述
    结果：

在这里插入图片描述

在这里插入图片描述
结果：

在这里插入图片描述

  • 块级作用于，var没有作用域之分，就是在块级里面声明的变量，在全局，别的代码块里面也能用，而let不行。代码块指的是 if 、else if、 else、for、while等
    在这里插入图片描述
    结果：
    在这里插入图片描述

  • 不存在变量提升，具体意思是必须在该变量声明之后使用该变量。
    var效果：
    在这里插入图片描述

结果：var声明的变量可以在该变量声明前使用，只是没有赋值undefined。
在这里插入图片描述
let效果：
在这里插入图片描述
结果：
在这里插入图片描述

const关键字

const关键字是用于声明常量的，也就是声明时就要赋值，并且之后再也不能更改。
在这里插入图片描述
结果：
在这里插入图片描述
不能改变：
在这里插入图片描述
在这里插入图片描述
这里的不能修改是指，如果是基本类型，那么就不能对其值进行修改，如上面的例子，如果是对象或者数组的换，就不能对对象或者数组的引用进行修改，但是可以对其元素进行修改。

在这里插入图片描述
结果：
在这里插入图片描述
可以对内部元素进行修改：
在这里插入图片描述
在这里插入图片描述

  • 块级作用域，跟let一样。

const一般用于声明对象，let用于声明基本数据类型。

解构赋值

ES6允许按照一定的模式从数组或者对象中提取值，对变量进行赋值，称为解构赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解构赋值</title>
</head>
<body>
    <script>
        //数组的解构
        const arr = [1,2,3,4];
        let [one,two,three,four] = arr;
        console.log(one);
        console.log(two);
        console.log(three);
        console.log(four);

        //对象的解构
        const obj = {
            name:"yehaocong",
            sex:"男",
            age:25,
            fun:function() {
                console.log("哈哈哈");
            }
        };

        //解构的属性名要与obj中的对应
        let {name,sex,age,fun} = obj;
        console.log(name);
        console.log(sex);
        console.log(age);
        console.log(fun);
        fun();

    </script>
</body>
</html>

结果：
在这里插入图片描述

声明字符串的方式 ``

声明字符串的方式有双引号、单引号。
ES6添加了一个 ``,
特性是可以换行和拼接方式有点不同：
用双引号或者单引号进行字符串定义时，换行会报错。
在这里插入图片描述
结果：
在这里插入图片描述
使用新的方式不会报错：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串声明</title>
</head>
<body>
    <script>
        let strNew = `
            <ul>
                <li></li>    
                <li></li>   
                <li></li>   
            </ul>
        `;
        
        console.log(strNew);
        //拼接
        let strNew3 = "<div>" + strNew + "</div>";
        let strNew4 = `<div>${strNew}<div>`;
        console.log(strNew3);
        console.log(strNew4);
    </script>
</body>
</html>

在这里插入图片描述

对象属性定义的优化

ES在定义对象属性时，如果属性名和属性值对应的变量的字符串是一样时，可以省略属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象属性定义的优化</title>
</head>
<body>
    <script>
        let name = "yehaocong";
        let age = 18;

        function fun() {
            console.log("aaaa");
        }

        const obj = {
            name,
            age,
            fun
        };
        console.log(obj);
    </script>
</body>
</html>

在这里插入图片描述

箭头函数

ES新增了一种定义函数的语法，箭头函数。

其他特性都在这个代码里面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数</title>
</head>
<body>
    <script>
        /**
         * 具体语法是 (形参列表，如果只有一个形参，括号可以省略) => {代码逻辑，如果只有一行代码，花括号可以省略，这行代码的值会作为函数的返回值}
         * 
         */ 
        let fun1 = ()=>{
            console.log("fun1");
        };
        fun1();

        let fun2 = param => param*2;
        console.log(fun2(1));

        console.log("分隔================");

        /**
         * this的不同，如果用普通的函数定义方法，this是其函数定义的上下文。
         * 如果使用箭头函数，this始终会指向当前作用域的this的值，换句话理解是箭头函数没有自己的this，要去找当前作用域的this，使用call、apply也无法改变
         */

         //当前全局作用域的this是 Window
         console.log("当前作用于的this=",this);

         //先验证call和apply无法使其改变this。
         console.log("先验证call和apply无法使其改变this================================");
         let fun3 = function(){
             console.log("普通函数this=",this);
         }

         let fun4 = ()=>{
             console.log("箭头函数this=",this);
         }

         const obj = {
             name:"yehaocong",
             age:25
         }

         fun3.call(obj);
         fun3.apply(obj);
         fun4.call(obj);
         fun4.apply(obj);

         //验证this的取值不同
        console.log("验证this的取值不同================================");
        let obj2 = {
            name:"yehaocong",


            fun1:function(){
                //setTimeout延时器是在window的上下文下定义的，所以使用普通函数来作为回调时，函数的this是window
                setTimeout(function() {
                //此处设置延时器的回调函数使用的是普通函数
                console.log("对象obj里面使用延时器时的回调函数使用的是普通函数的this的取值=",this);
            }, 1000);
            },

            
            fun2:function(){
                 //如果使用箭头函数来作为回调时，函数的this始终是指向当前作用域的this，换句话说，箭头函数没有this，要向上找this。
                 //向上找this就是函数fun2的this，也就是obj2
                setTimeout(() => {
                 //此处设置延时器的回调函数使用的是箭头函数
                console.log("对象obj里面使用延时器时的回调函数使用的是箭头函数的this的取值=",this);
            }, 1000);
            }
        };
        obj2.fun1();
        obj2.fun2();

        // //箭头函数不能作为构造函数使用
        // let fun5 = ()=>{

        // }
        // let fun5Obj = new fun5();
    
         
    </script>
</body>
</html>

结果：配合代码、注释细细品味会大有收获。
在这里插入图片描述

箭头函数不能用做构造函数：
在这里插入图片描述
结果：
在这里插入图片描述

箭头函数没有参数列表属性argument：
在这里插入图片描述
结果：
在这里插入图片描述

ES6允许给函数参数赋默认值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数参数赋默认值</title>
</head>
<body>
    <script>
        //ES6允许给函数参数赋默认值，当调用时没有调用该函数没有传对应的实参，就会赋默认值
        //语法
        let fun1 = function(a,b=10){
            return a + b;
        }

        console.log(fun1(5,15));
        //第二个形参没有传值，使用默认值10
        console.log(fun1(5));
    </script>
    
</body>
</html>

结果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数参数赋默认值</title>
</head>
<body>
    <script>
       
         //需要默认值的形参一般要设置在形参列表的最后，如果违背这个，虽然不会报错，但是这样会好无意义
         let fun2 = function(a,b=10,c){
            console.log(a);
            console.log(b);
            console.log(c);
        }
        fun2(1,2);
    </script>
    
</body>
</html>

结果：所以一般最后用在最后面。
在这里插入图片描述

如果需要多个参数都需要默认值，最好配合解构使用，把解构形参放最后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数参数赋默认值</title>
</head>
<body>
    <script>
      
        let fun3 = function(a,{name="1234",age,sex="男"}){
            console.log(a);
            console.log(name);
            console.log(age);
            console.log(sex);
        }

        fun3(1,{
            age:18,
            sex:"女"
        })
    </script>
    
</body>
</html>

结果：
在这里插入图片描述

可变参数

ES6引入可变参数rest来代替arguments参数列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可变参数rest</title>
</head>
<body>
    
    <script>
        //使用arguments
        let fun1 = function(a,b){
            console.log(a);
            console.log(b);
            console.log(arguments);
        }
        fun1(1,2,3,4);

        //使用可变参数语法:
        // ...参数名
        // 该形参必须放在形参列表最后一位
        let fun2 = function(a,b,...param){
            console.log(a);
            console.log(b);
            console.log(param);
        }
        fun2(1,2,3,4,5,6);

    </script>
    
</body>
</html>

结果：
在这里插入图片描述
arguments与rest的区别有：

  1. arguments是隐形注入的参数，rest是显性定义的参数。
  2. arguments是类数组，实际是个对象，rest是个数组。
  3. arguments的值涵盖所有形参，而rest不会涵盖前面定义的形参，如果图，arguments涵盖了a、b形参，而rest没有。

可变参数如果不是最后一个就会报错
在这里插入图片描述

在这里插入图片描述

扩展运算符 …

扩展运行符 … 能够将数组转化为逗号分割列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展运算符...</title>
</head>
<body>
    
    <script>
        let arr = [1,2,3,4];
        let fun1 = function(){
            console.log(arguments);
        }
        //相当于将数组 拆分成 1,2,3,4
        fun1(...arr);

         相当于这样调用 
        fun1(arr[0],arr[1],arr[2],arr[3]);

        //其他用途


        console.log("数组合并============================");
        //数组的合并
        let arr1 = [1,2,3,4];
        let arr2 = [5,6,7];
        //合并方式1
        console.log(arr1.concat(arr2));
        console.log([...arr1,...arr2]);


        console.log("数组克隆============================");
        //数组的克隆
        //这种方式仅仅是引用的复制，实际两个变量还是指向同一个数组
        let arr3 = arr1;
        console.log(arr3)
        //打印true
        console.log(arr3===arr1);

        //这里就相当于创建一个新数组arr4，然后将arr1遍历push进arr4中
        let arr4 = [...arr1];
        console.log(arr4)
        //打印false
        console.log(arr4===arr1);

        //将伪数组转化为真正的数组,arguments就是伪数组
        console.log("将伪数组转化为真正的数组============================");
        let fun2 = function(){
            console.log(arguments);
            console.log("arguments是数组吗：",Array.isArray(arguments));

            //转化
            let arr = [...arguments];
            console.log(arr);
            console.log("arr是数组吗：",Array.isArray(arr));
        }
        fun2(1,2,3);

        

    </script>
</body>
</html>

结果：
在这里插入图片描述

Set构造函数

ES6新增了一个内置构造函数Set，代表着集合，类似数组，但是他的元素是唯一的，不允许出现重复元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Set集合</title>
</head>
<body>
    <script>
        //构造函数可以传入一个数组用于初始化
        let setObj = new Set([8,9,10,10]);
        //主要四个api
        //新增
        setObj.add(1);
        setObj.add(8)
        console.log(setObj);
        //删除
        setObj.delete(8);
        console.log(setObj);
        //元素个数
        console.log(setObj.size);
        //判断是否含有某个元素
        console.log(setObj.has(9));
        console.log(setObj.has(8));

        //用途：
        //数组去重
        console.log("数组去重===================================");
        let arr = [8,9,10,10,2,2,4,4];
        let set1 = new Set(arr);
        let arrNoRepeat = [...set1];
        console.log(arrNoRepeat);

        //取交集
        console.log("取交集===================================");
        let set2 = new Set([1,2,3]);
        let set3 = new Set([2,3,4,5]);
        let andSet = [...set2].filter(item => set3.has(item));
        console.log(andSet);

        console.log("取并集===================================");
        let set4 = new Set([1,2,3]);
        let set5 = new Set([2,3,4,5]);
        let setOr = [...new Set([...set4,...set5])];
        console.log(setOr);

        //去差集是交集相反
        console.log("取差集===================================");
        let set6 = new Set([1,2,3]);
        let set7 = new Set([2,3,4,5]);
        let diffSet = [...set6].filter(item => !(set7.has(item)));
        console.log(diffSet);

    </script>
</body>
</html>

结果：
在这里插入图片描述

Map结构

ES6提供了Map结构，类似对象，是键值对的集合，但是键的范围不限于字符串，各种类型，甚至对象都可以当key。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
</head>
<body>
    <script>
        let map = new Map();
        //设置
        map.set("name","yehaocong");
        console.log(map);

        //根据key获取value
        console.log(map.get("name"));

        //获取map的元素个数
        console.log(map.size);
        //判断key是否存在
        console.log(map.has("name"));
        console.log(map.has("yehaocong"));

        //获取键集合
        console.log(map.keys());
        //获取值的集合
        console.log(map.values());
        //获取键值对集合
        console.log(map.entries());

        //遍历，每个item是一个数组，下标0的元素是key，1是value
        for(item of map){
            console.log(item);
        }
        
        //清空
        map.clear();
        console.log(map);
    </script>
</body>
</html>

结果:
在这里插入图片描述

Number方法扩展
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number方法扩展</title>
</head>
<body>
    <script>
        //新增属性表示JavaScript的最小精度，当两个数相减小于这个精度
        console.log(Number.EPSILON);

        //判断是否是有限数
        console.log(Number.isFinite(200));

        //判断是否是NaN
        console.log(Number.isNaN(Number.parseInt("sad")));

        //判断是否是整数
        console.log(Number.isInteger(12.23));

        //截断小数部分，也就是向下取整
        console.log(Math.trunc(123.45));
    </script>
</body>
</html>

在这里插入图片描述

# javascript # 前端 # es6
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue