ES6 基础篇

believealone

于 2020-12-09 08:28:14 发布

阅读量100

点赞数

分类专栏： NODEJS 学习笔记

本文链接：https://blog.csdn.net/believealone/article/details/110914977

版权

NODEJS 学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ES6基础

let

ES6中用来定义一个块级作用域变量，该变量的作用域只能作用于当前定义的块级范围。let定义的变量自带有一个检索，如果发现同一个作用域出现了两个同名变量的定义，此时会直接报错。从而保证变量定义的安全性。

let age = 21;

const

用来定义一个常量，即在程序运行过程中不允许被修改的量

const PI = 3.14;

解构赋值

赋值运算符左右两个结构完全一致，此时ES6会根据结构，将右侧对应结构的数据赋值给左侧对应结构的变量

let a = 20;
let b = 30;
[a, b] = [b, a];
console.log(a, b);

[[a], b] = [[1, 2, 3], [1, 2, 3]];
console.log(a, b);

对象的解构赋值, 在ES6中定义对象时，如果对象的键值对中的键和值对应的变量同名，此时可以直接属性变量

let age = 20;
let obj = { 'name': '张三', age, "sex": '男' };
console.log(obj);

let { name } = { "name": '张三', "age": 30 };
console.log(name);

let { "name": name1, sex } = { 'name': '张三', 'age': 20 };
console.log(name1);
console.log(sex);

数组的析构, 数组的扩展运算

let num = [10, 'aaa', 'bbb'];
// 定义一个新数组，新数组会将原来数组中的数据合并，同时加入新的内容
let num1 = [...num, "张三", '李四', '王五'];
console.log(num1);

对象结构的扩展

let obj = { name: '张三', age: 20 };
// 修改对象obj中的某一个字段
obj = { ...obj, age: 30, sex: '男' };
console.log(obj);

箭头函数

ES6箭头函数的定义语法：

(参数列表)=>{函数体}
箭头函数中的this

箭头函数用来帮助开发人员快速定义函数，同时箭头函数中this的向取决于箭头函数定义时所处的上下文环境（即箭头函数在哪里定义，this就指代定义是对应的this），跟最终函数被谁调用没有任何关系，即箭头函数定义时this指代谁，之后不管函数被如何处理this永远固定

  say () {
    let count = 0;
    let timer = setInterval(() => {
      console.log(`你好我叫${this.name}`);
      count++;
      if (count >= 10) {
        clearInterval(timer);
      }
    }, 1000);
  }

对象方法（对象功能）

ES6输出特定格式的字符串可以使用，在中可以通过${variable}将外部变量嵌入到字符串指定位置

  introduce () {
    console.log(`
    我叫${this.name}, 
    我今年${this.age}岁, 
    性别${this.sex}`);
  }

ES6中类的概念

class Student {
  // 构造函数用来定义当前类Student初始化实例时对应的初始化原则
  constructor(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  
  //定义一个功能完成学生问题的回答
  say () {
    let count = 0;
    let timer = setInterval(() => {
      console.log(`你好我叫${this.name}`);
      count++;
      if (count >= 10) {
        clearInterval(timer);
      }
    }, 1000);
  }
}

// 创建对象
// let stu = new Student("张三", 20, "男");
const stu = new Student();
stu.name = "张三";
stu.age = 20;
stu.sex = "男"

stu.say();

ES6模块化开发

const fun = function (min, max) {
  return min < max ? Math.floor(Math.random() * (max - min + 1) + min) : 0;
}

模块化导出一
```
export { fun };
```
注：该种模块导出方式可以在当前模块文件中任何位置随意导出模块，灵活，同时外部使用时可以根据实际情况有选择的进行模块导出。
模块化导出二
```
const fun = function (min, max) {
  return min < max ? Math.floor(Math.random() * (max - min + 1) + min) : 0;
}
const randomColor = function () {
  return `rgb(${fun(0, 255)}, ${fun(0, 255)}, ${fun(0, 255)})`;
}

export default { fun, randomColor };
```
注：该种模块导出的方式只能使用一次，因此该模块导出方式只能在模块文件的最后写，而且一次性将所有模块全部导出

优点：阅读性很强，很容易帮助开发人员看清导出的模块内容，并且是直接将对象数据导出给外界，此时外界接收的是一个对象,不再进行解构赋值

缺点：一次性将所有模块导出，会造成模块的浪费，影响程序加载性能

模块化的导入

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<!-- babel是一个预编译器，作用是将ES6语法预编译成浏览器能够兼容的ES5语法 -->
<script type="text/babel" src="./es6_05.js"></script>
<script type="module">
  //模块的导入
  import obj from "./es6_05.js";
  console.log(obj.randomColor());
</script>

</html>

believealone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 基础篇

ES6基础letES6中用来定义一个块级作用域变量，该变量的作用域只能作用于当前定义的块级范围。let定义的变量自带有一个检索，如果发现同一个作用域出现了两个同名变量的定义，此时会直接报错。从而保证变量定义的安全性。let age = 21;const用来定义一个常量，即在程序运行过程中不允许被修改的量const PI = 3.14;解构赋值赋值运算符左右两个结构完全一致，此时ES6会根据结构，将右侧对应结构的数据赋值给左侧对应结构的变量let a = 20;let b = 30
复制链接

扫一扫