文章目录
变量声明
ES6语法规范中,推出了新的变量声明方式
// 声明一个变量
let 变量名称 = 值;
// 变量不能重复声明
let addr = "郑州市"
console.log(addr, "addr变量")
// Uncaught SyntaxError: Identifier 'addr' has already been declared
// 未处理的 语法 错误: 名称为 addr 已经被声明过,不能重复声明
// let addr = "北京市"
// console.log(addr, "addr变量")
① 变量不能重复声明
② 变量预解析问题:
ES6语法中,严格遵循变量先声明后使用、就近原则的规则;解除了变量预解析的操作方式;
ES6语法中在变量所在的作用域空间中,声明之前使用变量称为:暂时性死区!
③ 块级作用域:
ES6语法中,不再将变量的访问范围只划分为函数内部(局部变量)和函数外部(全局变量)
而是在之前的基础上提供了块级作用域,任何变量在访问时只能被当前花括号包含的范围访问,全局变量和局部变量的基础上提供了更加精确的作用域空间
常量
1、什么是常量
常量也是一种变量,变量中一旦存储数据就不允许修改!
常量的命名规则:
- 名称为字母、数字、下划线和$符号组成,数字不能开头
- 见名知意
- 常量由一个或者多个英文单词组成,单词全部大写;多个单词之间使用下划线分隔
2、声明语法
*// 声明一个常量
let 变量名称 = 值;**
const MAX_AGE = 120
基本类型Symbol
1、什么是Symbol
- ECMAScript 6语法中提出的一种基本数据类型,每个取值都是唯一的!
- 一个基本数据类型
- JS中有6种基本类型(常用):String/Number/Boolean/Null/Undefined/Symbol
**- JS中有7种基本类型:**String/Number/Boolean/Null/Undefined/Object/Symbol
2、Symbol使用语法
作用:为了获取一个唯一的值对象!
语法:
// 基本语法:获取一个唯一的值对象
let s = Symbol()
// 拓展语法:使用描述符获取一个唯一的值对象
// 描述符的作用,就是为了见名知意,知道这个Symbol()值对象的作用
let s = Symbol('描述符')
基本使用场景:
// 创建一个声明用户账号的唯一对象
let username = Symbol() // 唯一
// 创建一个声明用户密码的唯一对象
let password = Symbol() // 唯一
console.log(username == password) // false
// 创建一个声明用户账号的唯一对象
let username = Symbol('username') // 唯一
// 创建一个声明用户密码的唯一对象
let password = Symbol('password') // 唯一
小总结:
① Symbol是ES6提供的一种新的基本类型
② Symbol()是用来获取唯一的值对象,没有一个具体的数据值
③ Symbol主要用来在项目中模拟私有属性,用于数据保护的作用
字符串
1、字符串常见操作
函数 | 描述 |
---|---|
charAt(index) | 获取指定索引位置的字符 |
charCodeAt(index) | 获取指定索引位置的字符的ascii码 |
concat() | 连接字符串 |
indexOf() | 获取某个字符在字符串中的索引 |
includes() | 判断某个字符是否包含在字符串中 |
length | 获取字符串中字符的个数 |
split() | 按照指定字符拆分字符串 |
substr() | 截取字符串 |
substring() | 截取字符串 |
slice() | 截取字符串 |
toLowerCase() | 全部转换成小写 |
toUpperCase() | 全部转换成大写 |
trim() | 剔除两侧空格 |
2、ES6模板字符串
原生JS中关于字符串的拼接问题
// 1、原生JS字符串拼接
let name = "offcn"
let year = "2021"
console.log("公司名称:" + name + ", 年份:" + year)
模板字符串:字符串中直接操作变量的表达式
- 字符串使用反引号包含
- 字符串中使用固定语法**${变量}**操作变量数据
let name = "offcn"
let year = "2021"
// 2、模板字符串,在字符串中直接操作变量
console.log(`公司名称:${name},年份:${year}`)
3、ES6字符串函数
函数 | 描述 |
---|---|
s.startsWith(d) | 判断字符串s是否以字符串d开头 |
s.endsWith(d) | 判断字符串s是否以字符串d结尾 |
s.repeat(n) | 将一个字符串s连续输出n次 |
s.padStart(w, “0”) | 按照指定的宽度输出字符串,不够的话开始位置补充字符 |
s.padEnd(w, “.00”) | 按照指定宽度输出字符串,不够的话结束位置补充字符 |
六、数组
1、原生JS数组
创建数组
// 创建一个数组
var arr = []
var arr2 = new Array()
原生JS中存在的问题:创建一个只包含一个数值12的数组?
// 简洁语法
var arr = [12]
// 标准语法[问题]
var arr2 = new Array(12)
[empty, empty, empty, empty, empty, empty, empty...]
2、ES6数组扩展
ES6结合项目中的数组的常见使用场景,提供了两个操作函数
① Array.of()
- 作用:创建数组,优化了原生JS中的new Array()语法
② Array.from(类数组) - 作用:将类数组转化成数组对象
七、对象扩展
1、JSON子面量对象扩展
// 模拟接受了对象需要的数据[模拟参数]
let name = "汤姆"
let age = 20
// 1、字面量对象
let tom = {
name: name,
age: age,
study: function() {
console.log(this.name, "学习中..")
}
}
console.log(tom.name)
tom.study()
① 属性简化
ES6语法中,如果一个属性的名称和保存属性值的变量同名,可以简化编写
let name = "汤姆"
let age = 20
// 1、字面量对象
let tom = {
name: name, // 原生JS中的语法
// age: age,
age, // ES6简化后的语法
...
}
② 函数简化
JSON字面量对象中的函数,从原始的使用function关键字声明,简化为简写方式
let tom = {
name,
age,
//study: function() { // 原生 JS原始语法
// console.log(this.name, "学习中..")
//}
study () { // ES6简化语法
console.log(this.name, "学习中..")
}
}
八、Set集合
1、什么是Set
Set本身是集合(数学)的意思,在代码中用于存放不能重复的多个数据!
2、声明Set
标准语法
// 声明一个集合
let s = new Set()
// 声明包含数据的集合
let s2 = new Set([1,2,3,3,4,4,5]) // Set(){1,2,3,4,5}
3、Set中常见操作
- s.add(dat):在集合中添加一个数据
- s.has(dat):判断某个数据是否在集合中
- s.delete(dat):从集合中删除一个数据
- s.clear():清空集合中所有数据
九、Map映射
1、什么是Map
原生JS语法中,存在一种特殊的对象:JSON字面量对象,通过key:value的形式存储特定的数据,但是同样有一定的限制:key值只能是字符串!
ES6语法中针对JSON字面量对象中key只能是字符串的情况进行了扩展,可以让key是任意数据类型的数值,如可以是标签对象!扩展提供了Map类型的对象
总结:
什么是map?就是一种特殊的JSON字面量对象,key值可以是任意类型的数值!
2、声明Map对象
基本语法
// 创建一个map对象
let m = new Map()
操作数据
// 添加数据
m.set('name', "汤姆")
m.set('age', 22)
// 查询某个属性是否包含
m.has('name') // true
// 根据属性查看某个值
m.get('name') // 汤姆
// 查看所有属性名称
m.keys()
// 查看所有属性的值
m.values()
// 删除某个属性
m.delete('age') // {'name'=>'汤姆'}
// 清空映射
m.clear() // {}