对象相关新特性
应用实例-声明对象简写
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>箭头函数使用案例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>
应用实例 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>Title</title> <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>Title</title> <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>Title</title> <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>Title</title> <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>Title</title> <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>
