- 对象Object:
- 只要不是5种基本数据类型的值都是对象
- 基本数据类型都是单一的值,值和值之间没有任何的联系
- 在JS中来表示一个人的信息(name gender age):
- 如果使用基本数据类型的数据,我们所创建的变量都是独立的,不能成为一个整体
- 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性
- 对象的分类:
- 内建对象:由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 比如:Math String Number Boolean Function Object....
- 宿主对象:由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
- 比如 BOM DOM
- 自定义对象:由开发人员自己创建的对象
- 内建对象:由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 创建对象:
- 使用new关键字调用的函数,是构造函数constructor(构造函数是专门用来创建对象的函数)
- 使用typeof检查一个对象时,会返回object
- 使用工厂方法创建对象:通过该方法可以大批量的创建对象
- 使用工厂方法创建的对象,使用的构造函数都是Object,所以创建的对象都是Object类型,导致我们无法区分出多种不同类型的对象
- 在对象中保存的值称为属性
- 向对象添加属性:语法:对象.属性名 = 属性值;
- 读取对象中的属性:语法:对象.属性名
- 如果读取对象中没有的属性,不会报错而是会返回undefined
- 修改对象的属性值:语法:对象.属性名 = 新值
- 删除对象的属性:语法:delete 对象.属性名
- 向对象中添加属性:
- 属性名:
- 对象的属性名不强制要求遵守标识符的规范,尽量按照标识符的规范去做
- 如果要使用特殊的属性名,不能采用.的方式来操作
- 语法:对象["属性名"] = 属性值,读取时也需要采用这种方式
- 在[]中可以直接传递一个变量,这样变量值是多少就会读取哪个属性
- 属性值:
- JS对象的属性值,可以是任意的数据类型,甚至也可以是一个对象,是个函数
- 函数也可以称为对象的属性,如果一个函数作为一个对象的属性保存,那么称这个函数是这个对象的方法,调用这个函数就说调用对象的方法(method),但是它只是名称上的区别,没有其他的区别
- 对象.方法();
- 枚举对象中的属性:
- 语法:for(var 变量 in 对象){}
- for...in语句 对象中有几个属性,循环体就会执行几次;
- 每次执行时,会将对象中的一个属性的名字赋值给变量
- 变量名:输出属性名;对象名[变量名]:输出属性值
- 语法:for(var 变量 in 对象){}
- 属性名:
- in 运算符:
- 通过该运算符可以检查一个对象中是否含有指定的属性:如果有则返回true,没有则返回false
- 语法:"属性名" in 对象
- 只要不是5种基本数据类型的值都是对象
- 基本数据类型:String Number Boolean Null Undefined;引用数据类型:Object
- JS中的变量都是保存到栈内存中的,基本数据类型的值直接在栈内存中存储,值与值之间是独立存在,修改一个变量不会影响其他的变量
- 对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,而变量保存的是对象的内存地址(对象的引用)
- 如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响
- 当比较两个基本数据类型的值时,就是比较值
- 比较两个引用数据类型时,它是比较的对象的内存地址
- 如果两个对象是一摸一样的,但是地址不同,它也会返回false
- 对象字面量:
- 使用对象字面量,可以在创建对象时,直接指定对象中的属性
- 语法:{属性名:属性值,属性名:属性值....}
- 对象字面量的属性名可以加引号也可以不加,建议不加;如果要使用一些特殊的名字,则必须加引号
- 属性名和属性值是一组一组的名值对结构:名和值之间使用:连接,多个名值对之间使用,隔开
- 如果一个属性之后没有其他的属性了,就不要写,
- 函数function:
- 函数是一个对象;
- 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码);
- 函数中可以保存一些代码在需要的时候调用;
- 使用typeof检查一个函数对象时,会返回function
- 创建一个函数对象:
- 将要封装的代码以字符串的形式传递给构造函数(实际开发中很少使用构造函数来创建一个函数对象)
- 封装到函数中的代码不会立即执行,函数中的代码会在函数调用的时候执行
- 调用函数 语法:函数对象()
- 当调用函数时,函数中封装的代码会按照顺序执行
- 调用函数 语法:函数对象()
- 封装到函数中的代码不会立即执行,函数中的代码会在函数调用的时候执行
- 使用 函数声明 来创建一个函数
- 语法:function 函数名([形参1,形参2...形参N]){语句...}
- 使用 函数表达式 来创建一个函数
- var 函数名 = function([形参1,形参2...形参N]){语句...}
- 将要封装的代码以字符串的形式传递给构造函数(实际开发中很少使用构造函数来创建一个函数对象)
- 函数参数:
- 定义一个用来求两个数和的函数,可以在函数的()中来指定一个或多个形参(形式参数),多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量,但是并不赋值
- 在调用函数时,可以在()中指定实参(实际参数),实参将会赋值给函数中对应的形参
- 调用函数时解析器不会检查实参的类型,所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
- 函数的实参可以是任意的数据类型,也可以是一个对象,也可以是一个函数
- 当参数过多时,可以将参数封装到一个对象中,然后通过对象传递
- 调用函数时,解析器也不会检查实参的数量:
- 多余实参不会被赋值;
- 如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
- 函数的返回值:
- 可以使用 return 来设置函数的返回值
- 返回值可以是任意的数据类型,也可以是一个对象,也可以是一个函数
- 语法:return 值
- return后的值将会会作为函数的执行结果返回,可以定义一个变量,来接收该结果
- 在函数中return后的语句都不会执行
- 如果return语句后不跟任何值就相当于返回一个undefined,如果函数中不写return,则也会返回undefined
- return后可以跟任意类型的值
- 函数名():调用函数,相当于使用的函数的返回值
- 函数名:函数对象,相当于直接使用函数对象
- 立即执行函数:
- 函数定义完,立即被调用的函数,立即执行函数往往只会执行一次
- 语法:(function(形参){语句})(实参);
- 构造函数:
- 创建一个构造函数
- 构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
- 构造函数和普通函数的区别就是调用方式的不同:普通函数是直接调用,而构造函数需要使用new关键字来调用
- 构造函数的执行流程:
- 立刻创建一个新的对象
- 将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
- 逐行执行函数中的代码
- 将新建的对象作为返回值返回
- 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
- 将通过一个构造函数创建的对象,称为是该类的实例
- 使用instanceof可以检查一个对象是否是一个类的实例:
- 语法:对象 instanceof 构造函数
- 如果是,则返回true;否则返回false
- 所有的对象都是Object的后代,所以任何对象和Object做instanceof检查时都会返回true
- this的情况:
- 当以函数的形式调用时,this是window
- 当以方法的形式调用时,谁调用方法this就是谁
- 当以构造函数的形式调用时,this就是新创建的那个对象
- 创建一个构造函数
- 函数的方法:
- call()和apply():
- 这两个方法都是函数对象的方法,需要通过函数对象来调用
- 当对函数调用call()和apply()都会调用函数执行
- 在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this
- call()方法可以将实参在对象之后依次传递,apply()方法需要将实参封装到一个数组中统一传递
- this的情况:
- 以函数形式调用时,this永远都是window
- 以方法的形式调用时,this是调用方法的对象
- 以构造函数的形式调用时,this是新创建的那个对象
- 使用call和apply调用时,this是指定的那个对象
- call()和apply():
- arguments:
- 在调用函数时,浏览器每次都会传递进两个隐含的参数:1.函数的上下文对象 this;2.封装实参的对象 arguments
- arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
- 在调用函数时,我们所传递的实参都会在arguments中保存
- arguments.length可以用来获取实参的长度
- 即使不定义形参,也可以通过arguments来使用实参,arguments[0] 表示第一个实参,arguments[1] 表示第二个实参
- 有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在执行的函数的对象
- 作用域Scope:
- 指一个变量的作用的范围,在JS中一共有两种作用域
- 全局作用域:
- 直接编写在script标签中的JS代码,都在全局作用域
- 全局作用域在页面打开时创建,在页面关闭时销毁
- 在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建,可以直接使用
- 在全局作用域中:创建的变量都会作为window对象的属性保存,创建的函数都会作为window对象的方法保存
- 全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到
- 声明提前:
- 变量的声明提前:
- 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),但是如果声明变量时不使用var关键字,则变量不会被声明提前
- 函数的声明提前:
- 使用函数声明形式创建的函数 function 函数(){},它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
- 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用
- 变量的声明提前:
- 函数作用域(局部作用域):
- 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
- 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
- 在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量
- 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,如果没有则向上一级作用域中寻找,直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError
- 在函数中要访问全局变量可以使用window对象
- 在函数作用域也有声明提前的特性,使用var关键字声明的变量,会在函数中所有的代码执行之前被声明,函数声明也会在函数中所有的代码执行之前执行
- 在函数中,不使用var声明的变量都会成为全局变量
- 定义形参就相当于在函数作用域中声明了变量
- 全局作用域:
- 指一个变量的作用的范围,在JS中一共有两种作用域
- this:
- 解析器在调用函数时,每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象,根据函数的调用方式的不同,this会指向不同的对象
- 以函数的形式调用时,this永远都是window
- 以方法的形式调用时,this就是调用方法的那个对象
- 解析器在调用函数时,每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象,根据函数的调用方式的不同,this会指向不同的对象
- 原型prototype:
- 在构造函数内部创建的方法,在构造函数每执行一次后就会创建一个新的方法,即该方法都是唯一的,所以完全可以使所有的对象共享同一个方法
- 将函数定义在全局作用域,污染了全局作用域的命名空间,而且定义在全局作用域中也很不安全
- 创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象
- 如果函数作为普通函数调用prototype没有任何作用
- 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
- 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
- 我们可以将对象中共有的内容,统一设置到原型对象中
- 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用
- 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
- 使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
- 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
- 使用该方法只有当对象自身中含有属性时,才会返回true
- 原型对象也是对象,所以它也有原型
- 当我们使用一个对象的属性或方法时,会现在自身中寻找,自身中如果有,则直接使用,如果没有则去原型对象中寻找;如果原型对象中有,则使用,如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined
- 在构造函数内部创建的方法,在构造函数每执行一次后就会创建一个新的方法,即该方法都是唯一的,所以完全可以使所有的对象共享同一个方法
- toString:
- 当我们直接在页面中打印一个对象时,事实上是输出的对象的toString()方法的返回值
- 如果我们希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
- 垃圾回收GC:
- 当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,所以这种垃圾必须进行清理
- 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,我们不需要也不能进行垃圾回收的操作
- 我们需要做的只是要将不再使用的对象设置null即可
- 数组Array:
- 数组也是一个对象,它和我们普通对象功能类似,也是用来存储一些值的,不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素
- 索引:从0开始的整数就是索引
- 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
- 数组中没有定义的数据为:undefined
- 使用typeof检查一个数组时,会返回object
- 向数组中添加元素:
- 语法:数组[索引] = 值
- 读取数组中的元素
- 语法:数组[索引]
- 如果读取不存在的索引,不会报错而是返回undefined
- 获取数组的长度:
- 可以使用length属性来获取数组的长度(元素的个数)
- 语法:数组.length
- 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
- 对于非连续的数组,使用length会获取到数组的最大的索引+1(尽量不要创建非连续的数组)
- 修改length:
- 如果修改的length大于原长度,则多出部分会空出来;如果修改的length小于原长度,则多出的元素会被删除
- 向数组的最后一个位置添加元素:
- 语法:数组[数组.length] = 值;
- 使用字面量来创建数组:
- 语法:[]
- 使用字面量创建数组时,可以在创建时就指定数组中的元素
- var arr = [10]; //创建一个数组,数组中只有一个元素10
- 使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递;元素之间使用,隔开
- var arr = new Array(10); //创建一个长度为10的数组
- 数组中的元素可以是任意的数据类型,也可以是对象、函数
- 数组中也可以放数组,称为二维数组
- 数组的方法:
- push():
- 可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
- 可以将要添加的元素作为方法的参数传递,这样这些元素将会自动添加到数组的末尾
- 该方法会将数组新的长度作为返回值返回
- pop():
- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
- unshift():
- 向数组开头添加一个或多个元素,并返回新的数组长度
- 向前边插入元素以后,其他的元素索引会依次调整
- shift():
- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
- slice():
- 可以用来从数组提取指定元素
- 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
- 参数:
- 1.截取开始的位置的索引,包含开始索引
- 2.截取结束的位置的索引,不包含结束索引
- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
- -1 倒数第一个;-2 倒数第二个
- splice():
- 可以用于删除数组中的指定元素
- 使用splice()会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
- 参数:
- 第一个,表示开始位置的索引;第二个,表示删除的数量;第三个及以后,可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
- concat():
- 可以连接两个或多个数组,并将新的数组返回;也可以直接添加元素
- 该方法不会对原数组产生影响
- join():
- 该方法可以将数组转换为一个字符串
- 不会对原数组产生影响,而是将转换后的字符串作为结果返回
- 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符;如果不指定连接符,则默认使用,作为连接符
- reverse():
- 该方法用来反转数组(前边的去后边,后边的去前边),会直接修改原数组
- sort():
- 可以用来对数组中的元素进行排序,也会影响原数组,默认会按照Unicode编码进行排序
- 即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,所以对数字进行排序时,可能会得到错误的结果
- 可以自己来指定排序的规则
- 可以在sort()添加一个回调函数,来指定排序规则
- 回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数,使用哪个元素调用不确定,但肯定的是,在数组中a一定在b前边
- 浏览器会根据回调函数的返回值来决定元素的顺序
- 如果返回一个大于0的值,则元素会交换位置;如果返回一个小于0的值,则元素位置不变;如果返回一个0,则认为两个元素相等,也不交换位置
- 如果需要升序排列,则返回a-b
- 如果需要降序排列,则返回b-a
- 可以在sort()添加一个回调函数,来指定排序规则
- push():
- 数组的遍历:就是将数组中所有的元素都取出来
- 一般我们都是使用for循环去遍历数组,JS中还为我们提供了一个方法,用来遍历数组
- forEach():(这个方法只支持IE8以上的浏览器)
- 需要一个函数作为参数
- 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
- 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素,以实参的形式传递进来,我们可以来定义形参,来读取这些内容
- 浏览器会在回调函数中传递三个参数:
- 第一个参数,就是当前正在遍历的元素
- 第二个参数,就是当前正在遍历的元素的索引
- 第三个参数,就是正在遍历的数组
- Date对象:
- 在JS中使用Date对象来表示一个时间
- 创建一个Date对象:
- 如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
- 创建一个指定的时间对象,需要在构造函数中传递一个表示时间的字符串作为参数
- 日期的格式 月份/日/年 时:分:秒
- getDate():获取当前日期对象是几日(号)
- getDay():获取当前日期对象是周几,会返回一个0-6的值,0 表示周日,1表示周一,以此类推
- getMonth():获取当前时间对象的月份,会返回一个0-11的值,0 表示1月,1表示2月,11表示12月
- getFullYear():获取当前日期对象的年份
- getTime():获取当前日期对象的时间戳
- 时间戳,指的是从格林尼治标准时间的1970年1月1日,0时0分0秒,到当前日期所花费的毫秒数(1秒 = 1000毫秒)
- 计算机底层在保存时间时使用都是时间戳
- 可以利用时间戳来测试代码的执行的性能
- 获取当前的时间戳:time = Date.now();
- Math:
- 和其他的对象不同,它不是一个构造函数,它属于一个工具类,不用创建对象,它里边封装了数学运算相关的属性和方法(如:Math.PI 表示圆周率)
- abs()可以用来计算一个数的绝对值
- Math.ceil():可以对一个数进行向上取整,小数位只要有值就自动进1
- Math.floor():可以对一个数进行向下取整,小数部分会被舍掉
- Math.round():可以对一个数进行四舍五入取整
- Math.random():可以用来生成一个0-1之间的随机数
- 生成一个0-x之间的随机数:Math.round(Math.random()*x)
- 生成一个x-y之间的随机数:Math.round(Math.random()*(y-x)+x)
- max() 可以获取多个数中的最大值
- min() 可以获取多个数中的最小值
- Math.pow(x,y):返回x的y次幂
- Math.sqrt():用于对一个数进行开方运算
- 包装类:
- 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
- String():可以将基本数据类型字符串转换为String对象
- Number():可以将基本数据类型的数字转换为Number对象
- Boolean():可以将基本数据类型的布尔值转换为Boolean对象
- 但是注意:我们在实际应用中不会使用基本数据类型的对象,如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
- 方法和属性只能添加给对象,不能添加给基本数据类型
- 当我们对一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后再调用对象的属性和方法,调用完以后,再将其转换为基本数据类型
- 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
JavaScript学习笔记(2)
最新推荐文章于 2024-06-13 10:05:02 发布