JavaScript 进阶 - 第2天
三、解构赋值
知道解构的语法及分类,使用解构简洁语法快速为变量赋值。
解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。
3.1 数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示:
<script>// 普通的数组let arr = [1, 2, 3];// 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b clet [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3
</script>
总结:
- 赋值运算符
=
左侧的[]
用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量 - 变量的顺序对应数组单元值的位置依次进行赋值操作
- 变量的数量大于单元值数量时,多余的变量将被赋值为
undefined
- 变量的数量小于单元值数量时,可以通过
...
获取剩余单元值,但只能置于最末位 - 允许初始化变量的默认值,且只有单元值为
undefined
时默认值才会生效
注:支持多维解构赋值,比较复杂后续有应用需求时再进一步分析
3.2 对象解构
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:
<script>// 普通对象let user = {name: '小明',age: 18};// 批量声明变量 name age// 同时将数组单元值 1 2 3 依次赋值给变量 a b clet {name, age} = user;console.log(name); // 小明console.log(age); // 18
</script>
总结:
- 赋值运算符
=
左侧的{}
用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量 - 对象属性的值将被赋值给与属性名相同的变量
- 对象中找不到与变量名一致的属性时变量值为
undefined
- 允许初始化变量的默认值,属性不存在或单元值为
undefined
时默认值才会生效
注:支持多维解构赋值,比较复杂后续有应用需求时再进一步分析
JavaScript 进阶 - 第2天
了解面向对象编程的基础概念及构造函数的作用,体会 JavaScript 一切皆对象的语言特征,掌握常见的对象属性和方法的使用。
- 了解面向对象编程中的一般概念
- 能够基于构造函数创建对象
- 理解 JavaScript 中一切皆对象的语言特征
- 理解引用对象类型值存储的的特征
- 掌握包装类型对象常见方法的使用
一、面向对象
了解面向对象的基础概念,能够利用构造函数创建对象。
1.1 构造函数
构造函数是专门用于创建对象的函数,如果一个函数使用 new
关键字调用,那么这个函数就是构造函数。
<script>// 定义函数function foo() {console.log('通过 new 也能调用函数...');}// 调用函数new foo;
</script>
总结:
- 使用
new
关键字调用函数的行为被称为实例化 - 实例化构造函数时没有参数时可以省略
()
- 构造函数的返回值即为新创建的对象
- 构造函数内部的
return
返回的值无效!
注:实践中为了从视觉上区分构造函数和普通函数,习惯将构造函数的首字母大写。
1.2 实例成员
通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。
<script>// 构造函数function Person() {// 构造函数内部的 this 就是实例对象// 实例对象中动态添加属性this.name = '小明';// 实例对象动态添加方法this.sayHi = function () {console.log('大家好~');}}// 实例化,p1 是实例对象// p1 实际就是 构造函数内部的 thislet p1 = new Person();console.log(p1);console.log(p1.name); // 访问实例属性p1.sayHi(); // 调用实例方法
</script>
总结:
- 构造函数内部
this
实际上就是实例对象,为其动态添加的属性和方法即为实例成员 - 为构造函数传入参数,动态创建结构相同但值不同的对象
- 实例对象的
constructor
属性指向了构造函数 instanceof
用于检测实例对象对应的构造函数
注:构造函数创建的实例对象彼此独立互不影响。
1.3 静态成员
在 JavaScript 中底层函数本质上也是对象类型,因此允许直接为函数动态添加属性或方法,构造函数的属性和方法被称为静态成员。
<script>// 构造函数function Person(name, age) {// 省略实例成员}// 静态属性Person.eyes = 2;Person.arms = 2;// 静态方法Person.walk = function () {console.log('^_^人都会走路...');// this 指向 Personconsole.log(this.eyes);}
</script>
总结:
- 静态成员指的是添加到构造函数本身的属性和方法
- 一般公共特征的属性或方法静态成员设置为静态成员
- 静态成员方法中的
this
指向构造函数本身
二、一切皆对象
体会 JavaScript 一切皆对象的语言特征,掌握各引用类型和包装类型对象属性和方法的使用。
在 JavaScript 中最主要的数据类型有 6 种,分别是字符串、数值、布尔、undefined、null 和 对象,常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型,对象也被称为引用类型。
在 JavaScript 内置了一些构造函数,绝大部的数据处理都是基于这些构造函数实现的,JavaScript 基础阶段学习的 Date
就是内置的构造函数。
<script>// 实例化let date = new Date();// date 即为实例对象console.log(date);简单数据类型:字符串、数字、布尔、undefined、null(引用类型)复杂数据类型:对象(数组)</script>
甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数,用于创建对应类型的数据。
2.1 引用类型
Object
Object
是内置的构造函数,用于创建普通对象。
<script>// 通过构造函数创建普通对象let user = new Object({name: '小明', age: 15});// 这种方式声明的变量称为【字面量】let student = {name: '杜子腾', age: 21}// 对象语法简写let name = '小红';let people = {// 相当于 name: namename,// 相当于 walk: function () {}walk () {console.log('人都要走路...');}}console.log(student.constructor);console.log(user.constructor);console.log(student instanceof Object);
</script>
下图展示了普通对象在内存中的存储方式:普通对象数据保存在堆内存之中,栈内存中保存了普通对象在堆内存的地址。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38jCxZp2-1668165425695)(assets/object-1.png)]
普能对象在赋值时只是复制了栈内中的地址,而非堆内存中的数据,如下图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZyFjJc2-1668165425697)(assets/object-2.png)]
普通对象赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。
总结:
- 推荐使用字面量方式声明对象,而不是
Object
构造函数 Object.assign
静态方法创建新的对象Object.keys
静态方法获取对象中所有属性Object.values
表态方法获取对象中所有属性值
面试回答堆与栈的区别:
- 堆和栈是内存中的数据存储空间
- 简单类型的数据保存在内存的栈空间中
- 引用类型的数据保存在内存的堆空间中,栈内存中存取的是引用类型的地址(房间号)
Array
Array
是内置的构造函数,用于创建数组。
<script>// 构造函数创建数组let arr = new Array(5, 7, 8);// 字面量方式创建数组let list = ['html', 'css', 'javascript'];console.log(list.constructor);console.log(list instanceof Array);
</script>
数组在内存中的存储方式与普通对象一样,如下图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCUUtNtt-1668165425698)(assets/array-1.png)]
数组在赋值时只是复制了栈内中的地址,而非堆内存中的数据,如下图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8PVzu9xn-1668165425698)(assets/array-2.png)]
数组赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。
总结:
- 推荐使用字面量方式声明数组,而不是
Array
构造函数 - 实例方法
forEach
用于遍历数组,替代for
循环 - 实例方法
filter
过滤数组单元值,生成新数组 - 实例方法
map
迭代原数组,生成新数组 - 实例方法
join
数组单元素拼接成了符串 - 实例方法
concat
合并两个数组,生成新数组 - 实例方法
sort
对原数组单元值排序 - 实例方法
splice
删除或替换原数组单元 - 实例方法
indexOf
检索数组单元值 - 实例方法
reverse
反转数组 - 静态方法
from
伪数组转成数组
RegExp
RegExp
内置的构造函数,用于创建正则表达式。
Regular Expression
<script>// 构造函数创建正则let reg = new RegExp('\d', 'i');// 字面量方式创建正则// let reg = /(\d)/i;reg.exec('123');
</script>
总结:
- 推荐使用字面量定义正则表达式,而不是
RegExp
构造函数 RegExp
静态属性 $1、$2、$3、… 获取正则分组单元
补充:当使用构造函数创建正则时有两种写法:
<script>// 使用 // 定义正则let reg = new RegExp(/\d/);// 或者使用 '' 定义正则// 如果使用引号定义正则时,\d、\s、\w需要多添加一个 \let reg1 = new RegExp('\\d');
</script>
2.2 包装类型
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法,如下代码举例:
<script>// 字符串类型let str = 'hello world!';// 统计字符的长度(字符数量)console.log(str.length);// 数值类型let price = 12.345;// 保留两位小数price.toFixed(2);
</script>
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型。
String
String
是内置的构造函数,用于创建字符串。
<script>// 使用构造函数创建字符串let str = new String('hello world!');// 字面量创建字符串let str2 = '你好,世界!';// 检测是否属于同一个构造函数console.log(str.constructor === str2.constructor); // trueconsole.log(str instanceof String); // false
</script>
总结:
- 推荐使用字面量方式声明字符串,而不是
String
构造函数 - 实例属性
length
用来获取字符串的度长 - 实例方法
split
用来将字符串拆分成数组 - 实例方法
toUpperCase
用于将字母转换成大写 - 实例方法
toLowerCase
用于将字母转换成小写 - 实例方法
slice
用于字符串截取 - 实例方法
indexOf
检测是否包含某字符 - 实例方法
startsWith
检测是否以某字符开头 - 实例方法
endsWith
检测是否以某字符结尾 - 实例方法
replace
用于替换字符串,支持正则匹配 - 实例方法
padStart
固定长度字符开始位置打补丁 - 实例方法
padEnd
固定长度字符结束位置打补丁 - 实例方法
match
用于查找字符串,支持正则匹配
注:String 也可以当做普通函数使用,这时它的作用是强制转换成字符串数据类型。
Number
Number
是内置的构造函数,用于创建数值。
<script>// 使用构造函数创建数值let x = new Number('10');let y = new Number(5);// 字面量创建数值let z = 20;// 检测是否属于同一个构造函数console.log(x.constructor === z.constructor);
</script>
总结:
- 推荐使用字面量方式声明数值,而不是
Number
构造函数 - 实例方法
toFixed
用于设置保留小数位的长度
注:Number 也可以当做普通函数使用,这时它的作用是强制转换成数值数据类型。
Boolean
Boolean
是内置的构造函数,用于创建布尔值。
<script>// 使用构造函数创建布尔类型let locked = new Boolean('10');// 字面量创建布尔类型let flag = true;// 检测是否属于同一个构造函数console.log(locked.constructor === flag.constructor);
</script>
总结:
- 推荐使用字面量方式声明布尔值,而不是
Boolean
构造函数
注:Boolean 也可以当做普通函数使用,这时它的作用是强制转换成布尔类型数据,由其它数据类型转换成布尔类型的数据被称为真值(truly)或假值(falsly)。
2.3 写在最后
至此对 JavaScript 有了更深的理解,即 JavaScript 中一切皆为对象,还有以前学习的 window、Math 对象,最后补充一点无论是引用类型或是包装包类型都包含两个公共的方法 toString
和 valueOf
<script>// 对象类型数据let user = {name: '小明', age: 18}// 数值类型 let num = 12.345;// 字符串类型let str = 'hello world!';str.valueOf(); // 原始值user.toString(); // 表示该对象的字符串
</script>
总计:
valueOf
方法获取原始值,数据内部运算的基础,很少主动调用该方法toString
方法以字符串形式表示对象
值(falsly)。
2.3 写在最后
至此对 JavaScript 有了更深的理解,即 JavaScript 中一切皆为对象,还有以前学习的 window、Math 对象,最后补充一点无论是引用类型或是包装包类型都包含两个公共的方法 toString
和 valueOf
<script>// 对象类型数据let user = {name: '小明', age: 18}// 数值类型 let num = 12.345;// 字符串类型let str = 'hello world!';str.valueOf(); // 原始值user.toString(); // 表示该对象的字符串
</script>
总计:
valueOf
方法获取原始值,数据内部运算的基础,很少主动调用该方法toString
方法以字符串形式表示对象
JavaScript 进阶 - 第2天相关推荐
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了"删除& ...
- JavaScript进阶系列01,函数的声明,函数参数,函数闭包
本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...
- javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...
- JavaScript进阶5-学习笔记
文章目录 JavaScript进阶5-学习笔记 例子 JavaScript进阶5-学习笔记 参考理解:https://blog.csdn.net/hhhmonkey/article/details/1 ...
- JavaScript进阶4-学习笔记
文章目录 JavaScript进阶4-学习笔记 递归 JavaScript进阶4-学习笔记 前端: 根据Ui写页面,使用vuecli+vue---测试功能---需要数据(json,array,字符串) ...
- JavaScript进阶3-学习笔记
文章目录 JavaScript进阶3-学习笔记 闭包 JavaScript进阶3-学习笔记 //组件封装 什么是封装? 将冗余的代码精简化 例如:写代码:a页面有一个函数,b页面也需要这个函数,很多人 ...
- JavaScript进阶2-学习笔记
文章目录 JavaScript进阶2-学习笔记 this指针 如何改变this指向 事件委托.事件冒泡 JavaScript进阶2-学习笔记 this指针 This是什么? this是Javascri ...
- JavaScript进阶1-学习笔记
文章目录 JavaScript进阶1 预解析 作用域 面向对象的写法 JavaScript进阶1 预解析 //预解析 //1) console.log(a); var a = 1; //解析过程 va ...
- javascript进阶课程--第一章--函数
javascript进阶课程--第一章--函数 学习要点 了解内存管理 掌握全局函数的使用 知识点 基本类型和引用类型 基本类型值有:undefined,NUll,Boolean,Number和Str ...
- javascript进阶课程--第三章--匿名函数和闭包
javascript进阶课程--第三章--匿名函数和闭包 一.总结 二.学习要点 掌握匿名函数和闭包的应用 三.匿名函数和闭包 匿名函数 没有函数名字的函数 单独的匿名函数是无法运行和调用的 可以把匿 ...
最新文章
- 【读书笔记】iOS-网络-解析响应负载
- vim 初学简单设置
- node实战学习纪录
- Java---模拟图灵机的运行过程
- 本月与上月对比数据叫什么_财务人事应会Excel数据对比Vlookup函数快速核定变动...
- Amazon上最畅销的「操作系统书」有哪些?
- memcpy(cv::Mat.data,unsigned char *,320x240),保存数据失真问题解决方法
- 【英语学习】【WOTD】intoxicate 释义/词源/示例
- 案例:实现在购物车中添加商品和删除购物车中指定商品的功能
- DIV+CSS颜色边框背景等样式
- BLP安全操作系统---道里云公司参展英特尔北京IDF峰会介绍(三)
- vue.js 获取当前屏幕的宽度_js获取浏览器和屏幕的各种宽度高度
- 信息学奥赛 python 教程_浦东信息学奥赛课程价格表,Python编程课程
- 区块链电子证据的司法应用现状与展望
- 去了字节跳动,才知道年薪 40w 的 90 后 Android 开发者有这么多?
- 物联网硬件安全与整改梳理(1)
- 苹果8黑屏无法强制开机_iphonexr突然黑屏无法开机怎么解决?
- Big-man酷谈overflow
- ConstrainLayout约束布局
- SpringBoot——Thymeleaf常见属性-使用th:each遍历数组、List、Map