JS 基础学习一-CSDN博客

本文链接：https://blog.csdn.net/jomes_wang/article/details/111627398

每一天都学习一点点，每一天都成长一点点，这都将带来与众不同的变化

一：为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

二：基础知识

2.1 显示数据

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

2.2 注释

单行注释以 // 开头。

多行注释以 /* 开头，以 */ 结尾。

2.3 变量

2.3.1 命名

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头(但是在本教程中我们不会这么做)
名称对大小写敏感(y 和 Y 是不同的变量)
保留字(比如 JavaScript 的关键词)无法用作变量名称

2.3.2 声明变量

使用 var 或者 let 来定义变量，无需在意变量类型。

其中var的作用域为全局，而 let 的作用域只在代码块内。

var x = '3' + 2 
// 结果是 '32'
var y = 3 + 2 + '9'
//结果是 '79'

2.4 运算符

2.4.1 算数运算符

‘+ - * / % ++ – ‘

2.4.2 赋值运算符

‘ = += -= *= /= %= ‘

2.4.3 字符串运算符

+ 运算符也可用于对字符串进行相加(concatenate，级联)

2.4.4 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

2.4.5 逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

2.4.6 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

2.5 函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数参数(Function parameters)是在函数定义中所列的名称。

函数参数(Function arguments)是当调用函数时由函数接收的真实的值。

2.6 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

2.7 字符串

通常，JavaScript 字符串是原始值，通过字面方式创建：

var firstName = "Bill"

但是字符串也可通过关键词 new 定义为对象：

var firstName = new String("Bill")

2.7.1 查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引(位置)：如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

2.7.2 lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

2.7.3 slice() 方法

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引(开始位置)，终止索引(结束位置)。

这个例子裁剪字符串中位置 7 到位置 13 的片段：

2.7.4 替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值：

2.7.5 转换大小写

通过 toUpperCase() 把字符串转换为大写：

通过 toLowerCase() 把字符串转换为小写：

2.7.6 连接字符串

concat() 连接两个或多个字符串：

2.7.7 去两边空格

trim() 方法删除字符串两端的空白符：

2.7.8 提取字符

charAt() 方法返回字符串中指定下标(位置)的字符串：

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

2.7.9 把字符串转换为数组

可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔
txt.split("");           // 分隔为字符

2.8 数字方法

2.8.1 转换字符串为数值

toString() 以字符串返回数值。

2.8.2 转变量为数值

Number() 可用于把 JavaScript 变量转换为数值：

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：

parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：

2.9数组方法

2.8.1 数组遍历

遍历数组的最安全方法是使用 “for” 循环：

您也可以使用 Array.foreach() 函数：

2.8.2 添加数组元素

向数组添加新元素的最佳方法是使用 push() 方法：

2.8.3 创建数组

没有必要使用 JavaScript 的内建数组构造器 new Array()。

请使用 [] 取而代之！

2.8.4 判别数组对象

为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：

假如对象由给定的构造器创建，则 instanceiof 运算符返回 true：

2.8.5 把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符：

2.8.6 删除添加元素

pop() 方法从数组中删除最后一个元素：

push() 方法(在数组结尾处)向数组添加一个新的元素：push() 方法返回新数组的长度：

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串：

unshift() 方法(在开头)向数组添加新元素，并“反向位移”旧元素：unshift() 方法返回新数组的长度。

2.8.7 更改元素

通过使用它们的索引号来访问数组元素：length 属性提供了向数组追加新元素的简易方法：

2.8.8 删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：改为 undefined

2.8.9 拼接数组

splice() 方法可用于向数组添加新项：第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”，“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

2.8.10 合并数组

concat() 方法通过合并(连接)现有数组来创建一个新数组：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);

2.8.11 裁剪数组

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数(不包括)为止。

2.8.12 自动 toString()

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。

2.9 数组排序

2.9.1 sort()

sort() 方法以字母顺序对数组进行排序：

2.9.2 反转数组

reverse() 方法反转数组中的元素。

2.9.3 比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值(负、零或正值)对这些值进行排序。

2.9.4 查找最高(或最低)的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

您可以使用 Math.max.apply 来查找数组中的最高值：

您可以使用 Math.min.apply 来查找数组中的最低值：

2.10 数组迭代

2.10.1 Array.forEach()

forEach() 方法为每个数组元素调用一次函数(回调函数)。

注释：该函数接受 3 个参数：

项目值
项目索引
数组本身

2.10.2 Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。

请注意，该函数有 3 个参数：

项目值
项目索引
数组本身

2.10.3 Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

2.10.4 Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成(减少它)单个值。

2.10.5 Array.reduceRight()

reduceRight() 方法在每个数组元素上运行函数，以生成(减少它)单个值。

2.10.6 Array.indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

array.indexOf(item, start)

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

2.10.7 Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

2.11 日期

2.11.1 创建日期

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

2.11.2 输入格式

有四种 JavaScript 日期输入格式：

类型	实例
ISO 日期	“2018-02-19” (国际标准)
短日期	“02/19/2018” 或者 “2018/02/19”
长日期	“Feb 19 2018” 或者 “19 Feb 2019”
完整日期	“Monday February 25 2015”

2.11.3 日期获取方法

获取方法用于获取日期的某个部分(来自日期对象的信息)。下面是最常用的方法(以字母顺序排序)：

方法	描述
getDate()	以数值返回天(1-31)
getDay()	以数值获取周名(0-6)
getFullYear()	获取四位的年(yyyy)
getHours()	获取小时(0-23)
getMilliseconds()	获取毫秒(0-999)
getMinutes()	获取分(0-59)
getMonth()	获取月(0-11)
getSeconds()	获取秒(0-59)
getTime()	获取时间(从 1970 年 1 月 1 日至今)

2.11.4 日期设置方法

设置方法用于设置日期的某个部分。下面是最常用的方法(按照字母顺序排序)：

方法	描述
setDate()	以数值(1-31)设置日
setFullYear()	设置年(可选月和日)
setHours()	设置小时(0-23)
setMilliseconds()	设置毫秒(0-999)
setMinutes()	设置分(0-59)
setMonth()	设置月(0-11)
setSeconds()	设置秒(0-59)
setTime()	设置时间(从 1970 年 1 月 1 日至今的毫秒数)

2.12 Math方法

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数(底为e)
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x(x 以角度计)的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

2.13 循环

JavaScript 支持不同类型的循环：

for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块

2.14 类型转换

JavaScript 中有五种可包含值的数据类型：

字符串(string)
数字(number)
布尔(boolean)
对象(object)
函数(function)

有三种对象类型：

对象(Object)
日期(Date)
数组(Array)

同时有两种不能包含值的数据类型：

null
undefined

如果 JavaScript 尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型。

结果并不总是你所期望的：

5 + null    // 返回 5         因为 null 被转换为 0
"5" + null  // 返回 "5null"   因为 null 被转换为  "null"
"5" + 2     // 返回 52        因为 2 被转换为 "2"
"5" - 2     // 返回 3         因为 "5" 被转换为 5
"5" * "2"   // 返回 10        因为 "5" 和 "2" 被转换为 5 和 2