JavaScript基础1

小火山灰
173 阅读17分钟

数据类型

六大数据类型

  • Number
  • String
  • Boolean
  • Null
    • 类型属于Object，其他均属于自己
  • Undefined
    • 以上基本数据类型
  • Object
    • 引用数据类型

强制类型转换

主要是转换为

  • String
  • Number
  • Boolean

转换为String

  1. 调用被转换数据类型的toString()方法

    该方法不会改变原变量，而是返回一个新的值

    无法调用Null和Undefined的toString()方法,会报错

  2. 调用String()函数，将被转换变量作为参数

    对于Number和Boolean其实就是调用了toString()方法

    该方法不会改变原变量，而是返回一个新的值

    可以以Null和Undefined为参数

转换为Number

  1. 调用Number()函数

    • 如果参数值不是合法数值字符串,则会得到结果NaN(Not a Number)，但类型也是Number；如果参数值是空字符串则会返回0

    • 如果参数是布尔型，则true返回1,false返回0

    • 如果参数为null，则返回0

    • 如果参数为undefined，则返回NaN

  2. 调用parseInt(),parseFloat()函数，专门应对字符串

    • parseInt()可以将字符串内有效的整数读出来

    ​ 从头开始碰到非数字则会停下并返回

    • parseFloat()可以将字符串内有效的小数读出来

    ​ 从头开始到碰到第一个小数点后如果碰到非数字则停下并返回

    • 对于非String参数使用时

    ​ 它们会先将参数转化为String，然后再操作

转换为Boolean

  1. 调用Boolean()函数

    • 除了0和NaN，其他的数字均转化为true

    • 除了空字符串，其他的串均转化为true

    • null和undefined都会转化为false

    • 对象object也会转化为true

各进制表示和注意事项

  • 十六进制：以0x开头的数字

  • 八进制：以0开头的数字

  • 二进制：以0b开头的数字(有些浏览器不支持)

  • 所有进制被输出时：都会以十进制的形式输出

运算符（操作符）

typeof 返回类型,返回值的类型为字符串

    • 若其中有`String`，会进行串接操作，结果会变成字符串,是一个隐式转换,本质是调用`String()`

    • 非`NaN`和非字符串与数字相加，都会先转化为数字再计算
  • -，*，/
    • 将两个值都转换为Number进行计算
  • ==
    • 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较
  • ===
    • 如果类型不同，直接就是false

太杂了,大概了解一下就行

Unicode编码

  • JS中用 '\u编码' 表示，此处编码为十六进制

  • HTML中用'&#编码;'表示，此处编码为十进制

字符串的相关方法

字符串在底层以字符数组的形式保存。

  • charAt(index)

    • 相当于[index]

  • charCodeAt(index)

    • 返回index位置字符的Unicode编码

  • String.fromCharCode(code)

    • 通过Unicode编码返回字符

  • concat()

    • 连接字符串 类似于+

  • indexOf('',start)

    • 从start位置开始(不写默认为0)返回参数字符第一出现的索引，未找到则返回-1

  • lastIndexOf('',start)

    • 同上，只是从后往前寻找

  • slice(start,end)

    • 同数组，截取部分字符串，不包括end，end可以为负数，若省略end则截取从start开始全部字符串

  • substring(start,end)

    • 同上，但不接受负数，如果end小于start，则会自动交换位置，也不对原字符串造成影响

  • substr(start,count)

    • 从start位置开始截取count个字符的字符串，该方法没有再ES标准中定义，但是浏览器都支持，不对原字符串造成影响

  • split(str)

    • 以str为依据分割,将一个字符串拆分为一个数组，传入空串则分割每个字符

  • toLowerCase()

    • 将字符串转换为小写并返回 不影响原

  • toUpperCase()

    • 将字符串转换为大写并返回 不影响原

对象

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

对象分类

  1. 内建对象

    • 由ES标准中定义的对象，在任何的ES的实现中都可以使用

    • 比如:Math String Number Boolean Function Object....

  2. 宿主对象

    • 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象

    • 比如 BOM DOM

  3. 自定义对象

    • 由开发人员自己创建的对象

