ES6介绍

2021-10-04 本文已影响0人微语博客

ES6 全称 ECMAScript6.0，是JavaScript语言在2015发布的一个标准版本。ES6与前面的版本变化较大，且引入了较多新的语法，比如有了块级作用域、新增变量声明语法、箭头函数、类的概念，模块等。本篇文章先简单的介绍几个ES6的新特性，具体有哪些特性，后面也会逐一讲解。

ES6有了块级作用域的概念，所以对变量的声明也有改变。ES6新增了let和const关键字用于声明局部变量。

{ 
    let str = "Hello World!";
    console.log(str);//可以访问
}
console.log(str);//不能访问

let因为有了块级作用域，所以不能重复定义相同变量

let no = 12;
let no = 15;//报错

const和let用法都极为相似，区别只是const声明一个只读的常量，必须初始化值，且不能修改。

const no = 12;
no = 15;//报错
const no = 15;//也报错
const no;//还是报错

箭头函数为ES6新增语法，因为语法简洁且易读，所以深受开发人员使用。

语法示例：

(参数) => {函数体}

举个栗子：

var fun = (x,y) => {x+y;}

当箭头函数写成普通函数时，相当于一个带返回值的函数

function fun(x){
    return x*x;
}

ES6的解构赋值是按照一定模式从数组或对象中提取值，然后对变量进行赋值（先提取，再赋值）。

数组：

let [a, b] = [1, 2];//a = 1, b = 2
let [a, b] = 'abcd';//a = a, b = b
let [c, d ,...e] = [1, 2, 3, 4];//c = 1, d = 2, e = [3,4]

对象：变量名和对象属性名一样才可以

let { foo } = { foo: 1, bar: 2 } // foo = 1
let { foo: newFoo } = { foo: 1, bar: 2 } // newFoo = 1

交换数据：

[x, y] = [y, x];

模板字符串${}中可以使用任意的javaScript表达试、运算、引用对象属性、函数调用等。结果是其返回值。

const h = 'Hello';
let str = `${h}`World;//str = HelloWorld

可以换行，但是所有的空格和换行会被保留。

for...of语句在可迭代对象（比如以前学的数组和字符串）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

数组：

let arr = [10,"Hello",20,"World"];
for(let item of arr){
    console.log(item);
}

字符串：

let name = "Cherry";
for(let item of name){
    console.log(item);
}

对象：因为普通对象不可迭代，所以for of不适用遍历对象，但是因为对象类似数组，所以可使用Array.from()转换。

let obj = {name:"Cherry",age:18,city:"Guangzhou"};
for(let item of Array.from(obj)){
    console.log(item);
}

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol ,表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

let sy = Symbol("my");
let sy2 = Symbol("my");
console.log(sy == sy2);//false
console.log(sy === sy2);//false

在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。

剩余语法：表示一个不定数量的参数数组

function myFun(a,b, ...args){
    //...args后不能有其它参数，数组长度不包括...的参数
}

展开语法：示例表示展开一个数组

let arr = [1,2,3];
let arr1 = [4,5];
arr1.push(...arr);//push参数不能是数组
console.log(arr1);//[4, 5, 1, 2, 3]