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