js中级篇

Posted 2021-09-01 老张在线敲代码

对象分类

1.内置对象：在ES标准中定义的对象，在任何js实现中都可以使用
2宿主对象/浏览器对象：由js运行环境提供的对象，目前主要指浏览器提供的对象
3自定义对象：由开发人员自己创建

如何创建对象

new创建对象，如果想创建对象是通过new操作符new Object（）；创建出来对像字面量是{}；
使用new关键字调用的函数叫做构造函数，构造函数constructor 构造函数是专门用来创建对象的函数使用typeof查看数据类型返回值是object

什么是构造函数

1 new关键字1调用
2 首字母大写（与普通该函数进行区分）

构造函数中this指向

1 普通函数调用时，this指向window
2 对象方法属性调用时，this指向调用的对象
3 构造函数调用时，this指向新创建的对象
4 call和apply bind可以改变this指向

创建对象的俩种方法

1.构造函数创建 new Object（）

语法：对象 属性=属性值
in运算符

检查一个属性是否在对象中 语法：“属性” in 对象
返回true则说明对象中有这个属性
返回false则说明对象中没有这个属性

2.对象字面量创建 var obj = {}；

创建数组 var arr=new Array（）；

创建函数 var fun=new Function（）；

对象的操作

1 给对象添加属性 语法：对象。属性=属性值
2 修改对象属性 语法：对象.属性=新的属性
3 删除对象属性 语法：delect 对象.属性

对象定义

对象是复合型数据类型，
在对象中可以保存多个不同数据类型的属性
对象是有属性和方法的数据 document是对象 write是对象的属性
document.write()是对象的方法

计时

console.time（“test”);
console.timeEnd("test");

开启记时，结束计时，可以输出中间代码运行的时间，用来检测代码消耗浏览器资源的多少

单目，双目，三目

单目就是一个变量自增或者自减 双目俩个变量进行运算±*/%
三目下面的三元运算符也叫三目运算符（也叫条件运算符） ？三元运算符

堆内存和栈内存

栈：

js变量是保持到栈内存中的，基本数据类型也是保存在栈中，值与值之间都是独立存在的，修改一个变量的值，其他变量不会受到影响

堆：

对象是保存在堆内存中，创建一个新对象就会在堆中有一个新空间，栈中的变量对应的值是对象得内存地址（对象的引用）
如果一个对象保存的是另一个对象的引用 （obj2=obj1）当通过变量修改属性的时候，另一个对象也就会跟着改变。

栈内存跟堆内存的区别？

栈内存是存放变量和基本数据类型，对象得内存地址 堆内存存放的是对象 基本数据类型是具体值，引用数据类型是可扩展的
变量跟基本数据类型存放在栈里，引用数据类型放在堆里

深拷贝和浅拷贝

深拷贝：当一个对象保存的是另一个对象的引用时，改变其中一个，源对象不会改变。

浅拷贝：一个对象复制另外一个对象，改变其中一个，原对象属性也会被跟着改变。

for in 遍历对象

语法：for（x in 对象）{输出}； 输出写法 对象【x】；

当基本数据类型进行对比时，比较的是值，只要值相等就是相等的
引用数据类型进行比较的是栈内存地址，即使对象的属性跟属性值完全一样，如果他们的内存地址不同，比较结果就会是false，如果内存地址相等，结果是true；

数组

数组比普通对象存储性能要好，开发中经常使用数组来存储数据 数组内可以放所有基本数据，也可以放对象，对象里面也可以放数组。
数组也是对象，他与普通对象类似都是用于存储值的，不同的是对象的属性是字符串，而数组是通过数字索引（0开始的正整数）来进行定义的

数组就是一组数据的集合 数组中的每一项都有对应的顺序

创建数组的方法

1构造函数创建数组

var arr=new Array();

2字面量创建数组

