js学习之ES6入门基础篇

最新推荐文章于 2024-08-23 15:19:35 发布
最新推荐文章于 2024-08-23 15:19:35 发布
阅读量302 收藏 1
点赞数
文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/105327279
版权
  • 声明方式

 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>

 

 

  • 字符串（初级）
  1. fromCharCode \ charCodeAt
  2. repeat
  3. includes
  4. startsWith
  5. 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>

 

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

晓秒四下
关注
专栏目录
js:ES6
weixin_48493160的博客
11-26 549
学习js第十三天 ES6是ECMAScript的第6个大版本 是2015年出现的 它对现有的代码做了非常大的改动 新增了很多新内容： 作用域、关键字、类、语法、等 ES6中新增了块级作用域 配合let关键字一起使用 { var a = 10; let b = 11; } console.log(a); console.log(b); // b is not defined let与var的区别 //
ES6入门函数篇（一）之函数形参的默认值
leviscar的博客
11-22 1951
一、在ECMAScript5中模拟默认参数JavaScript函数有一个特别的地方，无论在函数定义中声明了多少参数，都可以传入任意数量的参数，也可以在函数定义时添加针对参数数量的处理逻辑，当已定义的形参无对应的传入参数时，为其指定一个默认值。在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function makeRequest(url,timeout,callback){
js es6
qq_38008818的博客
08-09 1064
var :s5写法 正常 let:s6 只在当前作用域使用，写法严格，暂时性死区（在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）。） const:声明常量与let相似，常量的值无法改变，声明后一定给值，声明一个只读的常量，一旦声明后，必须初始化不能以后赋值 const obj={}; obj.n...
【Js高级——ES6] ES6介绍、搭建环境、变量声明、解构赋值
最新发布
weixin_68856615的博客
08-23 1726
目录：一、ECMAScript 6简介；二、babel 搭建ES6环境；三、变量声明let、constvar声明变量；四、symbol；五、解构赋值：数组解构、对象解构、字符串解构、数字解构、布尔解构、参数结构
JS-ES6
Very_Happy_Lee
11-11 152
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
ECMAScript6基本 使用
estrusKing的博客
07-23 508
文章目录ECMAScript61、ES6简介1.1、什么是ES61.2、ECMAScript和JavaScript的关系1.3、为什么要学习ES6？2、ES6环境搭建2.1、前期准备2.2、ES6环境搭建3、let与const3.1、let命令3.2、const命令4、ES6解构赋值4.1、解构赋值概述4.2、解构模型4.3、数组的解构赋值4.4、对象的解构赋值4.5、解构赋值注意事项4.6、解构赋值的用途5、字符串、函数、数组、对象的扩展5.1、模板字符串5.2、字符串扩展方法5.3、函数的扩展5.4、数
Nodejs学习笔记之入门篇
10-24
总结，Node.js入门需要掌握JavaScript的基础，包括原型链、上下文切换以及ES6的新特性。同时，理解Node.js的事件驱动和非阻塞I/O模型、CommonJS模块系统、文件系统操作和HTTP服务器创建是至关重要的。通过这些知识，...
JavaScript基础教程——入门必看篇
10-22
本文将深入探讨JavaScript的基础知识，帮助初学者快速入门。 首先，JavaScript是一种基于对象和事件驱动的描述性语言，这意味着它依赖于已有的对象来执行任务，并通过事件（如用户点击按钮）来触发代码执行。它也是...
javascript入门教程基础篇
10-23
对于初学者来说，通过阅读和实践JavaScript入门教程，可以逐步掌握这个语言的基础，并为进一步深入学习前端开发或全栈开发打下坚实的基础。在学习过程中，不断练习和理解各种语法和用法，结合实际项目应用，将有助于...
es6标准入门
05-29
本篇文章将深入探讨ES6的核心知识点，帮助你快速掌握这一现代JavaScript的基础。 ### 1. 变量声明：`let` 和 `const` 在ES6之前，我们主要使用`var`进行变量声明，但`var`存在作用域和提升等问题。ES6引入了`let`...
js中的ES6
zouzxxi的博客
05-18 2572
人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断的努力。1万小时的锤炼是任何人从平凡变成世界超级大师的必要条件。——格拉德威尔《一万小时定律》
JavaScript之ES6快速入门
程序员猫爪
07-20 564
一、ES6语法指南 后端项目搭建完毕，接下来就是前端页面了。不过在这之前需要一些准备工作。 我们需要学习ES6的语法标准。什么是ES6?就是ECMAScript第6版标准。 1、什么是ECMAScript？ 来看下前端的发展历程: web1.0时代: 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 web2.O时代: 1995年，网景工程师Brendan Eich花了10天时间设计了JavaScript语言， 1996
ES6(JS)
热门推荐
Yes_You_Can 的博客
12-20 1万+
ES6(JS)笔记
js的es6
qq_40305844的博客
07-08 819
js的es6
JavaScriptES6标准入门
星海拾遗
02-10 1005
目录 一、let和const命令 1.1、let命令 1.1.1基本用法 1.1.2不存在变量提升 1.1.3暂时性死区 1.1.4不允许重复声明变量 1.2const命令 1.3块级作用域 2、变量的结构赋值 2.1数组的结构赋值 2.2对象的解构赋值 2.3字符串的解构赋值 2.4数组和布尔值的解构赋值 2.5函数参数的解构赋值 3、剩余操作符 4、箭头函数 ...
js中es6
今天也要学习！！的博客
08-29 1893
比起之前的语法，es6有很多新语法，让开发者在操作数据和函数的时候，功能既多，操作又简便。const关键字也是用来定义变量的，具备let的所有特性，在定义变量时必须直接赋值，另外，const定义的变量的值不能修改。var定义的变量，其实是属于window属性，平常直接输出变量名，是一种简写，完整写法应该是window.变量名。findIndex - 查找数组中满足条件的第一个元素对应的下标，找到返回下标，找不到返回-1。在大括号中声明的变量只能在大括号中使用，如if、for的大括号中声明的变量。...
JavaScript-ES6
weixin_55088962的博客
06-22 862
JavaScript-ES6基本概念以及语法
JavaScript ES6
onlyeverstudy的博客
02-10 384
ES6笔记欢迎指点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值