深入浅出篇 — ES6新特性（二）

XJoJo
262 阅读4分钟

...运算符：

  1. ...运算符简介
  • 其又叫展开/收集运算符
  • 此运算符在不同的地方有不同的功能，可从写或读两个角度解读
例：
1. 写 ： function foo(...arg){}; foo(1,2,3)  --- 起收集作用
2. 读 ： var arg = [1,2,3]; console.log(...arg)  --- 起读作用
  • 作用 ： 简化书写长度，提高开发效率
  • es6可用于处理数组，es7可以处理对象
  1. es6中 ...运算符

  • 写：起收集作用 / 剩余参数

      function sum(...arg){console.log(arg)}  // [1,2,3]
  sum(1,2,3)
  //此运算符在收集作用中-> 可以把散列的值收集成一个数组
  注：一个函数只能出现一个剩余参数，并且若有多个形参，剩余参数要放在最后

  • 读：起展开作用

      1.
  var arg = [1,2,3]
  console.log(...arg)  // 1 2 3
  //将聚合的值 -> 散列的值
  2.
  //这样的也是读
  let arr1 = [1,2,3,4]
  let arr2 = [6,7,8]
  let newArr = [...arr1,...arr2]
  cosnole.log(newArr) -> [1,2,3,4,5,6,7,8]
  1. es7中的...运算符

克隆方式

  1. 浅层克隆：

  • 浅拷贝是拷贝引用，拷贝后的引用都是指向同一个对象实例，彼此之间操作都会有影响

      let company = {
      name: "duyi",
      age: 18
  }

  let trachDepartment = {
      leader: {
          name: "cg",
          age: 20
      },
      personNum: 25
  }
  //运用...运算符
  let obj = {
      ...company,
      ...trachDepartment
  }
  console.log(obj)

  • 其他浅克隆方法: Array.prototype.slice(),Array.prototype.concat(), jQury的$.extend({},obj)

  1. 深克隆

  • 在堆中重新分配内存，并且把源对象所有属性都进行进行新建拷贝，以保证深拷贝的对象的引用图不包含任何原对象上的对象引用图上的任何对象，拷贝后的对象原对象完全隔离互不影响。

  • 深拷贝后，两个对象，包括其内部的元素互不干扰,常用方法有：JSON.parse(),JSON.stringify(),jquery的$.extend(true, {}, obj)

  • 深层克隆（1）：

      let company = {
      name: "duyi",
      age: 18
  }
  let leader = {
      name: "cg",
      age: 20
  }
  let trachDepartment = {
      leader: {
          ...leader
      },
      personNum: 25
  }
  
  //运用..运算符
  let obj = {
      ...company,
      ...trachDepartment,
      // 在这里后设置的属性会覆盖之前的leader,
      leader: {
          ...leader  // 这里就可以完成深度克隆了 ，但是不建议这样用，因为嵌套过深的话就显得很麻烦
      }
  }
  console.log(obj)

  • 深层克隆（2）：

      let obj = JSON.parse(JSON.stringify(teachDepartment))  
  //缺陷是不能查找对象里面的函数
  1. assign方法：
  • 借用一下上面的变量
  • Object.assign({},leader，trachDepartment)
  • 其为浅层克隆-是es6中的新方法
  • 将后面的属性赋值给前面的，并返回赋值后前面的属性

  1. 递归实现深拷贝

     function deepClone(target) {
     // 定义一个变量
     let result;
     // 如果当前需要深拷贝的是一个对象的话
     if (typeof target === 'object') {
     // 如果是一个数组的话
          if (Array.isArray(target)) {
             result = []; // 将result赋值为一个数组，并且执行遍历
             for (let i in target) {
                 // 递归克隆数组中的每一项
                 result.push(deepClone(target[i]))
             }
         // 判断如果当前的值是null的话；直接赋值为null
         } else if(target===null) {
             result = null;
             // 判断如果当前的值是一个RegExp对象的话，直接赋值    
         } else if(target.constructor===RegExp){
             result = target;
         }else {
             // 否则是普通对象，直接for in循环，递归赋值对象的所有值
             result = {};
             for (let i in target) {
                 result[i] = deepClone(target[i]);
             }
         }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
     } else {
         result = target;
     }
     // 返回最终结果
     return result;
 }

数据结构：

一. set

  1. set简介
  • set
  • set是es6提供给我们的构造函数，能构造出一种新的存储数据的结构
  • 特点 ： 其只有属性值，成员唯一性
  • 可转成数组，其本身具有去重，交集，差集等的作用
  1. set用法
例：
1.
const arr = new Set()   
// 特点： 成员的唯一性 （会自动去重） ， 只有属性值
arr.add(1)
arr.add(2)
arr.add(1)
console.log(arr)  ->  {1,2}
// 当传递的是字符串的时候 会把其每项拆分
const arr2 = new Set("abc")  // {"a","b","c"} 

2.
可用链式调用
相当于
const arr = new Set()
arr.add(1).add(2).add(1)
console.log(arr)  ->  {1,2}

3. 数组去重
var arr2 = [1,2,4,46,7,5,4,2,64,4,2]

法一 ：
var arr1 = new Set(arr2)    //但这样会改变数据类型 ， set为对象

法二：运用扩展运算符转换为数组
var arr = [...new Set(arr2)]

法三：Array.from()  //新增方法 --- 能将类数组或具备j迭代接口的数据转换为真数组
Array.from(arr1)
Array.from('abc')   // ['a','b','c']

3.set原型上的方法

例：

const arr = new Set([1]) 
arr.add(2)       //添加，若和原有的有重复值，也会进行数组去重
arr.delete(2)   // 删除了2 ，返回删除的值
arr.clear()     // 清空数组里面的值，返回undefined
arr.has(9)      //查看arr里有没有9，若没有返回false

// forEach方法 -- 遍历 
arr.forEach(val=>{
    //val --- 属性值
})
  1. es6新增for of循环

例：

for(let prop of arr){
    //prop 就是 arr里的值
}

二. map

  1. map简介
  • map是es6提供给我们的构造函数，能构造出一种新的存储数据的结构，其本质是键值对的集合
  • 特点 ： key对应value，key和value唯一，任何值都可以当属性
  • 用途 ： 可以让对象当属性，去重等
  • 原理实现 ： 链接链表， hash算法，桶
  1. map用法：
例：
1. 通过初始化塞值
const map1 = new Map([['name','amy'],['age',18]])
2. 原型上的方法
const map = new Map()
//set方法  添加
map.set('name','amy').set('age',18)

//取值
map.get（'name'） 取到name属性的值

//其他方法
map.delete('name')  // 删除 
map.clear()         //清空map里的值
map.size            //返回长度
map.keys()          // 返回所有属性名  
map.entries()       // 就是他自己的东西
map.has('name')     //查看有没有属性名  返回布尔

//forEach方法
map.forEach((ele,key,self)=>{
    //ele 属性值
    //key 属性名
    //self 自身
})

//新增for of循环 
1）
for(let [key,value] of map){
    //key   属性名  name
    //value 属性值  amy
}
2）
for(let value of map){
    // value 返回的是  ['name' ,'amy']  是一对一对的值
}

//唯一性
const map1 = new Map([['name','amy'],['age',18]])
map1.set('name','amy').set('age',18)

console.log(map1)                       --- {"name" => "amy", "age" => 18}
avatar
文章
阅读
粉丝