创建对象

  1. 使用new关键字调用的函数，是构造函数constructor

    var obj = new Object()

  2. 直接使用字面量赋值，同时可以添加属性

    var obj = { key：value[,key,value....] }

  3. 以工厂形式创建对象

    function create([属性值1,....属性值N]){
	var obj = new Object();
	obj.属性名1 = 属性值1;
	...
	obj.属性名N = 属性值N;
	return obj;
}
//使用工厂方法创建的对象,使用的构造函数都是Object
//所以创建的对象都是Object类型
//就导致我们无法区分多种不同类型的对象

  4. 以自定义构造函数创建对象

    /*
构造函数和普通函数本质没有区别
不同的是构造函数的首字母习惯上大写
构造函数和普通函数的区别就是调用方式不同
构造函数需要用new 调用
*/
function Fun(){
    this.属性名=属性值;
    Fun.prototype.fun=Function(){
    };			
    //方法若直接如属性一样赋值,当构造函数多次被调用时,会造成大量的内存浪费,每被调用一次就会生成一个相同的方法
    //所以给原型对象prototype添加方法,因为每个同类对象都公用一个prototype对象,需要共有的属性也可以用此方法	
    //访问属性或方法时,会先寻找类中(函数作用域)的名字,若没有,则去寻找prototype对象,所以若不想用prototype对象中的某个值,可以在类中用相同名字的变量覆盖
		//访问对象的prototype对象
		对象.__proto__;
}
    • 构造函数的执行流程
      1. 立刻创建一个新的对象
      2. 将新建对象设置为this，在构造函数中可以用this来引用新建的对象
      3. 逐行执行函数中的代码
      4. 将新建的对象返回

属性

​ 在对象中保存的值称为属性。

  • 向对象里添加（修改）属性
    • 对象名.属性名=属性值
  • 删除对象里的属性
    • delete 对象名.属性名
  • 使用特殊的属性名，不能采用.的方式操作
    • 应使用 对象["属性名"]=属性值

判断对象的属性和类的实例

判断对象存在属性

​ 使用in运算符可以判断对象内是否存在该属性(包括prototype对象中的属性)

​ "属性名" in 对象名 返回布尔值

​ 若只想检查类中是否存在该属性(不去搜索prototype)，则可以使用对象的hasOwnProperty()方法，该方法存在于prototype原型对象中。该对象若没有此属性,则再去原型对象的原型对象中寻找,直到找到Object类中为止

​ 使用for...in语句枚举对象中的属性

for(var 变量 in 对象){
	console.log(变量);//输出所有属性名
	console.log(对象[变量])//输出所有对应属性值
}

判断是否为类的实例

使用instanceof 检查一个对象是否是一个类的实例

对象 instanceof 类 返回布尔值

