ES6中常用80%

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6中常用80%脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ES6 常用的那80%

编译工具

  1. babel
  2. traceur 编译工具
  3. bootstrap 引导程序

定义变量

let定义变量
  1. let具备块级作用域
  2. 不允许重复声明
let a = 15 ; 
let a = 5;//报错
  1. var 具备函数作用域
  2. 用处(i问题):let拥有 块级作用域 = 匿名函数自执行

const定义变量

  1. 定义常量 赋值之后不能被修改 //const必须给初始值 不能被重复定义
  2. 用途:止变量被意外修改,比如 引入库或者组件名

字符串连接

字符串模板
var a = haha 使用方式 ${a}

以前字符串拼接 'abc '+变量名+'efg'

现在 'abc${变量名}def'

解构赋值

解构 左边解构和右边解构一样

VAR [a,b,c] = [12,3,101]
console.LOG(a,b,c);

和JSON配合使用

var {a,b,c} = {b:12,a:5,c:101} //跟顺序无关

模式匹配 左边的样子和右边一样

var [a,[b,c],d] = [1,[2,3],4]
console.log(a,b,c,d)

var [{e,f},[b,c],d] = [{f:'bbb',e:'aaa'},[2,3],4]
console.log(b,c,d,e,f)

数组循环

for for in

for of //能够循环数组,但是不能循环JSON,真正的目的是为了循环map对象

只循环值

for(var value of arr){}

只循环索引
for(var key of arr.keys()){}

循环索引和值
for(var some of arr.entries()){}

var arr = ['aa','bb','cc','dd']

for(let i in arr){//索引
    console.log(i)
}

for(let i of arr){//值
    console.log(i)
}

JSON的循环

var JSON = {'a':'aa','b':'bb','c':'cc','d':'dd'}
for(let i of json){//报错
    console.log(i)
}

map对象

和JSON相似,也是一种key-value的形式
Map对象为了和for of 循环配合而生的

Map的使用

var map = new Map();
//map.set(name,value);
//map.get(name);
//map.delete(name);

map.set('a','aa');
map.set('b','bb');

console.log(map)

for(var name of map){//不仅有key还有value
    console.log(name)
}

for(var [key,value] of map){
    console.log(key,value);
}

//单独循环map其中的某一个
for(var key of map.keys()){
    console.log(key);
}

for(var value of map.values()){
    console.log(value)
}

函数

之前

function show(){
    
}
show();

箭头函数 =>

// 如果箭头函数 无参数 , 必须使用 ()圆括号或者 _下划线:
() => { statements; } 
或
_ => { statements; }

//返回一个对象时,函数体外要加圆括号
params => ({foo: bar})

箭头函数需要注意
(1)this指向window
(2)arguments不能使用了

对象的定义

单例模式

var PErson = {
    name: 'aa',
    age: 12,
    showName: function(){
        alert(this.name);
    },
    showAge: function(){
        alert(this.age);
    }
}
person.showName();

面向对象

function Person(name,age){ //类 构造函数
    this.name = name;
    this.age = age;
}
Person.PRototype.showName = function(){
    return this.name;
}
Person.prototype.showAge = function(){
    return this.age;
}
person1 = new Person('aa',12);
alert(person1.showName());

//原型继承

function Worker(name,age){
    Person.apply(this,arguments);
}
Worker.prototype = new Person();

函数给默认值

function aa(obj='对象是必须的',json={},options={'time':300,'width':400}){

console.log(obj,json,options);

}
aa();


ES6面向对象

class Person{
constructor(name='default',age=0){

this.name = name;
this.age = age;

}
showName(){

return this.name;

}
showAge(){

return this.age;

}
}

pe = new Person('shen',24);
pe.showName();

//继承

class Worker extends Person{

constructor(name,age,job){
    super(name,age);//调用父类的构造函数
    this.job = job;
}

}
w1 = new Worker('shenyuanyuan',90);
w1.showName();


用面向对象来模拟队列

class Queue {

constructor(para = []){
    this._queue = para;
}
shift(){
    var value = this._queue[0];
    this._queue.shift();
    return value;
}
push(n){
    this._queue.push(n);
    return this._queue
}

}

q = new Queue([1,2,3,4]);
console.log(q);
q.push(5);
console.log(q);
q.shift();
console.log(q);

面向对象的选项卡

#### 模块化

导出模块

export default a

引用模块

important modeA form './a.js'

### Promise

就是一个对象,用来实现传递异步操作的数据(消息)

pending(等待、处理中)-> resolve(完成 fullfilled)
                    -> Rejected(拒绝 失败)
                    

var p1 = new Promise(function(resolve,reject) {
resolve(1);
});
p1.then(function(value){

//alert('成功了:'+ value)
console.log(value);
return value + 1;

},function(value){

alert('失败了:'+ value)

}).then(function(value){

console.log(value);

});

脚本宝典总结

以上是脚本宝典为你收集整理的ES6中常用80%全部内容,希望文章能够帮你解决ES6中常用80%所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。