标签：
chrome测试语法需要引入Traceur编辑器https://github.com/google/traceur-compiler
了解未来的语法和趋势, 未来1年内估计也用到不, 这里只做基本的了解.
let 变量声明
{
let a = 10; //只在代码块内有效,适用于for,if等方法体
var b = 20;
}
console.log(a); // ReferenceError a is not defined
console.log(b); // 20
const 声明常量, 一旦声明, 不可修改.
const PI = 3.1415;
变量的解构赋值
//es3
var a = 1;
var b = 2;
var c = 3;
console.log(a); //1
console.log(b); //2
console.log(c); //3
//es6
var [x,y,z] = [4,5,6];
console.log(x); //4
console.log(y); //5
console.log(z); //6
对象的解构赋值
var {foo,bar} = {foo:‘foo‘,bar:"bbb"}; //有没有脑残的感觉?
(1)作用1,交换变量的值
[x,y] = [y,x];
(2)作用2,从函数返回多个值
function f(){ return [4,5,6] }
var [x,y,z] = f();
console.log(x); //4
console.log(y); //5
console.log(z); //6
(3)遍历Map,这是我见过最简洁的语法,后面会讲到Map,for of
var map = new Map();
map.set(‘first‘,‘hello‘);
map.set(‘second‘,‘world‘);
for(let [key,value] of map){
console.log(key+‘,‘+value);
}
字符串的扩展
‘母字符串‘.contains(待查找的字符串); //返回true,false, 和indexOf差不多,就返回值不太一样
‘母字符串‘.startWith(待查找的字符串); //返回true,false,是否以什么开头
‘母字符串‘.endsWith(待查找的字符串); //返回true,false,是否以什么结尾
‘母字符串‘.repeat(重复次数);//返回字符串,是新字符串?还是就旧字符串? 当然是新字符串啦
console.log( ‘x‘.repeat(3) ); //xxx
//下面这2个方法支持4个字节存储的unicode字符
‘母字符串‘.codePointAt(字符索引) ; //返回编码,用来处理大于\uFFFF的unicode字符
‘母字符串‘.fromCodePoint(unicode编码); //返回字符,用来处理大于\uFFFF的unicode字符
/匹配字符串/imgu.test(待匹配的) //支持unicode, 用来处理大于\uFFFF的unicode字符
/匹配字符串/imy.test(待匹配的) //隐式^
/abcd/img.test(‘xabcd‘) === true
/abcd/imy.test(‘xabcd‘) === false;
模板字符串!!!最重要的!!!
需要反引号标示`` 支持多行输出, 支持变量嵌入
`This is ‘abcd‘ ha ha ha`;
`he he
ha ha
hei hei `
var a = ‘aaa‘, b=‘bbb‘
`this is ${a} and ${b}` // this is aaa and bbb
数值的扩展
0b111110111 === 503; //支持2机制, 前缀0b
0o767 === 503; //支持8进制, 前缀0o
Number.isFinite(); //非数值,一律返回false
Number.isNaN();
Number.parseInt();
Number.parseFloat();
Number.isInteger(); //25 === true, 25.0 === true, 25.1 === false
Number.trunc(); 去掉小数部分 // 4.1 >> 4 , 4.9 >>4, -4.1 >> -4, -4.9 >> -4;
Math补充了一堆数学运算方法
数组的扩展
Array.from(); //讲可遍历(set,map),或者类似数组(array-like object)转换成真正的数组
let ps = document.querySelectorAll(‘p‘);
Array.from(ps) == >> 转成数组了
Array.of(); //讲一组值转换数组,
Array.of(3,11,8); //[3,11,8];
数组实例.find(); //找到第一个符合的数组元素
数组实例.findIndex(); //找到第一个符合数字元素的索引
[1,5,10,15].findIndex(function(value,index,arr){
return value > 9;
}); // 2
数组实例.fill(); //使用给定值填充一个数组
new Array(3).fill(7); //[7,7,7]
数组实例.entries() .keys() .values()
for(let index of [‘a‘,‘b‘].keys()){
console.log(index);
}
for(let elem of [‘a‘,‘b‘].values()){
console.log(elem);
}
for(let [index,elem] of [‘a‘,‘b‘].entries()){
console.log(index+‘,‘+elem);
}
数组推导
var a1 = [1,2,3,4];
var a2 = [for (i of a1) i*2]; //[2,4,6,8]
数组监听(add,update,delete,splice)
Array.observe(); Array.unobserve();
对象的扩展
Object.is(); 用来比较2个值是否相等
console.log(+0 === -0);
console.log( Object.is(+0,-0) ); //false
console.log(NaN === NaN);
console.log( Object.is(NaN,NaN) ); //true
Object.assign(target,source1,source2,....); 将源可枚举的属性赋值到目标对象
var target = {a:1,b:1};
var source1 = {b:2,c:2};
var source2 = {c:3};
Object.assign(target,source1,source2);
target; //{a:1,b:2,c:3}
Object.__proto__ 用于读取当前对象的prototype对象, 有了这个属性,实际上不再需要通过Object.create()来生成对象了? 阮一峰<ECMAScript6入门>61页
吐槽点,这个__proto__ 是否稳定? 欢迎探讨
Object.setPrototypeof(); //设置原型对象
function f(obj,proto){
obj.__proto__ = proto;
return obj;
}
var o = f({},obj);
var o = Object.setPrototypeOf({},null); //和上面的效果一样
Object.getPrototypeOf(待取的对象); //取得对象原型
Symbol, 一种新的原始数据类型, 最大的特点,就是Symbol都是不相等的
Proxy
var proxy = new Proxy({name:"aaaa"},{
get:function(target/*代理对象*/,property/*属性*/){
return 35;
}
});
proxy.name; //35
proxy.time; //35
Object.observe().Object.unobserve();监听对象的变化
函数的扩展
function Point(x=0,y=0){ //默认值
this.x=x;
this.y=y;
}
var p = new Point(); //{x:0,y:0}
function add(...values){ //用于获取函数的多余参数
let sum = 0;
for(var val of values){
sum += val;
}
return sum;
}
function push(array,...items){ // ...的用法
array.push(...items);
}
var sum = (a,b) => a+b; //箭头函数
sum(3,4); //7
[1,2,3].map(x=>x*x);
Set和Map数据结构
var s = new Set(); //都是唯一的,没有重复的值
[1,2,2,2,2,2,3].map(function(val,idx,arr){ s.add(val) });
for(var i of s){
console.log(i);
} //1,2,3
add(value) delete(value) has(value) clear() size
var m = new Map(); //对键的限制不限于字符串,对象也可以当键
var a = {b:‘bbb‘,c:‘ccc‘};
m.set(a,‘content‘);
size, set(key,value) get(key) has(key) delete(key) clear() 三种遍历器 keys() values() entries();
var map = new WeakMap(); //只接受对象作为键名
Iterator和for of循环
Iterator遍历器是一种规定, 有next()方法, 该方法返回{value:‘当前遍历位置的值‘,done:布尔值,表示是否遍历结束}
function mkIterator(array){
var nextIndex = 0;
return {
next:function(){
return nextIndex < array.length ?
{value:array[nextIndex++],done:false},
{value:undefined,done:true};
}
}
}
for of循环 一个对象
只要部署了next方法, 就被视为具有iterator接口,就可以for of遍历
Array, 类数组(arguments Dom NodeList对象), Set, Map, 字符串, Generator(内部状态的遍历器)
Generator(内部状态的遍历器)
Generator函数就是普通函数, 有2个特征, 函数名后面有星号,函数体内使用yield(产出)定义遍历器的每个成员,即不同的内部状态
function* hellWorldGenerator(){
yield ‘hello‘; //这个地方可以替换成函数
yield ‘world‘;
return ‘ending‘;
}
var h = hellWorldGenerator();
h.next(); //{value: ‘hello‘, done:false};
h.next(); //{value: ‘world‘, done:false};
h.next(); //{value: ‘ending‘, done:true};
h.next(); //{value: ‘undefined‘, done:true}; //以后再调用和这个一样
Promise对象 !!!!这个是最好玩的!!!! 它可以将异步的操作用同步的写法表达出来,避免了层层嵌套的回调函数 (PromiseJS 第三方模拟库)
http://www.w3ctech.com/topic/656
http://liubin.github.io/promises-book/
Class 和 Module
class Point{
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return ‘(‘+this.x+‘,‘+this.y+‘)‘;
}
}
var point = new Point(2,3);
point.toString() // (2,3)
class ColorPoint extends Point{
constructor(x,y,color){
super(x,y); //super.constructor(x,y)
this.color=color;
}
toString(){
return this.color+super();
}
}
export 和 import
a.js
export var aaa = ‘aaa‘;
exprot var bbb = ‘bbb‘;
b.js
import {aaa,bbb} from ‘./a‘
console.log(aaa+‘,‘+bbb);
es6语法还没有经过最佳技术实践的检验, 用法不统一, 以上代码仅供熟悉.
Object.observe 对象和页面的双向绑定,只有其中之一发生改变,就会反应在另一面上.
Multi-Threading 多线程支持, 让js跑在多线程里面(性能提升是极大的)
Traits更好的对类的支持,
改善内存回收机制/ 国际化支持/ 更多的数据结构/ 类型化更贴近硬件的低级别操作
它有一套风靡世界的UI框架(html+css),并且能够适配几乎所有屏幕,
它能写客户端网页, 也能搞服务器通信(node), 甚至可以写3D(webGL), 甚至可以写路由器插件(有人小米路由挂了node),甚至可以写手机(firefox os)等等等等
它得到所有IT大公司的疯狂追捧, 至今还未停止...
标签：
原文地址：http://www.cnblogs.com/tm-roamer/p/4540467.html
