内容输出来源:拉钩教育Java就业训练营
1 ES6基本用法
1.1 let声明变量
//1.作用域不同
{
var a = 0; // var声明的变量是全局变量
let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //b is not defined:b没有定义
//2.声明的次数不同
// 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);
//3.声明与使用顺序不同
// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错,输出:undefined
var x = "苹果";
console.log(y); //y is not defined(y没有定义)
let y = "香蕉";
1.2 const声明常量
const 声明常量,为只读变量
- 一旦声明之后,其值是不允许改变的
- 一但声明必须初始化,否则会报错 SyntaxError: Missing initializer in const declaration(语法错误,声明常量丢失了初始化)
1.3 解构赋值
- 解构赋值是对赋值运算符的扩展
- 它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
- 解构,顾名思义,就是将集合型数据进行分解,拆分,把里面的值逐一遍历获取
- 在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
//1.数组解构
var arr = [1,2,3];
// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);
//2.对象解构
var user = {
username : "吕布",
weapon:"方天画戟",
horse:"赤兔马"
};
// 传统的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji);
//es6的解构
let {username,weapon,horse} = user; // 注意:解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);
1.4 模板字符串
- 模板字符串相当于加强版的字符串
- 用反引号 `,除了作为普通字符串,还可以用来定义多行字符串
- 还可以在字符串中加入变量和表达式。
1.4.1 定义多行字符串
let str = `hello,
你俩在哪呢?
心情不好,出来喝点啊!`;
console.log(str);
1.4.2 字符串插入变量和表达式
let name = `吕布`;
let age = 24;
// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁!";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁!`;
console.log(info2);
1.4.3 字符串调用函数
function test(){
return "吃喝玩乐";
}
let str = `悲催的人生,从${test()}开始`;
console.log( str );
1.5 声明对象的简写
let name = `吕布`;
let age = 28;
//传统
let user1 = {
name : name,
age : age
};
console.log(user1);
//es6新语法中的简写
let user2 = {name,age};
console.log(user2);
1.6 定义方法简写
// 传统
let user1 = {
say : function(){
console.log("大家好!");
}
};
user1.say();
//es6
let user2 = {
say(){
console.log("大家好啊!");
}
};
user2.say();
1.7 对象拓展运算符
拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来,然后拷贝给新对象
//1.拷贝对象
let user1 = {
name:"项羽",
age:34
};
let user2 = {...user1}; // 深拷贝(克隆)
console.log(user1);
console.log(user2);
//2.合并对象
let user1 = {
name:"项羽",
age:34
};
let user2 = {head:"诸葛亮"};
let user = {...user1,...user2};
console.log( user );
1.8 函数的默认参数
function test(name , age = 18){
console.log(`我叫${name},我今年${age}岁`);
}
test("吕布",33); //我叫吕布,我今年33岁
test("貂蝉"); //我叫貂蝉,我今年18岁
test("关羽",null); //我叫关羽,我今年null岁
test("马超",""); //我叫马超,我今年岁
test("张飞",undefined); //我叫张飞,我今年18岁
1.9 函数的不定参数
function test( ...arg ){
console.log(`传入了${arg.length}个参数`);
for(var i = 0 ;i<arg.length;i++){
console.log(arg[i]);
}
}
test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);
1.10 箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数 => 函数体
// 传统
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) => {
let sum = a+b;
return sum;
}
console.log( f3(3,7) );
// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );
1.12 模块化
1.12.1 传统的模块化
创建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);
1.12.2 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);
node.js并不支持es6的import语法,我们需要将es6转换降级为es5!
1.13 babel环境
babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有的环境中执行。
1.14 ES6模块化的另一种写法
1.14.1 as的用法
user.js
let name = "老孙";
let age = 66;
let fn = function(){
return `我是${name}!我今年${age}岁了!`;
}
// 声明模块并导出
export{
name as a,
age as b,
fn as c
}
test.js
import {a,b,c} from "./user.js";
console.log(a);
console.log(b);
console.log( c() );
//或者
import * as info from "./user.js"; // 通过*来批量接收,as来指定接收的名字
console.log(info.a);
console.log(into.b);
console.log( into.c() );
1.14.2 默认导出
可以将所有需要导出的变量放入一个对象中,然后通过default export进行导出
/*****************导出****************************/
export default{
name:"老孙",
eat(){
return "吃点啥!";
}
}
/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );
1.14.3 重命名export和import
如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,
/*******************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