2019-11-22

JavaScript

6 分钟读完 (大约 825 个字) 0次访问

ES6常用关键字总结

ES6(ECMAScript 6.0)是JavaScript 语言的新一代标准，2015年6月正式发布。其提供了一些新特性使代码更加简洁。由于目前有些版本浏览兼容性不足，所以需要实用babel这类工具讲我们的ES6转换为ES5.

let、const

在ES6之前，是使用var来定义变量，

1	var demo='demo';

ES6之前，只有全局作用域和函数作用域，没有块级作用域,这种情况下会出现变量提升的现象导致变量被覆盖之类的问题，在ES6中，使用let就不存在这种问题，它只会在定义之后且在该块级作用域内可使用

1	let demo='demo';

const声明一个只读的常量，在声明时必须赋初始值，并且赋值后不可改变

1	const API_URL="http://xxx.xxx.xxx";

模板字符串

在ES6之前，需要拼接字符串，一般是通过”+”或者数组join的方式

1
2
3

var a1='a1';
var a2=a1+'aa';
var strs=['a1','a2'].join();

现在我们可以通过模版字符串来拼接

1 2	let a1='a1'; let a2=`aa${a1}`;

变量解构赋值

E6之前只能一个个变量赋值

1
2
3

let a = 1;
let b = 2;
let c = 3;

ES6以后可以使用数组批量按照对应位置赋值

1 2	let [a, b, c] = [1, 2, 3]; //a=1,b=2,c=3; let [a1,b1,c1]=[1,2]; //a1=1,a2=2,a3=undefined

也可以解析对象，解析对象的时候变量名必须和属性名一致，否则会解构失败，

1	let { a, b } = { a: 'aaa', b: 'bbb' }; //a='aaa',b='bbb'

解构赋值对提取 JSON 对象中的数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

箭头函数

ES6 允许使用”箭头”（=>）定义函数。函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

…操作符

…用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

Class类

ES6中提供了class关键字来定义类

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
//等价于
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

这里只记录了几个常用的新特性关键字，系统完整的学习可以去阮一峰大神的博客学习

# ECMAScript, JavaScript

You forgot to set the qrcode for Alipay. Please set it in _config.yml.

You forgot to set the qrcode for Wechat. Please set it in _config.yml.

You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.

You forgot to set the url Patreon. Please set it in _config.yml.

农民工学编程

大龄程序员

China,sichuan

文章

分类

标签

关注我