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

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

前言


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特点

1.Symbol 的值是唯一的,用来解决命名冲突的问题


2.Symbol 值不能与其他数据进行运算


3.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>
目录
相关文章
|
18天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
2月前
|
前端开发 JavaScript
前端基础(四)_数据类型的强制转换
本文探讨了JavaScript中数据类型的强制转换方法,包括将其他类型转换为Number类型(使用`Number`函数)、转换为String类型(使用`toString`方法或`String`函数)、以及转换为Boolean类型(使用`Boolean`函数)。同时,文章还讨论了`parseInt`和`parseFloat`函数用于从字符串中解析出整数或浮点数,以及`isNaN`函数用于检测一个值是否是非数字。
26 2
前端基础(四)_数据类型的强制转换
|
22天前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
60 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
1月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
40 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
前端开发 JavaScript
前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)
本文介绍了JavaScript中的算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性以及数据类型的隐式转换。
31 3
|
2月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
38 2
|
2月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
2月前
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
22 1
|
3月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。