ES6-11第一天

最新推荐文章于 2024-11-11 11:05:35 发布
最新推荐文章于 2024-11-11 11:05:35 发布
阅读量90 收藏
点赞数
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55430536/article/details/126024546
版权
本文通过示例介绍了HTML元素操作、事件监听、ES6中的箭头函数、默认参数、变量简写等特性。展示了如何通过JavaScript改变元素样式，以及使用ES6新特性简化代码，包括定时器、数组过滤、对象属性简写等内容。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 .item{
            display: inline-block;
            border: 1px solid red;
            width: 50px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
    <h2 class="page-header">点击切换颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    </div>
    <script>
        //获取div元素
        let items=document.getElementsByClassName('item');
        //遍历并绑定事件
        for (let i=0;i<items.length;i++){
            items[i].onclick=function(){
                //修改当前背景颜色
               // this.style.background='pink'
                items[i].style.background='pink';
            }
        }
        
    /*  {
        let i=0;
        items[i].onclick=function(){
                //修改当前背景颜色
               // this.style.background='pink'
                items[i].style.background='pink';
            }
      }
      {
        let i=1;
        items[i].onclick=function(){
                //修改当前背景颜色
               // this.style.background='pink'
                items[i].style.background='pink';
            }
      }

      {
        let i=2;
        items[i].onclick=function(){
                //修改当前背景颜色
               // this.style.background='pink'
                items[i].style.background='pink';
            }
        }*/
     
        
    </script>
</body>
</html>



<!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>
        //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
        //这样更为简便
    let name='叶挺';
    let change=function(){
        console.log('我一定会加油进入IT行业的');
    }    
    const me={
        name,
        change,
        improve(){
            console.log('努力总会看到效果的');
        }
    }
    console.log(me);
    </script>
</body>
</html>

<!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>
        //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
        //这样更为简便
    let name='叶挺';
    let change=function(){
        console.log('我一定会加油进入IT行业的');
    }    
    const me={
        name,
        change,
        improve(){
            console.log('努力总会看到效果的');
        }
    }
    console.log(me);
    </script>
</body>
</html>

<!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>参数的默认值</title>
</head>
<body>
    <script>
        //ES6运行给函数参数赋值初始值
        //1.形参初始值 具有默认的参数，一般位置要靠后（潜规则）
        // function add(a,b){
        //     return a+b;
        // }
        // let result=add(1,2)
        // console.log(result,typeof result);
        
        //2.与解构赋值结合
            function connect({host='hh',username,password,port}){
                console.log(host);
            }

        connect({
            host:'atgigu.com',
            username:'root',
            password:'root',
            prot:3306
        })
    </script>
</body>
</html>

<!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>箭头函数</title>
</head>
<body>
   <script>
    //ES6允许使用【箭头函数】
    //声明一个函数
    // let fun=function(){

    // }  等于下面式子
    // let fun=(a,b)=>{
    //     return a+b;
    // }
    // //调用函数
    // // let result=fun(1,4);
    // // console.log(result);

    // //this是静态的，this始终指向声明时作用域下的this的值
    // function get1(){
    //     console.log(this.name);
    // }
    // let get2=()=>{
    //     console.log(this.name);
    // }
    // //设置全局作用域对象的 name 属性
    // window.name='高凡';
    // const conpany={
    //     name:"gaofan"
    // }
    //直接调用
    // get1();
    // get2();


    //call调用
    // get1.call(conpany);
    // get2.call(conpany);无论调用谁都是声明时哪个this的值

    //.不能作为构造函数实例化对象

    // let Person=(name,age)=>{
    //     this.name=name;
    //     this.age=age;
    // }
    // let me=new Person('xiao',30);
    // console.log(me);
    
    //3.不能使用arguments变量

    //4.箭头函数的简写
        //1.省略小括号，当形参只有一个的时候
        // let add=n=>{
        //     return n+n;
        // }
        //2.省略大括号，当代码只有一跳语句的时候，此时return也必须省略
        //而且语句执行完的值就是return
        let add=n=>n*n;
        console.log(add(8))
   </script>
</body>
</html>


<!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>实践</title>
    <style>
        #ad{
            width: 100px;
            height: 100px;
            background-color: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        //需求1 点击2s div变颜色
        //获取元素
        let ad=document.getElementById('ad');
        ad.addEventListener("click",function(){
            //定时器
            setTimeout(()=>{
                //修改背景颜色
                this.style.background='pink';
            },2000)
        });
        //需求2 从数组中返回偶数的元素
        const arr=[1,3,4,5,6,100,25];
        // const result=arr.filter(function(item){
        //     if (item%2===0) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
        const result=arr.filter(item=>item%2===0);
        console.log(result);
        //箭头函数适合与this无关的回调，定时器，数组的方法回调
        //箭头函数不适合this有关的回调，事件回调，对象的方法
        // {
        //     name:'您好',
        //     getName()=>{
        //         this.name;
        //     }
        // }
    </script>
</body>
</html>

<!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>实践</title>
    <style>
        #ad{
            width: 100px;
            height: 100px;
            background-color: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        //需求1 点击2s div变颜色
        //获取元素
        let ad=document.getElementById('ad');
        ad.addEventListener("click",function(){
            //定时器
            setTimeout(()=>{
                //修改背景颜色
                this.style.background='pink';
            },2000)
        });
        //需求2 从数组中返回偶数的元素
        const arr=[1,3,4,5,6,100,25];
        // const result=arr.filter(function(item){
        //     if (item%2===0) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
        const result=arr.filter(item=>item%2===0);
        console.log(result);
        //箭头函数适合与this无关的回调，定时器，数组的方法回调
        //箭头函数不适合this有关的回调，事件回调，对象的方法
        // {
        //     name:'您好',
        //     getName()=>{
        //         this.name;
        //     }
        // }
    </script>
</body>
</html>

<!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>const 定义常量</title>
</head>
<body>
    <script>
        //声明常量
        const school='江苏电子';
        /*
        注意事项*
        1.一定要有初始值
         const school;会报错
         2.一般常量要大写（潜规则）
         3.常量的值不能修改
         school="大大"；报错
         4.块级作用域
         {
            const scll="adad"
         }
         console.log(scll)报错
         5.对与数组和对象元素的修改，不算做对常量的修改，不会报错
        */
       const TEAM=['YT','CJH','PJJ','JT'];
       TEAM.push('XJ');
       console.log(TEAM);
    </script>
</body>

<!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>sperd扩展运算符应用</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
         //1.数组的合并
        //  const py=['cjh','pjj','zyl','yyh'];
        //  const qr=['yjw','lst','wmy'];
        //  //老方法const qrpy=py.concat(qr);
        //  const qrpy=[...py,...qr];
        //  console.log(qrpy);

        //2.数组的克隆
        // const py=['cjh','pjj','zyl','yyh'];
        // const hpy=[...py];
        // console.log(hpy);

        //3.将伪数组转为真正的数组 //伪数组：伪数组 (ArrayLike) ，又称类数组。是一个类似数组的对象，是一种按照索引存储数据且具有 length 属性的对象
        const divs=document.querySelectorAll('div');
        const divArr=[...divs];
        console.log(divArr);
    </script>
</body>
</html>
</html>

ETD陆地巡洋舰
关注
【yishen】个人学习笔记-ES6-ES11新特性
yishen的博客
07-18 1294
说明 下面这些是根据视频教程加上个人理解写的笔记，仅代表个人理解！ 水平不足，如有错误请批评指正！ 如需转载，请指明源链接。无需联系我! PDF版本下载链接-防止md文档图片失效 图片说明：图片均上传到自建七牛云图传，说不好哪天空间或者域名失效，所以保留PDF版本 md版本：md版本图片引用七牛云外链 下载链接 作者：yishen，qq:952008898 教程地址：哔哩哔哩 官网地址 课程目录 ES6-ES11新特性 基础概念 ECMAScript ECMA (Eu
学习ES6-11的第一天
qq_66579387的博客
08-10 523
ES6-11
es6---Promise
muzidigbig的博客
10-20 5490
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大 回调函数 回调地狱 Promise.then()参数 Promise.all() Promise.allSettled() Promise.race() Promise.any() Promise.withPesolvers() Promise链中断方法 async/await Promise 高级用途的技巧
Es6-Es13使用方法及特性（万字超详细）
微光无限的博客
10-23 2002
Es6-Es13使用方法及特性（万字超详细）
es6语法----第一天
weixin_45233925的博客
08-12 127
es6新增变量声明+箭头函数
ES6-第七天
01程序媛
04-21 116
Math 对象的扩展 Math.trunc Math.trunc方法用于去除一个数的小数部分，返回整数部分 Math.trunc(5.1) // 5 Math.trunc(5.9) // 5 Math.trunc(-5.1) // -5 Math.trunc(-5.9) // -5 Math.trunc(-0.12) // -0 Math.trunc内部使用Number方法将其先转...
ES6-第四天
01程序媛
04-21 133
字符串的新增方法 String.fromCodePoint() ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。 String.raw...
ES6-第八天
01程序媛
04-22 105
数组的扩展 扩展运算符 扩展运算符是…。将一个数组转为用逗号分隔的参数序列。扩展运算符（…）也会将空位转为undefined console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 该运算符主要用于函数调用，只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错。 funct...
ES6-第三天
01程序媛
04-15 112
字符串的拓展 字符的 Unicode 表示法，ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。 console.log("\u4ed8") //付 console.log("\u{41}") //A let hello = 123; console.log(hell\u{6F}) //12...
ES6第一天.xmind
08-19
 ②通过剩余运算符可以把多个元素合并到一个变量中  3.解构可以有默认值 对象解构（按需解构）：  1.语法格式 let {属性名} = 对象名；  2.可以通过扩展运算符给对象存储属性名和值 Symbol类型：  1.Symbol ...
ES6第三天.xmind
08-21
ES6知识总结： Promise的使用: 1.使用 new Promise() 构造函数来创建一个 promise 对象 2.接受两个函数作为参数：resolve 和 reject ①resolve 函数在异步操作成功完成时调用，并将 promise 的状态从 "pending" ...
ES6- Class类、由来、用法详解、易错坑点。（一天一个小知识点...）
Autumn_Xiao的博客
08-22 120
这种新写法的好处是，所有实例对象自身的属性都定义在类的头部，看上去比较整齐，一眼就能看出这个类有哪些实例属性。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。子类无法继承父类的私有属性，或者说，私有属性只能在定义它的 class 里面使用。类相当于实例的原型，所有在类中定义的方法，都会被实例继承。，新写法定义的属性是实例对象自身的属性，而不是定义在实例对象的原型上面。父类所有的属性和方法，都会被子类继承，除了私有的属性和方法。
es6-Promise 72行，精华
m0_63864518的博客
11-05 221
晚上我回到宿舍将我要表白她的事告诉了室友，室友纷纷当起了劝退师，觉得我压根配不上她，她有太多优质的选择。陷入爱河的我已经听不进任何人的劝阻了，只要有百分之零点一的机会我就想尝试下。于是接下来的几天我一直在计划我的表白了...... 终于等到那天，今天的天气额外的宁静清爽，我以各种借口约她晚上去操场走走，起初她并不愿意，在我的死打烂缠下终于答应了。我提前买好了她喜欢的抹茶味奶茶，少糖。现在仍然记得等待时的心情，激动，紧张，充满期待，没一会，她也下来了，我俩并肩像操场走去，我曾在无数个日夜幻想这个场...
js：ES6新增 - 数据类型和集合，面向对象编程 - 第二十一天
qdcxy_lj的博客
04-16 410
js：ES6新增 - 数据类型和集合，面向对象编程 - 第二十一天
ES6模块、CommonJS、AMD等不同的模块化实现。
最新发布
fengyiyangdeli的博客
11-11 590
特征 | CommonJS | AMD | ES6模块 | |---------------------|------------------------------|------------------------------|-------------------------------| | 加载方式 | 同步加载 | 异步加载 | 静态模块，包括了异步加载 | | 使用场景 | 主要用于 Node.js | 主要用于浏览器 | 现代 JavaScript 和浏览器 | | 模块定义 |
前端开发中ES6的技术细节二
qq_37779333的博客
11-07 1061
定义： 用于定义基本操作的自定义行为​本质： 修改的是程序默认形为，就形同于在编程语言层面上做修改，属于元编程(meta programming)​元编程（Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的数据，或者在运行时完成部分本应在编译时完成的工作​一段代码来理解。
ES6 中的 async 函数是什么？
Front end development engineer
11-11 352
async函数是 ES6 中的一项重要特性，它极大地简化了异步编程的过程。通过使用async函数和await关键字，你可以编写更清晰、更易读的异步代码。相比于传统的回调函数和 Promise，提供了更好的异步处理方式。同时，顶层await的引入使得异步编程变得更加灵活和方便。无论你是新手还是经验丰富的开发者，掌握async函数都是非常重要的。
前端学习之ES6+
qq_56101688的博客
11-08 1164
let、const 与 var 的区别
什么是Es6，有什么特点
小赵的博客
11-02 1159
ES6 是 JavaScript 发展中的一个重要里程碑，它不仅引入了许多新特性和语法改进，还极大地提升了语言的功能和可用性。掌握 ES6 的新特性对于现代 Web 开发至关重要，无论是前端还是后端开发，都能从中受益。通过学习和使用 ES6，开发者可以编写出更简洁、更高效、更易维护的代码。
JS基础入门：第一天学习概览
"JS基础第一天的学习概述，包括学习方法、目标和JS的三种书写方式的介绍，以及JS中的常见三种打印输出方法和变量的基本写法。" 在JavaScript（JS）学习的初期，理解基础语法至关重要，因为它是后续所有进阶知识的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值