【JS】js学习小笔记 3#

你捡起了道具:遗失的纸片3#
一张普通的纸片,隐隐约约能够看到目录:“this、构造方法、原型、toString()、垃圾回收、数组、函数对象的方法、Date对象、Math对象、包装类、String()的方法(字符串操作)、正则表达式”。边角还有被撕扯的痕迹,它们应该属于一个笔记本,但不知为什么被主人撕下来丢掉了。
提示:集齐所有纸片应该可以得到一本技能书。
👇点击下方按钮调查

13.this

解析器在调用函数时每次都会向函数内部传递一个隐含的参数,就是thisthis指向的是一个对象,是函数执行的上下文对象,根据调用方式不同this的值不同。
1. 以函数形式调用时,this指代window
1. 以方法形式调用时,this指代包含该方法的对象

作用: 做到“函数的多态”

14.构造方法

①使用工厂方法创建对象

这样创建的都是object类型对象

//函数体
function createPerson(name,age,gender)
{
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.gender=gender;
    obj.sayName=function(){
        alert(this.name);
    };
    return obj;
}

//调用
var obj=createPerson("张三",28,"男");

②构造函数

  1. 创建时,构造函数就是一个普通的函数,不同的是构造函数习惯上首字母大写
  2. 调用时,普通函数直接调用,构造函数使用new调用

构造函数的执行流程:

  1. 立刻创建一个新的对象
  2. 将新建的对象设置为函数中this,在构造函数中可使用this来引用新建的对象
  3. 逐行执行函数中的代码
  4. 将新建的对象作为返回值返回
//函数体
function Person(name,age,gender)
{
    this.name=name;
    this.age=age;
    this.gender=gender;
    /*this.sayName=function(){
        alert(this.name);
    };*/
    this.sayName=sayNameFunc;
}

function sayNameFunc()
{
    alert(this.name);
}

//调用
var person1=new Person("张三",28,"男");

由于构造方法会多次创建对象,所以如果在构造方法中写入方法体势必占用大量内存空间,建议将function()提取到全局,创建对象时引用之(如上例)。
但这样又会污染全局作用域的类命名空间,也很不安全,最佳解决方法是将方法存储在原型中,见下一章

④instanceof()

检查一个对象是否是一个类实例

语法:对象 instanceof 构造函数
是,返回true,否,返回false
所有对象都继承自object,所以任何对象与object做instanceof运算时都会返回true

15.原型

①prototype和proto属性

  1. 我们所创建的每一个函数,解析器都会想函数中添加一个属性prototype
  2. 这个属性对应着一个对象,该对象及原型
  3. 普通函数也有prototype,但无任何作用。
  4. 当函数以构造函数形式调用时,它创建的对象中都会有一个隐含的属性指向该构造函数的原型对象,我们可以通过__proto__来访问这个属性。
  5. 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可将对象中共有的内容同一设置到原型对象中。
  6. 当我们访问对象的一个属性或方法时,它会先在对象自身中查找,如果有则直接使用,如果没有则回去原型对象中查找,找到则直接使用。
  7. 以后我们创建构造函数时,可将这些对象共有的属性和方法统一添加到构造函数的原型对象中,这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都使用这些属性和方法了。
  8. 原型对象中也有原型,直到object的原型才没有原型

②原型对其他方法的影响

  1. 使用in检查对象中是否含有某属性时,若对象中没有但原型中有,则同样返回true
  2. 可以用对象的hasOwnProperty()来检查对象自身是否含有某属性

16. toString()

在object的原型中,打印对象默认调用toString()方法,可通过在对象中添加toString()方法来修改toString()函数。

17.垃圾回收

  1. 当一个对象没有任何变量或属性时对它进行引用,此时我们将永远无法操作该对象,此时该对象即为垃圾,占用内存并导致程序变慢。
  2. JS拥有自动垃圾回收机制
  3. 将不再使用的对象置null即可触发垃圾回收

18.数组

①创建

⑴方法一:常规创建

