JavaScript初学

最新推荐文章于 2024-05-07 22:48:20 发布

「已注销」

最新推荐文章于 2024-05-07 22:48:20 发布

阅读量183

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/EXOyangyeye/article/details/118225550

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript的基础知识，包括变量、数据类型、对象、函数、作用域、事件、字符串等方面，强调了变量提升、作用域的区别以及如何操作HTML DOM。还涵盖了常量、数据类型、对象和数组的操作，以及函数的定义、闭包和异步编程概念。

摘要由CSDN通过智能技术生成

JavaScript初学

ECMAScript 5（ES5，2009 年发布）—— JavaScript 最新的官方版本

输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
- 在插入的地方写入。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

可以在文本字符串中使用反斜杠对代码行进行换行

变量

存储信息的容器
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
声明（创建） JavaScript 变量
- 声明未赋值——undefined
var——不具备块级作用域的特性，在 {} 外依然能被访问到
- var重新声明 var 变量，该变量的值不会丢失
- 函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量
- 块中重新声明变量也会重新声明块外的变量
- 用 var 关键字声明的变量在任何地方都可以修改
- var 关键字定义的变量可以在使用后声明—变量提升
let—— 具备块级作用域的特性
- 在函数体内使用 var 和 let 关键字声明的变量类似，它们的作用域都是 局部的
- 在函数体外或代码块外使用 var 和 let 关键字声明的变量类似，它们的作用域都是 全局的
- 在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
  
  在 HTML 中, 全局作用域是针对 window 对象。
  
  使用 var 关键字声明的全局作用域变量属于 window 对象
  
  使用 let 关键字声明的全局作用域变量不属于 window 对象
- 不能变量提升
const——块级作用域特性
- const 定义的变量并非常量，定义了一个常量引用一个值。可以说值可以改变，常量不可变
  
  可以改变对象的属性、增加属性等，但不能对象直接重新赋值
  
  数组同理
- 可以使用Object.freeze()方法来 **冻结变量 **变成真正的常量。
在相同的作用域或块级作用域中，一个变量不能重新声明，只有var可以重新声明var

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

JavaScript 拥有 动态类型——意味着相同的变量可用作不同的类型
字符串可以是引号中的任意文本，可以使用单引号或双引号
JavaScript 只有一种数字类型，数字可以带小数点，也可以不带
- JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储
布尔（逻辑）只能有两个值：true 或 false
一个数组中可以有不同的对象—对象元素、函数、数组等

数组可以是一个对象哈，有很多属性和方法
- 如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象
  
  执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误
对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，属性由逗号分隔

两种寻址方式
声明新变量时，可以使用关键词 “new” 来声明其类型。JavaScript 变量均可以声明为对象。

Undefined 和 Null

null是一个只有一个值的特殊类型，表示一个空对象引用
- typeof 检测 null 返回是object
- 一般用于主动释放指向对象的引用
JavaScript 中, undefined 是一个没有设置值的变量，未定义、声明未赋值
- 任何变量都可以通过设置值为 undefined 来清空。类型为 undefined
区别：
- null 和 undefined 的值相等，但类型不等
- null 用于对象, undefined 用于变量，属性和方法。
- 对象只有被定义才有可能为 null，否则为 undefined

注意typeof：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

对象

JavaScript 对象是属性变量的容器
方法
- name = person.fullName(); ——作为方法访问呢
- name = person.fullName; ——作为属性访问，返回函数定义字符串

函数

包裹在花括号中的代码块，前面使用了关键词 function，可以串参、返回值，不必写返回类型

作用域

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用
全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。

事件

常见事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串

代码	输出
\ ’	单引号
\ "	双引号
\ \	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

注意：

=== 为绝对相等，即数据类型与值都必须相等
switch 语句会使用恒等计算符(===)进行比较！
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
如果把数字与字符串相加，结果将成为字符串
循环方式二：for (x in person) {} // x 为属性名

类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值

number

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

Date()

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

字符串转数字

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

字符转数字

Operator + 可用于将变量转换为数字：

var y = “5”; // y 是一个字符串
var x = + y; // x 是一个数字

如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)：

var y = “John”; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)

日期转数字

d = new Date();
Number(d) // 返回 1404568027739

自动类型转换

5 + null // 返回 5 null 转换为 0
“5” + null // 返回"5null" null 转换为 “null”
“5” + 1 // 返回 “51” 1 转换为 “1”
“5” - 1 // 返回 4 “5” 转换为 5

正则表达式

