ES6常用的基础知识点

ES6介绍

阮一峰es6文档地址: https://es6.ruanyifeng.com/
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了也叫ECMAScript 2015。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

(一) let 命令和const命令

知识点:

  1. let的用法类似于var，用于变量的声明
  2. 使用let就会产生块级作用域,let命令只在块级作用域内(也就是大括号内)有效
  3. let在同一作用域内只能声明一次, 不能重复声明
  4. let和const不存在变量提升

详细例子:

1. let命令

  1. // 块级作用域demo1.1 -变量只在{}内起作用 
  2. {
  3.     var a = 100;
  4.     let b = 200;
  5. }
  6. console.log('a', a);
  7. console.log('b', b); // 报错
  9. // 块级作用域demo1.2 for循环中声明的变量
  10. for (let j = 1; j < 10; j++) {
  11.     // todo
  12. }
  14. console.log(j); // 报错
  16. // demo2 同一个作用域只能声明一次 
  17. let a = 100;
  18. console.log(a);
  19. let a = 200;   // 报错
  21. // demo2.2 下面这样是可以的,因为它们是在不同的作用域内
  22. let b=100;
  23. {
  24.     let b=200;
  25. }
  28. // demo3 let和const不存在变量声明提前
  29. console.log(a); // a先声明后赋值, 所以a的值为undefined
  30. console.log(b); // 报错,用let声明变量不会提前
  31. var a = 100;
  32. let b = 200;

2. const命令

  1. // demo4.1 const声明一个只读的常量。一旦声明，常量的值就不能改变, 常量习惯用大写
  2.  const NUM = 100;
  3. NUM = 200;
  5. // demo4.2 const命令声明的引用数据类型, 可以添加属性和修改属性, 但不能重新赋值
  6. const obj = { a: 2 };
  7. obj.a = 100;
  8. obj.b = 200;
  10. obj = { b: 3 }; // 重新赋值会报错,不允许这样做

3.var、let、const 区别

  1. // demo5
  2. var 关键字的特点：
  3.     -    变量（预解析）提升，可以在声明的前面使用
  4.     - 同一作用域内可以多次声明同一个变量（即便这种方式不建议这样去写）
  5.     - 能让它形成作用域的只有函数
  7. let:声明变量的关键字
  8.     - 没有变量提升，只能在声明之后使用
  9.     - 同一作用域内只能声明一次
  10.     - 你声明的变量的作用域仅限于最近的花括号内（ {} ）
  12. const:只能用来声明常量，该常量一旦声明其值就不能改变( 与let的唯一区别 )
  13.       - 没有变量提升，只能在声明之后使用
  14.     - 同一作用域内只能声明一次
  15.     - 你声明的变量的作用域仅限于最近的花括号内（ {} ）
  16.         - 用const声明的变量: 不允许重新赋值,引用数据类型可以添加或修改属性

(二) 变量的解构赋值

知识点:

  1. 解构: 结构分解, 从一个整体的变量里分解出一部分来使用
  2. 数组解构
  3. 对象解构
  4. 函数参数解构和默认值
  1. // demo1 数组解构
  2. let arr = [1, 2, 3, 4];
  3. let [a, b] = arr;
  4. console.log('a=', a);
  5. console.log('b=', b);
  7. // demo2 对象解构
  8. let obj = {
  9.     name: 'zs',
  10.     age: 20
  11. }
  13. let { name, age } = obj;
  14. console.log('name=', name);
  15. console.log('age=', age);
  17. // demo3 在函数中使用解构 
  18. function Cat({ name, age }) {
  19.     this.name = name;
  20.     this.age = age;
  21. };
  23. let cat = new Cat({ name: '小花', age: 2 });
  24. console.log(cat);
  26. // demo3.2 函数参数使用默认值
  27. function Cat({ name = '小白', age = 1 }) {
  28.     this.name = name;
  29.     this.age = age;
  30. };
  32. let cat = new Cat({});
  33. console.log(cat);
  34. // demo3.3 使用默认值2
  35. function get(data = {}) {
  36.     console.log(url, data);
  37.     // todo
  38. }
  39. get();
  41. function Cat({ name = '小白', age = 1 } = {}) {
  42.     this.name = name;
  43.     this.age = age;
  44. };
  46. let cat = new Cat();
  47. console.log(cat);

(三) 模板字符串

  1. 反引号模板字符串
  2. let place = "world"
  3. // 变量place没有声明
  4. let msg = `Hello, ${place}`;
  5.     ${变量}，其他的都是常量

(四) 对象的扩展

知识点:

  1. 属性的简洁表示法
  2. 方法的简洁表示法
  3. 变量做属性名

