ES6复习(3)

Es6学习笔记(3)

1.class类与对象参考往期博客

2.Set集合

• ES6 提供了新的数据结构 ``Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：
  • 1)size 返回集合的元素个数
  • 2)add 增加一个新元素，返回当前集合
  • 3)delete 删除元素，返回 boolean 值
  • 4)has 检测集合中是否包含某个元素，返回 boolean 值
  • 5)clear 清空集合，返回 undefined

代码展示

// 1.创建一个集合
let s = new Set();//Set(0) {size: 0} "object"

// 2.集合里面可以接受一个可迭代数据,一般是给里面传入一个数组
let s1 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿'])
// Set(4) {'大事儿', '小事儿', '好事儿', '坏事儿'},自动去重

// 3.元素个数
// console.log(s1.size); //4

// 4.添加新的元素
s1.add('喜事儿')//Set(5) {'大事儿', '小事儿', '好事儿', '坏事儿', '喜事儿'}

// 5.删除元素
s1.delete('坏事儿') //Set(4) {'大事儿', '小事儿', '好事儿', '喜事儿'}

// 6.检测集合中是否包含某个元素，返回true或者false
console.log( s1.has('喜事儿')); //true

//7.清空集合
// s1.clear() //Set(0) {size: 0}
console.log(s1);

// 我们还可以用for of来遍历元素
for(let v of s1){
    console.log(v);
}

结果展示:

3.map与其api的介绍

• ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。
• Map 的属性和方法：
  • 1)size 返回 Map 的元素个数
  • 2)set 增加一个新元素，返回当前 Map
  • 3)get 返回键名对象的键值
  • 4)has 检测 Map 中是否包含某个元素，返回 boolean 值
  • 5)clear 清空集合，返回 undefined

代码展示:

// Map相当于一个加强版的对象,因为他可以将对象作为键(key)
// 1.创建一个Map
let m = new Map();
console.log(m , typeof m); //Map(0) 'object'

// 2.给Map添加元素
m.set('name', '肥林');
m.set('school', '五邑大学');
// 还可以添加方法
m.set('way to school' , ()=>{
    console.log('乘坐大巴!');
})
// 还可以添加对象
let key = {
    专业 : '电子信息工程',
    学部 : '智能制造学部' 
}
m.set(key)
console.log(m);

// 3.获取Map中元素个数
console.log(m.size);

// 4.删除元素
m.delete(key)
console.log(m);

// 5.检测存在元素
console.log(m.has(key));//false

// 6.清空集合
console.log(m.clear());//返回undefined  

结果展示

4.Object.defineProperty方法

• 作用:

  • 给目标对象定义一个新属性,或者修改一个已经存在的属性

• 语法格式:

  • Object.defineProperty(obj,prop,description)
  • obj: 必须 目标对象
  • prop: 必须 需要定义或修改的属性名字(你要修改的是哪一个属性)
  • description: 必须 目标属性所拥有的特性 (要改的属性有什么样的特性,说明,属性值),一般为对象形式

• description的常用属性值:

  • 1.value: 设置属性的值 默认为undefined
  • 2.writable: 值是否可以重写。true | false 默认为false
  • 3.enumerable: 目标属性是否可以被枚举。true | false 默认为 false
  • 4.configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为false

代码展示:

//Object.defineProperty()方法用于定义新属性或修改原有的属性值
// 先创建一个对象
let a = {
    name: 'Cheung Pui Lam',
    age: 20,
    address: '五邑大学'
}
// 常用的添加属性的方法1
a.sex = '男';
a.subject = '电子信息工程';

// 常用的添加属性的方法2-Object.defineProperty()
Object.defineProperty(a , 'age' , {//这里将 age 这个属性改为了18
    //1.value: 设置或修改属性的值  默认为undefined
    value : 18,
    
    //2.writable: 值是否可以重写。true | false  默认为false
    writable: false,//此时的age就不能被修改了!

    // 3.enumerable: 目标属性是否可以被枚举(就是遍历)。true | false 默认为 false
    enumerable: false,//此时这个age属性就无法被枚举(遍历)了!

    // 4.configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false  默认为false
    configurable: false//表示现在的 age 属性不能被删除和修改特性(后面不能再修改)
})

