【JS】js学习小笔记 3#

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

13.this

解析器在调用函数时每次都会向函数内部传递一个隐含的参数，就是_this_。this指向的是一个对象，是函数执行的上下文对象，根据调用方式不同，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() 替换 参数一：被替换的内容 参数二：替换内容