【ES6】01-ECMAScript基本认识 + 变量常量 + 数据类型

【ES6】专栏的设立是对前面JS的进一步延申学习和复习，集中于新语法的使用。

本专栏中对于已经讲解过的知识点进行简单复习。

本文主要介绍ES6的基本和一些简单的知识点。

目录

1. ECMAScript基本认识

1.1 什么是 ECMAScript?

1.2 ES6 和 JavaScript 有什么区别

2. 变量和常量

2.1 变量 

2.2 常量

3. 数据类型

3.1 字符串、数值、布尔

字符串类型 string

数值类型 number

布尔类型 boolean

3.2 对象Object

3.3 map

3.4 set

3.5 数组

3.6 函数

3.7 类

1. ECMAScript基本认识

1.1 什么是 ECMAScript?

官方定义:

ECMAScript 是定义脚本语言的规范, 而 JavaScript 是遵循 ECMAScript 规范实现的一种编程语言

通俗说法: ECMAScript 好比是一本书的目录, 而 JavaScript 是这本书的具体内容

1.2 ES6 和 JavaScript 有什么区别

ES6(ECMAScript 2015)

是ECMAScript规范的第六个版本,而JavaScript是基于ECMAScript规范实现的编程语言。

ES6可以被看作是 JavaScript 的一个重要的版本更新

ES6引入了"块级作用域",使用 let 和 const 关键字来声明变量和常量,使变量的作用域清晰可控

引入了"箭头函数",箭头函数比传统的函数语法更简洁, 具有更少的冗余代码

引入了"类(Class)"的概念,这是一种基于原型的面向对象编程的语法糖, 使用类可以更方便地创建和管理对象

引入了"模板字符串", 使用反引号(`)创建字符串可以方便地嵌入变量和表达式

引入了"解构赋值", 这是一种新的赋值语法,可以将数组或对象的属性直接赋值给变量

引入了"函数参数默认值"

引入了"Promise对象", 简化了异步编程, 使其更可读和可维护

引入了 Set、Map 等

引入了"模块化"(ES Module)

2. 变量和常量

2.1 变量 

变量(Variable) 是用于存储数据的名称(标识符), 变量可以是任何类型, 如 "数值、字符串" 等

用 let 来声明变量

注意：

ES6不区分整型和浮点型, 所有数字都使用 number类型 来表示

    <script>
        // 变量
        let name = 'zzz';
        console.log(name);  // zzz
        console.log(typeof name);  // 检测类型  string

        let money = 100;
        console.log('金额',money);
        console.log(typeof money);  // Number
    </script>

2.2 常量

常量(Constant) 是一个固定的值, 在程序运行中常量的值保持不变

用 const 声明常量

常量通常用来表示不会改变的值, 如数学中的 π(圆周率) PI≈3.14159265359

    <script>
        // 常量
        const PI = 3.14;
        console.log(PI);
        
        // PI = 3.1415;
        // console.log(PI);  // 报错
    </script>

3. 数据类型

3.1 字符串、数值、布尔

字符串类型 string

定义 字符串类型用于存储字符序列  也可以用 ' ' 表示

let name = "zzz" //姓名为zzz

数值类型 number

定义 用于存储数字, 可以表示整数、浮点数

let balance = -100 //账户余额为-100元
let weight = 60.5 //体重为60.5公斤

布尔类型 boolean

定义 布尔类型只能取两个值,true(真) 和 false(假)

let tv = true //电视 - true(开)

3.2 对象Object

定义 对象是一种复合的数据类型, 可以通过键值对的方式存储多个值

    <script>
        const obj = {
            uname : 'zzz',
            age : 18,
            weight : 60
        }
        // 用 对象.属性名 表示
        console.log('姓名',obj.uname);
        console.log('年龄',obj.age);
        console.log('体重',obj.weight);
        console.log(obj);
    </script>

3.3 map

定义 map 是一种特殊的数据结构,用于存储键值对的有序集合

        // map
        let girl = new Map([
            ['name','zzz'],
            ['age',18]
        ])
        console.log(girl);
        console.log(typeof girl);

map 是 new 出来的一个对象

数据类型比如 字符串就需要加引号

最后输出的是箭头的表示

注意：

Map相对于对象提供了更灵活、有序、高效的键值对存储和操作方式,当需要在大量键值对中快速查找或删除特定键值对时, Map比对象更高效

Map提供了一些便捷的方法来操作键值对, 如: get()、set()、delete()

Map提供了一些便捷的迭代方法, 如: forEach()、keys()、values()、entries()

这些方法和操作后续会介绍。

3.4 set

定义 Set 是一种特殊的数据结构, 用于存储无序且唯一的值的集合

使用 new 关键字

        // set
        let number = new Set([1,2,3,2,1,7]);   // 包含6个整数的set集合
        console.log(number);   // 1,2,3,7 无序且唯一
        console.log(typeof number); //Object

如果将其中的类型修改

        let number = new Set([1,2,3,'2',1,7]);
        console.log(number);   // 无序且唯一
        console.log(typeof number); //Object

类型不同的也会认为是不同的，所以会打印出来

3.5 数组

 定义 数组是一种有序集合, 可以包含不同类型的元素，并且数组的长度是可变的

        // 数组
        let arr = ['a','b','c','b','c',1,2];
        console.log(arr);  // 不唯一、可以不同类型
        console.log(typeof arr);

3.6 函数

定义 函数是一段可重复执行的代码块，可以接收输入参数并返回一个值或执行某些操作

函数类似计算器，我只需要把数字给计算器即可，就能得到最后的值

使用 function(){} 

        // 函数
        function add(x,y){   //add是函数的名字，x,y是传入的两个参数
            // 想让结果反馈 需要return
            return x+y;
        }
        // 首先需要调用函数，上述的内容才有效果
        console.log(add(1,2));  //3

3.7 类

定义 类是一种蓝图或模板，用于创建具有相同属性和方法的对象

比如人类：姓名年龄身高体重 等共有的属性 还有吃饭 等方法

所有人类，随便一个人比如张三 他是一个个体，但是他属于人类这个类

使用 class 关键字

        // 类
        class Person {
            // name age
            // 定义构造函数 构造这个类的函数 constructor
            constructor(userName,userAge){
                this.name = userName;      //this指向他的这个类
                this.age = userAge;
            }

            // 定义一个类的方法来打印类的属性
            info(){
                console.log(this.name);
                console.log(this.age);
            }
        }
        let a = new Person('zzz',18);  // 实例化这个类
        // 调用类中的方法
        a.info();  // zzz 18

        // 不同人调用同一个类 实例化出不同的结果

本文主要介绍ES6的基本和一些简单的知识点。后续文章将涉及对其中部分内容的详解。