【ES6丨前端进阶基础】ES6的关键字，新特性以及解构赋值

ECMA (European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会，这组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。ecmascrpit是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。

一，let关键字的特点

1.不能重复声明变量

<script>
         let name = 'shanyu';
         let name = 'AIC';
</script>

2.块级作用域

只能在块内使用，否则会报错

<script>       
 // 2.块级作用域，只在块内可使用（如：if，for，while，else）
         {
             let name = '陆小果';
         }
         console.log(name);
</script>

3.不存在变量提升

<script>
        // 3.不存在变量提升（也就是不允许先使用后声明）
         console.log(start);
         let start = '武器大师';
</script>

4.不影响作用域链

二，let的使用

<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        let item = document.getElementsByClassName('item');
        // 使用let声明变量，所声明的变量只在该块内使用所以可以用item[i]
        for (let i = 0; i < item.length; i++) {
            item[i].onclick = function () {
                item[i].style.background = 'skyblue';
            }
        }
    </script>
</body>

三，const 声明常量以及特点

<body>
    <script>
        // 声明常量
        // 1.必须要赋初始值
        const NAME = '山鱼';
        // 2.一般常量使用大写（当然小写也不会报错，不成文规定）
        // 3.常量的值不能修改
        NAME = 'JHXL';
        // 4.块级作用域
        {
            const START = 'BALEITE';
        }
        console.log(START);
        // 5.对于数组和对象的元素修改，不算对常量值的修改，不会进行报错
        const PLAY = ['SYZ', 'PPD', 'NANDAO', 'UZI'];
        PLAY.push('ZHIXUN');
    </script>

四，const的变量解构赋值

1.数组的结构

<script>        
//1. 数组的结构
        const TW = ['赵天王', '钱天王', '孙天王', '李天王'];
        let [zhao, qian, sun, li] = TW;
        console.log(zhao);
        console.log(qian);
        console.log(sun);
        console.log(li);
</script>

2.对象解构赋值

<script>       
const xiaopin = {
            name: '赵本山',
            age: '100',
            skill: function () {
                console.log('我是白云，我是黑土');
            }
        };
        let { name, age, skill } = xiaopin;
        console.log(name);
        console.log(age);
        console.log(skill);
        skill();
</script>

五，ES6新增字符串声明方式

1.反引号

2.新特性

3.变量拼接

使用${}来拼接

<script> 
 // 3.变量拼接 使用${}来拼接
        let hero = `山鱼`;
        let like = `${hero}爱吃猫`;
        console.log(like);
</script>

六，对象的简化写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

<body>
    <script>
        // ES6允许只放变量进到对象里
        let name = '山鱼';
        let like = function () {
            console.log('我们一起学前端不放弃！');
        }
        const start = {
            name,
            like,
            skill() {// 可以省略冒号和function
                console.log('我会ES6');
            }
        }
        console.log(start);
    </script>
</body>

七，箭头函数

1.箭头函数this是静态的，this始终指向函数声明时所在作用域下的值

    <script>
        // let fn = (a, b) => {
        //     return a + b
        // }
        // 调用函数
        // let result = fn(3, 3);
        // console.log(result);
        // 特性
        // 1.this是静态的，this始终指向函数声明时所在作用域下的值
        function gName1() {
            console.log(this.name);
        }
        let gName2 = () => {
            console.log(this.name);
        }
        window.name = '山鱼';
        const like = {
            name: 'SHANYU'
        }
        // 直接调用
        gName1(); //返回值为’山鱼‘ 
        gName2(); //返回值为’山鱼‘ 
        // 用call调用，call可以改变函数内部值
        gName1.call(like);// 返回值为'SHANYU'
        gName2.call(like)//返回值为’山鱼‘
</script>

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

<script>        
		// 2.不能作为构造函数作为实例化对象
        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let it = new Person('旺财', 2);
        console.log(me);
</script>

3.不能使用arguments

<script>
         // 3.不能使用arguments变量（arguments可以用来保存实参）
         let fn = () => {
             console.log(arguments);
         }
         fn(1, 2, 3);
</script>

4.箭头函数的简写

<script>
        // 1，当形参有且只有一个的时候可以省略小括号
         let jia = a => {
             return a + a;
         }
         console.log(jia(9));
        // 2，当代码体只有一条语句的时候可以省略大括号
        let pow = n => n * n;
        console.log(pow(3));// 语句的执行结果就是返回值
    </script>

写在最后

我是Aic山鱼，感谢您的支持
原创不易 ✨还希望支持一下
点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！
山鱼🦈社区：山鱼社区💌💌

进阶解构 quot amp gt

有关【ES6丨前端进阶基础】ES6的关键字，新特性以及解构赋值的更多相关文章

ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
使用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
postman接口测试工具-基础使用教程 - 2
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
软件测试基础 - 2
Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功
阿里云国际版免费试用：如何注册以及注意事项 - 2
作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐
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 - Ruby 的 AST 中的 'send' 关键字是什么意思？ - 2
我正在尝试学习Ruby词法分析器和解析器(whitequarkparser)以了解更多有关从Ruby脚本进一步生成机器代码的过程。在解析以下Ruby代码字符串时。defadd(a,b)returna+bendputsadd1,2它导致以下S表达式符号。s(:begin,s(:def,:add,s(:args,s(:arg,:a),s(:arg,:b)),s(:return,s(:send,s(:lvar,:a),:+,s(:lvar,:b)))),s(:send,nil,:puts,s(:send,nil,:add,s(:int,1),s(:int,3))))任何人都可以向我解释生成的
ruby - 为什么 return 关键字会导致我的 'if block' 出现问题？ - 2
下面的代码工作正常:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson)do|key,oldv,newv|ifkey==:aoldvelsifkey==:bnewvelsekeyendendputskerson.inspect但是如果我在“ifblock”中添加return，我会得到一个错误:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson
ruby - ruby 中的同一个程序如何接受来自用户的输入以及命令行参数 - 2
我的ruby脚本从命令行参数获取某些输入。它检查是否缺少任何命令行参数，然后提示用户输入。但是我无法使用gets从用户那里获得输入。示例代码:test.rbname=""ARGV.eachdo|a|ifa.include?('-n')name=aputs"Argument:#{a}"endendifname==""puts"entername:"name=getsputsnameend运行脚本:rubytest.rbraghav-k错误结果:test.rb:6:in`gets':Nosuchfileordirectory-raghav-k(Errno::ENOENT)fromtes

【ES6丨前端进阶基础 】ES6的关键字，新特性以及解构赋值

前言

什么是ecmascrpit