基础变化
- String类型新增了三个方法，不必使用indexOf来判断一个字符串是否在另一个字符串内
//String changes
var a = "Hello world";
var b = "Hello";
var c = "world";
function includes(source, dest) {
return source.indexOf(dest) > -1;
}
function startsWith(source, dest) {
return source.slice(0, dest.length) === dest;
}
function endsWith(source, dest) {
return source.slice(source.length - dest.length, source.length) === dest;
} var msg = "Hello world!"; console.log("msg startsWith Hello: ", msg.startsWith("Hello")); // true
console.log("msg endsWith !: ", msg.endsWith("!")); // true
console.log("msg includes o: ", msg.includes("o")); // true console.log("msg startsWith o: ", msg.startsWith("o")); // false
console.log("msg endsWith world!: ", msg.endsWith("world!")); // true
console.log("msg includes x: ", msg.includes("x")); // false - Object.is方法用来判断两个参数是否相等，与全等（===）类似只是在+0和-0上以及NaN与NaN的判断上与全等不同
console.log(+0 == -0); // true
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true console.log(5 == 5); // true
console.log(5 == "5"); // true
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, "5")); // false - let声明，let与var的作用相同，只是以let声明的变量的作用域在当前的{}块内
function getValue(condition) { if (condition) {
let value = "blue"; // other code return value;
} else { // value doesn't exist here return null;
} // value doesn't exist here
} - const关键字用来声明常量，常量一旦赋值就无法改变，其他的赋值表达式都会被忽略
- 解构赋值，引入解构赋值可以方便的从复杂的对象中取得所需的属性值
var options = {
repeat: true,
save: false,
rules: {
custom: 10,
}
}; // later var { repeat, save, rules: { custom }} = options; console.log(repeat); // true
console.log(save); // false
console.log(custom); //
类
- 类声明语法，目前许多前端框架比如dojo、extJs使用辅助设计使得Javascript看起来支持“类”，基于以上目的ES6引入类体系；目前在Chrome使用class关键字必须使用严格模式
//class declaration
function PersonType(name) {
this.name = name;
} PersonType.prototype.sayName = function() {
console.log(this.name);
}; let person = new PersonType("Nicholas");
person.sayName(); // outputs "Nicholas" console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // true (function(){
'use strict';
class PersonClass {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
} let person = new PersonClass("Nicholas");
person.sayName(); // outputs "Nicholas" console.log(person instanceof PersonClass);
console.log(person instanceof Object);
})() - 属性访问器，通过使用get和set关键字来声明属性（Attribute），在ES5中需要借助Object.defineProperty来声明属性访问器
//Accessor Properties
(function(){
'use strict';
class PersonClass {
constructor(name) {
this.name = name;
}
get Name(){
return this.name;
}
set Name(value){
this.name = value;
}
} let person = new PersonClass("Nicholas");
console.log('person.Name: ', person.Name) // outputs "Nicholas"
})() - 静态成员，ES5或者之前的代码通过在构造函数中直接定义属性来模拟静态成员；ES6则只需要在方法名前面加上static关键字
//ES5
function PersonType(name) {
this.name = name;
} // static method
PersonType.create = function(name) {
return new PersonType(name);
}; // instance method
PersonType.prototype.sayName = function() {
console.log(this.name);
}; var person = PersonType.create("Nicholas"); //ES6
//Static Members
(function(){
'use strict';
class PersonClass {
constructor(name) {
this.name = name;
} sayName() {
console.log(this.name);
} static create(name) {
return new PersonClass(name);
}
} let person = PersonClass.create("Nicholas");
console.log(person);
})() - 继承，ES5中需要借助prototype属性而ES6中引入extends关键字来实现继承
//Handling Inheritance
(function(){
'use strict';
class PersonClass {
constructor(name) {
this.name = name;
}
} class Developer extends PersonClass {
constructor(name, lang) {
super(name);
this.language = lang;
}
} var developer = new Developer('coder', 'Javascript');
console.log("developer.name: ", developer.name);
console.log("developer.language: ", developer.language);
})()
模块机制
当前关于JS的模块化已有两个重要的规范CommonJs和AMD，但毕竟不是原生的模块化，所以ES6中引入模块化机制，使用export和import来声明暴露的变量和引入需要使用的变量
Iterator和Generator
Iterator拥有一个next方法，该方法返回一个对象，该对象拥有value属性代表此次next函数的值、done属性表示是否拥有继续拥有可返回的值；done为true时代表没有多余的值可以返回此时value为undefined；Generator函数使用特殊的声明方式，generator函数返回一个iterator对象，在generator函数内部的yield关键字声明了next方法的值
//Iterator & Generator
// generator
function *createIterator() {
yield 1;
yield 2;
yield 3;
} // generators are called like regular functions but return an iterator
var iterator = createIterator();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
Promise
ES6引入原生的Promise对象，Promise构造函数接受一个方法作为参数，该方法中可以调用resolve和reject方法，分别进入fulfill状态和fail状态
// Promise
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.send(); function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
debugger;
resolve(this.responseText);
} else {
reject(new Error(this.statusText));
}
};
}); return promise;
}; getJSON("https://gis.lmi.is/arcgis/rest/services/GP_service/geocode_thjonusta_single/GeocodeServer?f=json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('Error： ', error);
});
Proxy
顾名思义用来作为一个对象或函数的代理。Proxy构造函数接受两个参数：target用来被封装的对象或函数、handler拥有一系列方法，重写这些方法以便当调用这些操作时会进入重写的方法中
•handler.getPrototypeOf
•handler.setPrototypeOf
•handler.isExtensible
•handler.preventExtensions
•handler.getOwnPropertyDescriptor
•handler.defineProperty
•handler.has
•handler.get
•handler.set
•handler.deleteProperty
•handler.enumerate
•handler.ownKeys
•handler.apply
•handler.construct
handler.getPrototypeOf
handler.setPrototypeOf
handler.isExtensible
handler.preventExtensions
handler.getOwnPropertyDescriptor
handler.defineProperty
handler.has
handler.get
handler.set
handler.deleteProperty
handler.enumerate
handler.ownKeys
handler.apply
handler.construct
参考资料：