es6

最新推荐文章于 2021-09-24 16:11:23 发布

u010467276

最新推荐文章于 2021-09-24 16:11:23 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/u010467276/article/details/84867838

版权

支持情况

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