js学习之ES6入门基础篇

声明方式

var \ let \ const

【0】let 变量不允许重复声明，但可以重复赋值。

【1】ES6以前，是函数集作用域，ES6以后开始出现了块级作用域。

【2】var会造成循环操作以外的变量泄露，但let应该不会。

【3】const是常量，不可以重新赋值。更不允许重复声明。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
       
        // [0]
        // var
        var a = 10;
        // ※重复声明，也大丈夫。
        var a = 40;
        console.log("var变量a：" + a);

        // let
        let b = 20;
        // var与let的区别※
        // ※重复声明，不可。
        // let b = 30;
        // let b = function(){}
        // 重复赋值，大丈夫。
        b = 50;
        console.log("let变量b：" + b);

        // [1]
        // ES6 以前 函数级 作用域
        function fun(){
            // 函数级 作用域
        }
        // ES6 以降 块级 作用域
        {
            // 块级 作用域
        }

        // [2]
        // 变量泄露
        for(var i = 0;i<10;i++){

        }
        console.log("变量泄露i：" + i);

        // [3]
        const comCnt = 100;
        // だめ
        //const comCnt = 101;
        // だめ
        //comCnt = 102;
        console.log(comCnt);
        
    </script>
</body>
</html>

字符串（初级）

fromCharCode \ charCodeAt
repeat
includes
startsWith
endsWith

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="gb2312">-->
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
       
        // 1.fromCharCode \ charCodeAt
            // fromCharCode
            // charCodeAt获取编码
            // UTF-4手機的
            // UTF-8等就是編碼
            // UTF-16 一般就到16了
            let a = "asd李";

            // gb2312 => 97
            // utf-8  => 97
            console.log(a.charCodeAt(0));

            // gb2312 => 37833
            // utf-8  => 26446
            console.log(a.charCodeAt(3));

            //  \u4e00 ~ \u9fa5 據説是判断中文的正则
            let strS = '';
            for(let i = 0x4e00;i < 0x9fa5;i++){

                // console.log(i);
                strS += String.fromCharCode(i);
            }

            // 所有中文字的集合
            //console.log(strS);
            // 所有中文字的集合,打印在网页上
            //document.body.innerHTML = strS;
            // 所有中文字的个数
            console.log(strS.length);

        // 2.repeat
        console.log("asd ".repeat(3));
        console.log("<div></div>\n".repeat(5));

        // 3.includes
        // 和indexOf很像，indexOf返回找到了的下标，没有找到就返回-1
        // includes找的到就返回TURE，找不到就返回FALSE
        // 参数一：查找的字符
        // 参数二：从第几位开始查找
        console.log("adsadad".includes('d'));
        // 从零位开始计算的
        console.log("adsadadhghgh".includes('a',5)); // TRUE
        console.log("adsadadhghgh".includes('a',6)); // FALSE
        // 应用举例
        // 判断当前使用的浏览器类型
        var ua = window.navigator.userAgent;
        console.log(ua);
        console.log("是否是谷歌浏览器的判定："+ua.includes("Chrome"));

        // 4.startsWith
        // 参数一：开始的字符
        // 参数二：从第几位开始查找
        console.log("adsadad".startsWith('ad'));

        // 5.endsWith
        // 参数一：结束的字符
        // 参数二：到第几位结束作为被查找的对象
        console.log("[0]:"+"0123456789".endsWith('678'));
        console.log("[1]:"+"0123456789".endsWith('678',8));
        console.log("[2]:"+"0123456789".endsWith('678',9));
        
    </script>
</body>
</html>

字符串（高级之模板）${} ``

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="gb2312">-->
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
       
        // `符号
        console.log(`1111111`);

        // 模板${}
        let temp1 = `temp1Val`;
        let temp2 = `temp2Val`;
        let temp3 = `temp3Val`;
        console.log(`${temp1}` + " ====== " + `${temp2}`);
        console.log(`${temp1 + temp3}` + " ====== " + `${temp2}`);

        // json
        let json = {
            'div' : `<div>div ある</div>`,
            'span' : `<span>span ある</span>`
        }

        document.write(`${json.div + json.span + json.div}`);
        // console.log(document.body.innerHTML);

        // ``函数应用
        function show(){
            console.log("``的函数应用");
        }

        show``;

        // 其他，有点像那个EL表达式哈
        let a1 = 5;
        let b1 = 10;
        console.log(`${a1+b1}`); // 15
        
        
        let a2 = '5';
        let b2 = '10';
        console.log(`${a2+b2}`); // 510
        
    </script>
</body>
</html>

字符串（高级之数组）find

代码片段

        // 数组 find 这货是个循环哦
        // 第一个参数 元素值
        // 第二个参数 数组元素的下标
        // 第三个参数 数组本身

        [1,2,3,4,5,6] .find(function(x,y,z){
            console.log(x,y,z);
        });

运行结果

另：x 相当于 z[y]

