day01-ES6新特性

liyuelian 2023-04-16 原文

ES6新特性

1.ES6是什么?

DCMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准，2015年6月发布
ES6设计目标：达到JavaScript语言可以用来编写复杂的大型程序，成为企业级开发语言
ECMAScript和JavaScript的关系：ECMAScript是JavaScript的规范/规则，JavaScript是ECMAScript的一种实现

2.let声明变量

2.1应用实例-基本使用

关于IDEA新版本没有static web创建选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let使用</title>
    <script type="text/javascript">
        let name = "HelloWorld";//使用let声明变量，和var类似
        
        //1.console.log("name=", name);//使用逗号可以输出对象的完整信息
        //使用加号，就是字符串的拼接，如果name是一个对象，会输出object，而不会输出对象的完整信息
        //2.console.log("name="+ name);
        console.log("name=", name);
    </script>
</head>
<body>

</body>
</html>

2.2注意事项和使用细节

let声明的变量有严格局部作用域
let只能声明一次，var可以声明多次
let不存在变量提升，var存在变量提升

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let 使用注意事项和细节</title>
    <script type="text/javascript">
        /**
         * 细节1. let声明的变量有严格局部作用域
         * 细节2. let只能声明一次，var可以声明多次
         * 细节3. let不存在变量提升，var存在变量提升
         */

        //let细节1
        //1)let声明的变量，在代码块中，则作用域在代码块中
        //2)var声明的变量，在代码块中，作用域没有限制
        {
            var name = "你好";
            console.log("name=", name);

            let job = "java工程师";
            console.log("job=", job);
        }
        console.log("name=", name);
        //console.log("job=", job);//job is not defined

        //let细节2-let只能声明一次，var可以声明多次
        var num1 = 100;
        var num1 = 200;
        console.log(num1);//200

        let num2 = 600;
        //let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2
        console.log(num2);

        //let细节3-let不存在变量提升，var存在变量提升
        console.log("x=", x);//Uncaught ReferenceError: x is not defined
        var x = "tom";//var定义了x之后，控制台输出变为 x= undefined

        console.log("z=", z);//can't access lexical declaration 'z' before initialization
        let z = "marry";

    </script>
</head>
<body>

</body>
</html>

3.const声明常量/只读变量

3.1应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const常量/只读变量</title>
    <script type="text/javascript">
        /**
         * const基本使用
         * 1.常量在定义时，需要赋值
         * 2.常量定义后不能修改
         */
        
        // const PI;//missing = in const declaration
        const PI = 3.14;
        //PI = 3.141592653;//invalid assignment to const 'PI'
        console.log("PI=", PI);
    </script>
</head>
<body>

</body>
</html>

3.2注意事项和细节

常量在定义时，需要赋值
常量定义后不能修改

4.解构赋值

4.1基本介绍

解构赋值是对赋值运算符的拓展
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
主要有两种形式：数组解构和对象解构

4.2应用实例

例子1-数组解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构赋值</title>
    <script type="text/javascript">
        let arr = [1, 2, 3];
        //如果要看某个变量的类型
        console.log("arr=>", arr);//arr=> Array(3) [ 1, 2, 3 ]

        //数组解构[解构，即取出元素]

        //1.传统
        let x = arr[0], y = arr[1], z = arr[2];
        console.log(x, y, z);//1 2 3

        //2.ES6风格
        let [a, b, c] = arr;
        console.log("======================");
        console.log(a, b, c);//1 2 3
        let [num1, num2, num3] = [100, 200, 300];
        console.log(num1, num2, num3);//100 200 300

    </script>
</head>
<body>

</body>
</html>

