支持情况
- nodejs几乎完全支持es6的语法
- chrome下可以使用小部分的es6, 需要使用严格模式, 'use strict';
- firefox下使用需要知道测试版本，需要在script标签加上type属性
<script type="application/javascript;version=1.7"></script>
- let 声明变量
与var的区别：
- var可以重复声明，let不能重复声明
var a;
var a;
let b;
let b;//报错
- var声明的变量会声明提前，let不会
console.log(a);//undefined
var a=3;
console.log(a);//报错
let a=3;
- var声明的变量时函数作用域，let是块级作用域
{
let a=1;
console.log(1);//1
}
console.log(a);//报错
一个例子：
for(let i=0;i<10;i++){
setTimeout(function(){
console.log(i);
})
}
const
常量， 值不能修改
"use strict";
const a=1;
a=2;//报错
如果常量保存的是一个对象， 那对象是可以被修改的
"use strict";
const a={
b: 1,
};
a.b=2;
解构赋值（destructuring）
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值
数组的解构赋值
按照对应的顺序解构
var arr=[1,2,3];
var [a,b,c]= arr;
console.log(a,b,c);
var arr=[1,[2,3]];
var [a,[b,c]]= arr;
console.log(a,b,c);
对象的解构赋值
跟顺序无关， 是根据键名和变量名对应来的
var obj = {
foo: function(){
},
o: {},
arr: [],
str: 'abc'
}
var { foo, arr, str } = obj;
console.log(foo, arr, str);
作用
- 返回对象或数组方便取值
function fn(){
return { x: 1, y: 1};
}
var {x, y} = fn();
- 值的交换
var x=1;
var y=2;
var [x,y] = [y, x];
字符串的扩展
str.codePointAt()
js内部，字符以UTF-16的格式存储，每个字符固定为2个字节。
对于那些需要以4个字节存储的字符(unicode编码大于0xFFFF的字符)，
js会认为它们是两个字符。
var a='字';
console.log(a.length);//1
a='𠮷';
console.log(a.length);//2
所以， 我们使用str.charCodeAt，没有办法正确的得到它的编码值
var a='𠮷';
a.charCodeAt(0);//55362 前两个字节
a.charCodeAt(1);//57271 后两个字节
可以用str.codePointAt
a.codePointAt(0);//134071
String.fromCodePoint(134071);//𠮷
a.at(0);//𠮷
codePointAt fromCodePoint at三个方法是可以操作4个字节的字符
模板字符串
用反引号(`)标识, 它可以当作普通字符串使用，也可以用来定义多行字符串，或在字符串中嵌入变量。
var name = 'xx';
var age = '19';
var str = `你的名字: ${name}, 你的年龄${age}`;//注意：这里是反引号，不是引号
字符串的unicode标识法
之前， js允许采用'\uXXXX'的形式表示一个字符，其中'XXXX'表示字符的码点（unicode编码的值）
但是，只限于\u0000---\uFFFF之间的字符。超出范围的字符，必须用两个字节的形式表达。
'\uD843\uDFB7';//𠮷
es6做出了改进: 只要将码点放入大括号中
'\u{20BB7}';//𠮷
'\u{41}\u{42}\u{43}';//ABC
其他方法
str.includes
str.startWith
str.endWith
数值的扩展
二进制和八进制新的写法
var a = 0b11;//3
var b = 0o11;//9
Math的扩展
Math.trunc
去除小数部分，保留整数部分，和parseInt的结果差不多
Math.sign
判断是整数还是负数，主要是判断-0这种情况
正数返回1, 负数返回-1;
0返回0, -0返回-0;
Math.sign(5);//1
Math.sign(-5);//-1
Math.sign(0);//0
Math.sign(-0);//-0
数组的扩展
Array.from
作用：将一个类数组转成数组
var aLi = document.getElementsByTagName('li');
var arrLi = Array.from(aLi);
//等同于
[].slice.call(aLi);
Array.of
把参数变成数组
var arr = Array.of(1,2,3);//[1,2,3]
arr.find
找出第一符合条件的数组元素
参数:
- 回调函数
- 回调函数this的指向
遍历数组，遍历过程中调用回调函数，如果返回值为true，返回当前遍历的数组元素
如果都为false，返回undefined
var arr = [1,2,3,4,5];
var obj = {
n:3
}
var n = arr.find(function(val, i, arr){
if(this.n===val){
return true;
}
}, obj)
arr.findIndex
找出第一个符合条件的数组元素的位置
参数:
- 回调函数
- 回调函数this的指向
遍历数组，遍历过程中调用回调函数，如果返回值为true，返回当前遍历的数组元素的索引
如果都为false，返回-1
arr.fill
填充数组
参数:
- 填充的内容
- 起始位置
- 结束位置
var arr = [1,2,3,4,5];
arr.fill(6);//[6, 6, 6, 6, 6]
arr;//[6, 6, 6, 6, 6]
var arr = [1,2,3,4,5];
arr.fill(6, 3);//[1, 2, 3, 6, 6]
var arr = [1,2,3,4,5];
//不包含结束位置
arr.fill(6, 3, 4);//[1, 2, 3, 6, 5]
使用场景: 小游戏中的矩阵，往其中写数据， 以前都是用的for循环，现在可以使用fill
for of
for( let value of []){}
for of用来遍历拥有遍历接口的对象的属性值
( 数组，字符串有遍历接口，{}没有遍历接口 )
var arr = [1,2,3,4,5];
for(var val of arr){
console.log(val);
}
for(var val of arr.values()){
console.log(val);
}
for(var key of arr.keys()){
console.log(key);
}
for(var [key, val] of arr.entries() ){
console.log(key, val);
}
数组推导
var arr = [1,2,3,4];
var newArr = [ for(val of arr) val*2 ];
对象的扩展
对象的简写
属性的简写
var x=1;
var y=1;
//直接写变量名
var obj = {x,y};//{x:1, y:1};
方法的简写:
var obj = {
fn(){
return 'fn';
}
}
属性名表达式
es6允许字面量定义对象时，用表达式作为对象的属性名，
即把表达式放在括号内，属性名为表达式计算之后的值
var obj = {
['a'+'b']: 1
};
//{ab: 1};
Object.is
判断传入的参数是否相等
0===-0;//true
NaN === NaN; //false
Object.is(0, -0);//false
Object.is(NaN, NaN); //true
Object.assign
功能和$.extend类似
var obj1 = {};
var obj2 = { name: 'xxx' };
var obj3 = { name: 'yyy', age: 34};
Object(obj1, obj2, obj3);
obj1;//{ name: 'yyy', age: 34}
Object.getPrototypeOf(obj)
用来获取一个对象的prototype对象
function Cat(name){
this.name = name;
}
Cat.prototype.getName = function(){
return this.name;
}
var cat = new Cat('xxxx');
console.log( Object.getPrototypeOf(cat) === Cat.prototype );//true
Object.setPrototypeOf(obj, prototype)
用来设置一个对象的prototype对象
function Cat(name){
this.name = name;
}
Cat.prototype.getName = function(){
return this.name;
}
var cat = new Cat('xxxx');
Object.setPrototypeOf(cat, {});
console.log( Object.getPrototypeOf(cat) );//{}
也可以使用__proto__
__proto__
用来读取和设置当前对象的prototype
Proxy
var obj = {
a: 1
}
var p = new Proxy(obj, {
get: function(obj, attr){//获取值的时候调用
console.log('get attr');
return obj[attr];
},
set: function(obj, attr, value){//设置值的时候调用
console.log('set attr');
obj[attr] = value;
return true;
}
})
p.a = 2;
p.a;
get set必须都要写
Object.observe(obj, observe, [eventType])
用于监测对象的变化，一旦发生变化就会调用回调函数
参数:
- 需要监控的对象
- 回调函数（回调函数接受一个数组参数 修改历史 ）
- 指定事件
eventType:
- add: 添加属性
- update: 属性值的变化
- delete：删除属性
- setPrototype: 设置原型
- reconfigure: 属性的attributes对象发生变化
Object.unobserve(obj, fn)
函数扩展
参数默认值
function fn(a, b, c=2){
}
function fn(a, b, ...rest){
//获取函数的多余参数， 是一个数组
console.log(rest);
}
扩展运算符
function fn(a,b,c){
console.log(a, b, c);
}
var arr = [1, 2, 3];
fn(...arr);
将字符串变成一个数组
var str = 'abc';
var arr = [...str];
console.log(arr);
扩展运算符...是将数组,字符串这些有遍历接口的变成a,b,c这样以逗号分开的参数列表
箭头函数
主要作用：用来作为回调函数使用
var arr = [];
arr.sort( (a,b)=>{
a-b
} )
注意:
- 函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象
- 不可以当作构造函数，不可以使用new命令
- 该函数体内不存在arguments
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
