前端的初学习 -- 第十四章 -- ES6基本语法
- let声明变量
- let与JavaScript中var声明变量有什么区别？
- const声明常量
- 解构赋值
- 数组结构
- 对象结构
- 模板字符串
- 定义多行字符串
- 字符串插入变量和表达式
- 字符串中调用函数
- 声明对象简写
- 声明方法简写
- 拷贝对象(深拷贝)
- 合并对象(吞噬合并)
- 函数的默认参数
- 函数的不定参数
- 箭头函数
- 模块化
- 传统的模块化
- ES6模块化
- babel环境
- 安装babel客户端环境
- 如果查看babel客户端环境版本报错：
- 安装转码器
- ES6模块化的扩展写法
- as的用法
- 上面这个的扩展：接收整个user.js 模块(推荐使用)
- 重命名export和import
ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对 象、内建函数等通用语法。
本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。
let声明变量
let与JavaScript中var声明变量有什么区别？
- 作用域不同
{
var a = 0; // var声明的变量是全局变量
let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //b is not defined：b没有定义- 声明次数不同
// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已 经声明过了）
console.log(m); console.log(n);- 声明与使用顺序不同
// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错，输出：undefined
var x = "苹果";
console.log(y); //y is not defined（y没有定义）
let y = "香蕉";const声明常量
const 声明常量,为只读变量
- 一旦声明之后，其值是不允许改变的
- 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错 误，声明常量丢失了初始化）
const PI = 3.14;
PI = 3.1415; //Assignment to constant variable.（声明的是常量） console.log( PI );解构赋值
- 解构赋值是对赋值运算符的扩展
- 它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
- 解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
- 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取
数组结构
var arr = [1, 2, 3];
//传统js解法
var a = arr[0];
var b = arr[1];
var c = arr[2];
console.log(a, b, c);
//es6解法
var [a1, b2, c3] = arr;
console.log(a1, b2, c3);对象结构
var user = {
username: "吕布",
weapon: "方天画戟",
horse: "赤兔马"
}
//传统js解法
var username = user.username;
var weapon = user.weapon;
var horse = user.horse;
console.log(username + " " + weapon + " " + horse)
//es6解法
var {username,weapon,horse} = user;
console.log(username + " " + weapon + " " + horse)模板字符串
- 模板字符串相当于加强版的字符串
- 用反引号 `,除了作为普通字符串，还可以用来定义多行字符串 还可以在字符串中加入变量和表达式。
定义多行字符串
let str =
`
第一行
第二行
第三行
`;
console.log(str);字符串插入变量和表达式
var name =`吕布`;
var age =`30`;
var str =
`
姓名：${name}，年龄：${age}
`;
console.log(str);字符串中调用函数
function test(){
return "test1";
}
var str =`获取到test方法的返回值是：${test()}`;
console.log(str);
console.log("---------------------------------------------------");
str =`获取到test方法：
${test}`;
console.log(str);声明对象简写
var name =`吕布`;
var age = `28`;
//传统js
var user1 ={
name : name,
age : age
}
console.log(user1);
//es6
var user2 = {name,age};
console.log(user2);声明方法简写
//传统js
var user1 = {
str : function(){
console.log("在user1里面");
}
}
user1.str();
//es6
var user2 = {
//简化了这里，不需要再写function
str(){
console.log("在user2里面");
}
}
user2.str();拷贝对象(深拷贝)
科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人
var user1 = {
user : "关羽",
age : 30
};
var user2 = {...user1};
console.log(user1);
console.log(user2);合并对象(吞噬合并)
var user1 = {
user : "关羽",
age : 30
};
var user2 = {
head : "诸葛亮"
}
var user = {...user1,...user2};
console.log(user);函数的默认参数
//age的默认值为18
function test(name,age = 18){
console.log(`姓名：${name}，年龄：${age}`);
}
//正常情况，两个参数都有
test("吕布",33); //我叫吕布，我今年33岁
//只传一个参数，第二个参数使用默认值
test("貂蝉"); //我叫貂蝉，我今年18岁
//两个参数，为null则显示null
test("关羽",null); //我叫关羽，我今年null岁
//两个参数，为 "" 则显示 ""
test("马超",""); //我叫马超，我今年岁
//两个参数，为 undefined 则显示默认值
test("张飞",undefined); //我叫张飞，我今年18岁函数的不定参数
定义方法时，不确定有几个参数？
function test(...arg) {
console.log(`传入了${arg.length}个参数`)
for (var i = 0; i < arg.length; i++) {
console.log(arg[i]);
}
}
test(1);
test(1, 2, 3, 4, 5, 6, 7);
test(1, 2, 3, 4, 5);
test("马", "超");箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体
//传统js
var f1 = function (a){
return a*10;
}
console.log(f1(10));
//es6
// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回
//只有一个参数
var f2 = a=>a*10;
console.log(f2(20));
//有两个参数
var f3 = (a, b) => {
console.log(`第一个参数是${a}`);
console.log(`第一个参数是${b}`);
return a + b;
}
console.log(f3(3,3));模块化
- 如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？
- java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程
- 将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块
- 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
传统的模块化
创建user.js文件
function addUser(name) {
return `保存${name}成功！`;
}
function removeUser(id) {
return `删除${id}号用户！`;
}
// 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
module.exports = {
addUser,
removeUser
}test.js
let user = require("./user.js"); //引入user模块
console.log(user);
let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);ES6模块化
user.js
let name = "老孙";
let age = 66;
let fn = function () {
return `我是${name}!我今年${age}岁了！`;
}
// 声明模块并导出
export {
name, age, fn
}test.js
import {name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）
原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！
降级需要使用babel环境
babel环境
babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持
安装babel客户端环境
在终端中打开，运行命令：npm install --global babel-cli
查看babel客户端环境版本：babel --version
如果查看babel客户端环境版本报错：
安装转码器
- 创建目录，在其中初始化项目：npm init -y
- 创建babel配置文件： .babelrc ，并输入代码配置：
{
"presets": ["es2015"],
"plugins": []
}- 安装转码器：npm install --save-dev babel-preset-es2015
- 转码：
创建dist目录，用来存放转码后的文件
babel user.js --out-file .\dist\user.js
或
babel user.js -o .\dist\user.js- 运行转码后的文件：node .\dist\test.js
ES6模块化的扩展写法
as的用法
如果你不想暴露模块当中的变量名字，可以通过as来进行操作:
注意：运行前请使用babel进行转码
user.js
let name = "老孙";
let age = 66;
let fn = function () {
return `我是${name}!我今年${age}岁了！`;
}
// 声明模块并导出
export {
name as a,//使用as为其起别名
age as b,//使用as为其起别名
fn as c//使用as为其起别名
}test.js
import {a,b,c} from "./user.js"
console.log(a);
console.log(b);
console.log(c);上面这个的扩展：接收整个user.js 模块(推荐使用)
user.js并没有改变
let name = "老孙";
let age = 66;
let fn = function () {
return `我是${name}!我今年${age}岁了！`;
}
// 声明模块并导出
export {
name as a,//使用as为其起别名
age as b,//使用as为其起别名
fn as c//使用as为其起别名
}test.js：改变的是test.js
import * as test from "./user.js"
console.log(test.a);
console.log(test.b);
console.log(test.c);重命名export和import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，
为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：
/*******************student1.js**************************/
export let name = "我是来自student1.js";
/*******************student2.js************************/
export let name = "我是来自student2.js";
/*******************test_student.js************************/
import {name as name1} from './student1.js';
import {name as name2} from './student2.js';
console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