例子2-对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象解构</title>
    <script type="text/javascript">
        /**
         * let moster={name:'牛魔王',age:800}
         * 细节说明
         * 1.对象解构时，let{name,age}中的name和age名称需要和对象属性名保持一致
         * 2.也可以解构对象部分属性，比如let{age}，这样就中取出age属性
         * 3.还有其他的形式，比如方法上使用对象解构
         */

            //monster是一个对象
        let monster = {name: '牛魔王', age: 800};

        //1.传统方式取出属性-解构
        //对象名.属性名
        console.log(monster.name, " ", monster.age);//牛魔王   800

        //2.ES6对象解构
        // 2.1 把monster对象的属性，依次赋值给{name, age}
        // 2.2 {name, age} 的取名要和对象的属性名保持一致
        // 2.3 要使用{},不要使用[]
        // 2.4 {age, name}顺序是无所谓的
        let {age, name} = monster;
        console.log("name=", name, "age=", age);//name= 牛魔王 age= 800
        //下面这个写法也可以
        //let {age, name} = {name: '牛魔王', age: 800};

        //3.还有其他的形式，比如方法上使用对象解构
        function f1({age, name}) {//{name, age} 的取名依然要和对象的属性名保持一致
            console.log("f1-name=", name, " ", "f1-age=", age)
        }

        //把一个对象赋给f1
        f1(monster);//f1-name= 牛魔王   f1-age= 800

    </script>
</head>
<body>

</body>
</html>

5.模板字符串

5.1基本介绍

