前端技术栈一ES6
目录
前端技术栈一（ES6）
一、 ES6 基本介绍
1. ES6
是什么
?
ECMAScript 6.0(以下简称
ES6)
是
JavaScript
语言的下一代标准，
2015
年
6
月发布。
2.ES6
设计目标
达到 JavaScript
语言可以用来编写复杂的大型程序，成为企业级开发语
言
3. ECMAScript
和
JavaScript
的关系
ECMAScript 是
JavaScript
的规范
/
规则，
JavaScript
是
ECMAScript
的一种实现
二、 let 声明变量
1.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let使用</title>
<script type="text/javascript">
let name ="hspedu教育";
// console.log("name=",name);可以输出对象的完整信息
//console.log("name="+name);字符串拼接，如果是对象，则输出的是object而不是对象具体信息
console.log("name=",name);
</script>
</head>
<body>
</body>
</html>2. 注意事项和使用细节
let
声明的变量有严格局部作用域
let
只能声明一次
, var
可以声明多次
let
不存在变量提升
, var
存在变量提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let 使用注意事项和细节</title>
<script type="text/javascript">
// let 细节 1
// (1) let 声明的变量, 在代码块中，则作用域在代码块中
// (2) var 声明的变量, 在代码块中，作用域没有限制
{
var name="林然";
console.log("name=",name);
let job ="student";
console.log("job=",job);
}
console.log("name=",name);
//console.log("job=", job);//job is not defined
// let 细节 2
// 1. var 可以声明多次
// 2. let 只能声明一次
var num1 =100;
var num1 =200;
console.log(num1);//输出200
let num2=100;
//let num2=200; Uncaught SyntaxError: redeclaration of let num2
console.log(num2);
// let 细节 3
// 1. let 不存在变量提升
// 2. var 存在变量提升
console.log("x=",x);//undefined,后面定义了，变量提升认为声明了
var x="tom";
console.log("z=", z);
//let z = "mary";//can't access lexical declaration 'z
</script>
</head>
<body>
</body>
</html>三、 const 声明常量 / 只读变量
1 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const 常量/只读变量的使用</title>
<script type="text/javascript">
//const 基本使用 => 想一想 java 基础[语言语法很多是相通]
/**
1. 常量在定义时，需要赋值
2. 常量赋值后不能修改
*/
//常量
const PI = 3.14;
//invalid assignment to const 'PI' //PI = 3.1415926;
console.log("PI=", PI)
</script>
</head>
<body>
</body>
</html>2 注意事项和使用细节
- 常量在定义时，需要赋值
- 常量赋值后不能修改
四、 解构赋值
1 基本介绍
解构赋值是对
赋值运算符的扩展
是一种针对
数组或者对象
进行模式匹配，然后对其中的变量进行赋值
主要有两种形式： 数组解构和对象解构
2 应用实例 - 数组解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组解构赋值</title>
<script type="text/javascript">
let arr=[1,2,3];
//如果要看某个变量的类型
console.log("arr=>",arr);
//数组解构[取出元素]
//1.传统
let x = arr[0], y = arr[1], z = arr[2];
console.log(x, y, z);
//2. ES6 风格
let [a,b,c]=arr;
console.log(a, b, c);
</script>
</head>
<body>
</body>
</html>3 对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象解构</title>
<script type="text/javascript">
//对象解构
/**
* let monster = {name: '牛魔王', age: 800} * 细节说明
* 1. 对象解构时，let{name, age} 中的 name 和 age 名称需要和对象属性名保持一
致
* 2. 也可解构对象部分属性，比如 let{age} 这样就只取出 age 属性
* 3. 还有其它的形式,比如方法上使用对象解构
*/
//monster 是一个对象
let monster = {name: '牛魔王', age: 800};
//传统方式取出属性-解构 对象名.属性名
console.log(monster.name, " ", monster.age);
//ES6 对象解构
//老韩解读
//1. 把 monster 对象的属性, 赋值给{name,age}
//2. {name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致
//3. 使用{} 包括, 不要使用[]
//4. {name,age} 顺序是无所谓
let {name, age} = monster;
function f(name,age) {
console.log("f1-name=",name,"f1-age",age);
}
f(monster);
</script>
</head>
<body>
</body>
</html>五、 模板字符串
模板字符串使用反引号
`
将字符串包裹
可作为普通字符串
可用来定义多行字符串，即可以将换行字符串原生输出
字符串插入变量和表达式
,
使用
${}
字符串中调用函数
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板字符串的使用</title>
<script type="text/javascript">
//1、字符串，换行会原生输出
let str1=`for(int i=0;i<10;i++){
System.out.println("i="+i);
}`
console.log(str1)
//2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name="linran";
//(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换
//(2) 然后可以得到最后解析的字符串
let str2=`学习人=${name}`;
console.log("str2",str2)
let str3=`1+2=${1+2}`;
console.log(str3);
let n1=80;
let n2=10;
let str4=`${n1}+${n2}=${n1+n2}`;
console.log("str4="+str4);
//3. 字符串中调用函数
function sayHi(name) {
return "hi:"+name;
}
let str5=`sayHi()返回的结果是=${sayHi(name)}`;
console.log("str5=",str5);
</script>
</head>
<body>
</body>
</html>六 对象
1 应用实例 - 声明对象简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声明对象的简写方式</title>
<script type="text/javascript">
const age =800;
const name="牛魔王";
// 传统 声明/定义对象
let monster={name:name,age:age};
// ES6 声明/定义对象
//1. {name, age} : 表示对象的属性名是 name 和 age
//2. 属性 name 的值是从变量/常量 name 来的
let monster02={name,age};
console.log("monster02",monster02);
</script>
</head>
<body>
</body>
</html>2 应用实例 - 对象方法简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象方法的简写形式</title>
<script type="text/javascript">
// 传统-对象方法定义
let monster={
name:"红孩儿",
age:100,
sayHi:function () {
console.log("信息：name=",this.name," age=",this.age);
}
}
monster.sayHi();
monster.f10 = function () {
console.log("哈哈");
};
monster.f10();
// ES6-对象方法定义
let monster2={
name:"红孩儿",
age:100,
sayHi(){
console.log("信息：name=",this.name," age=",this.age);
}
}
monster2.sayHi();
</script>
</head>
<body>
</body>
</html>3 应用实例 - 对象拓展运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象运算符的扩展</title>
<script type="text/javascript">
let cat ={name:"小花猫",age:2};
let cat2=cat;
cat2.name="大花猫";
console.log("cat=",cat);//大花猫
console.log("cat2=",cat2)
// 拷贝对象(深拷贝)
let cat3={...cat};
cat3.name="新花猫";
console.log("cat3=",cat3);//新华猫
console.log("cat=",cat);//大花猫
//合并对象
let monster={name:"白骨精",age:100};
let car={beand:"奔驰",price:800000};
let monster_car={...monster,...car};
console.log("monster_car=",monster_car);
</script>
</head>
<body>
</body>
</html>4 注意事项和使用细节
对象拓展运算符是比较新的特性，低版本的浏览器不支持
火狐
/
谷歌浏览器没有问题
七、 箭头函数
1 基本介绍
箭头函数提供更加简洁的函数书写方式。
基本语法是：
(
参数列表
) => {
函数体
}
箭头函数没有参数或有多个参数，要用
()
括起来
,
箭头函数
只有一个参数, 可以省略()
箭头函数函数体有多行语句，用
{}
包裹起来，表示代码块
函数体只有一行语句，并且需要返回结果时，可以省略
{} ,
结果会自动返回
箭头函数
多用于匿名函数
的定义
2 应用实例 1- 箭头函数使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数的使用</title>
<script type="text/javascript">
// 传统定义函数
var f1=function (n) {
return 2*n;
}
console.log("传统= " + f1(2))
// ES6 , 箭头函数使用
let f2=(n)=>{
return n * 2;
}
console.log("f2() 结果= ", f2(100));//200
//上面的 es6 函数写法，还可以简化
let f3 = n => n * 3;
console.log("f3() 结果=", f3(100));//300
//函数也可以传给一个变量
function hi(f4) {
console.log(f4(900));
}
hi(n=>n+100);//传入了一个匿名函数
</script>
</head>
<body>
</body>
</html>3 应用实例 2- 箭头函数使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数使用案例 2</title>
<script type="text/javascript">
// 传统
var f1=function (n,m) {
var res = 0
for (var i = n; i <= m; i++) {
res += i
}
return res
}
console.log("传统= " + f1(1, 10))
// ES6 , 箭头函数使用
let f2=(n,m)=>{
var res = 0
for (var i = n; i <= m; i++) {
res += i
}
return res
}
console.log(f2(1, 10));
</script>
</head>
<body>
</body>
</html>4 应用实例 3- 箭头函数 + 对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数+对象解构</title>
<script type="text/javascript">
const monster={
name:"红孩儿",
age:1000,
skill:["红缨枪","三味真火"]
}
//要求：在方法形参取出 monster 对象的 skill 属性
//传统方式
function f1(monster) {
console.log("skill",monster.skill);
}
f1(monster);
//箭头函数
//1. f2 传入对象 monster
//2. f2 形参是 {skill} , 所以 es6 的对象解构特性, 会把 monster 对象的 skill 属性赋给
// skill
//3. 对象解构的前提就是 {skill}的 skill 和 monster 的 skill 属性是一致
let f2=({skill})=>{
console.log("skill=",skill);
}
f2(monster);
//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致
let f3=({skill,name,age})=>{
console.log("skill=", skill, " age=", age, " name=", name)
}
f3(monster);
</script>
</head>
<body>
</body>
</html>5 注意事项和使用细节
箭头函数
+
对象解构
,
注意参数是
({
属性名
})
({
属性名
})
是由
{}
包括的，属性名需要和对象属性名一致，使用到了对象解构
八、 ES6 课后作业
作业一
1
. 给你一个对象 let cat = {name: ‘jack’, age: 10}; 要求使用模板字符串显示 cat 的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework1</title>
<script type="text/javascript">
let cat={
name:'jack',
age:10
}
let str="name="+`${cat.name}`+"age="+`${cat.age}`;
console.log(str);
</script>
</head>
<body>
</body>
</html>作业二
根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),
可以输出信息
1. 给你一个对象 le
t cat = {name: ‘jack’, age: 10}; 要求使用模板字符串显示 cat
的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework2</title>
<script type="text/javascript">
let person={
name:"周星驰",
job:"演员",
printInfo(){
console.log("name=",this.name," job=",this.job)
}
}
person.printInfo();
</script>
</head>
<body>
</body>
</html>