//创建数组
var arr=new Array();
//添加元素
arr[0]=10;
arr[1]=33;

⑷方法四:使用数组的构造函数创建

var arr=new Array(1,2,3,4,5,6,10);

⑶方法三:使用数组的字面量创建

var arr1=[1,2,3,4,5,6,10];//数字数组
var arr2=["hello",1,true,undefined];//混合数组
var arr3=[{name:"张三",age:28},{name:"李四",age:25}];//对象数组
var arr4=[function(){alert(1);},function(){alert(2);}];//函数数组
var arr5=[[1,2,3],[4,5,6],[7,8,9]];//多维数组

②性质

  1. 若读取不存在的元素,不会报错,返回undefined
  2. 获取数组长度:arr.Length,该属性也可设置数组长度
  3. 对于非连续的元素,使用length可获取到数组的最大索引+1
  4. 设置arr[arr.length]永远向数组最后添加元素

③常用方法

  1. push()在末尾添加元素,也可添加多个元素,将返回添加后的新长度
  2. pop()删除数组最后一个元素,并返回被删除的元素
  3. unshift()在开头添加一个或多个元素。将返回添加后的新长度
  4. shift()删除并返回数组的第一个元素

④数组的遍历

——forEach方法(仅支持IE8以上的浏览器,还是建议使用for)
foreach方法需以函数作为参数

arr.forEach(function(){
    console.log("hello");
})//arr有几个元素就输出几个hello
  1. 像这种函数,由我们创建但不有我们调用的,我们称为回调函数(浏览器负责调用)
  2. 数组有几个元素就会调用几次,每次执行时,浏览器会将遍历到的元素以实参的形式传毒进来,我们可以定义形参来读取这些参数。
  3. 浏览器会在回调函数中传递三个参数:
参数 作用
第一个参数 当前正在遍历的元素
第二个参数 当前正在遍历的元素索引
第三个参数 正在遍历的数组

⑤slice()/splice()

⑴slice()可以用来从数组中提取指定元素

参数:
1. 第一个参数——截取开始位置的索引
1. 第二个参数——截取结束位置的索引(左闭右开)
第二个参数可省略,索引可传递一个负值:倒数值
返回:
截取到的数组

⑵splice()可以用于删除数组的指定元素

使用splice()会影响到原数组,并将被删除的元素返回
参数:
1. 第一个参数——开始位置的碎银
1. 第二个参数——删除元素的数量
1. 第三个及以后的参数——可传递新元素,这些元素将自动添加到删除索引之后

⑥剩余方法

⑴concat() 可连接两个或更多数组,并将新数组返回

不仅可传数组也可传元素

⑵join() 可将数组转为字符串,并返回该串

在join()中,可指定一个字符连接各元素。不指定默认为“,”

⑶reverse() 颠倒数组中的元素

会直接修改原数组

⑷sort() 可用来对数组中的元素排序

  1. 也会影响原数组
  2. 默认按Unicode编码排序
  3. 自定义排序函数→在Sort()中传入回调函数,回调函数需定义形参
  4. 浏览器会分别使用数组的元素作为实参调用回调函数。使用哪个元素不确定,但肯定的是在数组中第一个元素一定在第二个元素的前面。浏览器会根据回调函数的返回值来决定元素的顺序
  5. 返回值:
返回值 操作
>0 交换两个元素的位置
\<0 不交换
=0 认为二值相等,也不交换
//依据数字大小进行排序(升序)
arr.sort(function(a,b){
    return a-b;
});
//降序
arr.sort(function(a,b){
    return b-a;
});

19.函数对象的方法

①call()/apply()

  1. 都能执行函数
  2. 与普通调用不同的是,调用call()apply()可将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this
  3. call()方法可将要传入的实参在对象后依次传递,如 fun.call(obj,1,2),这里的1和2是传递到函数fun的实参,相当于fun(1,2)
  4. apply()方法需要将实参封装到一个数组中统一传递,如fun.apply(obj,[1,2])

20.arugments对象

