软件系统定制开发【ES6丨前端进阶基础 】二，ES6rest参数，Symbol第七种数据类型


参赛话题：

目录​​​​​​​

前言

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

一，软件系统定制开发函数参数的默认值设置

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

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

​​​​​​​

二，rest参数

引入rest参数代替了argument

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

三，

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

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

 

扩展运算符应用

1.

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

2.数组的克隆

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

 

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

  1. <body>
  2.     <div></div>
  3.     <div></div>
  4.     <div></div>
  5.     <script>
  6.         const divs = document.querySelectorAll('div');
  7.         const divsArr = [...divs];
  8.         console.log(divsArr);
  9.  </script>
  10. </body>

四，Symbol第7种数据类型

1.七种数据类型

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

Uundefined
Sstring symbol
Nnull
Oobject
Bboolean

 2.Symbol特点

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

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

  3. Symbol 定义的对象属性不能使用for..in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

3.Symbol的使用

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

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

  1.  <script>
  2.         // 1.给对象添加Symbol方法
  3.         // 第一种
  4.         let play = {
  5.             name: '老鹰捉小鸡',
  6.             left: function () {
  7.                 console.log('向左走');
  8.             },
  9.             right: function () {
  10.                 console.log('向右走');
  11.             }
  12.         }
  13.         let moves = {
  14.             left: Symbol(),
  15.             right: Symbol()
  16.         };
  17.         play[moves.left] = function () {
  18.             console.log('向左走');
  19.         }
  20.         play[moves.right] = function () {
  21.             console.log('向右走');
  22.         }
  23.         console.log(play);
  24.         // 第二种
  25.         let game = {
  26.             name: '全民打飞机',
  27.             [Symbol('move')]: function () {
  28.                 console.log('我可以上下左右移动');
  29.             },
  30.             [Symbol('kill')]: function () {
  31.                 console.log('我可以击杀敌机');
  32.             }
  33.         }
  34.         console.log(game);
  35. </script>

 

五，迭代器

1.什么是迭代器？

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

  1.     <script>
  2.         // 声明一个数组
  3.         const mingzhu = ['西游记', '红楼梦', '水浒传', '三国演绎'];
  4.         // 使用for in循环，保存的是键名
  5.         // 使用for of循环，保存的是键值
  6.         // for (let v of mingzhu) {
  7.         //     console.log(v);
  8.         // }
  9.         // 调用对象的next方法
  10.         let iterator = mingzhu[Symbol.iterator]();
  11.         console.log(iterator.next());
  12.         console.log(iterator.next());
  13.         console.log(iterator.next());
  14.         console.log(iterator.next());
  15.         console.log(iterator.next());
  16.     </script>

2.迭代器的应用 ​​​​​​​

  1. <script>
  2.         // 声明一个对象
  3.         const classroom = {
  4.             name: '高三296',
  5.             stus: [
  6.                 '小赵',
  7.                 '小李',
  8.                 '小陈',
  9.                 '小刘'
  10.             ],
  11.             [Symbol.iterator]() {
  12.                 // 声明一个索引变量
  13.                 let index = 0;
  14.                 let _this = this;
  15.                 return {
  16.                     next: function () {
  17.                         if (index < _this.stus.length) {
  18.                             const result = {
  19.                                 value: _this.stus[index], done: false
  20.                             }
  21.                             index++;
  22.                             return result;
  23.                         } else {
  24.                             return { value: undefined, done: true };
  25.                         }
  26.                     }
  27.                 };
  28.             }
  29.         }
  30.         // 使用for of遍历对象
  31.         for (let v of classroom) {
  32.             console.log(v);
  33.         }
  34.     </script>

写在最后

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发