ES6的迁移之路---[3]

前言

接着数据类型这块Array、Object、function

Array

Array.of()方法基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

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

  let empty=Array.of();
  console.log('empty',empty);
}

　Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

{
  let arrayLike = {
    0: 'tom',
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

  console.log(Array.from([1,3,5],function(item){return item*2}));//[ 2, 6, 10 ]
}

Array.fill()有三个参数分别是覆盖的值，以及覆盖范围

{
  console.log('fill-7',[1,'a',undefined].fill(7));//fill-7 [ 7, 7, 7 ]
  console.log('fill,pos',['a','b','c'].fill(7,1,3));//fill,pos [ 'a', 7, 7 ]
}

获取Array的相关数据

{
  for(let index of ['1','c','ks'].keys()){
    console.log(index);
  }//0;1;2
  for(let value of ['1','c','ks'].values()){
    console.log(value);//1;c;ks
  }
  for(let [index,value] of ['1','c','ks'].entries()){
    console.log(index,value);0,1;1,c;2,ks
  }
}

查找Array数据的api

//Array.prototype.copyWithin(target, start = 0, end = this.length)
{
  console.log([1,2,3,4,5].copyWithin(0,3,4));//[4,2,3,4,5]
}

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

{
  console.log('number',[1,2,NaN].includes(1));//true
  console.log('number',[1,2,NaN].includes(NaN));//true
}

Object

在说Object新增了哪些api之前我先说说，es6的一些简易写法

{
  // 简洁表示法
  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={
    [a]:'c'
  }

  console.log(es5_obj,es6_obj);//{ a: 'c', b: 'c' } { b: 'c' }

}

新增的api

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

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

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

扩展运算符reset写法

{
   let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};
   console.log(a,b,c);//test ,kill, { c: 'ddd', d: 'ccc' }
}

function

函数默认值

{
  function test(x, y = 'world'){
    console.log('默认值',x,y);//默认值 hello world
  }
  test('hello');
  test('hello','kill');//默认值 hello kill
}
{
  let x='test';
  function test2(x,y=x){
    console.log('作用域',x,y);
  }
  test2('kill');//作用域 kill kill
}

函数reset参数

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

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

箭头函数

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