JavaScript系列之ES6篇

Posted coderkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript系列之ES6篇相关的知识,希望对你有一定的参考价值。

五,新增数据Symbol

1,Symbol简介

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

2,创建Symbol的两种方式:

(1)创建 Symbol

   let s = Symbol();
   console.log(s, typeof s);  // Symbol() "symbol"
   let s2 = Symbol('pink'); // 描述字符串
   let s3 = Symbol('pink');
   console.log(s2 === s3); // false

(2)使用Symbol.for进行创建

   let s4 = Symbol.for('尚硅谷');
   console.log(s4, typeof s4);  // Symbol(尚硅谷) "symbol"
   let s5 = Symbol.for('尚硅谷');
   console.log(s4 === s5);  // true
    // 不能与其他数据类型进行运算。
  //  USONB  undefind string Symbol object null number boolean

3,Symbol 的使用

(1)使用Symbol安全的添加methods(function):

  // 向对象中添加方法 up down
   let game = {};
   // 声明一个对象
   let methods = {
     up: Symbol(),
     down: Symbol(),
   };
   game[methods.up] = function() {
     console.log('上升');
   }
   game[methods.down] = function() {
     console.log('下降');
  }
   console.log(game);

(2)在另一种情况下添加methods(内部):

let youxi = {
       name:'狼人杀',
       [Symbol('say')]:function(){
               console.log('I can say!');
       }
}

六,迭代器

1,Interator(遍历器)的概念

(1)含义:

为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

(2)作用:

Iterator的作用有三个:
① 为各种数据结构提供一个统一的、简便的访问接口。
② 使得数据结构的成员能够按某种次序排列。
③ ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

2,迭代器的工作原理

① 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上就是一个指针对象。
② 第一次调用对象的next方法,指针自动指向数据结构的第一个成员。
③ 接下来不断使用next方法,指针不断向后移动直到指向最后一个数据成员。
④ 每调用一次方法返回一个包含valuedone属性的对象(done代表是否完,为一个布尔值,如果遍历完成则为ture,否则为false

3,默认Interator接口

  // 声明一个数组
  const num = ['a', 'b', 'c', 'd'];
  // 使用 for...of 遍历数组
   for (let v of num) {
      console.log(v);   // a b c d
    }
  // 使用 for...in 遍历数组
   for (let k in num) {
     console.log(k);   // 0 1 2 3
     console.log(num[k]); // a b c d
    }

  let iterator = num[Symbol.iterator]();
   // 调用对象的next方法
   console.log(iterator.next()); // { value: 'a', done: false }
  console.log(iterator.next()); // { value: 'b', done: false }
  console.log(iterator.next()); // { value: 'c', done: false }
  console.log(iterator.next()); // { value: 'd', done: false }
  console.log(iterator.next()); // { value: undefined, done: true }
 /* 原生具备Iterator接口的数据结构如下:

   Array
   Map
   Set
   String
   TypedArray
   函数的arguments对象
   NodeList对象  *\\

七,Set和Map数据结构

1,set 集合

(1)含义:

它类似于数组,但是成员的值都是唯一的,没有重复的值。set本身是一个构造函数,用来生成set数据结构。

(2)方法:

add(value):添加某个值,返回Set结果本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回键值对的遍历器。
forEach():使用回调函数遍历每个成员

(3)例如:

  // 声明一个 set
   let s = new Set();
   let s2 = new Set(['a', 'b', 'c', 'd']);
   console.log(s2);

  // 元素的个数  注意:重复的元素算一个
 / console.log(s2.size); // 4

  // 添加新的元素
   console.log(s2.add('e')); // 添加某个值,返回Set结果本身

   // 删除元素
   console.log(s2.delete('a'));  // true   删除某个值,返回一个布尔值,表示删除是否成功。
   console.log(s2);  // [ 'b', 'c', 'd', 'e']

  // 检测
   console.log(s2.has('b')); // 有返回true,没有返回flase

  // 清空
   s2.clear();  // 清除所有成员,没有返回值。
   console.log(s2);

  // for of遍历
   for (let v of s2) {
     console.log(v); // a b c d
   }

  // Set 实践
   let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  // 数组去重
   let result = [...new Set(arr)];
   console.log(result);  // [1, 2, 3, 4, 5]

2,Map字典

(1)含义:

Map类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各类型的值(包括对象)都可以当做键。也就是说,Object结构提供了“字符串–值”的对应,Map结构提供了“值–值”的对应,是一种更完善的Hash结构的实现。如果你需要“键值对”的数据结构,MapObject更合适。

(2)方法:

set(key,value):set方法设置键名key对应的键值为value,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
get(key):get方法读取对应的键值,如果找不到key,返回false
has(key):has方法返回一个布尔值,表示某个键是否在当前Map对象之中。
delete(key):delete方法删除某个键,返回true。如果删除失败,返回false
clear():清除所有成员,没有返回值。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回键值对的遍历器。
forEach():使用回调函数遍历每个成员 。

(3)例如:

  // 声明 Map
   let m = new Map();

  // 添加元素  采取键值对方式
   m.set('name', 'pink');
   m.set('change', function () {
     console.log('改变');
   });
   
   let key = {
     school: '尚硅谷',
   };
   m.set(key, ['北京', '上海', '深圳']);
   console.log(m);
   
  // 获取个数
   console.log(m.size);
   
  // 删除
   m.delete('name');
   console.log(m);
   
  // 获取
   console.log(m.get('change'));
   console.log(m.get(key));   // ["北京", "上海", "深圳"]
   
  // 清空
   m.clear();
   console.log(m);
   
  // 遍历
   for(let v of m) {
     console.log(v);
   }

以上是关于JavaScript系列之ES6篇的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript系列之ES6篇

JavaScript系列之高级篇

ES6系列之开发环境搭建

JavaScript系列之基础篇

狙杀ES6之开光篇

ES6 从入门到精通系列学习笔记 23 篇(完结)