ES6 新特性(详细复习笔记)--下
文章目录
- ES6 新特性(详细复习笔记)-下
-
- 对象相关新特性
-
- 1. 需求: 演示声明对象简写
- 2-需求: 演示对象方法简写
- 3-应用实例-对象拓展运算符
- 注意事项和使用细节
- 箭头函数
-
- 基本介绍
- 应用实例 1-箭头函数使用
- 应用实例 2-箭头函数使用
- 应用实例 3-箭头函数+对象解构
- 注意事项和使用细节
- 综合代码示例
-
- 1. 给你一个对象 let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示 cat 的信息
- 2. 看下面的代码, 请问输出什么， 并分析原因
- 3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.
- 4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是+、-、*、/ 来计算结果
- 5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法
ES6 新特性(详细复习笔记)-下
对象相关新特性
应用实例-声明对象简写
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.f10 = function () {
console.log("哈哈");
};
monster.sayHi();
monster.f10();
// ES6-对象方法定义
let monster2 = {
name: "红孩儿~",
age: 900,
sayHi() {
console.log("信息: name=", this.name, " age=", this.age);
},
f1() {
console.log("f1()");
}
}
monster2.sayHi();
monster2.f1();
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 cat2 = {...cat};
cat2.name = "中花猫";
console.log("cat=>", cat);//小花猫
console.log("cat2=>", cat2);//中花猫
// 合并对象[深拷贝]
let monster = {name: "白骨精", age: 100};
let car = {brand: "奔驰", price: 800000};
let monster_car = {...monster, ...car}
monster_car.name = "狐狸精";
console.log("monster=>", monster);
console.log("monster_car=>", monster_car);
script>
head>
<body>
body>
html>
注意事项和使用细节
对象拓展运算符是比较新的特性，低版本的浏览器不支持
火狐/谷歌浏览器没有问题
箭头函数
基本介绍
-
箭头函数提供更加简洁的函数书写方式。
-
基本语法是：(参数列表) => { 函数体 }
-
箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
-
箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
-
函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
-
箭头函数多用于匿名函数的定义
应用实例 1-箭头函数使用
- 需求: 演示箭头函数基本使用
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))
// 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
//函数也可以传给一个变量=> 看看java基础匿名内部类
function hi(f4) {
console.log(f4(900));
}
hi(n=> n+100);
hi((n) => {
return n + 100
});
hi((n) => {
return n - 100
});
script>
head>
<body>
body>
html>
应用实例 2-箭头函数使用
需求: 演示箭头函数使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数使用案例2title>
<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>
应用实例 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);
//箭头函数
let f2 = ({skill}) => {
console.log("skill=", skill);
}
//解读
//1. f2 传入对象 monster
//2. f2形参是 {skill} , 所以es6的对象解构特性, 会把monster对象的 skill属性赋给
// skill
//3. 对象解构的前提就是 {skill}的skill 和 monster的 skill属性是一致
f2(monster);
//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
let f3 = ({age, name, skill}) => {
console.log("skill=", skill, " age=", age, " name=", name);
}
f3(monster);
script>
head>
<body>
body>
html>
注意事项和使用细节
箭头函数+对象解构, 注意参数是({属性名})
({属性名}) 是由{} 包括的，属性名需要和对象属性名一致，使用到了对象解构
综合代码示例
1. 给你一个对象 let cat = {name: ‘jack’, age: 10}; 要求使用模板字符串显示 cat 的信息
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
// 给你一个对象let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示cat的信息
let cat = {name: 'jack', age: 10};
let str = `cat的信息为 name=${cat.name} age=${cat.age}`;
console.log(str);
script>
head>
<body>
body>
html>
2. 看下面的代码, 请问输出什么， 并分析原因
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fV2DssgZ-1690291627476)(…/…/…/Typora/%E5%9B%BE%E7%89%87/db1c4a40788b472c8819241a2a74d5d7-16902915610584.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
//看下面的代码, 请问输出什么， 并分析原因
let dog = {name: "大黄", age: 3};
//分析
//1. 使用对象解构
//2. namex undefined
//3. age 3
let {namex, age} = dog;
console.log("namex=", namex, " age=", age);
script>
head>
<body>
body>
html>
3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
//根据给出的数据, 用ES6的方式, 构建对象person, 并提供方法(用最简洁的方式), 可以输出信息
const name = "周星驰";
const job = "演员";
let person = {
name,
job,
show() {
console.log("person信息 name=", this.name, " job=", this.job);
}
}
person.show();
script>
head>
<body>
body>
html>
4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是+、-、*、/ 来计算结果
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
//根据给出的数据, 用ES6的方式, 编写方法, 使用对象解构的方式, 得到 oper 和 arr, 并根据oper的值 , oper可以是+、-、*、/ 来计算结果
var cal = {
oper: "/",
arr: [1, 2, 3, 5]
}
function f1({oper, arr}) {
let res = 0;//初始化的值，要分析考虑
//还可以考虑arr的传入，并且做分析
//判断arr 是不是null, 并且arr.length <=1 , 就直接返回arr[0]
if ("+" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res += arr[i];
}
} else if ("-" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res -= arr[i];
}
} else if ("*" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res *= arr[i];
}
} else if ("/" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res /= arr[i];
}
} else {
console.log("oper输入不正确..")
}
return res;
}
console.log("f1运算的结果=", f1(cal))
script>
head>
<body>
body>
html>
5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
//调用f8 函数, arr是数组, fun传入箭头函数, 可以计算 arr的和, 并写出调用方法
function f8(arr, fun) {
console.log(fun(arr));//调用模板
}
f8([1, 2, 3, 4, 5], (arr) => {
let res = 0;
for (let i = 0; i < arr.length; i++) {
res += arr[i];
}
return res;
})
script>
head>
<body>
body>
html>