JavaScript高级基础篇 ①

简介: JavaScript高级基础篇 ①

数据类型


数据类型的分类


分类:

基本数值类型

Number: 任意数值

String: 任意文本

Boolean: true/false

undefined: undefined

null: null

引用数值类型

Object: 任意对象

Array: 特别的对象类型(下标/内部数据有序)

Function: 特别的对象类型(可执行)

类型判断方法的使用:

方法一:typeof

注意 !typeof返回的是数据类型的字符串表达形式

可以区别: 数值, 字符串, 布尔值, undefined, function

不能区别: null与对象与数组

代码演示

image.png

2.方法二:instanceof

  • 专门用来判断对象数据的类型: Object, Array与Function
  • 注意!使用instanceof来判断其他类型时都返回false
  • 代码演示

image.png

3.方法三:===
* 可以判断: undefined和null
* 代码演示

console.log(undefined===null) //falseconsole.log(undefined==null)  //true

数据类型一些相关问题


  • 问题一:undefined与null的区别?
  • undefined:定义了但没赋值
leta=null;
*null:定义了但值为null```javascriptlet a=null;* 问题二:什么时候给变量赋值为null呢?* var a = null a将指向一个对象, 但对象此时还没有确定 * a = null 让a指向的对象成为垃圾对象* 代码演示```javascriptleta=null;
name="xiaoming"age=18a={
name:name,
age:age  }
a=null

数据_变量_内存之间的关系


1、什么是数据?

储存在内存中代表数据的特定信息,本质是0101二进制

具有可读可传递的基本特性

2、什么是变量?

值可以变化的量,由变量名与变量值组成

一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容

3、什么是内存?

内存的空间是临时的, 而硬盘的空间是持久的

产生和死亡: 通电==>产生一定容量的存储空间==>存储各种数据和处理数据==>断电==>内存全部消失

内存分类

栈: 全局变量, 局部变量 (空间较小)

堆: 对象 (空间较大)

4、内存,数据, 变量三者之间的关系?

内存是一个容器, 用来存储程序运行需要操作的数据

变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(读/写)内存中的数据

变量保存的值类型


  • 代码演示及说明
leta=xxx;
xxx=基本数值类型xxx=引用数值类型xxx=变量ifxxx是基本数值类型,那么a保存的就是这个数据ifxxx是引用数值类型,那么保存的是这个引用数值类型的地址值ifxxx是变量,那么if变量是基本数值类型,那么a保存的就是这个数据那么if变量是引用数值类型,那么保存的是这个引用数值类型的地址值

关于引用数值类型的赋值变量问题



n个引用变量指向同一个对象,通过一个引用变量修改对象内部数据, 另一个引用变量也看得见

varobj1= {}
varobj2=obj1obj2.name='xiaoming'console.log(obj1.name) //xiaoming functionf1(obj) {
obj.age=12}
f1(obj2)
console.log(obj1.age) //12

图解:

image.png

2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象

varobj3= {name: 'xiaoMing'}
varobj4=obj3obj3= {name: 'JACK'}
console.log(obj4.name)//xiaoMingfunctionf2(obj) {
obj= {name: 'Bob'}
 }
f2(obj4)
console.log(obj4.name) //xiaoMing

图解

image.png

引用数值类型


对象


1、什么是对象?

多个数据的集合体(封装体)

用于保存多个数据的容器

2、为什么要用对象?

便于对多个数据进行统一管理

3、对象的组成?

属性

代表现实事物的状态数据

由属性名和属性值组成

属性名都是字符串类型, 属性值是任意类型

方法

是特别的属性==>属性值是函数

4、如何访问对象内部数据?

对象名.属性名 :编码简单, 但有时不能用

对象名 [‘属性名’] :编码麻烦, 但通用

5、 对象名 [‘属性名’]:应用场景

varp= {}
情形一:属性名不是合法的标识名p.content-type='text/json'不正确p['content-type'] ='text/json'正确情形二: 属性名不确定varprop='xxx'varvalue=123p.prop=value不正确p[prop] =value正确

函数


什么是函数?

具有特定功能的n条语句的封装体

只有函数是可执行的, 其它类型的数据是不可执行的

函数也是对象

为什么要用函数?

提高代码复用

便于阅读和交流

如何定义函数?

函数声明

表达式

如何调用(执行)函数?

test()

new test()

obj.test()

test.call/apply(obj)

函数的调用图解:

image.png

回调函数


什么函数才是回调函数?

  • 自己定义的
  • 没有直接调用
  • 但最终它执行了(在特定条件或时刻)
  • 常见的回调函数?
  • DOM事件函数
  • 定时器函数
  • ajax回调函数
  • 生命周期回调函数

回调函数代码如下:

//1. DOM事件函数varbtn=document.getElementById('btn')
btn.onclick=function () {
alert(this.innerHTML)
 }
//2. 定时器函数setInterval(function () {
alert('到点啦!')
 }, 2000)

立即执行函数 _ IIFE


理解

  • 全称: Immediately-Invoked Function Expression 立即调用函数表达式
  • 别名: 匿名函数自调用

作用

  • 隐藏内部实现
  • 不污染外部命名空间
    代码如下:
//1. DOM事件函数varbtn=document.getElementById('btn')
btn.onclick=function () {
alert(this.innerHTML)
}
//2. 定时器函数setInterval(function () {
alert('到点啦!')
}, 2000)

函数中This的指向


this是什么?

一个关键字, 一个内置的引用变量

在函数中都可以直接使用this

this代表调用函数的当前对象

在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的

如何确定this的值?

obj.This()
This()
newThis()
This.call(thisObj)
This.apply(thisObj1)

image.png

image.png

总结


以上就是javaScripta入门的基础知识,有问题请评论区留言,发现问题,解决问题,巩固自己的基础知识,这才是我写博客的原因之一,最后觉得这篇文章对自己有帮助请帮我点个赞,让我知道我的文章是可以帮助到别人的。

相关文章
|
7月前
|
前端开发 JavaScript 开发者
深入理解JavaScript:从基础到高级应用
深入理解JavaScript:从基础到高级应用
113 0
|
7月前
|
JavaScript 前端开发 Java
掌握 JavaScript:从初学者到高级开发者的完整指南(一)
掌握 JavaScript:从初学者到高级开发者的完整指南(一)
|
7月前
|
JSON JavaScript 前端开发
掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)
掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)
|
7月前
|
JavaScript 前端开发 索引
JavaScript字符串检查:从基础到高级
【2月更文挑战第26天】
70 0
JavaScript字符串检查:从基础到高级
|
6月前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
63 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
7月前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
7月前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
37 6
|
7月前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
7月前
|
存储 JavaScript 前端开发
JavaScript高级主题:JavaScript 中的 Map 和 Set 是什么?它们有什么区别?
JavaScript的ES6引入了Map和Set数据结构。Map用于存储键值对,适合通过键进行查找,而Set则存储唯一值,无键且不支持键查找。两者在性能上表现出色,尤其在频繁的写入删除操作中。选择使用哪个取决于具体应用场景:键值对需求选Map,独特值集合则选Set。
54 2
|
7月前
|
存储 JSON JavaScript
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(三)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
55 1