ES6入门(数组扩展,函数扩展,对象扩展,Symbol,数据结构)

数组扩展

• Array.from
• Array.of
• copyWithin
• find\findIndex
• fill
• entries\keys\values
• inludes

把一组变量转换成数组类型

{
  let arr = Array.of(3,4,7,9,11);
  console.log('arr=',arr);

  let empty=Array.of();
  console.log('empty',empty); //空数组
}

把伪数组，集合转换成数组类型

第二种用法：map映射

{
  let p=document.querySelectorAll('p');
  let pArr=Array.from(p);
  pArr.forEach(function(item){
    console.log(item.textContent);
  });
    第二种用法：map映射
  console.log(Array.from([1,3,5],function(item){return item*2}));
}

填充数组

{
  console.log('fill-7',[1,'a',undefined].fill(7));
  console.log('fill,pos',['a','b','c'].fill(7,1,3));
  替换数值，起始替换位置（索引从0开始），替换长度
}

遍历数组

{
  for(let index of ['1','c','ks'].keys()){
    console.log('keys',index);
  }
  // values有兼容性问题
  for(let value of ['1','c','ks'].values()){
    console.log('values',value);
  }
  // keys和values都取
  for(let [index,value] of ['1','c','ks'].entries()){
    console.log('values',index,value);
  }
}

替换数组

{
  console.log([1,2,3,4,5].copyWithin(0,3,4));
  （0，3，4）从哪个位置开始替换，从哪个位置开始读取数据，从哪个位置截至
  输出：4，2，3，4，5
}

查找数组

find只找一个，findIndex返回下标

{
  console.log([1,2,3,4,5,6].find(function(item){return item>3}));
  console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));
}

不能加函数

{
  console.log('number',[1,2,NaN].includes(1)); 返回True
  console.log('number',[1,2,NaN].includes(NaN)); 返回True
}

函数扩展

• 参数默认值
• rest参数
• 扩展运算符（rest的逆运用）
• 箭头函数
  
  • this绑定（箭头函数在定义时的所在）
  • ES5 this是函数被调用时的所在
• 伪调用

参数默认值

默认值的后面不能没有未定义的变量，否则报错

{
  function test(x, y = 'world'){
    console.log('默认值',x,y);
  }
  test('hello');
  test('hello','kill');
}

注意作用域(从小到大查找，冒泡)

{
  let x='test';
  function test2(x,y=x){
    console.log('作用域',x,y);
  }
  test2('kill');
  输出kill kill
  test2();
  输出 undefined undefined

}

rest参数（一堆参数（不确定）->数组）

{
  function test3(...arg){
    for(let v of arg){
      console.log('rest',v);
    }
  }
  test3(1,2,3,4,'a');
}

扩展运算符

{
  console.log(...[1,2,4]);
  console.log('a',...[1,2,4]);
}

箭头函数(注意绑定)

函数名 = 函数参数 => 函数返回值

{
  let arrow = v => v*2;
  let arrow2 = () => 5;
  console.log('arrow',arrow(3));
  console.log(arrow2());

}

伪调用（函数式编程）

提升性能

{
  function tail(x){
    console.log('tail',x);
  }
  function fx(x){
    return tail(x)
  }
  fx(123)
}

对象扩展

• 简洁表示法
• 属性表达式
• 扩展运算符
• Object新增方法

简洁表示法

{
  // 简洁表示法
  let o=1;
  let k=2;
  let es5={
    o:o,
    k:k
  };
  let es6={
    o,
    k
  };
  console.log(es5,es6);

  let es5_method={
    hello:function(){
      console.log('hello');
    }
  };
  let es6_method={
    hello(){
      console.log('hello');
    }
  };
  console.log(es5_method.hello(),es6_method.hello());
}

属性表达式

{
  // 属性表达式
  let a='b';
  let es5_obj={
    a:'c',
    b:'c'
  };

  let es6_obj={
    // 可以用表达式，变量来声明key
    [a]:'c'
  }

  console.log(es5_obj,es6_obj);

}

扩展运算符

is相当于===。
数组也是引用类型，引用地址不同。
assign相当于拷贝.拷贝属性有限制，就是前拷贝。
复制分浅复制（对于引用类型，只修改引用地址）和深复制，assign属于前者。
assign拷贝的是自身对象的属性（如果对象只有继承，他不会拷贝继承的属性），也不会拷贝不可枚举的属性。
js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等
Object.entries取keys和values

在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。

{
  // 新增API
  console.log('字符串',Object.is('abc','abc'),'abc'==='abc');
  console.log('数组',Object.is([],[]),[]===[]);

  console.log('拷贝',Object.assign({a:'a'},{b:'b'}));

  let test={k:123,o:456};
  for(let [key,value] of Object.entries(test)){
    console.log([key,value]);
  }
}

babel对扩展运算符支持不是很友好

{
  //扩展运算符
  let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};
  // c={
  //   c:'ddd',
  //   d:'ccc'
  // }
}

Symbol

Symbol提供一个独一无二（不相等）的值

不可枚举对象

{
  // 声明
  let a1=Symbol();
  let a2=Symbol();
   console.log(a1==a2); //返回false
  console.log(a1===a2); //返回false
  let a3=Symbol.for('a3');
  let a4=Symbol.for('a3');
  console.log(a3===a4); //返回true
}