var arr=[];
arr[0]=9;
arr[1]=14;
或者直接循环
var arr2 = new Array();
		arr2[0]="山西";
		arr2[1]="东北"；
	console.log(arr2);
	for(var i=0;i<=arr2.length;i++){
   console.log(arr2[i]);
 }

3字面量直接加属性

var arr=[1,2,3,4,5,6];

数组.length是数组长度，同时也叫数组个数,如果像遍历数组中的每一项，数组.length可以作为循环的范围

如果设置下标不是从0开始，空缺显示empty，如果查看空缺项则返回undefined arr.length

当数组是连续数组时索引值（从0开始的正整数），获取并返回数组项的个数，当不是连续数组时，length获取到的是最大索引+1的值

修改length 当length大于原长度，多出来的部分就会空出来，返回空项的值是undefined
当length长度小于原数组长度，会把数组中多余的项删除

数组方法

push（）从后面添加，并将新数组及个数作为返回值返回，改变原数组。 pop（）从后面删除一个，并将删除的数字项返回回来

unshift（）从数组前面添加一个或者多个数组项，并将新数组及数量返回 shift（）从数组前面删除一个，并将删除的数组项返回回来

二维数组：数组套数组。 concat()合并数组 语法：数组1.concat（数组2）； 在数组后面添加元素
语法：数组.concat（"…"）; 当数组里面是基本数据类型的时候，通过concat可以实现数组深拷贝

slice(1，2)可以用来从数组中提取指定的元素不会改变原数组
参数：第一个参数截取开始位置索引，第二个参数截取结束位置索引（但是他会截取从开始往后的所有索引，索引可以传一个负值）

splice（）可以删除数组中的元素并向数组中添加新的元素
使用splice会影响原数组，会将数组元素从原数组删除，并将被删除的元素作为返回值返回
-第一个值开始位置索引
-第二个值是删除的个数/数量
-第三个及以后的项可以向数组中添加新的元素

sort（）对数组中的元素进行排序如果数组中元素都是个位数数字，排序就按正常排序来排
-如果是俩位数字或者多位数字时sort则会按照第一位数字进行排序 例如：10 1523 22 233 56899 60
-如果是字母abcd…这些时按照26个字母排列顺序，如果是多个字母组成的单词排列顺序也还是按照开头字母排列 除了数字以外的字母，汉字，特殊符号都是按照unicode来进行排列的

join把数组变成字符串将数组的每项元素通过符号进行连接

toString将数组变成字符串

split（）将字符串转换为数组， 可以根据字符串中的某个字符进行分割 以哪个字符进行分割哪个字符就没有了 不以字符进行分割的时候分割后的结果是每个元素为一项

indexOf（）查询数组中的项，返回其索引值 参数：indexOf（要找的项目，从哪儿找）； 第一个是要找的项 第二个是从哪儿开始找，写的是索引值；

reverse 数组反转

内置对象

console.log(Math.abs(-1));返回值为1
abs绝对值他是将负数变成正数，正数还是正数

console.log(Math.ceil(1.25264));返回值为2 
ceil向上取整      不是按照四舍五入

console.log(Math.floor(1.05225));返回值为1   
floor向下取整     不是按照四舍五入

console.log(Math.max(1,2,5,99,44));//返回值99    
max自动取最大的值
会将其他类型隐式类型转换为数字

console.log(Math.min(1,2,5,99,44))//返回值1    
min自动取最小值
会将其他类型隐式类型转换为数字

console.log(Math.round(132.1129965));//返回值132			round四舍五入

random随机数3咋座组织者组织333333
console.log(Math.random());//返回0-1的随机小数 		
返回1以下的随机数
console.log(10*Math.random());//返回0-10的随机小数 
console.log(Math.ceil(100*Math.random()))返回1-100随机整数

sqrt对值开方
console.log(Math.sqrt(9))//对值开方计算返回值3

Date日期

获取是get 设置是set

