ECMAScript 6.0
Posted Al_tair
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECMAScript 6.0相关的知识，希望对你有一定的参考价值。
ECMAScript 6.0
大家好呀！我是小笙，接下来我们来初步了解一部分大前端的内容。
ES6
ES6基本介绍
ECMAScript 6.0(以下简称 ES6)是 javascript 语言的下一代标准， 2015 年 6 月发布
ECMAScript 和 JavaScript 的关系（类似接口和类的关系）：
ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现
let变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
let name = "罗念笙";
console.log("name",name); // 逗号：如果是对象，输出对象的完整信息（属性）
console.log("name"+name); // 加号：如果是对象，只输出Object类型
// 举例子
// let l = new Object;
// l.name = "罗念笙";
// console.log("name",l); // name name: '罗念笙'
// console.log("name"+l); // name[object Object]
// let注意细节
// 1. let 声明的变量有严格局部作用域
var gender = "男";
let age = 18;
console.log(gender); // 男
console.log(age); // /18
console.log(gender); // 男
console.log(age); // age is not defined
// 2. let 只能声明一次, var 可以声明多次
let name = "张洛融"; // Identifier 'name' has already been declared
// 3. let 不存在变量提升, var 存在变量提升
console.log(x);
var x;
console.log(y); // Cannot access 'y' before initialization
let y;
</script>
<body>
</body>
</html>
const 声明常量/只读变量
解构赋值<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 1. 常量在定义时，需要赋值
// 2. 常量赋值后不能修改
const AGE; // Missing initializer in const declaration
const PI = 3.14;
PI = 5.6; // Assignment to constant variable
</script>
</head>
<body>
</body>
</html>
解构赋值
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值（解构赋值是对赋值运算符的扩展 ）
主要有两种形式： 数组解构和对象解构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
// 数组解构 [ ]
let arr = [1,2,3];
let [x,y,z] = arr;
console.log(x,y,z) // 1 2 3
let [num1,num2,num3] = [100,200,300];
console.log(num1,num2,num3); // 100 200 300
// 对象解构
let obj = new Object;
obj.name = "罗念笙";
obj.age = 18;
letname,age = obj; // 名称必须和属性名相同，但是顺序无所谓
console.log(name,age); // 罗念笙 18
function f1(name, age) // 名称必须和属性名相同，但是顺序无所谓
console.log(name,age) // 罗念笙 18
f1(obj);
</script>
<body>
</body>
</html>
模板字符串
模板字符串使用反引号 ` 将字符串包裹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 模板字符串使用反引号 ` 将字符串包裹
// 1.可作为普通字符串
// 2.可用来定义多行字符串，即可以将换行字符串原生输出
let str1 = `for(int i=0;i<2;i++)
System.out.println(i);
`
console.log(str1)
// 3.字符串插入变量和表达式, 使用 $
let name = "罗念笙";
let message = `姓名 : $name`
let num1 = 34;
let num2 = 66;
let sum = `$num1+num2`;
console.log(message); // 姓名 : 罗念笙
console.log(sum); // 100
// 4.字符串中调用函数
function f1()
return "f1被调用...";
let controlF1 = `$f1()`;
console.log(controlF1); // f1被调用...
</script>
</head>
<body>
</body>
</html>
对象相关新特性
声明对象简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 声明对象简写
const age = 800;
const name = "孙悟空";
let monster = name,age;
console.log(monster) // name: '孙悟空', age: 800
</script>
</head>
<body>
</body>
</html>
对象方法简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 对象方法简写
let monster2 =
name: "红孩儿",
age: 100,
sayHi() // 传统方式: sayHi:function()
console.log("name=", this.name, " age=", this.age); // name= 红孩儿 age= 100
,
monster2.sayHi();
</script>
</head>
<body>
</body>
</html>
对象拓展运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 对象拓展运算符
let person =
name:"罗念笙",
age:18,
eat()
console.log("eating....")
// 浅拷贝
let person2 = person;
person2.name = "张洛融";
console.log(person.name); // 张洛融
// 深拷贝
let person3 = ...person;
person3.name = "XXX";
console.log(person3.name); // XXX
console.log(person.name); // 张洛融
// 合并对象(深拷贝)
let personMessage =
gender:"女",
hobby:"跑步"
let wholeMessage = ...person,...personMessage;
console.log(wholeMessage); // name: '张洛融', age: 18, gender: '女', hobby: '跑步', eat: ƒ
person.name = "张洛";
console.log(wholeMessage); // name: '张洛融', age: 18, gender: '女', hobby: '跑步', eat: ƒ
</script>
</head>
<body>
</body>
</html>
箭头函数(重要!!!)
- 箭头函数提供更加简洁的函数书写方式
- 基本语法是：(参数列表) => 函数体
- 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
- 箭头函数函数体有多行语句，用 包裹起来，表示代码块
- 函数体只有一行语句，并且需要返回结果时，可以省略 , 结果会自动返回
- 箭头函数多用于匿名函数的定义
箭头函数基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 传统函数
let addSum = function(m,n)
return m + n;
console.log(addSum(6,4)); // 10
// 1.箭头函数基本使用
// 基本语法是：(参数列表) => 函数体
let addSum2 = (m,n) =>
return m + n;
console.log(addSum2(3,4)); // 7
// 箭头函数优化
// 函数体只有一行语句，并且需要返回结果时，可以省略 , 结果会自动返回
let addSum3 = (m,n) => m + n;
console.log(addSum2(3,90)); // 93
// 2.可以把箭头函数当作形参传入(类似Java匿名内部类)
function f(f4)
console.log(f4(100));
f(
(n) =>
return n * 12;
)
f(
(n) =>
return n - 12;
)
// 传统函数
var f1 = function (n, m)
var res = 0
for (var i = n; i <= m; i++)
res += i
return res
console.log(f1(1, 10)) // 55
// 3.箭头函数灵活使用
let f2 = (n, m) =>
var res = 0
for (var i = n; i <= m; i++)
res += i
return res
;
console.log(f2(1, 10)); // 55
</script>
</head>
<body>
</body>
</html>
箭头函数+对象解构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 要求：在方法形参取出 monster 对象的 skill 属性
const monster =
name: "红孩儿",
age: 100,
skill: ['红缨枪', '三位真火']
// 传统方式
function f1(monster)
console.log("skill=", monster.skill);
f1(monster);
//箭头函数
let f2 = (skill) =>
console.log("skill=", skill);
// 1.f2传入对象monster，含有属性skill
// 2.f2形参是skill, 根据ES6的对象解构特性, 会把monster对象的skill属性赋给skill
// 3.对象解构的前提就是skill的 skill 和 monster 的 skill 属性名必须是一致的
f2(monster);
// 箭头函数()=> + 解构
let f3 = (age,name,skill) => // age,name,skill 顺序无要求
console.log("skill=", skill, " age=", age, " name=", name);
f3(monster);
</script>
</head>
<body>
</body>
</html>
以上是关于ECMAScript 6.0的主要内容，如果未能解决你的问题，请参考以下文章