Symbol使用

{
  let a1=Symbol.for('abc');
  let obj={
    [a1]:'123',
    'abc':345,
    'c':456
  };
  console.log('obj',obj);

  for(let [key,value] of Object.entries(obj)){
    console.log('let of',key,value);
  }
//只拿Symbol的API
  Object.getOwnPropertySymbols(obj).forEach(function(item){
    console.log(obj[item]);
  })
// ES6:都拿（非symbol和symbol）
  Reflect.ownKeys(obj).forEach(function(item){
    console.log('ownkeys',item,obj[item]);
  })
}

数据结构

• Set,集合（其中元素不能重复）
• WeakSet
• Map（相对于Object,key只能是字符串，但是Map的可以是任意的数据类型）
• WeakMap

Set

{
  let list = new Set();
  list.add(5);
  list.add(7);

  console.log('size',list.size);
}

Set定义

{
  let list = new Set();
  list.add(5);
  list.add(7);

  console.log('size',list.size);
}

{
  let arr = [1,2,3,4,5];
  let list = new Set(arr);

  console.log('size',list.size);
}

添加重复元素不报错，只是去重，不转换数据类型

{
  let list = new Set();
  list.add(1);
  list.add(2);
  list.add(1);

  console.log('list',list);

  let arr=[1,2,3,1,'2'];
  let list2=new Set(arr);

  console.log('unique',list2);
}

Set方法

• has
• delete
• clear
• keys和values相等

{
  let arr=['add','delete','clear','has'];
  let list=new Set(arr);

  console.log('has',list.has('add'));
  console.log('delete',list.delete('add'),list);
  list.clear();
  console.log('list',list);
}

set遍历

{
  let arr=['add','delete','clear','has'];
  let list=new Set(arr);

  for(let key of list.keys()){
    console.log('keys',key);
  }
  for(let value of list.values()){
    console.log('value',value);
  }
  for(let [key,value] of list.entries()){
    console.log('entries',key,value);
  }

  list.forEach(function(item){console.log(item);})
}

WeakSet

WeakSet的元素只能是对象（地址引用）
弱引用，不会监测该对象有没有在其他地方用过（不会监测是否被垃圾回收机制回收掉）
没有size属性，clear方法
不能遍历

{
  let weakList=new WeakSet();

  let arg={};

  weakList.add(arg);

  // weakList.add(2); 报错

  console.log('weakList',weakList);
}

Map

Map定义

{
  let map = new Map();
  let arr=['123'];

  map.set(arr,456);

  console.log('map',map,map.get(arr));
}

Map方法

{
  let map = new Map([['a',123],['b',456]]);
  console.log('map args',map);
  console.log('size',map.size);
  console.log('delete',map.delete('a'),map);
  console.log('clear',map.clear(),map);
}

WeakMap

WeakMap的元素只能是对象（地址引用）
没有size属性，clear方法
不能遍历

{
  let weakmap=new WeakMap();

  let o={};
  weakmap.set(o,123);
  console.log(weakmap.get(o));
}

map和Array增删改查对比

{

  // 数据结构横向对比，增，查，改，删
  let map = new Map();
  let array = [];
  // 增
  map.set('t',1);
  array.push({t:1}); 

  console.info('map-array',map,array);


  // 查
  let map_exist = map.has('t');
  let array_exist = array.find(item=>item.t); // 返回布尔值
  console.info('map-array-find',map_exist,array_exist); //返回查找内容


  // 改
  map.set('t',2);
  array.forEach(item=>item.t?item.t=2:''); 
  console.info('map-marray-modify',map,array);

  // 删
  map.delete('t');
  let index = array.findIndex(item=>item.t);
  array.splice(index,1);
  console.info('map-marray-del',map,array);

}

set和Array增删改查对比

{
  let set = new Set();
  let array = [];
  // 增
  set.add({t:1});
  array.push({t:1}); 

  console.info('set-array',set,array);


  // // 查
  let set_exist = set.has({t:1}); //false
  let array_exist = array.find(item=>item.t); // 返回布尔值
  console.info('set-array-find',set_exist,array_exist); //返回查找内容


  // 改
  set.forEach(item=>item.t?item.t=2:''); 
  array.forEach(item=>item.t?item.t=2:''); 
  console.info('set-marray-modify',set,array);

  // 删
  set.forEach(item=>item.t?set.delete(item):''); 
  let index = array.findIndex(item=>item.t);
  array.splice(index,1);
  console.info('set-marray-del',set,array);

}

set,object,map增删改查对比

{

  // map，set,object对比
  let item = {t:1};
  let map = new Map();
  let set = new Set();
  let obj = {};


  // 增
  map.set('t',1);
  set.add(item);
  obj['t']=1;

  console.info('map-set-obj',obj,map,set);


  // 查
  console.info({
    map_exist:map.has('t'),
    set_exist:set.has(item),
    obj_exist:'t' in obj 
  });

  // 改
  map.set('t',2);
  item.t=2;
  obj['t']=2;
   console.info('map-set-modify',obj,map,set);


   // 删除
   map.delete('t');
   set.delete(item);
   delete obj['t'];
    console.info('map-set-empty',obj,map,set);


}

能使用map和set，不使用数组。
如果对数据唯一性高，优先使用set,放弃object