Date（）获取到当前的时区，年月日时分秒星期几
getFullYear()获取当年
getMonth（）获取当前月 获取到的月份少一，所以每次加一
getDay（）获取当前周几
getDate()获取当前几号
getHovers（）获取当前时
getMinutes（）获取当前分
getSeconds（）获取当前秒
getTime（）获取当前时间（以毫秒显示）

函数创建方式：

1.构造函数创建：new Function();
2.函数字面量创建：function 函数名(){};

函数创建完之后并不会直接执行，需要调用才执行函数 带参数的函数： 参数本身其实就是个变量。 函数参数
小括号中可以直接写参数(形参，形式参数)，不需要声明变量，说明
形参对应的值实参通过调用函数中传入(具体数值，实际参数)，可以是任何数据类型，在实参中可以传对象

什么是函数

函数是一个对象
函数可以封装代码（功能），需要时可以执行功能（代码）
封装好的函数必须调用才执行，不调用则不执行

如果查看数据类型的话创建后的函数返回值为function 如果行参个数比实参个数少，调用函数时，解析器不会判断实参个数，多余的实参不回被赋值
如果实参个数比形参少，形参没有对应的实参 形参的结果就是undefined

return函数返回值

可以将函数中需要的值返回，不需要再函数体内直接输出，可以在函数体外输出

语法：retrun 值；

直接写return则返回undefined

return 值；下面的任何代码将不会执行 立即执行函数 （只会执行一次）匿名函数 语法：（function （）{要输出的内容} ）（） 特点：-没有函数名称
立即执行 -只能执行一次 -注意！没函数名称的函数必须用小括号括起来，后面加小括号调用 函数内可以是任何数据类型

遍历对象

将对象中的属性和属性值循环输出 语法：for（变量 in 对象）{}9 变量是会将对象得属性全部输出，对象的属性有多少就会循环出多少
输出变量返回的是对象得属性 对象属性值：对象[变量]

作用域：

-一个变量作用的范围
-1.全局作用域

全局作用域，整个页面，页面打开全局作用域被创建，页面关闭全局作用域被销毁 在全局作用域中声明 在全局作用域中无var声明（直接赋值）
-全局作用域中的变量叫全局变量，全局变量可以在全局作用域中使用，还可以在函数作用域中使用。 在全局作用域中函数会作为window属性的方法保存 通常如果是window.alert（）,可以省略window直接写alert（）

-2.函数作用域

函数作用域就是函数调用的时候函数作用域开启，函数执行完之后，函数作用域销毁
函数作用域中的变量叫局部变量,局部变量只能在函数体内使用不能再全局作用域中使用

变量声明提前：

var 声明变量，可以将变量声明提前 如果不加var，变量就不会声明提前 如果先输出变量，在下面var变量，返回undefined
如果先输出变量，没有在下面var变量，会报错

call4apply

是函数的方法，需要通过函数来进行调用

当函数调用call（）和apply（）都会调用执行函数 call和apply可以改变函数中的this指向
在调用call和apply时，可以讲一个对象作为第一个参数，此时这个对象就是this的指向

区别：

call（）方法可以将实参放到实参后面传递
call（object，2，3，2，3，14）；
apply（）方法需要把实参封装到数组中统一传递，如果传递对象，对象放前面，数组放在后面
即使是一个实参也要写成数组的形式
apply（obj，[2,3,2,3,14]）;

工厂模式创建对象

通过工厂函数可以大批量创建对象
步骤：

1写一个函数
2在函数中创建对象
3将对象作为返回值返回
4给对象添加属性

构造函数创建Person 构造函数就是普通函数
创建时与普通函数一样 构造函数名称是首字母大写
调用时，普通函数是直接调用，构造函数是通过new关键字调用

回调函数forEach（）{}

forEach中函数由我们创建但是不由我们调用，称为回调函数
语法：数组.forEach(function(){})forEach

-兼容性 ie8以下版本不兼容

如果需要兼容ie8及以下版本就不需要用forEach应该使用for循环；
移动端可以用forEach 数组中有几个元素，函数就会会执行几次 每次执行函数时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参来接收这些实参
参数 第一个参数是返回数组中的项
第二个参数是数组的索引 第三个参数是返回整个数组

