SpringCloud 学习笔记前端（二） ES6语法相关介绍

1.es6 声明变量

let和var声明变量的区别：var可以理解为全局的，let可以理解为局部使用的

新建demo.js

function test(flag){
 
    //  正常访问
    var a = 'abc';
    let letL = 'efg';
    console.log(a);
    console.log(letL);

    // 在函数内部
    if (flag) {
       var innerVar = 'abc';
       let innerLet = 'efg';
    }
    console.log(innerVar);
    console.log(innerLet);

}
test(true);

在控制台运行node demo

2.es6 声明常量 const

注意常量不可以再次赋值~

const change = 'abc';
change = 'effg';
console.log(change);

3.es6 模板字符串

3.1 占位符的使用

// ES5 
var str = 'xys';
console.log("中国人中每十个就有一个就知道" + str);


// ES6
let name = 'xyz';
console.log(`中国的综合国力的提升，${name}功不可没`);

ES6中可以使用占位符 ${name}，输出的结果就直接进行了拼接

3.2换行中单撇的使用

let stand = `中国有五十六个民族，js，css ，java需要获取五十六
          民族的不同的特点`;

4.es6 函数默认参数

函数有默认值200，如果不传值，就按默认值，如果传值就显示所传的值

function test(num=200){
   console.log(num);
}
test();
test(120);

执行结果：

PS G:\IDEAWorkSpace\nodeDemo\VsCodeDemo> node .\defaultParams.js
200
120

5.es6 箭头函数


/*function add(a,b){
    return a+b;
}*/

//  如果返回只有一行，就可以省略return
add=(a,b)=>a+b;

console.log(add(100,299));

6.es6 对象初始化

function people(name,age) {
    return {
        name,age
    };
}

console.log(JSON.stringify(people('joe',12)));

7.es6 解构

将对象中的属性提取为一些变量

const student = {
    nickname:'lsf',
    num:18
}

const {nickname,num} = student;
console.log(nickname);
console.log(num);

8.es6 SpreadOperator（扩展运算符...）

// spreadOperator
// 数组
const color = ['red','yellow'];
const colorful = [...color,'blue'];
console.log(colorful);

// 对象
const alp = {first: 'a',second: 'b'};
const alphabets = {...alp,third: 'c'};
console.log(alphabets);

9.es6 模块导入导出

新建lib.js

let fn0 = function(){
    console.log('fn0...');
}
export{fn0};

新建demo8.js

import {fn0} from './lib';
fn0();

但是运行确保如下错误

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3

原因：未安装babel转换器，或者直接用exports、require

10.Babel转换器安装与配置

在文件根目录新建.babelrc文件

{

"presets":["es2015"]

}

执行

cnpm install babel-preset-es2015 --save-dev

cnpm install babel-cli -g

执行babel-node demo8

11.es6 promise

https://www.cnblogs.com/whybxy/p/7645578.html

***** 如果想更加确切的请参照阮一峰 ECMAScript 6 入门 http://es6.ruanyifeng.com/#docs/intro

SpringCloud 学习笔记 前端（二） ES6语法相关介绍