JavaScript
是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果- 通常
JavaScript
脚本是通过嵌入在HTML
中来实现自身的功能的JavaScript
是一种解释性脚本语言(代码不进行预编译)- 主要用来向
HTML
(标准通用标记语言下的一个应用)页面添加交互行为 - 可以直接嵌入
HTML
页面,但写成单独的js文件有利于结构和行为的分离 - 跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如
Windows
、Linux
、Mac
、Android
、iOS
等)。
Javascript
脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架
Javascript
数据类型
基本数据类型
- 1、数字(Number):包括浮点数与整数
- 2、字符串(String):包括由任意数量字符组成的序列
- 3、布尔值(Boolean):包括true和false
- 4、
Undefined
:当我们试图访问一个不存在的变量时,就会得到一个特殊的值undefined
。除此之外,使用已定义却未赋值的变量也会如此,以为js会自动将变量在初始化之前的值设定为undefined
。而Undefined
类型的值只有一个,那就是undefined - 5、
Null
:只包含一个值的特殊数据类型。所谓的null
值,通常是没有值或空值,不代表任何东西。null
与undefined
最大的不同在于,被赋予null
的变量通常被认为是已经定义了的,只不过它不代表任何东西。 - 6、
Symbol
: 是 ES6 引入了一种新的原始数据类型,表示独一无二的值
引用数据类型
- 对象(Object)、
- 数组(Array)、
- 函数(Function)
JavaScript语法
JavaScript输出
JavaScript
可以通过不同的方式来输出数据:- 使用
window.alert()
弹出警告框。 - 使用
document.write()
方法将内容写到 HTML 文档中。 - 使用
innerHTML
写入到 HTML 元素。 - 使用
console.log()
写入到浏览器的控制台。
- 使用
1 | <script> |
JavaScript
注释
JavaScript
不会执行注释中的代码JavaScript
中的注释语句和iOS
中的一样- 单行注释以
//
开头 - 多行注释以
/*
开始,以*/
结尾
- 单行注释以
1 | // 这是单行注释 |
分号;
- 分号用于分隔 JavaScript 语句。
- 通常我们在每条可执行的语句结尾添加分号。
- 使用分号的另一用处是在一行中编写多条语句
- 也可能看到不带有分号的案例, 在
JavaScript
中,用分号来结束语句是可选的, 不加分号亦可
1 | // 有分号的情况 |
数字Number
JavaScript
中不区分整数值和浮点数值,所有数字均用浮点数值表示- JS采用
IEEE754
标准定义的64位浮点格式表示数字,这意味着它能表示的最大值是±1.7976031348623157×10308,最小值是±5×10-324 - 按照JS中的数字格式,能够表示的整数范围是-9007199254740992
9007199254740992(即 -253253) - 需要注意的是,JS中实际的操作(比如数组索引,位操作符)则是基于32位整数。
类型操作符typeof
当以下num定义后没有任何赋值的情况下num的类型是Undefined
,值为undefined
1 | //定义了一个名为num的变量 |
进制数
1 | //八进制数以0开头 |
特殊值
Infinity
:代表的是超出js处理范围的数值,但它依然是一个数字- 任何数除以0结果为
Infinity
Infinity
与其他任何操作数执行任何算术运算的结果也是Infinity
- 任何数除以0结果为
NaN
:表示不是数字,但事实上它依然属于数字类型,只不过是一种特殊的数字罢了- 如果我们在算术运算中使用了不恰当的操作数,导致运算失败,就会得到
NaN
NaN
具有传染性,只要算术运算中存在一个NaN
,整个运算就会失败
- 如果我们在算术运算中使用了不恰当的操作数,导致运算失败,就会得到
1 | num1 = 1e308; |
Math
运算
JavaScript
用Math
对象实现复杂的运算
1 | Math.pow(2,3) //8;2的3次幂 |
JavaScript布尔
在JavaScript
中有布尔值和falsy
值和truthy
值
- 布尔(逻辑)只能有两个值:
true
或false
- 所有的
Falsy
值,当进行逻辑判断时均为false
- 除
Falsy
值之外的所有的值均为Truthy
,当进行逻辑判断时均为true
Infinity
、空数组、”0”都是Truthy
值
1 | var br = true; |
判断函数
isNaN(info)
判断值是否是NaN,如果info===NaN
则返回true
,否则返回false
isFinite()
检测是否是一个既非Infinity
也非NaN
的数字
1 | // isNaN函数 |
字符串
js中一对双引号或单引号之间的任何都会被视为一个字符串
1 | var str = "https://titanjun.top"; |
日期Date
- 日期对象用于处理日期和时间
- 格林尼治时间(GTM):是英国郊区皇家格林尼治天文台的时间,因为地球自转的原因,不同经度上的时间是不相同的,格林尼治天文台是经度为0的地方。世界上发生的重大时间都是以格林尼治时间时间为标准的。
- 世界协调时间(UTC):世界时间。1970年1月1日0点。
ECMAScript
中的Date
类型是在早期Java
中的java.util.Date
类的基础上构建的。为此Date
类型使用自UTC1970年1月1日午夜(零时)开始经过的毫秒数保存时间的。该Date类型保存的日期能够精确到1970年1月1日之前和之后的285616年
创建Date
创建时间使用构造函数法, new Date()
, 不论Date()
是否带参数,返回的都是当前时间
1 | //1、构造函数法--不传参数 |
Date对象方法
获取时间
1 | var date = new Date(); |
设置时间
1 | //设置年份 |
Date转换格式
1 | //转换成字符串 |
parse
返回某日期距离1970年1月1日0点的毫秒数
1 | //Date.parse(dateString) |
Date间运算
1 | var date1 = new Date("2018-10-10 10:10:10"); |
数组Array
- 数组是值的有序集合
JavaScript
数组事务类型的:数组元素可以使任何类型, 同一数组中的不同元素也可以是不同类型- 数组的元素也可以是对象或者其他数组
JavaScript
数组可能是稀疏的: 数组元素的索引不一定是连续的,之间可能有空缺- 稀疏数组的
length
比任何元素的索引都要大 JavaScript
中的数组可以存储多个不同类型的数据
创建数组
直接量创建
1 | // 字面量表示法 |
Array()创建
1 | // 构造函数 |
数组操作
1 | //3. 读写数组元素 |
数组的方法
主要介绍ECMAScript
中的方法
join()
- 0.不改变原数组
- 1.将数组所有的元素都转化成字符串,并连接在一起,返回生成后的字符串(如不指定分隔符默认使用逗号)
- 2.join是String.split()的逆向操作
1 | var arr0 = [1, 2, 3, 4] |
reverse()
- 0.改变原数组
- 1.将数组中的元素颠倒顺序*/
1 | arr0.reverse() //现在arr0为[4, 3, 2, 1] |
sort()
- 0.改变原数组
- 1.不带参数时,以字母表顺序排序
- 2.如果数组包含undefined,则会被排到数组的末尾
- 3.字母排序区分大小写,A < a
1 | var arr1 = new Array("tian", "quan", "jun") |
concat()
创建并返回一个新数组
1 | //0.不改变原数组 |
slice()
- 注意:
- 1.返回数组的部分数组
- 2.不改变原数组
- 3.两个参数,分别表示始末位置,含左不含右
- 4.1表示第一个元素,-1表示倒数第一个元素
- 5.只有一个参数,默认以此参数开始,到最后一个元素结束
1 | var arr3 = [1, 2, 3, 4, 5] |
splice()
- 1.在数组中插入或删除元素的通用方法
- 2.会修改原数组,会改变数组的索引值
- 3.两个参数,参数一:起始位置;参数二:处理元素的个数(可省略)
- 4.若省略第二个参数,默认从起始位置到最后
- 5.如果没有元素就返回空数组
1 | var m = [1, 2, 3, 4, 5, 6, 7] |
push和pop
- 方法将数组当成栈使用
- 1.push方法在尾部添加一个或者多个元素,返回新的数组长度
- 2.pop删除数组的最后一个元素,减小数组的长度,返回删除的值
- 3.改变原数组的值和长度
1 | var m0 = [] |
unshift和shift
- 1.unshift在头部添加一个或者多个元素,返回长度
- 2.shift删除数组的第一个元素,返回删除的元素
- 3.改变原数组,改变原数组的索引
- 4.unshift插入多个元素时,试一次性插入的
1 | var sh = [] |
toString和toLocalString
- 1.toString()将数组元素转化成字符串后,用都好链接输出
- 2.toString()和join()不加参数的返回的值是一样的
- 3.toLocalString()是toString()的本地化版本
1 | var str0 = [1, 2, 3].toString() //返回: "1,2,3" |
ECMAScript5
- 1.
ECMAScript5
定义了九个新的数组方法 - 2.大多数
ECMAScript5
数组方法的第一个参数是一个函数 - 2.第二个参数是可选的,如果有,则调用的函数被看作是第二个参数的方法
- 3.也就是说在调用函数时,传递进去的第二个参数作为它的this关键字的值来使用
- 4.
ECMAScript5
中的数组方法不会修改他们调用的原始数组 - 5.传递给这些方法的函数是可以改变这些数组的
forEach()
- 1.方法从头到尾遍历数组,为每个元素调用指定的函数
- 2.forEach使用三个参数调用该函数:数组元素,元素索引, 数组本身
1 | var data1 = [1, 2, 3, 4, 5] |
map()
- 1.返回一个新数组,不改变原数组
- 2.原数组若是稀疏数组,返回也是稀疏数组
- 3.具有相同的长度,相同的缺失元素
1 | var arr2 = data1.map(function (x) { |
filter()
逻辑判定,过滤数组
- 1.返回原数组的一个子集
- 2.返回原数组符合条件的元素,组成新数组
- 3.会将稀疏数组压缩,返回的是稠密数组
1 | var arr3 = data1.filter(function (x) { |
every和some
数组的逻辑判定
- 1.对数组元素应用指定的函数进行判定
- 2.返回trur或者false
- 2.every()都为true返回true,否则返回false
- 3.some()都为false,返回false;有一个为true,返回true
- 4.一旦该方法确定了返回值,就会停止遍历数组
- 5.空数组,every()返回true,some()返回false
1 | var data4 = [1, 2, 3, 4, 5] |
reduce和reduceRigh
- 作用: 将数组元素进行组合生成单个值
- 1.reduce()需要两个参数;参数一:执行操作的函数;参数二:传递给函数的初始值
- 2.reduceRight()是倒叙操作,功能与reduce相同
1 | var data5 = [1, 2, 3, 4, 5] |
indexOf和lastIndexOf
- 1.搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引,如果没有找到就返回-1
- 2.indexOf(),从前向后搜索,lastIndexOf()从后向前搜索
- 3.参数一:元素值; 参数二: 搜索的起始位置(可省略,默认从头开始)
1 | var data6 = [0, 1, 2, 1, 0] |
判定一个位置对象是否为数组
1 | var data = [1, 2] |
类型间的转换
Number()
将其他类型数据转成Number类型数据
1 | //1、Null-->Number |
parseInt()
- 会试图将其收到的任何输入值(通常是字符串)转成整数类型,如果转换失败就返回NaN。
- 转换规则:如果第一个非空白字符(空格、换行、tab)是数字或者正负号则开始转换,直到碰到第一个非数字字符停止转换。如果第一个非空白字符不是数字或者正负号,转换失败,结果是NaN.
1 | console.log('-----parseInt------') |
parseFloat()
- 会试图将其收到的任何输入值(通常是字符串)转成浮点数类型,如果转换失败就返回NaN。
1 | console.log( parseFloat(" 2.5a") );//2.5 |
String
其它基本类型转换成String类型
1 | //Null-->String |
Boolean()
- 其它基本类型转换成
Boolean
类型 - 绝大部分值在转换为布尔类型时都为
true
,但以下6中falsy
值除外
1 | /** |