es6 新语法
ES6 语法
2023-09-11 14:22:43 时间
一、新的变量声明方式 let/const
{ let _a = 20; } console.log(a); // a is not defined // ES5 console.log(a); // undefined var a = 20; // ES6 console.log(a); // a is not defined let a = 20;
二、 箭头函数的使用
- 箭头函数可以替换函数表达式,但是不能替换函数声明
// es5 var fn = function(a, b) { return a + b; } // es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号 const fn = (a, b) => a + b; // es5 var foo = function() { var a = 20; var b = 30; return a + b; } // es6 const foo = () => { const a = 20; const b = 30; return a + b; }
- 箭头函数中,没有this指向
var person = { name: 'tom', getName: function() { return this.name; } } // 我们试图用ES6的写法来重构上面的对象 const person = { name: 'tom', getName: () => this.name } // 但是编译结果却是 var person = { name: 'tom', getName: function getName() { return undefined.name; } };
三、模板字符串
- 使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式
// es6 const a = 20; const b = 30; const string = `${a}+${b}=${a+b}`; // es5 var a = 20; var b = 30; var string = a + "+" + b + "=" + (a + b);
四、 解析结构
- 数组以序列号一一对应,这是一个有序的对应关系。
- 而对象根据属性名一一对应,这是一个无序的对应关系。
- 根据这个特性,使用解析结构从对象中获取属性值更加具有可用性
// 首先有这么一个对象 const props = { className: 'tiger-button', loading: false, clicked: true, disabled: 'disabled' } // es5 var loading = props.loading; var clicked = props.clicked; // es6 const { loading, clicked } = props; // 给一个默认值,当props对象中找不到loading时,loading就等于该默认值 const { loading = false, clicked } = props;
五、 函数默认参数
// es5 function add(x, y) { var x = x || 20; var y = y || 30; return x + y; } console.log(add()); // 50 // es6 function add(x = 20, y = 30) { return x + y; } console.log(add());
六、 展开运算符
- 在ES6中用...来表示展开运算符,它可以将数组方法或者对象进行展开
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 10, 20, 30]; // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
七、对象字面量 与 class
- 对象字面量:当属性与值的变量同名时,可以只写一个
const name = 'Jane'; const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age };
- Class类
<script> // 定义一个名为Person的类 人类 class Person { static sList = []; // 静态成员 // 构造器 - 一般定义类属性 constructor(name, age) { this.name = name; this.age = age; } // 原型方法 eat() { console.log(this.name + '在吃饭'); } // 成员方法-箭头函数 sayHi = (content) => { console.log(`${this.name}说的内容是 ${content}`); } } // 实例化对象 let p1 = new Person('小丽', 22); let p2 = new Person('小红', 21); console.log('姓名是 ', p1.name); p1.eat(); console.dir(Person) console.dir(p1) console.dir(p2) p1.sayHi('今天学习javascript高级内容'); </script>
八、es6继承 extends
- 只需要一个extends关键字,就可以实现继承了,不用像ES5那样去担心构造函数继承和原型继承,除此之外,我们还需要关注一个叫做super的方法。
- 在继承的构造函数中,我们必须如上面的例子那么调用一次super方法,它表示构造函数的继承,与ES5中利用call/apply继承构造函数是一样的功能
<script> // 父 class Person { constructor() { this.name = name; this.age = age; } } // 子 (extends Person 继承父类) class Student extends Person { constructor(name,age,number, score) { // super()调用父类构造函数 super() this.number = number; this.score = score; } } // 调用子类 let s1 = new Student('中国人',22,101,99); // 子类调用继承自父类的属性 s1.name(); </script>
相关文章
- 切图崽的自我修养-[ES6] 迭代器Iterator浅析
- [ES6] Objects vs Maps
- [ES6] Spread Operator
- [Javascript] Webpack Loaders, Source Maps, and ES6
- [ES6] 04. The let keyword -- 2 Fiald case
- [ES6] 02. Traceur compiler and Grunt
- Es6系列之destructuring assignments
- ES6学习之路3----rest参数与扩展运算符
- 6个讨喜的 ES6 小技巧
- ES6 的功能侦测库 ES-Checker
- ES6常用的都在这里
- 使用ES6的fetch API读取数据时要注意的一个和cookie相关的坑
- es6读书笔记(五)Promise
- es6 语法 (类与对象)
- es6 语法 (symbol)
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- 随笔-ES6 class语法糖 及继承性实现