ES6
鹤林玉露
一愿识尽世间好人，
二愿读尽世间好书，
三愿看尽世间好山水。
概念
ECMAScript 6.0(以下简称 ES6)是 JavaScript
语言的下一代标准， 2015 年 6 月发布。ES6的出现是为了达到 JavaScript
语言可以用来编写复杂的大型程序，成为企业级开发语言。ECMAScript 和
JavaScript 的关系：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是
ECMAScript 的一种实现。
使用
let声明变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let 基本使用</title>
<script type="text/javascript">
let name = "MyName";
console.log("name=",name);
</script>
</head>
<body>
</body>
</html>说明：
- 衔接用逗号，可以输出对象的完整信息
- 衔接用加号，类似于字符串的拼接，如果name是一个对象，会输出object，而不会输出对象的完整信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let 使用和注意细节</title>
<script type="text/javascript">
/**
* let声明的变量，在代码块中，则作用域在代码块中
* var声明的变量，在代码块中，作用域不受限制
*/
{
var job = "veryGood";
let name = "MyName";
console.log(job);
console.log("name",name);
}
// console.log(job);
// console.log("name",name);
/**
* let 只能声明一次
* var 可以声明多次
*/
var num1 = 1;
var num1 = 2;
console.log(num1);
// let num2 = 3;
// let num2 = 4;
// console.log(num2);
/**
* let 不存在变量提升
* var 存在变量提升
*/
console.log("x=",x);
var x = "tom";
var y;
console.log(y);
console.log(z);
let z = 11;
</script>
</head>
<body>
</body>
</html>const声明变量/只读变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const常量/只读变量的使用</title>
<script type="text/javascript">
/**
* 常量在定义时，需要赋值
* 常量赋值后不能修改
*/
const PI = 3.14; // 不赋值就会报错
// PI = 5; //修改就会报错
console.log("PI",PI);
</script>
</head>
<body>
</body>
</html>常量在定义的时候，需要赋值
常量赋值后不能修改
解构赋值
基本介绍
- 解构赋值是对赋值运算符的扩展
- 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
- 主要有两种形式：
数组解构和对象解构
使用
<!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];
let y = arr[1];
console.log(x,y);
//2. ES6
let [a,b,c] = arr;
console.log(a,b,c);
let [num1,num2,num3] = [100,200,300];
console.log(num1,num2,num3);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象解构</title>
<script type="text/javascript">
let monster = {name : '牛魔王',age : '800'};
// 传统方式
console.log(monster.name,monster.age);
//ES6对象解构
/**
* 需要注意的是：
* 1. 不能用中括号 let [name,age] = monster;
* 2. let {name,age}中的名称要和
* let monster = {name : '牛魔王',age : '800'}中的属性名保持一致
* 3. 取得时候，顺序可以不一致，{age,name}也可以
*/
let {name,age} = monster;
console.log("name=",name,"age=",age);
// 也可以这样解构
// let {name,age} = {name : '牛魔王',age : '800'};
// 也可以在方法上解构
// 但也要保证名称要和对象的属性名称保持一致
function f1({name,age}) {
console.log("f1_name=",name,"f1_age=",age);
}
f1(monster)
</script>
</head>
<body>
</body>
</html>模板字符串
基本介绍
- 模板字符串使用反引号 `` 将字符串包裹
- 可作为普通字符串
- 可用来定义多行字符串，即可以将换行字符串原生输出
- 字符串插入变量和表达式, 使用 ${}。这种和jsp中的EL表达式的使用方式一样
- 字符串中调用函数
使用
对象相关新特性
<!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};
console.log(monster)
// ES6方式
// {name,age}，表示对象的属性是name和age
// 属性name值是从变量/常量name来的
// 如果上面没有name值，则作为空串处理
let monster02 = {name,age};
console.log(monster02);
</script>
</head>
<body>
</body>
</html><!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.f1 = function(){
console.log("666");
}
monster.sayHi();
// ES6
let monster02 = {
name:"小草/",
age : 100,
sayHi() {
console.log("信息：name=",this.name,"age=",this.age);
}
}
monster02.sayHi();
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象拓展运算符</title>
<script type="text/javascript">
let cat = {name:"myCat",age:2};
// 对象的拷贝(浅拷贝)，cat2不是一个独立的对象。cat2只是一个引用指向了cat
// let cat2 = cat;
// cat2.name = "小黑";
// console.log(cat);
// console.log(cat2);
// 对象的拷贝（深拷贝）
let cat2 = {...cat};
cat2.name = "小王八";
console.log(cat)
console.log(cat2);
// 合并对象
let monster = {name: "金角大王",age:100};
let car = {brand:"宝马",price:10000};
let monster_car = {...monster,...car};
monster_car.name = 111;
console.log(monster_car)
// 合并的对象是一个独立的对象
console.log(monster);
</script>
</head>
<body>
</body>
</html>箭头函数
基本介绍
箭头函数提供更加简洁的函数书写方式。
基本语法是：
(参数列表) => { 函数体 }箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
箭头函数多用于匿名函数的定义
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数的使用</title>
<script type="text/javascript">
// 传统
var f1 = function (n) {
return n*2;
}
console.log(f1(2));
let f2 = (n) => {
return n * 2;
}
console.log(f2);
console.log(f2(5));
// 箭头函数
// 返回语句只有一行的时候，还可以简写
var f3 = n => n*2;
console.log(f3);
console.log(f3(6));
// 函数也可以传给一个变量
function hi(f4) {
console.log(f4(900))
}
hi(n=>n+100);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数+对象解构</title>
<script type="text/javascript">
const monster = {
name : "红孩儿",
age : 100,
skill : ['红银枪','完美真货']
}
// 传统
function f1(monster) {
console.log("skill=",monster.skill);
}
f1(monster);
// 箭头函数
let f2 = ({skill}) =>{
console.log("skill:",skill);
}
// f2传入对象monster
// f2形参是{skill}，所以根据ES6的对象解构属性，会把monster对象的skill属性赋给skill
f2(monster);
// 箭头函数+解构
// 这里的 {skill,age,name} 都是对象的属性名，必须和对象的属性名保持一致
let f3 = ({skill,age,name})=>{
console.log(skill,age,name)
}
f3(monster)
</script>
</head>
<body>
</body>
</html>本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lunatic！
评论