ECMAScript6 JS 新特性学习笔记

TAGS: Javascript技术编程

ES6（ECMAScript2015）在原来js基础上扩展了不少新特性，它简洁的代码风格和强大的特性为我们Javascript开发者提供了顺畅快速的编程体验。

以下是我针对这些新特性的一些学习记录：

箭头=>函数 Arrow Functions
const 和 let 关键字
默认参数 Default Parameters
多行字符串 Multi-line Strings
解构赋值 Destructuring Assignment
模板对象 Template Literals
模块化 Modules
异步操作定义 Promise

箭头=>函数 Arrow Functions

//老版本定义函数方式1
function addOne1(x) {
    return x + 1;
}

//老版本定义函数方式2
var addOne2 = function(x) {
    return x + 1;
}

//ES6 新增定义方式
//未传参数的函数定义
const myFunc = () => {
    console.log('this is my function');
}

//1个传参x，也可以在x的两边加上小括号(x), let 也可以根据情况替换为 var, const 或者不写
let addOne = x => {
    return x + 1;
}

//多参数定义方式，在参数外面加入小括号(),参数之间用 , 分隔
add = (a, b) => {
    return a + b;
}

//输出测试
console.log(addOne1(1));
console.log(addOne2(1));

myFunc();   
console.log(addOne(1));
console.log(add(1, 2));

const 和 let 关键字

let是一种新的变量申明方式，使用它申明的变量只在{}范围内有效。也就是说它允许把变量作用域控制在块级里面。

const testLetFunc = () => {
    let a = 1; 
    {
        let b = 2; //b只在{}范围内有效
        let c = a; //可以访问 a
        console.log(b); //输出：2
        console.log(c); //输出：1
    }
    console.log(a); //输出：1

    //此处已经无法访问b和c，因为b和c的作用域只在括号{}里面有效
    //console.log(b); //如果去掉注释程序报错，b is not defined 
}
testLetFunc();

const 在我们其它语言中用来定义常量，这里也一样；使用const定义的常量必须在定义的时候赋值，并且之后不允许修改。常量在同一个块级作用域中不能重复定义。

const a = 1; 
{
    const a = 2; //正确 此处a只在{}内部定义和使用
    console.log(a); //此处a已经被重定义为 2, 但它只在大括号{}内部有效
}
console.log(a); //此处a输出1， 不受内部 a=2的定义影响
//a = 3; //错误！ 不能为常量重新赋值 Assignment to constant variable.
//const a = 3; //错误！ a常量不能被定义其它值 Identifier 'a' has already been declared
//const b;    //错误！const常量定义时候必须初始化 Missing initializer in const declaration

默认参数值 Default Parameters

定义默认参数写法跟C#定义默认参数类似，直接在函数传参时使用=号带上默认值

//ES6 写法
const testDefaultParam = (a = 1, b = "hello", c) => {
        console.log(`a=${a},b=${b},c=${c}`);
    }
//传统定义方式
function testDefaultParam2(a = 2, b = "hello", c = 4) {
    console.log(`a=${a},b=${b},c=${c}`);
}

testDefaultParam(); //a=1,b=hello,c=undefined
testDefaultParam(444, "www.arky.ca", "welcome"); //a=444,b=arky.ca,c=welcome
testDefaultParam(3); //a=3,b=hello,c=undefined  a为传入参数 b则显示默认参数 c未定义
testDefaultParam2(22);  //a=22,b=hello,c=4 a传入参数为22，其它两个则显示默认参数值

多行字符串 Multi-line Strings

在ES6里面，新增了反引号来作为多行字符串的定义

//传统多行字符串定义, 需要使用+号来连接，而且并未包含换行符号
var multiLineText1 = '第一行文字' +
'第二行文字' +
'最后一行文字';

//ES6中 采用反引号定义多行字符串, 这里是包含有换行符号的和字符前后的空格
var multiLineText2 =
`第一行文字
第二行文字
最后一行文字
`;

console.log(multiLineText1); //控制台中只输出一行
console.log(multiLineText2); //控制台中输出多行

解构赋值 Destructuring Assignment

在ES6中，可以采用解构赋值的方式快速将一个数组或者是对象的几个属性值赋值到一个变量组当中

//1. 数组解构赋值方式
const arr = [11, 22, 33, 44];
const [a1, a2, a3, a4] = arr; //将arr数组解构值并赋值给 a1-a4
console.log(`a1=${a1},a2=${a2},a3=${a3},a4=${a4}`);

//2. 对象解构赋值
const carInfo = {
    color: "red",
    price: 35000,
    brand: "Dodge"
};
const {
    color,
    price,
    brand
} = carInfo; //解构对象 赋值, 所定义的新变量需要跟对象属性名称一致

console.log(`${carInfo.brand} color:${carInfo.color} price:$${carInfo.price}`); //对象取值方式显示
console.log(`${brand} color:${color} price:$${price}`); //采用解构赋值方式后，显示新的变量

模板对象 Template Literals

在反括号定义字符串时，可以采用模板对象 ${}来进行变量值的获取

let carInfoText = `${carInfo.brand} color:${carInfo.color} price:$${carInfo.price}`;
let carInfoText2 = `${brand} color:${color} price:$${price}`;

模块化 Modules

在ES6中，我们可以将js进行模块化管理，导出模块可以是变量、函数、对象；采用关键字导入import 和导出export

文件students.js

//文件名称：students.js  学生对象列表 
const studentJSON = `[
    {
      "name": "Arky",
      "age": 30,
      "classroom": "101"
    },
    {
        "name": "Vincent",
        "age": 28,
        "classroom": "102"
    },
    {
        "name": "Jack",
        "age": 31,
        "classroom": "101"
    }
  ]`;
export const students = JSON.parse(studentJSON);

文件 index.js

//index.js 主体调用js函数
import { students } from './students';

let msg = '';
students.forEach(element => {
    let { name, age, classroom } = element;
    msg += `<h2>name:${name}, age:${age}, classroom:${classroom} </h2><br />`;
});

document.getElementById('message').innerHTML = msg;

文件 index.html

<!DOCTYPE html>
<html>

<head>
    <title>Students</title>
</head>

<body>
    <pre style="font-size: 3em" id="message">Loading...</pre>
    <!-- 注意 type="module" 否则浏览器会报错 -->
    <script type="module" src="index.js"></script>
</body>

</html>

在浏览器中运行 index.html后，会输出所有学生的信息

异步操作定义 Promise

Promise是一个异步操作执行结果返回值的规范定义方式，Promise对象表示异步操作的最终完成（或失败）及其结果值，然后执行下一步操作。

//定义Promise 成功调用后执行的方式
const waitNumSecondsThenHello = numSeconds => new Promise((resolve, reject) => {
    setTimeout(() => {
        const showMsg = `${numSeconds} seconds have passed then 'hello world!'`
        resolve(showMsg)
    }, 1000 * numSeconds);
});

//设置3秒等待执行完毕后，调用显示 message
waitNumSecondsThenHello(3).then(msg => {
    console.log(msg);
    alert(msg);
});