【ES6丨前端进阶基础】二，ES6rest参数，Symbol第七种数据类型

Aic山鱼 2023-08-11 原文

前言

ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性

一，函数参数的默认值设置

es6允许赋初始值形参初始值具有默认值的参数，一般位置要靠后(不成文规定)

    <script>
        // 1.es6允许赋初始值 形参初始值具有默认值的参数，一般位置要靠后(不成文规定)
        // 这里参数不能给第一个赋初始值 否则返回值就是NaN
        function even(d, e, f = 10) {
            return d + e + f;
        }
        let result = even(6, 8);
        console.log(result);
        // 2.与解构赋值结合
        function cont({ names = 'ZHUZHUXIA', sex, school }) {
            console.log(names);
            console.log(sex);
            console.log(school);
        }
        cont({
            // 如果不进行传参那么最后的返回值就会是默认值;
            // names: 'shanyu',
            sex: 'man',
            school: 'HER',
        })
    </script>

二，rest参数

引入rest参数代替了argument

    <script>
        // es6引入rest参数，用于获取函数的实参，代替了argument
        // rest参数 返回值为数组
        function date(...args) {
            console.log(args);
        }
        date('SHANYU', 'UZI', 'XAIOMO');
        // 注:rest参数必须放到最后
        function fn(a, b, c, ...args) {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(args);
        }
        // args的实参就是5678
        fn(1, 3, 4, 5, 6, 7, 8);
    </script>

三，扩展运算符

扩展运算符将数组转化为参数序列用逗号分割开

    <script>
        // 扩展运算符将数组转化为参数序列用逗号分割开
        // 声明一个数组
        const start = ['黄子杰', '鹿哈', '鹿管'];
        // 声明一个函数
        function eso() {
            console.log(arguments);
        }
        eso(...start);// 也就是等价于 eso('黄子杰', '鹿哈', '鹿管');
    </script>

扩展运算符应用

1.合并数组

    <script>
        // 将数组合并
        // 声明俩数组
        const start1 = ['黄子韬', '迪丽热巴', '郭德纲'];
        const start2 = ['鹿晗', '关晓彤', '郭麒麟'];
        const startadd = [...start1, ...start2];
        console.log(startadd);
    </script>

2.数组的克隆

<script>
            // 2.数组克隆
        // 注：如果数组内有引用类型数字据的话，是一个浅拷贝
        const song = ['余香', '偏爱', '泡沫'];
        const song1 = [...song];
        console.log(song1);
 </script>

3.伪数组转化成真正的数组

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        const divs = document.querySelectorAll('div');
        const divsArr = [...divs];
        console.log(divsArr);
 </script>
</body>

四，Symbol第7种数据类型

1.七种数据类型

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

U	undefined
S	string symbol
N	null
O	object
B	boolean

2.Symbol特点

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 定义的对象属性不能使用for..in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

3.Symbol的使用

    <script>
        // 创建symbol 这里是函数
        let sy = Symbol();
        let sy1 = Symbol('山鱼');
        let sy2 = Symbol('山鱼');
        console.log(sy1 === sy2);
        // 返回值为false 
        // 虽然都是山鱼，但是都具有唯一行，就像俩同名同姓的人身份证号不一样
        // Symbol.for() 创建 ,被称为函数对象
        let sy3 = Symbol.for('one');
        let sy4 = Symbol.for('one');
        console.log(sy3 === sy4);
        // 返回值为true
    </script>

4.如何给对象添加Symbol方法

 <script>
        // 1.给对象添加Symbol方法
        // 第一种
        let play = {
            name: '老鹰捉小鸡',
            left: function () {
                console.log('向左走');
            },
            right: function () {
                console.log('向右走');
            }
        }
        let moves = {
            left: Symbol(),
            right: Symbol()
        };
        play[moves.left] = function () {
            console.log('向左走');
        }
        play[moves.right] = function () {
            console.log('向右走');
        }
        console.log(play);
        // 第二种
        let game = {
            name: '全民打飞机',
            [Symbol('move')]: function () {
                console.log('我可以上下左右移动');
            },
            [Symbol('kill')]: function () {
                console.log('我可以击杀敌机');
            }
        }
        console.log(game);
</script>

五，迭代器

1.什么是迭代器？

迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator 接口，就可以完成遍历操作。ES6 创造了一种新的遍历命令for..of 循环，Iterator接口for..of消费，原生具备iterator接口的数据(可用forof遍历)

    <script>
        // 声明一个数组
        const mingzhu = ['西游记', '红楼梦', '水浒传', '三国演绎'];
        // 使用for in循环，保存的是键名
        // 使用for of循环，保存的是键值
        // for (let v of mingzhu) {
        //     console.log(v);
        // }
        // 调用对象的next方法
        let iterator = mingzhu[Symbol.iterator]();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
    </script>

2.迭代器的应用

<script>
        // 声明一个对象
        const classroom = {
            name: '高三296',
            stus: [
                '小赵',
                '小李',
                '小陈',
                '小刘'
            ],
            [Symbol.iterator]() {
                // 声明一个索引变量
                let index = 0;
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = {
                                value: _this.stus[index], done: false
                            }
                            index++;
                            return result;
                        } else {
                            return { value: undefined, done: true };
                        }
                    }
                };
            }
        }
        // 使用for of遍历对象
        for (let v of classroom) {
            console.log(v);
        }
    </script>

写在最后

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

进阶 ES6 strong 39 Symbol 前端 ecmascript

有关【ES6丨前端进阶基础】二，ES6rest参数，Symbol第七种数据类型的更多相关文章

使用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、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功
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 - 使用 rbenv 和 ruby-build 构建 ruby 失败，出现 undefined symbol : SSLv2_method - 2
我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm
ruby-on-rails - Restful 命令 - 2
我是RESTful的新手。但是，我想在我的Rails应用程序中使用它。当我将它添加到我的routes.rbmap.resources:notes时，我得到了创建这些方法的路由:索引创建新编辑展示更新摧毁我想知道编辑/更新和创建/新建之间有什么区别？对于这些方法对如何变化以及每个方法对的作用，是否有任何标准定义？最佳答案标准定义如下:index-GET-所有(或部分)记录的Viewshow-GET-单个记录的View新-GET-发布以创建的表单创建-POST-创建新记录edit-GET-用于编辑单个记录的表单更新-PUT-更新记录
ruby-on-rails - Textmate 'Go to symbol' 相当于 Vim - 2
在Railcasts上，我注意到一个非常有趣的功能“转到符号”窗口。它像Command-T一样工作，但显示当前文件中可用的类和方法。如何在vim中获取它？最佳答案尝试:helptags有各种程序和脚本可以生成标记文件。此外，标记文件格式非常简单，因此很容易将sed(1)或类似的脚本组合在一起，无论您使用何种语言，它们都可以生成标记文件。轻松获取标记文件(除了下载生成器之外)的关键在于格式化样式而不是实际解析语法。关于ruby-on-rails-Textmate'Gotosymbol
【网络】-- 网络基础 - 2
（本文是网络的宏观的概念铺垫）目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展是最开始先有的计算机，计算机后来因为多项技术的水平升高，逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速：独立模式：计算机之间相互独立。如：有三个人，每个人做的不同的事物，但是是需要协作的完成。而这三个人所做的事是需要进行协作的，然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据
ruby - 为什么 `Symbol#match` 的行为与 `String#match` 和 `Regexp#match` 不同？ - 2
String#match和Regexp#match在匹配成功时返回一个MatchData:"".match(//)#=>#//.match("")#=>#//.match(:"")#=>#但是Symbol#match返回匹配位置(如String#=~)::"".match(//)#=>0为什么Symbol#match表现不同？有用例吗？最佳答案我将其报告为Ruby核心中的错误:https://bugs.ruby-lang.org/issues/11991.让我们看看他们会怎么说。更新被质疑的行为似乎是一个错误。似乎从Ruby2.
ruby - 获取错误 : dyld: Symbol not found: _clock_gettime - 2
我想用middlemanserver命令启动一个中间人，当我这样做时我得到一个错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_clock_gettimeReferencedfrom:/usr/local/lib/ruby/gems/2.3.0/gems/eventmachine-1.2.0.1/lib/rubyeventmachine.bundle(whichwasbuiltforMacOSX10.12)Expectedin:/usr/lib/libSystem.B.dylibdyld:Symbolnotfound:_clock_gett

【ES6丨前端进阶基础 】二，ES6rest参数，Symbol第七种数据类型

前言