Community Learn Tools Library Leisure
search
English
Home > List of blog posts > ES6 变量声明，箭头函数，数组方法，解构赋值，JSON，类与继承，模块化练习
Blogger Information
Blog 70
fans 1
comment 0
visits 53059
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
ES6 变量声明，箭头函数，数组方法，解构赋值，JSON，类与继承，模块化练习
葡萄枝子
Original
679 people have browsed it

ES6 变量声明，箭头函数，数组方法，解构赋值，JSON，类与继承，模块化练习

let和const变量声明

var 可以重复声明，变量提升，没有块作用域 {}
let, const 不可以重复声明，有块作用域
const 声明时必须赋值，值不可修改，声明的复合类型（对象和数组）指向内存地址

  1. // let和const变量声明
  2.     var a = 'a';
  3.     let b = 'b';
  4.     const c = ['c'];
  5.     // 块作用域
  6.     if (true) {
  7.         // 无块作用域
  8.         var a = 'aa';
  9.         // 有块作用域
  10.         let b = 'bb';
  11.         const c = ['cc'];
  12.     }
  13.     // 复合类型指向指针地址
  14.     c[0] = 'ccc';
  15.     // aa b ['ccc']
  16.     console.log(a, b, c);

箭头函数，数组 filter，map，reduce 方法

  1. // 箭头函数，数组 filter，map，reduce 方法
  2.     const evenPow2 = (...param) => param.filter(el => el % 2 === 0).map(el => Math.pow(el, 2)).reduce((p, n) => p + n, 0);
  3.     // 计算一组值中偶数平方的和，输出 20
  4.     console.log(evenPow2(1, 2, 3, 4, 5));
  6.     // filter 数组去重
  7.     const arr = ['a', 1, 'b', 'a', 'b', 1, 2];
  8.     let arrUnique = arr.filter((value, i, arr) => arr.indexOf(value) === i);
  9.     // ['a', 1, 'b', 2]
  10.     console.log(arrUnique);
  12.     // reduce 数组去重
  13.     arrUnique = arr.reduce((prev, curr) => prev.includes(curr) ? prev : [...prev, curr], []);
  14.     // ['a', 1, 'b', 2]
  15.     console.log(arrUnique);

解构赋值

  1. // 解构赋值
  2.     const [{x,z}, [xy, yz, zx]] = [{x:1, y:2, z:3}, [12, 23, 31]];
  3.     // 1 2 31
  4.     console.log(x, z, zx);

类与继承和JSON串行化与反串行化

  1. // 类与继承和JSON串行化与反串行化
  2.     class Person {
  3.         // 构造方法
  4.         constructor(name, sex) {
  5.             this.name = name;
  6.             this.sex = sex;
  7.             // this.say = () => `My name is ${this.name}`;
  8.         }
  10.         // say = function () {
  11.         //     return `My name is ${this.name}`;
  12.         // }
  14.         // say = () => `My name is ${this.name}`;
  16.         say() {
  17.             return `My name is ${this.name}`;
  18.         }
  19.     }
  21.     class Student extends Person {
  22.         constructor(name, sex, school) {
  23.             // 父类构造函数，新建父类的 this 对象
  24.             super(name, sex);
  25.             this.school = school;
  26.         }
  27.     }
  29.     const student1 = new Student('tesName', 'male', 'php.cn');
  30.     // tesName male php.cn My name is tesName
  31.     console.log(student1.name, student1.sex, student1.school, student1.say());
  33.     // 串行化
  34.     const strStudent1 = JSON.stringify(student1);
  35.     // 只能串行化 `字符串，数字，对象，数组，布尔，null` 因此 say() 函数被忽略
  36.     // {"name":"tesName","sex":"male","school":"php.cn"}
  37.     console.log(strStudent1);
  39.     // 反串行化，返回 {name: 'tesName', sex: 'male', school: 'php.cn'}
  40.     parseStudent1 = JSON.parse(strStudent1);
  41.     console.log(parseStudent1);

es6练习

module 模块化编程

  • demo2.js

    1. const a = 1;
    2. const show = () => 'hello world!';
    3. const test = () => 'test';
    4. export {a as aVar, show, test as default};

  • demo.js

    1. // 部分导入
    2. import {aVar as aTestVar, show} from "./demo2.js";
    3. // 1 'hello world!'
    4. console.log(aTestVar, show());
    5. // 缺省导入
    6. import testFunc from "./demo2.js";
    7. // 1 'hello world!' 'test'
    8. console.log(testFunc());
    9. // 全部导入
    10. import * as obj from "./demo2.js";
    11. // 1 'hello world!' 'test'
    12. console.log(obj.aVar, obj.show(), obj.default());

  • demo.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script src="demo.js" type="module"></script>
    7. </head>
    8. <body>
    10. </body>
    11. </html>

模块化编程

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post