在调用函数时,浏览器每次都会传递两个隐含参数:
1. 函数上下文对象this
1. 封装实参的对象arguments

概念

  1. arguments是一个类数组对象。它可以通过索引操作数据,也可获取长度
  2. 在调用函数时,我们所传递的实参都会在arguments中保存
  3. arguments.Length可用来获取实参的长度
  4. 即使不定义形参也可通过arguments得到实参
  5. arguments中有一个属性callee,此属性对应一个函数对象,即当前函数对象

21.Date对象

①如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间

②创建指定时间对象:

写在构造函数中,格式为:“mm/dd/yyyy hh/mm/ss”和“mm/dd/yyyy”

③得到日期

方法:
1. getDate():获得“日”
1. getDay():获得“周几”(返回0-6,0为周日)
1. getMonth():月 (返回0-11,0→1月,11→12月)
1. getFullYear():年
1. getTime():获得当前对象的时间戳(1970/1/1 00:00:00到目前时间的毫秒值)计算机底层使用的都是时间戳(获得当的时间戳Date.now())

22.Math对象

概念

  1. Math不是构造函数,不能创建对象,是一个工具类
  2. 有常用属性(Π、e等常数)

常用方法:

方法 含义
abs() 绝对值
ceil() 上舍入(向上取整)
floor() 下舍入(向下取整)
round() 四舍五入取整
random() 生成一个0-1之间的随机数
Math.round(Math.random()*x) 生成一个0-x之间的随机数
Math.round(Math.random()*(y-x)+x) 生成一个x-y之间的随机数
max() 获取多个数中的最大值
min() 获取多个数中的最小值
pow(x,y) 返回x的y次幂
sqrt(x) 对x开方

23.包装类

在JS中提供了三个包装类,通过这三个包装类可将基本数据类型数据转换为对象
即:String()/Number()/Boolean()

var num=new Number(3);

对象的优点:可存储属性、方法
缺点:无法直接进行比较、运算
方法和属性只能添加给对象,不能添加给基本数据类型,所以当我们对比一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后调用对象的属性和方法,调用完后再将其转换为基本数据类型

24.String()的方法(字符串操作)

  1. 在底层字符串以数组保存,所以很多方法共用
  2. 以下方法均不影响原字符串
方法/属性 功能 附加
length 字符串的长度
String.fromCharCode(…) 根据Unicode获取字符
concat() 连接多个字符串 作用与“+”相似
indexof() 检索一个字符串中是否含有指定内容 如果含有该内容,自返回第一次出现的索引,如果没有则返回-1。还可指定第二个参数,指定查找开始的索引位置。
lastindexof() 用法与indexof()相同,但从后往前找
slice() 截取指定内容 第一个参数为开始位置索引,第二个参数为结束为止索引(左闭右开)
substring() 与slice()类似,不同的是substring()不接受负值,负值默认为零,且能自动调整参数的位置 str.substring(2,1)→str.substring(1,2)
split() 可将一个字符串拆成数组 需要一个字符串作为参数,将据此拆分字符串
toLowerCase() 将字符串转为大写并返回
toUpperCase() 将字符串转为小写并返回

25.正则表达式

正则表达式语法参见→【Regex】正则表达式语法

①创建正则表达式对象

⑴常规创建

var reg=new RegExp(x,y)//x:正则表达式,y:匹配模式(可忽略,也可设置多个)

⑵使用字面量创建

var reg=/x/y
//x:正则表达式,y:匹配模式(可忽略,也可设置多个)

⑶匹配模式

  1. i→忽略大小写
  2. g→全局匹配

②检查

——test()方法

var result=reg.test(str);
//str为要检测的字符串

③与正则表达式相关的字符串语法

  1. split() 将字符串拆成数组(可传递正则表达式)
str.split(reg);
  1. search() 搜索
    若搜到,则返回第一次出现的索引,否则返回-1
  2. match() 可根据正则表达式将字符串中符合条件的内容提取出来
  3. replace() 替换
    参数一:被替换的内容
    参数二:替换内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据