模板字符串使用反引号`将字符串包裹
模板字符串可作为普通字符串
模板字符串可用来定义多行字符串，即可以将换行字符串原生输出
模板字符串中可以插入变量和表达式，使用${}
模板字符串中可以调用函数

5.2应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板字符串</title>
    <script type="text/javascript">
        //1.字符串 换行会原生输出
        let str1 = `for(int i=0;i<10;i++){
            System.out.println("i="+i);
        }`;
        console.log("str1=>", str1);

        //2.字符串中可以插入变量和表达式，变量名写在${}中，${}中可以放入JavaScript表达式
        let name = "jack";
        //解读：当解析模板字符串中的${name}时，就找到最近的name变量，进行替换
        // 然后可以得到最后解析的字符串
        let str2 = `My name is ${name}`;//My name is jack
        console.log(str2);

        //${}中还可以放入JavaScript表达式
        let str3 = `1+2=${1 + 2}`;
        console.log(str3);//1+2=3
        //表达式也可以使用变量
        let n1 = 80;
        let n2 = 20;
        let str4 = `${n1}+${n2}=${n1 + n2}`;
        console.log(str4);//80+20=100

        //3.字符串中可以调用函数
        function sayHi(name) {
            return "hi " + name;
        }

        let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
        console.log(str5);//sayHi() 返回的结果是=hi jack

        let name2 = "tom";
        let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
        console.log(str6);//sayHi() 返回的结果是=hi tom

    </script>
</head>
<body>

</body>
</html>

6.对象相关新特性

6.1声明对象的简写

应用实例-声明对象的简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明对象的简写</title>
    <script type="text/javascript">
        const age = 800;
        const name = "牛魔王";
        //传统 声明/定义对象
        let monster = {name: name, age: age}

        //ES6 声明/定义对象
        //1. {name,age} 表示对象的属性名是 name和age
        //2. 属性name的值是从变量/常量name来的(如果前面找不到就会报错)
        let monster02 = {name, age};
        console.log("monster02=>", monster02);//monster02=> Object { name: "牛魔王", age: 800 }
        
    </script>
</head>
<body>

</body>
</html>

6.2对象方法简写

应用实例-对象方法简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法的简写</title>
    <script type="text/javascript">
        //传统-对象方法定义
        let monster = {
            name: "红孩儿",
            age: 100,
            sayHi: function () {
                console.log("name=", this.name, "age=", this.age);
            }
        }
        monster.sayHi();//name= 红孩儿 age= 100

        //ES6-对象方法定义
        let monster2 = {
            name: "猪八戒",
            age: 888,
            sayHi() {
                console.log("name=", this.name, "age=", this.age);
            },
            f1() {
                console.log("f1()")
            }
        }
        monster2.sayHi();//name= 猪八戒 age= 888
        monster2.f1();//f1()
    </script>
</head>
<body>

</body>
</html>

6.3对象拓展运算符

深拷贝和浅拷贝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象运算符的扩展</title>
    <script type="text/javascript">
        let cat = {name: "小花猫", age: 3};
        //实际上只是将cat2对象引用 指向了 cat对象引用所指向的 地址
        //let cat2 = cat;
        //如果我们改变cat2的值，那么cat中的值也会被改变，因为这是[浅拷贝]
        // cat2.name = "大狸猫";
        // console.log("cat=>", cat);//cat=> Object { name: "大狸猫", age: 3 }
        // console.log("cat2=>", cat2);//cat2=> Object { name: "大狸猫", age: 3 }

        //拷贝对象（深拷贝）
        let cat2 = {...cat};//深拷贝
        cat2.name = "加菲猫";
        console.log("cat=>", cat);//cat=> Object { name: "小花猫", age: 3 }
        console.log("cat2=>", cat2);//cat2=> Object { name: "加菲猫", age: 3 }


        //合并对象[深拷贝]
        let monster = {name: "白骨精", age: 99};
        let car = {brand: "宾利", price: 4500000};
        let monster_car = {...monster, ...car};
        //monster_car=> Object { name: "白骨精", age: 99, brand: "宾利", price: 4500000 }
        console.log("monster_car=>", monster_car);

        //一个问题，合并之后的对象的数据空间是独立的呢，还是指向了原来的两个对象的数据空间呢?
        //答案是独立的，即【合并对象是深拷贝】
        monster_car.name = "狐狸精";
        //monster_car=> Object { name: "狐狸精", age: 99, brand: "宾利", price: 4500000 }
        console.log("monster_car=>", monster_car);
        //monster=> Object { name: "白骨精", age: 99 }
        console.log("monster=>", monster);
    </script>
</head>
<body>

</body>
</html>

6.4注意事项和细节

对象拓展运算符是比较新的特性，低版本的浏览器不支持

7.箭头函数

7.1基本介绍

箭头函数提供了更加简洁的函数书写方式
基本语法是：(参数类表)=>{函数体}
若箭头函数没有参数或有多个参数，要用()括起来；若箭头函数只有一个参数，则可以省略()
若箭头函数函数体有多行语句，则用{}包括起来表示代码块
若函数体只有一行语句，并且需要返回结果时，可以省略{}，结果会自动返回
箭头函数多用于匿名函数的定义

7.2箭头函数实例

7.2.1实例1-箭头函数使用

一个参数，一行语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用-01</title>
    <script type="text/javascript">
        //传统定义函数
        var f1 = function (n) {
            return n * 2;
        }
        console.log("传统=>" + f1(2));//传统=>4

        //ES6箭头函数的使用
        let f2 = (n) => {
            return n * 2;
        }
        console.log("f2()=>", f2(100));//f2()=> 200

        //上面的es6函数写法还可以简化:
        let f3 = n => n * 2;
        console.log("f3()=>", f3(100));//f3()=> 200

        //函数也可以传给一个变量
        function hi(f4) {
            console.log(f4(900));
        }

        hi(n => n + 100);//1000
        hi(n => n - 100);//800
    </script>
</head>
<body>

</body>
</html>

7.2.2实例2-箭头函数使用

多个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用-02</title>
    <script type="text/javascript">
        //传统定义函数
        var f1 = function (n, m) {
            var res = 0;
            for (var i = n; i <= m; i++) {
                res += i;
            }
            return res;
        }
        console.log("传统=" + f1(1, 10));//传统=55

        //ES6，箭头函数使用
        let f2 = (n, m) => {
            var res = 0;
            for (var i = n; i <= m; i++) {
                res += i;
            }
            return res;
        }
        console.log("f2()=>", f2(1, 10));//f2()=> 55
    </script>
</head>
<body>

</body>
</html>

7.2.3实例3-箭头函数+对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数+结构使用</title>
    <script type="text/javascript">
        const monster = {
            name: "红孩儿",
            age: 100,
            skill: ['红缨枪', '三昧真火']
        };
        //要求：在方法形参中取出monster对象的skill属性

        //传统方式
        function f1(skill) {
            console.log("skill=", skill);
        }

        f1(monster.skill);//skill= Array [ "红缨枪", "三昧真火" ]

        //箭头函数
        let f2 = ({skill}) => {
            console.log("skill=", skill);
        }
        // 1.f2 传入对象monster
        // 2.f2形参是{skill}，所以ES6的对象解构特性，
        //   会把实参monster中的同名属性赋给skill
        // 3.对象解构的前提是形参的名字{skill}和实参的属性名一致,顺序无所谓
        // 4.注意要带上{}
        f2(monster);//skill= Array [ "红缨枪", "三昧真火" ]
    </script>
</head>
<body>

</body>
</html>

7.3注意事项和使用细节

箭头函数+对象解构，注意参数是({属性名})
({属性名})是由{}包括的，属性名需要和对象属性名一致

8.练习

给你一个对象let cat={name:'jack',age:10};要求使用模板字符串显示cat的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6练习</title>
    <script type="text/javascript">
        let cat = {name: 'jack', age: 10};
        let str = `cat=> cat's name = ${cat.name} , cat's age= ${cat.age}`;
        console.log(str);//cat=> cat's name = jack , cat's age= 10
    </script>
</head>
<body>

</body>
</html>

看下面的代码，请求输出什么，并分析原因

答：这里使用了对象解构，要求形参名称要和对象的属性值保持一致，否则无法匹配。

因此这里的namex输出undefined，age输出10

根据给出的数据，用ES6的方式，构建对象，并提供方法，可以输出信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6练习</title>
    <script type="text/javascript">
        //习题3
        let name = "周星驰";
        let job = "演员";
        let actor = {
            name,
            job,
            info() {
                console.log("name=", this.name, "job=", this.job);
            }
        };
        actor.info();//name= 周星驰 job= 演员
    </script>
</head>
<body>

</body>
</html>

根据给出的数据，用ES6的方式，编写方法，使用对象解构的方式，得到oper和arr，并根据oper的值，oper可以是+、- 、* 、/ 来计算结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6练习</title>
    <script type="text/javascript">
        //习题4
        var cal = {
            oper: "*",
            arr: [1, 2, 3, 5]
        }
        let calculator = ({oper, arr}) => {
            let res = 0;//初始化的值要考虑
            if (oper == "+") {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res += arr[i];
                }
            } else if (oper == "-") {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res -= arr[i];
                }
            } else if (oper == "*") {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res *= arr[i];
                }
            } else if (oper == "/") {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res /= arr[i];
                }
            } else {
                console.log("oper输入不正确..")
            }
            return res;
        }
        console.log(calculator(cal));//30

    </script>
</head>
<body>

</body>
</html>

调用f8函数，arr是数组，fun传入箭头函数，可以计算arr的和，并写出调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6练习</title>
    <script type="text/javascript">
        //习题5
        let f8 = (arr, fun) => {
            console.log("结果=", fun(arr));
        }
        let arr = [10, 20, 30, 50];
        let add = (arr) => {
            let res = 0;
            for (let i = 0; i < arr.length; i++) {
                res += arr[i];
            }
            return res;
        }

        f8(arr, add);//结果= 110

    </script>
</head>
<body>

</body>
</html>

day ES6 gt lt name Java

有关day01-ES6新特性的更多相关文章

使用canal同步MySQL数据到ES - 2
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
ruby-on-rails - rails : Find tasks that were created on a certain day? - 2
我有一个任务列表(名称、starts_at)，我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束)，以便进行比较。最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio
什么是0day漏洞？如何预防0day攻击？ - 2
什么是0day漏洞？0day漏洞，是指已经被发现，但是还未被公开，同时官方还没有相关补丁的漏洞；通俗的讲，就是除了黑客，没人知道他的存在，其往往具有很大的突发性、破坏性、致命性。0day漏洞之所以称为0day，正是因为其补丁永远晚于攻击。所以攻击者利用0day漏洞攻击的成功率极高，往往可以达到目的并全身而退，而防守方却一无所知，只有在漏洞公布之后，才后知后觉，却为时已晚。“后知后觉、反应迟钝”就是当前安全防护面对0day攻击的真实写照！为了方便大家理解，中科三方为大家梳理当前安全防护模式下，一个漏洞从发现到解决的三个时间节点：T0：此时漏洞即0day漏洞，是已经被发现，还未被公开，官方还没有相
ruby - Rails 比较 date.end_of_day.to_datetime 和 date.to_datetime.end_of_day 返回的日期对象值时返回 false - 2
ruby1.9.3dev(2011-09-23修订版33323)[i686-linux]轨道3.0.20最近为什么在与DateTimeonRails相关的RSpecs项目上工作我发现在给定日期以下语句发出的值date.end_of_day.to_datetime和date.to_datetime.end_of_day虽然它们表示相同的日期时间，但比较时返回false。为了确认这一点，我打开了Rails控制台并尝试了以下操作1.9.3dev:053>monday=Time.now.monday=>2013-02-2500:00:00+05301.9.3dev:054>monday.cla
IDEA 2023.1 正式发布，新特性简介 - 2
昨晚看到IDEA官推宣布IntelliJIDEA2023.1正式发布了。简单看了一下，发现这次的新版本包含了许多改进，进一步优化了用户体验，提高了便捷性。至于是否升级最新版本完全是个人意愿，如果觉得新版本没有让自己感兴趣的改进，完全就不用升级，影响不大。软件的版本迭代非常正常，正确看待即可，不持续改进就会慢慢被淘汰！根据官方介绍：IntelliJIDEA2023.1针对新的用户界面进行了大量重构，这些改进都是基于收到的宝贵反馈而实现的。官方还实施了性能增强措施，使得Maven导入更快，并且在打开项目时IDE功能更早地可用。由于后台提交检查，新版本提供了简化的提交流程。IntelliJIDEA
关于ES集群信息的一些查看 - 2
文章目录查看ES信息查看节点信息查看分片信息实际场景下ES分片及副本数量应该怎么分关于ES的灵活使用查看ES信息查看版本kibana：GET/查看节点信息GET/_cat/nodes?v解释：ip：集群中节点的ip地址；heap.percent：堆内存的占用百分比；ram.percent：总内存的占用百分比，其实这个不是很准确，因为buff/cache和available也被当作使用内存；cpu：cpu占用百分比；load_1m：1分钟内cpu负载；load_5m：5分钟内cpu负载；load_15m：15分钟内cpu负载；node.role：上图的dilmrt代表全部权限master：*代表
linux查看es节点使用情况,elasticsearch（es）如何查看当前集群中哪个节点是主节点（master） - 2
elasticsearch查看当前集群中的master节点是哪个需要使用_cat监控命令，具体如下。查看方法es主节点确定命令，以kibana上查看示例如下：GET_cat/nodesv返回结果示例如下：ipheap.percentram.percentcpuload_1mload_5mload_15mnode.rolemastername172.16.16.188529952.591.701.45mdi-elastic3172.16.16.187329950.990.991.19mdi-elastic2172.16.16.231699940.871.001.03mdi-elastic4172
Ruby，从 Date.day_fraction_to_time 获取小时、秒和时间 - 2
我找到了这个方法here.start=DateTime.nowsleep15stop=DateTime.now#minutesputs((stop-start)*24*60).to_ihours,minutes,seconds,frac=Date.day_fraction_to_time(stop-start)我有以下错误:`':privatemethod`day_fraction_to_time'calledforDate:Class(NoMethodError)我检查了/usr/lib/ruby/1.9.1/date.rb并找到了它:defday_fraction_to_time(
Vue3的新特性 - 2
Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工