for循环跟forEach的区别

for循环 for循环，通过下标，对循环中的代码反复执行，功能强大，可以通过index取得元素。在处理比较复杂时候较为方便。

使用的选择

foreach相对于for循环，代码减少了，但是foreach依赖IEnumerable。
在运行的时候效率低于for循环。
当然了，在处理不确定循环次数的循环，或者循环次数需要计算的情况下。使用foreach比较方便。而且foreach的代码经过编译系统的代码优化后，和for循环的循环类似。

可以说，foreach语句是for语句的特殊简化版本，在遍历数组、集合方面，foreach为开发人员提供了极大的方便。在复杂的循环设计时，还是应该使用for循环更加的灵活。

字符串方法

slice（）字符串截取

第一个参数，开始索引（下标），包括开始 //第二个参数，结束索引（下标），不包括结束
截取字符串 var str = “elephant”; var rel = str.slice(0,3); console.log(rel);
截取数组 var arr = [2,3,5,8,9]; var result = arr.slice(0,2); console.log(result);

split（）将字符串分割为数组

split（""）字符串中的每个字符都是数组中的一项
以字符串中的字符分割split（“t”）每次遇到这个字符就一字符为界限进行分割，这个字符不会出现到数组中
split（）括号中如果不写参数，整个字符串变成数组的一项 var srt = “partents”; var rle =
srt.split(""); console.log(rle);

indexOf查找字符串中的某项，并且返回其索引值

//从字符串的左往右查找，一旦查找到一个就会将其返回，并且不在继续查找，后面有重复的也不会继续查找
//lastIndexOf从右往左查找字符串的某项，返回其索引
//从字符串的右往左查找，一旦查找到一个就会将其返回，并且不在继续查找，后面有重复的也不会继续查找
var tsr =“dvisofefaffae”; var elr = tsr.indexOf(); console.log(elr);
length字符串的个数 //字符串的索引值也是从0开始 //0-5索引值，length长度是6

charAt（）返回指定位置的字符

//字符串的索引值是从0开始 //charAt（4）返回索引值为4的字符
charCodeAt返回指定位置字符的Unicode编码
//括号中的数字是字符串中的索引值 //返回的结果是对应索引的字符串的unicode编码
var aaa = “eeiehhohaifuajwfhw”;var bbb = aaa.charCodeAt(0); console.log(bbb);

concat合并字符串

var cc = "fiofhah";
			var dd = cc.concat(123);//将cc和dd合并
			console.log(dd);

tolocalelowerCase英文大写全部转小写

var ee = "DHAIODHW";
			var ff = ee.toLocaleLowerCase();
			console.log(ff);

toLocaleUpperCase将字符串中英文小写全部转大写

	var gg = "naiohahdodadawdp";
			var hh = gg.toLocaleUpperCase();
			console.log(hh);
toLowerCase（）将字符串转成小写
toUpperCase（）将字符串转成大写

字符串中可以结合正则使用的方法

1 serch()search即使结合正则表达式去检索，依旧只找到第一个就不再继续往下找了，并将第一个的索引值返回

2 match()在字符串中检索指定的值，可以结合一个或者是多个正则表达式进行匹配，返回结果的值 返回的类型是object是数组
即使返回只有一项也是以数组形式返回

3 split()截取字符串，可以结合正则截取多个范围或者多个字符，返回的都是数组

4 replace()replace结合正则表达式替换replace（/[a-e]/g,“泽林”）将abcde都替换成泽林 第一个参数就是要替换的项 第二个参数是新的项

判断是不是数组
isArray返回true是数组返回false则不是数组
判断是不是NaN
isNaN返回true是NaN返回false则不是NaN

数组冒泡排序：

1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。
2.比较完第一轮的时候，最后一个元素是最大的元素。
3.这时候最后一个元素是最大的，所以最后一个元素就不需要参与比较大小。