任何对象 instanceof Object返回值都是true所有对象都是``Object`子类

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数。

这个隐含的参数就是this，this指向的是一个对象。

根据函数的调用方式不同，this会指向不同的对象。

  • 当以函数的形式调用时，this永远都是window
  • 当以方法的形式调用时，this就是调用方法的那个对象
  • 其实函数的对象就是window，以上两点其实就是一点
  • 当以构造函数的形式调用时，this就是新建对象

包装类

JS中有三个包装类，可以将基本数据类型类型转换为对象。

  • String()

    var str=new String("abcd")

  • Number()

    var num=new Number(3)

  • Boolean()

    var bool=new Boolean("true")

以上对象输出时，和基本数据类型完全一样，但是作为引用类型，所以无法比较，在开发中不会使用基本类型的对象。

所以这些基本数据类型的包装类都是由JS自己使用,比如：当我们对一个基本数据类型调用toString()方法时，浏览器自动将其临时封装为对象。

函数

  • 函数也是一种对象(In fact，只要不是基本数据类型,都是对象)
  • 函数中可以封装一些功能(代码)，需要时可以执行这些功能(代码)

创建函数

  • 函数对象

    var fun = new Function("代码");

  • 函数表达式

    var fun= function([形参1,形参2...形参N]){
	代码
};//因为是赋值,注意分号

  • 函数声明

    function fun([形参1,形参2...形参N]){
	代码
}
//形参相当于在函数中var了一堆undefined变量

调用函数

fun([实参1,实参2...实参N]);

  • 调用函数时，浏览器会传递两个隐含的参数
    • this 上下文对象
    • arguments 封装实参的类数组
      • arguments callee 表示正在使用arguments的函数
  • 调用函数时，解析器不会检查实参的类型，实参可以是任何类型，如果有可能则需要对参数进行类型的检查
  • 调用函数时，解析器也不会检查实参的个数，多余的实参不会被使用，若实参个数少于形参个数，则没有对应实参的形参类型将会是undefined
fun.call([参数][实参,...])
function sum(a,b){
	console.log(this);
	console.log(a+b);
}
sum.call(obj,1,2);
//将第一个参数作为函数作用域的this,之后的实参对应着函数的实参

fun.apply([参数][实参,...])
function sum(a,b){
	console.log(this);
	console.log(a+b);
}
sum.apply(obj,[1,2]);
//大部分与call()方法一样,但是实参需要用数组封装起来传递,而call()方法可以一个一个传递

函数的返回值

  • return 值或变量或对象;
  • 函数将在return语句执行完后停止执行
  • return后不写任何东西,返回undefined

立即执行函数

(function([形参1,形参2...形参N])	{
	代码
})();
//用括号将匿名函数变为整体,不然会报错
//往往这个函数只会被执行一次
//最后要加括号进行调用

作用域

​ 作用域指一个变量作用的范围，javascript中一共有两种作用域

  • 全局作用域
    • 直接写在script标签中的JS代码，都在全局作用域
    • 全局作用域在页面打开时创建，关闭时销毁
    • 在全局作用域中有个全局对象window，它代表我们浏览器的窗口，由浏览器创建，我们可以直接使用
    • 在全局作用域中
      • 创建的变量都会作为window对象的属性保存
      • 创建的函数都会作为window对象的方法保存
  • 函数作用域(局部作用域)
    • 调用函数时,创建函数作用域,函数执行完毕后，作用域销毁
    • 每次调用会创建一个函数作用域，互相独立
    • 全局作用域无法访问函数作用域，反之可以
    • 在函数中访问时，会优先访问本作用域的变量，若没有，则向上一级作用域中寻找，若直到全局作用域都未找到，则会报错
    • 在函数中访问全局变量可以使用，window.变量名
    • 在函数作用域中也有变量声明提前和函数声明提前的特性

声明提前

  • 变量的声明提前
    • 使用var关键字声明的变量,不论放在哪个位置，会在当前作用域所有的代码执行之前被声明,但是不会赋值，但是如果声明变量不使用var关键字，则变量不会被声明提前
  • 函数的声明提前
    • 使用函数声明形式创建的函数function fun(){}，它会在当前作用域所有代码执行之前被创建,所以我们可以在函数声明前调用。
    • 通过函数表达式创建的函数var fun=function(){};，fun这个变量会被声明，但不会被赋值,即类型是undefined，在函数赋值前用函数会报错

数组

创建数组

  • 构造函数

    var arr = new Array(1,2,3,4)

    若只传递一个参数，则该参数作为数组长度

  • 字面量赋值

    var arr =[1,2,3...n]

    数组元素类型可以是任意类型

添加元素

  • 数组[索引]=值
  • 数组.push(值[,值...])
    • 从最后插入新元素，并返回新的长度
  • 数组.unshift(值[,值...])
    • 从最前面插入新元素，并返回新长度
  • 设置或得到元素个数
    • 数组.length[=个数]

数组方法

  • push()

  • unshift()

  • pop()

    • 删除并返回数组最后一个元素

  • shift()

    • 删除并返回数组第一个元素

  • join()

    • 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

  • reverse()

    • 颠倒数组中元素的顺序。 会对原数组产生影响

  • slice(start,end)

    • 从某个已有的数组返回选定的元素 start~end-1 不对原数组造成影响
  • sort(function(a,b){
		return a-b;//降序
		return b-a;//升序
})

  • 对数组的元素进行排序，会对原数组产生影响，默认按照unicode编码排序，哪怕是元素都是数字

  • splice(start,count[,新元素..])

    • 删除start位置开始count个元素，并向数组在start位置添加新元素。 会对原数组产生影响

  • toSource()

    • 返回该对象的源代码

  • toString()

    • 把数组转换为字符串，并返回结果

  • toLocaleString()

    • 把数组转换为本地数组，并返回结果

  • valueOf()

    • 返回数组对象的原始值

  • concat()

    • 连接两个或更多的数组或元素，并返回结果。不对原数组产生影响

数据遍历

for(var i = 0;i < 数组.length;i++){
	数组[i];
}
forEach(function(a,b,c){})方法	//只支持IE8以上浏览器
//这种函数归我们创建,但不归我们调用,我们称为回调函数
//该回调函数的执行次数等于数组的长度
//a为属性值,b为索引,c为数组本身
for(let i in 数组){
  i
}

Date对象

创建Date对象

var d = new Date(["月/日/年 时:分:秒"])

  • 不传递参数时，d为当前日期
  • 传递参数则实设置为参数里的时间

Date对象方法

  • getDate()
    • 返回几日
  • getMonth()
    • 返回月份0-11表示1-12月
  • getFullYear()
    • 返回年份
  • getHours()
    • 返回小时
  • getMinutes()
    • 返回分钟
  • getSeconds()
    • 返回秒钟
  • getTime()
    • 获取当前对象的时间戳 格林威治时间1970.01.01 00:00:00到现在的毫秒数
  • Date.now()
    • 返回此代码执行时的时间戳

Math对象

​ Math和其他的对象不同，它不是一个构造函数。

​ 它属于一个工具类，不用创建对象，它里边封装了数学运算相关的属性和方法。

常用属性

  • PI：圆周率
  • E：自然对数

常用方法

  • cell()
    • 对一个数进行向上取整
  • floor()
    • 对一个数进行向上取整
  • round()
    • 对一个数进行四舍五入
  • random()
    • 产生一个随机数(0,1)
  • max()
    • 返回多个数的最大值
  • min()
    • 返回多个数的最小值
  • sqrt()
    • 开方
  • pow(x,y)
    • 返回x的y次方

正则表达式

​ 用于定义一些字符串的规则。

​ 计算机可以根据正则表达式，来检查一个字符串是否符合规则，区分大小写。

​ 将字符串中符合规则的内容提取出来。

创建正则表达式的对象

  • var 变量 = new RegExp("正则表达式","匹配模式")
  • var 变量 = /正则表达式/匹配模式
    • 无双引号
  • 匹配模式不写，则默认模式为字符串是否包含"正则表达式"

匹配模式

  • i：忽略大小写
  • g：全局匹配

正则表达式模式

方括号用于查找某个范围内的字符

表达式描述
[abc\]查找方括号之间的任何字符。
[^abc\]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
`(redbluegreen)`查找任何指定的选项。

元字符是拥有特殊含义的字符

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配"A ghost booooed"中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述
compile在 1.5 版本中已废弃。 编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。
toString返回正则表达式的字符串。

支持正则表达式的 String 对象的方法

方法描述FFIE
search检索与正则表达式相匹配的值。14
match找到一个或多个正则表达式的匹配。14
replace替换与正则表达式匹配的子串。14
split把字符串分割为字符串数组。14

RegExp 对象属性

属性描述
constructor返回一个函数，该函数是一个创建 RegExp 对象的原型。
global判断是否设置了 "g" 修饰符
ignoreCase判断是否设置了 "i" 修饰符
lastIndex用于规定下次匹配的起始位置
multiline判断是否设置了 "m" 修饰符
source返回正则表达式的匹配模式
avatar
文章
阅读
粉丝