a.age = 10;//age依然是 18  => 对应的是 writable: false 属性
console.log(Object.keys(a));//使用keys()方法来遍历,没有出现 age属性 => 对应 enumerable: false 属性
delete a.age;//但是结果依然有age属性 => 对应 configurable: true 属性
console.log(a);

结果展示:

Object.defineProperty的两个高级用法

• 这里介绍 Object.defineProperty() 方法的两个高级用法:内置的get() 和 set() 方法
  • get() 方法:当有人读取目标对象的某一个属性时,就会执行这个该函数,且返回值就是目标属性(该属性)的值
  • set(形参)方法:当有人修改目标对象的某一个属性时,就会执行这个该函数,且返回值就是目标属性(该属性)的值

代码展示:

//Object.defineProperty()方法用于定义新属性或修改原有的属性值
// 先创建一个对象
let num = 20;//这里设置一个冰凉用于传递和接收 age属性的属性值 
let a = {
    name: 'Cheung Pui Lam',
    age: num,
    address: '五邑大学'
}

// 常用的添加属性的方法2-Object.defineProperty()
Object.defineProperty(a , 'age' , {
    get(){//每当读取 age属性(目标属性)时就会调用这个函数
        console.log('给属性被读取了!');
        return num;//一定要有返回值
    },
    set(value){//每当修改 age属性(目标属性)时就会调用这个函数
        console.log('该属性被修改了!,且该属性值是', value );
        num = value
    }
})
console.log(a);

结果展示:

5.模块化

• 1.引入的三种方法

  <!-- 浏览器中一般是之间在script标签中引入路径即可 -->
  <!-- 一定要添加 type="module" 这个属性 -->
  <script  type="module">
      // 引入一般有三种方法:
      // 1.通用的引入方法
      // import * as m from "./m.js";
      // console.log(m);
  
      // 2.解构赋值的形式
      // import {school , say , jod} from "./m.js";
      // console.log(school); // 五邑大学
      // console.log(say);//ƒ say()
      // console.log(jod);//ƒ jod()
      // 默认暴露
      // import{default as m} from "./m.js";
  
      // 3.简单形式 但是只能针对默认暴露
      import m from "./m.js";
      console.log(m);//{school: '五邑大学', say: ƒ, jod: ƒ}
  </script>

• 2.暴露的三种方法

  // 暴露数据的三种方法
  // 1.分别暴露
  // export let school = '五邑大学';
  
  // export function say(){
  //     console.log('欢迎来到邑大!');
  // }
  
  // export function jod() {
  //     console.log('这里可以帮你找到心仪的工作!');
  // }
  
  // 2.统一暴露
  // export {school , say , jod};
  
  // 3.默认暴露
  export default{
      school : '五邑大学',
      say : function(){
          console.log('欢迎来到邑大!');
      },
      jod : function(){
          console.log('这里可以帮你找到心仪的工作!');
      }
  }

结果展示:

6.扩展

### 字符串扩展
* `str.includes(str)` 判断是否包含指定字符串
* `str.startWith(str)` 判断是否以指定字符串开头
* `str.endWith(str)` 判断是否以指定字符串结尾
* `str.repeat(count)`   返回重复了指定次数的字符串
### 数值扩展
* 二进制与八进制表示法：0b开头表示二进制，0o表示八进制
* `number.isFinite(i)` 判断是否是有限数
* `number.isNaN(i)` 判断是否是NaN
* `number.parseInt(str)` 字符串转化为整数
* `number.isInteger(i)` 判断是否是整数
* `Math.trunc(i)`   小数转化为整数
### 数组对象的扩展
* `Array.from(v)` 将伪数组转化为真数组
* `Array.of(v1,v2,v3)`  将一系列数据转化为数组
* `Array.find(function(item, index, arr){})`    找到满足条件的第一个值
 
对象的扩展
* `Object.is(v1, v2)`   判断两个数据是否相等，底层是判断字符串
* `Object.assign(target, source, [source, source])` 将源对象的属性添加到目标对象上
* 从ES6开始__proto__可以被操作