ES6复习（2）

ES6复习（2）

一、新增数据类型 Symbol

symbol类型作用可生成一个独一无二的值。永远不与其他的symbol类型相同

// symbol类型，永远不会和其他symbol相同。
// 创建symbol时，可以传递一个参数用于区分symbol，参数类似与代码中的注释，对程序的运行没有影响。
  let s1 = Symbol("s1");
  let s2 = Symbol("s2");
  console.log( typeof s1 );
  console.log( s1 == s2 );//永远是false
  console.log( s1,s2 );

应用场景：当在多人协同开发模式时，如果对象是共有对象,可使用symbol类型解决无意中“覆盖”原有对象的属性或方法的问题

二、数组扩展

1、of()

语法：Array.of( ...args )

2、from()

语法：Array.from( arrayLike )

// Array.of() 创建数组。
/*   let arr= new Array(3); // [,,,]
  console.log( arr ); */
  console.log( Array.of(1,2,3) );
  console.log( Array.of( 3 )); //[3]

  // 伪数组：类似数组的对象（HTMLcollection , nodelist, arguments ）
  // Array.from() 用于将伪数组转为真正的数组，从而可以调用数组丰富的方法，为编程带来灵活性
  let arr = {
    "0":"ok",
    "1":"hello",
    "2":[1,2,3],
    "length":3
  }
  console.log( Array.from( arr ) ); 

三、对象扩展

// 允许属性简写
  // 允许方法简写
  // 允许表达式或变量作为对象的键
  let name = "jack";
  let sex = "男";
  let age = "年龄";
  let obj = {
    name,
    sex,
    [age]:19,
    say(){
      console.log( "hello");
    }
  }

Object.assign(obj1, obj2, ..) 合并对象

Object.keys( obj ) 将对象中所有的键作为一个数组返回

Object.values( obj ) 将对象中所有的值作为一个数组返回

//Object.assign() 合并对象
  let o1 = {name:"jack"};
  let o2 = {sex:"男"};
  let o3 = {age:19};
  Object.assign(o1,o2,o3); 
  console.log( o1 );

  // Object.keys() 将对象中的键组成一个数组返回
  console.log( Object.keys(o1) );
  // Object.values() 将对象中的值组成一个数组返回
  console.log( Object.values(o1) );

四、set与map 类型

1、set类型

ES6新增的类似数组的数据结构，区别就是set中不可能有重复的项，利用set类型的特征可以方便实现数组去重。

set类型自有的属性和方法：

size： 类似数组中length属性，size的值为set中成员的个数

add( value ) ： 添加一个项

has( value ) ： 判断是否有指定的项

delete( value ) ： 删除指定的项

clear() ： 清除所有的项

// set类型：类似数组，但不允许出现重复的项
  let arr = [2,3,2,5,1,5];
  let set1 = new Set(arr);
  console.log( set1  );
  set1.add(2);
  console.log( set1 );

2、map 类型

ES6新增的类似对象的数据结构，区别是map中的键可以是任意其他类型。

// map类型，类似对象，区别map中的键可以是任意数据类型
  let lis = document.getElementsByTagName("li");
  let obj = {
    "name":[1,2,3]
  }
  let map1 = new Map();
  map1.set(lis,"所有li标签");
  map1.set(arr,"数组");
  console.log( map1 );

map类型比对象更加灵活，可以容纳更多的数据。但是在目前的开发模式下没有用处。目前流行的前后端分离的开发模式采用json作为数据传输的媒介。因为 JSON.parse() JSON.stringify() 可以很方便的实现对象与字符串之间的互相转换，但map类型不支持类似方法。

五、解构赋值

解构赋值就是按照一定的模式，将数组或对象中的数据提取出来赋值给变量

// 特征：
  // 1）必须有赋值操作（=号）
  // 2）=号的右边要解构的数组或对象
  // 3）=号的左边是模式和变量

  let [a,b,c,d] = [88,99,100,102];
  console.log( a,b,c,d );

  let {name:xxx, age:zzz, sex:yyy} = {name:"jack", sex:"男", age:19}
  console.log( xxx, yyy, zzz);

数组的解构赋值的各种情况

a) 要解构的数据和变量是相等的

b) 要解构的数据比变量多

c) 要解构的数据比变量少，则相当于声明变量但未赋值，为undefined

d) 数组解构赋值的缺省情况

e ) 解构赋值时可以为变量设置默认值。默认值生效前提：解构失败或者解构的值严格等于undefined

let [x=1,y=x] = [];  //x=1 y=1
let [x=1,y=x] = [2]; //x=2 y=2 
let [x=1,y=x] = [1,2]; //x=1 y=2
let [x=y,y=1] = []; //报错

函数形参的解构赋值

 // 注意！！此时的形参不是数组，是模式和变量
  // 相当于 let [a,b] = [2,3]
  function fn([a,b]){
    return a+b;
  }
  console.log( fn([2,3]) );

  //注意！！此时的形参不是对象，是模式和变量
  // 相当于： let {x,y} = {x:2,y:3};
  function demo({x,y}){
    return x+y;
  }
  console.log(  demo({x:2,y:3}) );

解构赋值的应用场景

1、交换变量的值

1. let [a,b] = [5,"ok"]; // a=5  b="ok"
     // 赋值运算优先级：先运算等号后边的表达式，然后赋值给等号前面的变量
     // 先形成字面量数组 ["ok",5],又构成解构赋值
     [a,b] = [b,a]; 
     console.log( a,b );

   2、获取函数的多个返回值

2.  // 获取函数的多个返回值
     function getWindowSize(){
       let w = window.innerWidth;
       let h = window.innerHeight;
       return {width:w, height:h};
     }
     console.log( getWindowSize() );
     let {width,height} = getWindowSize()
     console.log( `宽度是${width}px; 高度是${height}px`);

3. 函数传参（ 解决函数参数太多和顺序的问题 ）

4. let option = {
       host:"localhost",
       port:3000,
       user:"root",
       password:"123456",
       database:"ujiuye"
     }
   
     function conn({host,port,user,password,database}){
       console.log( user,password );
     }
     conn( option )