函数之箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="gb2312">-->
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="div1">常规测试</div>
    <div id="div2">新测试</div>
    
    <script type="text/javascript">
       
        // 1.箭头函数
        console.log("1.箭头函数");
        x = x => x;
        console.log(x("箭头函数，單一參數"));
        // 多个参数
        a = (b,c) => {
            console.log(x("箭头函数，複數參數"));
            console.log(b,c);
        };
        a(234,345);

        // 相当于
        // 函数对象是x
        // 函数名是x
        // 函数形参是x
        // 但是需要注意 箭头函数 并不完全相当于下面的函数
        // 因为还有this指向的问题
        var x1 = function x1 (x1){
            return x1;
        }

        console.log(x1("箭头函数相當於的普通函數寫法"));

        // 无参数的场合
        show = () => {

            console.log("无参数的箭头函数");
            document.body.style.background="pink";

        }

        // 相当于
        showF = function(){
            console.log("无参数的普通函数");
            document.body.style.background="darkgrey";
        }

        //show``;
        showF``;

        // 练习1 
        console.log("【练习1】");
        [1,2,3].find(function(x){
            console.log(x);
        });

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

        [1,2,3].find(x=>{
            console.log(x);
        });

        // 练习2 
        console.log("【练习2】");
        [1,2,3].find(function(x,y){
            console.log(x,y);
        });

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

        [1,2,3].find((x,y)=>{
            console.log(x,y);
        });

        // 练习3
        console.log("【练习3】");
        div1.onclick = function(){
            console.log("【练习3】事件触发的常规写法");
        }
        console.log("====================================");
        div2['onclick'] = () =>{
            console.log("【练习3】事件触发的新写法");
        }

        // 练习4 匿名函數（无参）
        console.log("【练习4 匿名函數】（无参）");
        (function(){
            console.log("匿名函數的普通寫法");
        })();
        console.log("====================================");
        (()=>{
            console.log("匿名函數的箭頭函數寫法");
        })();

        // 练习5 匿名函數（有参）
        console.log("【练习5 匿名函數】（有参）");
        let a1 = 1000;
        (function(){
            console.log("匿名函數的普通寫法");
            console.log(a1);
        })(a1);

        console.log("====================================");
        let c1 = 2000;
        let d1 = 3000;
        (()=>{
            console.log("匿名函數的箭頭函數寫法");
            console.log(c1+"==="+d1);
        })(c1,d1);



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

函数之延展参数

延展参数：可以呼出函数的时候，如果少传参了的场合，有默认值。

    <script type="text/javascript">
       
        // 2.延展参数
        console.log("=========1=========");
        function fn1(x=5,y=3){
            console.log(x+y);
        }

        fn1();
        fn1(6,10);

        console.log("========2==========");
        // 非延展参数的以前写法
        function fn2(x,y){
            var x = x || 1;
            var y = y || 2;
            console.log(x+y);
        }
        fn2();
        fn2(2,10);

        console.log("=========3=========");

        // 延展参数不会锁定数据类型
        function fn3(x=9,y=[1,3,2]){
            console.log(x);
            console.log(y);
        }
        fn3();
        fn3(3,10);

        console.log("=========4=========");
        function fn4(x={a:3,b:6}){
            console.log(x);
        }
        fn4();
        fn4({a:5});
        fn4({a:7,b:9});

        let obj = {a:10,b:11};
        fn4(obj);
        fn4`obj`;

    </script>

运行以后结果不太一样，我就还不太懂为什么

那个模板好像还是不是完全等价！！！！！！

函数之扩展运算符

运行出来的结果：

扩展运算符就是数组~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="gb2312">-->
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script type="text/javascript">
       
        // 3.扩展运算符
        console.log("========1==========");
        function show1(){
            console.log(arguments);
        }
        show1();
        show1(1,2,3,4,5);

        console.log("========2==========");
        // だめ 箭头函数是没有 arguments 的，所以并不能正常运行。
        // 注释的快捷 ctrl 加 / 
        // show2 = ()=>{
        //     console.log(arguments);
        // }
        // show2();
        // show2(1,2,3,4,5);

        console.log("========3==========");
        function show3(...x){
            console.log(x);
        }
        show3();
        show3(1,2,3,4,5);
        
        console.log("========4==========");
        // 而且是活的
        function show4(y,...x){
            console.log(x);
        }
        show4();
        show4(1,2,3,4,5);
        
        console.log("========5==========");
        // 数组的属性,方法也统统可以使用
        function show5(...x){
            x.push(1);
            //x.pop(0);  // 0 ？？？ 这好像不是value ，而是数组的下标
            x.pop(3);
            console.log(x);
        }
        show5();
        show5(1,2,3,4,5);
        
        console.log("========6==========");
        // 而且真的是活的
        function show6(y=[00,01,02],...x){
            console.log(x);
        }
        show6();
        show6(1,2,3,4,5);

        // 一般升级后，这中 多参数的编程，便不可以了
        console.log("========7==========");
        // function show7(...x,y=[00,01,02]){
        //     console.log(x);
        // }
        // show7();
        // show7(1,2,3,4,5);

        console.log("========8==========");
        // 可以起到合并数组的作用
        var a = [1,11,111];
        var b = [2];
        var c = [3];
        console.log(a.concat(b.concat(c)));
        console.log([...a,...b,...c]);

        console.log("========9==========");
        // 传统写法
        let a1 = `<div></div>`;
        document.write(a1.repeat(5));

        var s= [];
        var sNew = document.body.getElementsByTagName('div');
        for(var i = 0;i<sNew.length;i++){
            s.push(sNew[i]);
        }
        console.log(s);

        console.log("========10=========");
        // 扩展运算符的写法
        console.log([...document.querySelectorAll('div')]);
    </script>
</body>
</html>

啊啊啊啊啊啊啊啊啊啊啊啊好困~~~ 快结束的地方可能有错别字什么的啊！！！不过代码都是运行过的~~~

静码人生

发布了64 篇原创文章 · 获赞 7 · 访问量 6692

私信关注

js学习之ES6入门基础篇

猜你喜欢