详细例子:

  1. // demo1 属性简洁表示方法:当属性名和属性值相同时可以使用简洁表示方式
  2. let username = 'laohu';
  3. let age = 100;
  5. // 以前的表示方法
  6. let obj = {
  7.     username: username,
  8.     age: age
  9. }
  11. // 简洁表示法
  12. let obj2 = {
  13.     username,
  14.     age,
  15. }
  18. // demo2 方法的简洁表示方法: 省略:function
  19. let obj = {
  20.     say: function() {
  22.     },
  24.     say() {
  26.     }
  27. }
  29. // demo3 变量做属性名
  30. let username = 'zs';
  32. let obj = {
  33.     [username]: 'xxx'
  34. }
  36. console.log(obj);

(五) 函数的扩展: 箭头函数

知识点

  1. 箭头函数的常见表达方式
  2. 箭头函数的this指向: 外面指向哪里,里面指向哪里
  3. 箭头函数不能做构造函数,箭头函数的arguments对象不可用

详细列子

  1. // 1.箭头函数例子
  2. function add(a, b) {
  3.     return a + b;
  4. }
  6. // 1.使用箭头函数表达上面的函数
  7. let add1 = (a, b) => {
  8.     return a + b;
  9. }
  11. // 2.简写方式: 函数体只有一行时
  12. let add2 = (a, b) => a + b;
  14. // 3.参数只有一个,小括号可以省略
  15. function squart(num) {
  16.     return num * num;
  17. }
  19. // 简写    
  20. let squart2 = num => num * num;
  1. // 1.2 箭头函数常见使用场景
  2. // 1. 回调函数
  3. const list = [1, 2, 3, 4, 5, 6];
  4. list.forEach(function(item, index) {
  5.     // todo
  6. });
  8. list.forEach((item, index) => {
  9.     // todo
  10. });
  11. list.forEach(item => {
  12.     // todo
  13. });
  15. // 2.setTimout
  16. setTimeout(() => {
  17.     // todo
  18. }, 1000)
  20. // 3.promise
  21. let promiseObj = new Promise((resolve, reject) => {
  22.     // todo
  23. })
  24. promiseObj.then(res => {
  25.     // todo
  26. }).catch(err => {
  27.     // todo
  28. });
  1. // 箭头函数this的指向
  2. let obj = {
  3.     getList() {
  4.         console.log('this的指向', this);
  5.         setTimeout(()=> {
  6.             console.log('setTimout', this);
  7.         }, 1000);
  8.     }
  9. }
  11. obj.getList();
  1. // demo3.html 箭头函数的this指向
  3. <!DOCTYPE html>
  4. <html lang="en">
  6. <body>
  8.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  9.     <script>
  10.         let obj = {
  12.             getList() {
  13.                 console.log('this', this);
  14.                 $.ajax({
  15.                     url: 'http://huruqing.cn:3000/api/film/getList',
  16.                     type: 'get',
  17.                     dataType: 'json',
  18.                     success: (res) => {
  19.                         // this的指向里外一致
  20.                         console.log('this', this);
  21.                         this.render(res.films);
  22.                     }
  23.                 })
  24.             },
  26.             render(list) {
  27.                 console.log(list);
  28.             }
  29.         }
  31.         obj.getList();
  32.     </script>
  33. </body>
  35. </html>

(六) 数组的扩展

知识点:

  1. Array.from() // 将伪数组(类数组)变成真数组
  2. find()
  3. findIndex()
  4. includes()
  5. keys() // 遍历键, 了解
  6. values() // 遍历值, 了解
  7. entries() // 遍历键值对, 了解

    详细例子

    ```javascript function test() { console.log(Array.isArray(arguments)); // arguments是伪数组 console.log(arguments.push); // undefine // 将arguments变成真数组 arguments = Array.from(arguments); console.log(Array.isArray(arguments)); }

test(1, 2, 3, 4, 5);

  2. <a name="E6Hwx"></a>
  3. ## (七) 扩展运算符 ...
  4. <a name="R6sOL"></a>
  5. ### 知识点: 
  7. 1. 在对象中使用
  8. 1. 在数组中使用
  9. 1. 在函数中使用
  11. <a name="OsM3m"></a>
  12. ### 详细例子:
  13. ```javascript
  14. // demo1.1 在对象中使用
  15. let obj1 = {
  16.     name: 'zs',
  17.     age: 100
  18. }
  20. let obj2 = {
  21.     addr: 'gx'
  22. }
  24. let obj = {
  25.     ...obj1,
  26.     ...obj2
  27. }
  28. console.log(obj);
  30. // demo1.2 在对象中使用:koa合并get请求和post请求参数
  31. app.use((ctx,next)=> {
  32.     ctx.params = {
  33.         ...ctx.query,
  34.         ...ctx.request.body
  35.     }
  36.     next();
  37. })
  39. // demo2 在数组中使用:合并数组
  40. let arr1 = [1, 2, 3];
  41. let arr2 = [4, 5, 6];
  43. let arr = [
  44.     ...arr1,
  45.     ...arr2
  46. ]
  47. console.log(arr);
  49. // demo3 在函数中使用
  50. function test(a, b, ...c) {
  51.     console.log(a);
  52.     console.log(b);
  53.     console.log(c);
  54. }
  56. test(1, 2, 3, 4, 5, 6);

