ES6

来源:互联网 发布:王安石 张居正 知乎 编辑:程序博客网 时间:2024/05/16 01:29

定义变量

ES6中定义变量是用let代替var


特点 :


1、用let声明的变量,作用域只在{}里。 如 :
{
let a = 10;
}
alert(a);  //无法输出a, 因为a的作用域只在{}里


2、不能重复定义。如 :
let a = 10;
let a = 5;
或者
let a = 10;
var a = 10;
都是错误的


3、解决i的问题
var a = [];
for (var i = 0; i < 10; i++) {
 a[i] = function () {
   console.log(i);
 };
}
a[6](); // 10


var a = [];
for (let i = 0; i < 10; i++) {
 a[i] = function () {
   console.log(i);
 };
}
a[6](); // 6


定义常量

使用const来定义一个常量 (常量 :一旦定义了常量的值,就无法修改)
特点 :
1、const和let的特点几乎一样,只是使用const定义的值无法修改。 如 :
const a = 10;
a = 5; //报错


2、const定义的常量必须初始化, 如 :
const a; //报错,需要初始化值


字符串链接

``来定义字符串, 要拼接的内容使用${变量}。如 :
let str = '这种语言在万维网上应用广泛';
let text = `ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。${str},它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。`
document.write(text);

结构赋值

特点 :左侧的样子需要和右侧的样子一样。 如 :


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


var {a,b,c} = {b : 10, a : 7, c : 5};
console.log(a); //7
console.log(b); //10
console.log(c); //5


结构赋值还可以给默认值, 如 :
var [a = 10, b = 2, c] = [1,,6];
左边 :a的默认值是10,b的默认值是2, c没有
右边 :a的值修改为1, b的值还是2, c的值为6
console.log(a); //1
console.log(b); //2
console.log(c); //6
或者 :
function show([a=10,b=2]=[])
{
console.log(a+b);
}
show([1,5]); //6
show(); //12


复制一个数组

使用... + 数组变量名可以复制一个数组, 如 :
var arr = [1,2,3];
var arr2 = [...arr];
arr.pop();
console.log(arr); //1,2
console.log(arr2); //1,2,3


...也可以使用在函数, 如 :
function show(...arr)
{
console.log(arr); //[1,2,3,4,5]
arr.push(6);  //arr是一个数组
console.log(arr); //[1,2,3,4,5,6]
}
show(1,2,3,4,5);


Map对象

Map对象是用来存储键值对的。如 :

var map = new Map();
map.set('a' , 'apple'); //添加内容
map.set('b' , 'banana');


console.log(map); //"a" => "apple", "b" => "banana"
map.delete('a');  //删除key为a的内容
console.log(map); //"b" => "banana"


console.log(map.has('b')); //输出true。(查看map是否有key为b的键值对)


map.clear(); //删除map里所有的键值对


console.log(map);


遍历map
遍历map只能用 for of 循环, 如 :

var map = new Map();
map.set('a' , 'apple');
map.set('b' , 'banana');
for(var name of map)
{
console.log(name); //a,apple b,banana
}
也可以只输出key或者value
for(var [key, value] of map)
{
console.log('key:' + key + ',' + 'value:' + value); //key:a,value:apple key:b,value:banana
}


class、extends、static

ES6中引入了类的概念,使用class来定义一个类。如 :
class Person
{
constructor(name, sex) // 构造函数
{
this.name = name;
this.sex = sex;
}


showName() //方法
{
console.log(this.name + ',' + this.sex);
}
}
var p = new Person('tom', 'boy');
p.showName();


//继承
class Boy extends Person
{
constructor(name, sex, age)
{
super(name, sex); //调用父类的构造方法
this.age = age;
}


showAge()
{
console.log(this.age);
}
}


var b = new Boy('tom', 'boy', 18);
b.showName(); //类Boy继承了Person的showName函数
b.showAge();


static函数
不管new多少个A对象,A对象都共用一个static函数。 如 :
class A
{
static show()
{
alert(1);
}
}


var a1 = new A();
var a2 = new A();
//a1.show(); //报错
//A.show();    //输出1


Promise

Promise是一个对象,用来传递异步操作的数据。比如 :
ajax(url, function(){
//代码1
}, fnFail);
代码2


上面的代码,会先走代码2,在走代码1。如果代码2有参数是需要代码1获取ajax返回来的值,则会报错。Promise的作用就是来解决上面的问题的。


Promise有3个状态 :
pending(等待、处理中) --> Resolve(成功、完成)
       --> rejected(失败、拒绝)


用法
var p1 = new Promise(function(resolve, reject){
if(异步处理成功)
{
resolve(成功数据);
}
else
{
reject(失败原因);
}
});
p1.then( 成功(resolve数据), 失败(reject数据) );


then函数返回的也是一个Promise对象,所以这里可以连续调用。如 :
p1.then(function(value){
return value+1;//传递给下一次“成功的”then
}, function(){


}).then(function(value){
alert(value);
}, function(){


});


案例
http://www.lcfbk.top/ES6/Promise/

Promise 的catch用于捕获错误。如 :
var p1 = new Promise(function(resolve, reject){


resolve(22);


});


p1.then(function(value){
console.log(value);
throw -1; //抛出一个错误
}, function(){


}).catch(function(e){
alert(e);
});


Promise.resolve 和 Promise.reject方法


Promise.resolve 生成一个成功的数据
Promise.reject 生成一个失败的数据
Promise.resolve 和 Promise.reject 都可以放一些参数,如:数字、字符串、数组等。而且也可以放入一个Promise对象。如 :
var p = Promise.resolve(3);
var p2 = Promise.resolve(p);
p2.then(function(value){
alert(value); //输出3, 3也就是p的值
}, function(){


})


Promise.all方法

Promise.all方法用于接收Promise对象,若所有对象都成功了,则执行成功的回调函数,否则执行失败的回调函数。如 :
var p1 = Promise.resolve(1); //成功的数据 
var p2 = Promise.reject(-1); //失败的数据
Promise.all([p1,p2]).then(function(value){
console.log('成功了' + value);
}, function(value){
console.log('失败了' + value); //执行失败了
})


Promise.race方法
Promise.race用于执行最先返回的的Promise对象。如 :
var p1 = new Promise(function(resolve, reject){
setTimeout(resolve, 500, 1);
});
var p2 = new Promise(function(resolve, reject){
setTimeout(resolve, 1000, 2);
});
Promise.race([p1,p2]).then(function(value){
console.log(value); //输出1
});


模块化

http://www.lcfbk.top/ES6/mkh/
原创粉丝点击