ECMAScript入门(二)

数组赋值

在ECMAScript6中数组的复制有两种方法：

采用Array.from

var arr = [1,2,3,4];
var arr2 = Array.from(arr);
console.log(arr2);

采用...arr

var arr = [1,2,3,4];
var arr2 = [...arr];
console.log(arr);

箭头函数

在ECMAScript6中我们有了一种新的定义函数的方法，那就是箭头函数
1.首先我们来复习一下普通函数的写法

var show = function(a,b){
  var c = a+b;
  return c;
}
alert(show(12,5));

2.我们用箭头函数写下同样的代码

var show = (a,b)=>{
  var c = a+b;
  return c;
}
alert(show(12,5));

箭头函数是不是看起来更加的简洁呢？

3.箭头函数的缩写

var show= (a)=>a+5;
alert(show(1));

这行代码用箭头函数的标准形式可以写成

var show= (a)=>{
  return a+5
};
alert(show(1));

注意：箭头函数的简写仅用在代码中有一行代码才能采用简写的方式

Map结构

它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值都可以当作键

//正常的写法获取键值对
var map = new Map();
map.set('a','苹果');
map.set('b','香蕉');
map.set('c','西瓜');
for(var [key,value] of map.entries()){
  console.log(key,value);
}

//获取key的写法
var map = new Map();
map.set('a','苹果');
map.set('b','香蕉');
map.set('c','西瓜');
for(var key of map.keys()){
  console.log(key);
}

//获取value的写法
var map = new Map();
map.set('a','苹果');
map.set('b','香蕉');
map.set('c','西瓜');
for(var val of map.values()){
  console.log(val);
}

ES6的面向对象

//传统的面向对象
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    return this.name;
};
Person.prototype.showAge = function(){
    return this.age;
};
var p1 = new Person('xiaoming',18);
alert(p1.showAge());

//在ES6中的面向对象
class Person{
    constructor(name,age=18){
        this.name = name;
        this.age= age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
var p1 = new Person('xiaoming',18);
alert(p1.showAge());

ES6面向对象的继承

class Person{
    constructor(name,age){
        this.name = name;
        this.age= age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
class Worker extends Person{
    constructor(name,age,job){
        super(name,age);
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var w1 = new Worker('json',22,'web开发工程师');
alert(w1.showJob());

这里我不得不提一下面向对象的这种继承方式较传统方式而言给我们带来的更加简洁的结构，使我们能用更加简单的方法实现继承

模块化

说到模块化我们一定会想起我们常用的模块化seajs和requirejs把，而我们的es6中有新的模块化方法，不多说直接上代码

定义模块

import modA from 'a.js';

导出模块

var a = 12;
export default a;

标准的使用方法

import sum from 'd.js';//导入所要依赖的模块
alert(sum());

在模块中导入所依赖的模块

import modA from 'a.js';
import modB from 'b.js';
export default function () {
    return modA+modB;
};