ES6新语法-day02
2024-05-03 07:20:11
01-函数-默认参数
<script>// 1. 在 ES5 语法中，为函数形参指定默认值的写法：// 写法一：// function foo (bar) {// bar = bar || 'abc';// console.log(bar)// }// foo('xyz')// 写法二：// function foo (bar) {// if (typeof bar === 'undefined') {// bar = 'abc';// }// console.log(bar)// }// foo('xyz');// 2. 使用 ES6 的语法为函数形参指定默认值function post (url, data = {}, timeout = foo * 1000) {console.log(arguments)console.log(url, data, timeout)}// post('xyz', {uname: 'zhangsan', upass: '123'}, 3000);post('xyz', null, 3000);// 注意事项：// 1> 除了为形参直接指定默认值以外，形参的默认值还可以是表达式，例如，timeout = 5 * 1000// 2> 在预编译阶段，形参表达式不会执行，只有在调函函数，并且没有为形参传递实参的情况下才执行。 </script>
02-函数-不定参数
<script>// 不定参数，使用剩余操作符接收剩余的实参，这些实参会被保存到一个不定参数（args）中function foo (...args) {return args.reduce(function (previousValue, currentValue) {console.log(previousValue, currentValue)return previousValue += currentValue;})}// 将上面的函数改成箭头函数的形式var foo = (...args) => args.reduce((a, b) =>a += b)console.log(foo(1, 32, 34, 5, 6))</script>
03-函数-箭头函数
<script>// 1. 形式一：// var foo = function () {// return 'Hello World!';// };// 如果形参数量为 0，则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。// var foo = () => { // return 'Hello World!';// }// 2. 形式二：// var foo = function (greeting) {// return greeting;// }// 如果形参的数量为 1，则可以省略小括号。// var foo = greeting => {// return greeting;// }// 3. 形式三：// var foo = function (firstName, lastName) {// return firstName + ' · ' + lastName;// }// 如果形参数量大于 1，则不能省略小括号。// var foo = (firstName, lastName) => {// return firstName + ' · ' + lastName;// }// 4. 形式四：// var foo = function (a, b) {// return a > b ? a : b;// }// 如果函数的执行体比较简单（直接量或表达式），可以省略大括号，箭头后面的直接量或表达式会被自动作为返回值。// var foo = (a, b) => a > b ? a : b;// 5. 形式五：// var foo = function (a, b) {// let max = a;// if (b > a) {// max = b;// } // return max;// }// 如果函数的执行体比较复杂，则不能省略大括号。// var foo = (a, b) => {// let max = a;// if (b > a) {// max = b;// } // return max;// }// console.log(foo('贾树华', '尼古拉斯'))</script>
04-函数-箭头函数没有this绑定
<script>// 普通函数作用域中的 this 已经被绑定成 window 对象，因此当我们放问 this 时，直接在当前作用域下就能访问的到。// var foo = function () {// console.log(this)// return 'Hello World!';// };// 箭头函数的作用域中没有绑定 this，因此，当我们访问 this 时，会去上一层作用域中查找 this。// var bar = () => { // console.log(this)// return 'Hello World!';// };// 示例，由于 sayName 箭头函数中没有绑定 this，因此我们访问 this 时，会去全局作用域中查找。// 查找的结果是 this 指向 window，因此输出的 name 的值是 '常军辉'// var name = '常军辉';// var obj = {// name: '吕鑫洋',// sayName: function () {// // this = obj// return this.name;// }// };// console.log(obj.sayName())</script>
05-函数-箭头函数没有arguments绑定
<script>// 普通函数var foo = function (greeting) {console.log(arguments)return greeting;};// 箭头函数中没有绑定 arguments 对象，因此下面的输入语句会报错：arguments is not definedvar bar = (greeting) => { console.log(arguments)return greeting;};console.log(foo('Hello World!'))console.log(bar('你好世界！'))</script>
06-函数-箭头函数中不能手动绑定this
<script>// this 指向的对象var obj = {fullName: '谭文华'};// 1. 普通函数，可以使用 call() 方法改变函数中 this 的绑定// var foo = function (greeting) {// return this.fullName + '说：' + greeting;// };// console.log(foo.call(obj, 'Hello World!'))// 2. 箭头函数，不能使用 call() 方法改变函数中 this 的绑定，箭头函数中不能绑定 this。var bar = (greeting) => { return this.fullName + '说：' + greeting;};// 下面的代码不会报错，但是也不起作用console.log(bar.call(obj, '你好世界！'))</script>
07-函数-new.target
<script>// 1. ECMAScript 5 中判断构造函数是否通过 new 关键字调用的写法// function Person (fullName) {// if (this instanceof Person) {// this.fullName = fullName;// } else {// return new Person(fullName);// }// }// let student = Person('孟天乐')// 2. ECMASript 6 引入一个 new.target 属性，当我们使用 new 操作符调用构造函数时，new.target 属性的值为构造函数，否则为 undefined// function Person (fullName) {// if (typeof new.target !== 'undefined') {// this.fullName = fullName;// } else {// throw new Error('必须通过 new 关键字来调用 Person。');// }// }// let student = new Person('孟天乐');// console.log(student)// 3. 除此之外，还可以检查 new.target 是否被某个特定构造函数所有调用。// 例如，Person 构造函数中的 new.target 属性的值被限定为 Person // function Person (fullName, age) {// if (typeof new.target === Person) {// this.fullName = fullName;// this.age = age;// } else {// throw new Error('必须通过 new 关键字来调用 Person。');// }// }// function Dog (fullName, age) {// Person.call(this, fullName, age)// }// let dog = new Dog('HeHe', 3)// console.log(dog)// 4. 不能在函数外部使用 new.target，否则会报错function Person () {console.log(new.target)}// 下面代码会抛出错误：new.target expression is not allowed here// console.log(new.target) let student = new Person('崔景龙')</script>
08-对象-属性初始值的简写
<script>let fullName = '杨柯', age = 19;let obj = {fullName: fullName,age: age};// 1. 当一个对象的属性与本地变量同名时，不需要再写冒号和值，直接写属性名即可。let obj = {fullName,age};</script>
09-对象-对象方法的简写
<script>// 在 ES 5 中，如果为对象添加方法，必须要通过指定名称并完整定义函数来实现。let obj = {fullName: '杨柯',sayName: function () {return this.fullName;}};// 在 ES 6 中，语法更简洁，取消了冒号和 function 关键字。如下所示：let obj = {fullName: '杨柯',sayName () {return this.fullName;}};</script>
10-对象-可计算属性名
<script>// 在对象字面量中使用方括号表示该属性名是可计算的，方括号中的内容会被计算求值，最终转化成一个字符串，该字符串就是最终的属性名。let suffix = 'name';let person = {['first' + suffix]: '杨帅',['last' + suffix]: '泰坦尼'};console.log(person)</script>
10-对象-新增的两个方法
<script>// 1. 在有些情况下，既是全等运算符比较出来的结果也是不正确的。例如，在下面两种情况下：// +0 和 -0 在 JS 解析引擎中被表示为两个完全不同的实体，而如果使用全等运算符（===）对两者进行比较，得到的结果是两者相等。console.log(+0 == -0); // trueconsole.log(+0 === -0); // trueconsole.log(Object.is(+0, -0)); // false// NaN 和 NaN 在 JS 解析引擎中被表示为两个完全相同的实体，但是无论使用等于（==）还是全等（===），得到的结果都是 false。console.log(NaN == NaN); // falseconsole.log(NaN === NaN); // falseconsole.log(Object.is(NaN, NaN)); // true// 在大多数情况下，Object.is() 方法的比较结果与全等运算符完全相同，唯一的区别在于 +0 和 -0 会被识别为不相等，NaN 和 NaN 会被识别为相等。// 2. Object.assign() 方法可以接收任意数量的源对象（obj2,obj3），并按照指定的顺序将属性复制到接收对象（obj1）。// 如果多个源对象具有同名属性，则排位靠后的源对象会覆盖排外靠前的对象。let obj1 = {fullName: '陈世壮',sayName () {return this.fullName;}};let obj2 = {fullName: '任俊玖',age: 20};let obj3 = {fullName: '朱亚鹏',gender: '男'};// 通过自定义方法实现了一个可以合并多个对象的方法，// function mixin(receiver, ...suppliers) {// suppliers.forEach(supplier => {// Object.keys(supplier).forEach(key => {// receiver[key] = supplier[key]// })// })// return receiver;// }// console.log(mixin(obj1, obj2, obj3))// 使用 ES6 新增 Object.assgin() 方法将多个对象的属性合并到第一个对象中。// Object.assign(obj1, obj2, obj3);// console.log(obj1)// console.log(obj2)// console.log(obj3)</script>
11-对象-重复的对象字面量属性
<script>// 对于每一组重复属性，都会选取最后一个取值。let obj = {fullName: '陈世壮',fullName: '李忠易',age: 18,age: 20};console.log(obj.fullName); // '李忠易'console.log(obj.age); // 20</script>
12-对象-自有属性枚举顺序
<script>// ES 5 中并没有定义对象属性的枚举顺序，有 JavaScript 引擎厂商自行决定。// ES 6 中明确规定了对象的自有属性被枚举时的返回顺序。// 自有属性枚举顺序的基本规则：// 1. 所有数字按升序// 2. 所有字符串按照它们被加入对象时的顺序排序let obj = {a: 1,0: 2,c: 3,2: 4,b: 5,1: 6};console.log(Object.getOwnPropertyNames(obj)); // ["0", "1", "2", "a", "c", "b"]</script>
13-对象-改变对象的原型
<script>let person = {getGreeting () {return 'Hello';}};let dog = {getGreeting () {return 'woof';}};// 使用 create() 方法将 person 对象作为原型对象let friend = Object.create(person); // {}console.log(friend.getGreeting()); // 'Hello'console.log(Object.getPrototypeOf(friend) === person); // true// 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dogObject.setPrototypeOf(friend, dog);console.log(friend.getGreeting()); // 'Hello'console.log(Object.getPrototypeOf(friend) === dog); // true</script>
14-对象-使用 super 关键字访问原型对象
<script> let person = {getGreeting () {return 'Hello';}};let dog = {getGreeting () {return 'woof';}};// let friend = {// getGreeting () {// return Object.getPrototypeOf(this).getGreeting.call(this) + ', hi';// }// };// ES 6 引入了 super 关键字，super 指向当前对象的原型对象，实际上也就是 Object.getPrototypeOf(this) 的值，于是，上面的代码可以简化成如下形式：let friend = {getGreeting () {return super.getGreeting() + ', hi';}};// 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 personObject.setPrototypeOf(friend, person);console.log(friend.getGreeting()); // 'Hello'console.log(Object.getPrototypeOf(friend) === person); // true// 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dogObject.setPrototypeOf(friend, dog);console.log(friend.getGreeting()); // 'Hello'console.log(Object.getPrototypeOf(friend) === dog); // true
</script>
ES6新语法-day02相关推荐
- Javascript - ES6新语法概览
Javascript - ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联 ...
- ES6新语法及vue基础
https://www.angularjs.net.cn/ es6新语法:(多看多用) 1 字符串方法 //字符串方法 includes包含// let str="ijahsdjkhasd& ...
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- ES6新语法 变量 、 服务器端js和浏览器端js的区别
服务器端js和浏览器端js的区别 /*** 1.js运行在浏览器端有* ECMAScript:js语法(变量,数据类型,表达式,代码结构)* Bom:浏览器对象模型,用js去操作浏览器窗口* Dom: ...
- JavaScript 精选：哪些能提高开发效率的es6 新语法糖
文章目录 一 ECMAScript 相关介绍 1 什么是 ECMA 2 什么是 ECMAScript 3 什么是 ECMA-262 4 谁在维护 ECMA-262 5 为什么要学习 ES6 6 ES6 ...
- [Node.js] ES6新语法
概括图 下载地址 xmind地址 const关键字 const关键字声明常量的(一旦声明就无法更改) a:没有变量提升 b:有块级作用域 c:不能重复声明 d:不能重新赋值 e.声明必须要初始化值 使 ...
- ES6新语法--对象成员简写、对象展开、数组展开
对象成员简写 /*** 对象成员简写*///声明变量 let name = 'chen'; let age = 18; let gender = 'man'; let score = 100;//声明 ...
- ES6新语法--解构赋值
对象解构赋值 ※很重要 /*** 对象解构赋值:获取元素中属性的值,然后赋值给变量*///声明一个对象 let obj = {name:'chen',age:38,gender:'man',score ...
- es6新语法Object.assign()
1.介绍 Object.assign用于对象的合并,将源对象的所有可枚举属性复制到目标对象,只拷贝源对象自身的属性继承属性补考呗 Object.assign(target,source1,...)第一 ...
- ES6新语法--箭头函数
箭头函数 /*** 箭头函数:实质就是一个函数固定格式的简写* * 简写的规则* function 改为 => =>读为goesto* 如果只有一个形参,可以省略形参小括号;* 如果有0个 ...
最新文章
- Unity UGUI获取鼠标在屏幕的准确点击位置
- mingw32-gcc.exe: error: CreateProcess: No such file or directory
- python 做山水画_服了！年度最强的编程语言来了！它不是Python!
- 【转】Go 语言教程（2）——表达式
- vue循环渲染变量类样式
- java索引序列_视图、序列、索引
- RuntimeError: DataLoader worker (pid(s) 13512, 280, 21040) exited unexpectedly
- python3 gui tk代码_【基础】学习笔记30-python3 tkinter GUI编程-实操12
- python如何获取输入_python如何从键盘获取输入实例
- c#获取对象的唯一标识_DDD领域驱动设计实战 - 创建实体身份标识的常用策略
- 技巧：在Silverlight中如何访问外部xap文件中UserControl
- vue 执行函数this_vue回调函数中this无效
- Bigendian 奇数内存地址取整形crash
- 《数学之美》—PageRank
- Linux下搭建ＣＡＣＴＩ的时候总结的一些小知识
- 人大金仓数据库Docker部署
- @submit.native.prevent的作用？
- python实现归结演绎推理_归结演绎推理.ppt
- 金蝶标准版迷你版常见问题汇总
- 乐高JAVA编程_用乐高认真玩进行Design Sprint