Regular Expression，在代码中常简写为regex、regexp或RE
语法：***/正则表达式主体/修饰符(可选)***

修饰符描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()：
- search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
- replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象
- test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false
- exec() 方法用于检索字符串中的正则表达式的匹配
  
  该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

错误

 try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }

变量提升：

函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部
只有声明的变量会提升，初始化的不会

严格模式：

严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明
不允许使用未声明的变量
不允许删除变量或对象、函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
…

this关键字

在方法中，this指向该方法所属对象
单独使用，this指向全局对象。在浏览器中，window就是该全局对象
默认模式函数中，this指向全局对象
严格模式函数中，this为undefined
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素
显示函数绑定：
- 在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象

JSON

JavaScript Object Notation——JavaScript 对象表示法，一种轻量级的数据交换格式
数据为键/值对
数据由逗号分隔
大括号保存对象
方括号保存数组
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

异步编程

异步（Asynchronous, async）同步（Synchronous, sync）

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。
setTimeout(print, 3000);

上面的setTimeout 是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”
异步回调广泛应用于 AJAX 编程

JS 函数

函数定义

函数可以通过声明定义，也可以是一个表达式，或者通过内置的 JavaScript 函数构造器（Function()）定义

函数声明——

function functionName(parameters) {
  执行的代码
}

表达式定义——var x = function (a, b) {return a * b};

以上函数实际上是一个 匿名函数。

函数存储在变量中，不需要函数名称，通常通过变量名来调用
函数提升：同变量提升，使用表达式定义函数时无法提升

自调用函数

如果表达式后面紧跟 () ，则会自动调用

(function () {
  var x = "Hello!!";   // 实际上是一个 **匿名自我调用的函数**
})();

函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数。

箭头函数

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的
没有参数的函数应该写成一对圆括号
如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}
当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
箭头函数是不能提升的，所以需要在使用之前定义
使用 const 比使用 var 更安全，因为函数表达式始终是一个常量

函数参数

JavaScript定义显示参数（形参）时没有指定参数类型
对隐式参数没有进行类型和个数检测
如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。但可以使用 arguments 对象来调用
函数内置对象 arguments 包含了函数调用的参数数组
通过值传递参数——函数不会改变外界参数
通过对象传递参数——在函数内部修改对象的属性就会修改其初始的值

函数闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

所有函数都能访问它们上一层的作用域
内嵌函数——嵌套函数可以访问上一层的函数变量
- 变量 add 指定了函数自我调用的返回值
- 自我调用函数只执行一次，设置计数器为 0，并返回函数表达式
- add变量可以作为一个函数使用，它可以访问函数上一层作用域的计数器
- 计数器受匿名函数的作用域保护，只能通过 add 方法修改

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3

HTML DOM

文档对象模型（Document Object Model），通过 DOM，可访问 HTML 文档的所有元素

DOM HTML tree

查找HTML元素

通过 id 查找 HTML 元素

var x=document.getElementById("intro");

通过标签名

var x=document.getElementById("main");//查找id="main"元素中所有p元素
var y=x.getElementsByTagName("p");

通过类名

var x=document.getElementsByClassName("intro");

改变HTML输出流

document.write() 可用于直接向 HTML 输出流写内容
不要在文档(DOM)加载完成之后使用 document.write()，这会覆盖该文档

修改HTML元素

改变内容

document.getElementById(id).innerHTML=新的 HTML内容
改变属性

document.getElementById(id).attribute=新属性值
改变CSS

document.getElementById(id).style.property=新样式
改变事件

document.getElementById(“myBtn”).onclick=function(){displayDate()};

添加监听事件

addEventListener() 方法用于向指定元素添加事件句柄
```
element.addEventListener(event, function, useCapture);
```
第一个参数是事件的类型 (如 “click” 或 “mousedown”)

第二个参数是事件触发后调用的函数

第三个参数是个布尔值用于描述事件是冒泡还是捕获，该参数是可选的
- 事件传递定义了元素事件触发的顺序
  - 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素
  - 捕获相反
  - 默认值为 false，即冒泡传递，当值为 true 时，事件使用捕获传递
添加的事件句柄不会覆盖已存在的事件句柄
可以向一个元素添加多个事件句柄
可以向同个元素添加多个同类型的事件句柄，如两个 “click” 事件
可以向任何 DOM 对象添加事件监听（HTML 元素, HTML 文档, window 对象等）
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听
使用 removeEventListener() 方法来移除事件的监听
```
element.removeEventListener("mousemove", myFunction);
```