后台网站怎么做视频,浙江做网站公司,杭州公司注册网上核名,做课件的网站文章目录 ES6 新特性(详细复习笔记)-下对象相关新特性1. 需求: 演示声明对象简写2-需求: 演示对象方法简写3-应用实例-对象拓展运算符 注意事项和使用细节箭头函数基本介绍应用实例 1-箭头函数使用应用实例 2-箭头函数使用应用实例 3-箭头函数对象解构 注意事项和使用细节综合代… 文章目录 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 langen
headmeta charsetUTF-8title声明对象的简写方式/titlescript typetext/javascriptconst 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
/html2-需求: 演示对象方法简写
!DOCTYPE html
html langen
headmeta charsetUTF-8title对象方法的简写形式/titlescript typetext/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
/html3-应用实例-对象拓展运算符
需求: 演示对象拓展运算符使用 拷贝对象(深拷贝)的用法和理解 !DOCTYPE html
html langen
headmeta charsetUTF-8title对象运算符的扩展/titlescript typetext/javascriptlet 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 langen
headmeta charsetUTF-8title箭头函数的使用/titlescript typetext/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 n100); hi((n) {return n 100});hi((n) {return n - 100});/script
/head
body/body
/html应用实例 2-箭头函数使用
需求: 演示箭头函数使用
!DOCTYPE html
html langen
headmeta charsetUTF-8title箭头函数使用案例2/titlescript typetext/javascript// 传统var f1 function (n, m) {var res 0for (var i n; i m; i) {res i}return res}console.log(传统 f1(1, 10))// ES6 , 箭头函数使用let f2 (n, m) {var res 0for (var i n; i m; i) {res i}return res};console.log(f2(1, 10));/script
/head
body/body
/html应用实例 3-箭头函数对象解构
需求: 演示箭头函数解构使用
!DOCTYPE html
html langen
headmeta charsetUTF-8title箭头函数对象解构/titlescript typetext/javascriptconst 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 langen
headmeta charsetUTF-8titleTitle/titlescript typetext/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
/html2. 看下面的代码, 请问输出什么 并分析原因
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fV2DssgZ-1690291627476)(…/…/…/Typora/%E5%9B%BE%E7%89%87/db1c4a40788b472c8819241a2a74d5d7-16902915610584.png)]
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript//看下面的代码, 请问输出什么 并分析原因let dog {name: 大黄, age: 3};//分析//1. 使用对象解构//2. namex undefined//3. age 3let {namex, age} dog;console.log(namex, namex, age, age);/script
/head
body/body
/html3. 根据给出的数据, 用 ES6 的方式, 构建对象 person, 并提供方法(用最简洁的方式),可以输出信息.
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/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
/html4. 根据给出的数据, 用 ES6 的方式, 编写方法, 使用对象解构的方式, 得到 oper 和arr, 并根据 oper 的值 , oper 可以是、-、*、/ 来计算结果
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/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
/html5. 调用 f8 函数, arr 是数组, fun 传入箭头函数, 可以计算 arr 的和, 并写出调用方法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/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