(八) Promise

知识点:

  1. promise定义
  2. 创建promise对象, 并存储数据
  3. 获取promise对象的值
  4. async await

(九) ES6 模块系统

前提条件:

  1. 安装serve模块 npm i serve -g

  2. (1) 常用模块化规范:

  3. commonjs规范 nodejs遵守commonjs规范

  4. AMD规范 reqire.js遵守AMD规范
  5. CMD规范 sea.js遵守CMD规范(玉伯, 淘宝)
  6. ES6规范

(2) ES6模块导出和导入:

1. 导出和导入方式(一)
  1. export // 导出

  2. import {xx} from xxx // 导出名称是什么, 导入名称也是什么

    2. 导出和导入方式(一)

  3. export default // 默认导出

  4. import xx from xx // 导入,可以使用任意名称接收默认导出的变量

    3. 重命名

  5. import {aa as xx} from xxx // 导入之后重命名

  6. import * as xx from xxx // 导入之后重命名

(3) 例子

  1. // demo1 导出方式(一)
  2. // demo1.html 使用export导出, 导入的时候,变量名称必须一致
  3. <script type="module">
  4.     import {username,age,PI} from './m1.js';
  5.         console.log(username);
  6.         console.log(age);
  7.         console.log(PI);
  8. </script>
  9. // m1.js 
  10. // 导出变量
  11. export let username = '张三';
  12. export let age = 100;
  13. export const PI = 3.1415926535;
  1. // demo2.html
  2. <script type="module">
  3.     import obj from './m2.js'; 
  4.         obj.say();
  5. </script>
  7. // m2.js
  8. const home = {
  9.     say() {
  10.         console.log('哈哈哈哈')
  11.     },
  12.     getList() {
  13.         // todo
  14.     }
  15. }
  16. export default home;
  1. // demo3.html 重命名
  2. <script type="module">
  3.     import {age as nianling} from './m1.js';
  4.     console.log('nianling=',nianling);
  5. </script>
  7. // demo4.html
  8. <script type="module">
  9.     import * as obj from './m1.js'; 
  10.         console.log(obj);
  11. </script>

(十) class

  1. 声明一个类 ```javascript // 声明一个类 class Person { constructor(name, age) {

    1.  this.name = name;
    2.  this.age = age;

    }

    say() {

    1.  console.log(this.name);

    } }

// 创建实例 let p = new Person(‘张三’, 100); console.log(p); p.say();

  2. 2. 类继承
  3. ```javascript
  4. // 声明一个类
  5. class Person {
  6.     constructor(name, age) {
  7.         this.name = name;
  8.         this.age = age;
  9.     }
  11.     say() {
  12.         console.log(this.name);
  13.     }
  14. }
  17. // 声明一个男人的类
  18. class Man extends Person {
  19.     constructor(name, age) {
  20.         super(name, age);
  21.         this.sex = '男的';
  22.     }
  23. }
  25. let man = new Man('李四', 20);
  26. console.log('man', man);
  27. man.say();

(十一) 新类型(了解)

  1. map

    1. const map = new Map([
    2.  ['name', '张三'],
    3.  ['title', 'author']
    4. ]);
    5. let name = map.get('name');
    6. let title = map.get('title');
    7. console.log(name, title);

  2. set

    1. let arr = [5, 1, 2, 2, 2, 3, 2, 6, 7];
    2. let set = new Set(arr);
    3. console.log('set', set);
    4. arr = [...set];
    5. console.log('arr', arr);

  3. symble ```javascript // demo3.1 let s1 = Symbol(‘aa’); let s2 = Symbol(‘aa’); console.log(s1 === s2); // false

// demo3.2 let username = Symbol(‘username’); let age = Symbol(‘age’);

let obj1 = { username: ‘张三’, age: 16 }

let obj2 = {

  1. [username]: '张三',
  2. [age]: 20

}

let obj = { …obj1, …obj2 } console.log(obj); ``` 作业：数组去重