es6实用新特性项目运用及用法体会

1、变量声明let、const

let issueLogItemDefaultProps = {
    deltails: [],
    claimReason: -1,
    fileClaim: -1,
    modifyStatus: false
};
const aa="33";

const定义的变量不可以修改，而且必须初始化

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

let、const声明方式更加严谨，可读性更强，缩小作用域。

let与var 最大的区别在于let 不会提升作用域。

2、变量赋值

let { rmaIssueLog, orderItemList } = this.props;
相当于
rmaIssueLog=this.props.rmaIssueLog;
orderItemList=this.props.orderItemList;
也可以添加一个默认值如：
let { rmaIssueLog, orderItemList:rma } = this.props;

3、箭头函数

cellRendererFramework: params => {
    console.log(parmas);
}
相当于
function cellRendererFramework(params){
    console.log(parmas);
}

4、类支持

js总算能像java、.net、php后台语言一样，有自己的类，能定义父级、继承、多态等。

但它的类的实现根本还是定义function，只是让书写者更加方便、可读性更强等。

//类的定义
class Animal {
    //ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }}
//类的继承
class Programmer extends Animal {
    constructor(name) {
        //直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }}
//测试我们的类
var animal=new Animal('dummy'),wayou=new Programmer('wayou');
animal.sayName();  //输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’
5、import、export应用
import、export的都是对象，即名称为class的。
例如：在app.config.js中
const Config = {
// APIs
apiUrl: 'http://1459.219.200.119:8080'        //为保护隐私已做处理
};
在groupService.js中
export default Config;
import Config from '../app.config';
import { HttpClient } from './httpClient';

export class GroupService {
    static getDealers() {
        return HttpClient.get(`${Config.apiUrl}/api/group/dealer-list`);
    }
}

5、字符串模板

let num=5;
console.log(`your num is ${num}`);      //your num is 5

6、不定参赋值

实现对象下的参数全部赋值到另外一个新对象中

let post={
    aa:"a1",
    bb:"a2",
    fn1：()=>{
        console.log(this);
    }
};
const newPost = { ...post, title: "hello word" };
console.log(newPost);                //查看newPost下的方法

7、循环for of 值遍历

都能循环数组、类数组或对象。

区别for、for in；for in提供是序号、for of 提供的是值

var someArray = [ "a", "b", "c" ];
for (v of someArray) {
    console.log(v);//输出 a,b,c
}

for (v of someArray) {
    console.log(v);//输出 0,1,2
}

8、Map、Set、WeakMap、WeakSet

把后台语言中重要的两种数据集合添加了进来。

// Sets
var s = new Set();s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

总结

总结就是一句话，前后端差异越来越小了，为前端工程化打基础。

es6实用新特性项目运用及用法体会

猜你喜欢