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

前言

接着数据类型这块ArrayObjectfunction

Array

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
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()有三个参数分别是覆盖的值,以及覆盖范围

1
2
3
4
{
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的相关数据

1
2
3
4
5
6
7
8
9
10
11
{
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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的一些简易写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
// 简洁表示法
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());
}

接下来是属性表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
// 属性表达式
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

1
2
3
4
5
6
7
8
9
10
11
12
{
// 新增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写法

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

function

函数默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
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参数

1
2
3
4
5
6
7
8
9
10
11
12
13
{
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
}

箭头函数

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

本文标题:ES6的迁移之路---[3]

文章作者:NoHomeMan

发布时间:2018年09月28日 - 15:09

最后更新:2018年09月29日 - 10:09

原始链接:http://nohomeman.github.io/ES6的迁移之路-3/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------The End-------------