JS之学习之路总结

js学习

1.数据类型

1.1基本数据类型

String Number Boolean Null Undefined

基本数据存储在栈内存中，数据之间互相独立

1.2引用数据类型

Object

var Obj = new Object()或

var Obj = {}

引用数据存贮的是对象的内存地址，两个变量引用同一个地址时，一个发生改变，另一个同样会发生改变。

2.函数

创建函数 var fun = new Function() {}

1.调用函数时解析器不会检查实参的类型

2.调用函数时解析器不会检查实参的数量，多余的不会被赋值

3.break、continue、和return

1.break 跳出整个循环

2.continue 跳出当前循环

3.return 跳出整个函数，直接结束

4.for … in遍历

for(var n in Obj){

​ console.log(n)

}遍历出所有的对象属性

5.作用域

1.全局作用域

-在页面打开时创建，在页面关闭时销毁

-在全局作用域中有一个对象window可以直接使用

-全局创建的属性都作为window方法保存

2.函数作用域

-在函数里创建，只能在函数里使用，其他地方不能使用

6.构造函数

普通函数和构造函数的区别：普通函数直接调用，构造函数要加new调用

7.原型对象

原型 prototype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

-这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

1.如果函数作为普通函数调用prototype没有任何作用

2.当函数以构造函数调用时，它所创建的对象都有一个隐含的属性，指向该构造函数的原型对象，我们可以通过___proto___(双下划线)来访问该属性。

function Myclass(){
				
			}
			
var mc = new Myclass();
			
console.log(Myclass.prototype);
console.log(mc.__proto__ == Myclass.prototype)

原型对象就相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象。

-我们可以将对象中的公共内容，统一设置到原型对象中

-但我们访问对象的一个属性或方法时，它先会在自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，找到则直接使用。

-以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法。

function Myclass(){
				
			}
			
Myclass.prototype.name = "我是原型的名字"
var mc = new Myclass();
console.log(mc.name)
			
//使用in检查对象中是否含有某个属性，如果原型对象中含有，也会返回true
console.log("name" in mc)
			
//可以使用对象的hasOwnProperty来检查自身是否有该属性
//该方法只能检测自身的属性，原型对象的属性不算
console.log(mc.hasOwnProperty("name"))

-原型对象也是对象，所以它也有原型

当我们使用一个对象的属性时，

-自身中如果有，则使用

-如果没有则去原型对象中寻找，如果原型对象中有则使用

-如果没有则去原型对象的原型中寻找，找到则使用

-Object对象的原型没有原型，如果没有在Object中找到，则返回undefined（原型的原型只有两层，再往下没有了 ）

8.toString

-但我们直接在页面打印一个对象时，事件上是输出的对象toString（）方法的返回值

function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}

		//创建一个Person实例
		var per = new Person("孙悟空","18","男")
		
		per.toString() = function(){
			
		}
		//但我们直接在页面中打印一个对象时，事件实际上输出的是同String的返回值
		console.log(per)

9.垃圾回收

当一个对象没有任何的变量或属性对他进行引用，我们将不用的对象设置为null即可

10.数组

-数组也是一个对象

-它和我们的普通对象功能一样

-不同的是普通对象是使用字符串作为属性名的，而数组使用数字来作为索引操作元素

var arr =[1,2,3,4]

-legth 数组的长度

-push() 向数组中添加一个或多个元素 该方法会将新的数组长度作为返回值

-pop() 删除数组的最后一个元素，并将被删除的元素作为返回值返回

-unshift() 向数组开头添加一个或多个元素，并返回新的数组长度

​ 向前边插入元素以后，其他元素的索引会依次调整

-shift() 删除数组的第一个元素，并将被删除的元素作为返回值返回

-forEach() 遍历数组的一个方法，对浏览器有限制

​ 需要一个函数作为一个参数

11.slice() 方法

slice() 方法可从已有的数组中返回选定的指定元素。

arrayObject.slice(start,end)

-截取开始的位置的索引，包含开始索引

-截取结束位置的索引，不包含结束索引

-索引可以为一个负值，负值代表倒着数

12.splice() 方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

**注释：**该方法会改变原始数组。

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX	可选。向数组添加的新项目。

-返回的结果为删除的元素

-添加插入删除的位置

13.数组去重

1.sort去重 先排序，用for循环判断去重

2.用set去重

function getArr(){
   return Array.from(new Set(arr)) 
}

3.用indexOf去重 建一个空数组，for循环原数组，判断结果数组是否存在当前元素，如果有则跳过，没有则push进新数组。

for(var i = 0; i < arr.length; i++){
	if(array.indexOf(arr[i] === -1)){
		array.push(arr[i])
	}
}

4.[…new Set(arr)]

var arr = [1,1,2,3,4,6,8,6,5,7,3,2,4,6]
function getArr(){
    return Array.from(new Set(arr))
}
var newArr = getArr()
console.log(newArr)

14.数组的方法

1.concat()

-可以连接两个或多个数组，并将新的数组返回

-该方法不会对原数组产生影响，只影响返回的结果值

var result = arr.concat(arr2,arr3)

2.join()

-该方法可以将数组转换为一个字符串

-该方法不会对原数组产生影响，只是因影响返回值

-如果不指定连接符，则默认为空

3.reverse()

-该方法用来反转数组

-会对原数组产生影响

4.sort()

-该方法对数组可以进行快速排序

-会影响原数组，默认会按照Unicode编码进行排序

-对纯数字排序可能会出现错误，我们可以自行指定排序规则

-可以在sort()添加一个回调函数指定排序规则

var arr = [1,23,45,36,73,8]
arr.sort(function(a,b){
    // if(a > b){
    // 	return 1;
    // }else if(a < b){
    // 	return -1;
    // }else{
    // 	return 0;
    // }
    return a - b
});
console.log(arr)

-浏览器会根据回调的返回值来决定元素的顺序

​ 如果返回一个大于0的值，则元素会交换位置

​ 如果返回一个小于0的值，则元素位置不动

​ 如果返回一个0，则认为两个元素相等，位置不动

-如果升序排列，则a-b，如果降序则b-a

15.call()和apply()

-两个方法都是函数对象的方法，需要通过函数对象来调用

-当对函数调用call()和apply()都会调用函数执行

function fun(){
    console.log("hello")
}
fun.call();
fun.apply();
fun()

-三个函数结果是一样的

-在调用call()和apply()可以将一个对象指定为第一个参数

​ 此时对象将会成为函数执行时的this(可以修改tihs指定的对象)

以函数的形式调用this时，this指向的是window

以方法的形式调用时，this指向的是调用该方法的对象

以构造函数调用时，tihs是新创建的那个对象

使用call和apply调用时，this是指定的那个对象

-call()方法可以将实参在对象之后一次传递

function fun(a,b){
    console.log(this.name)
    console.log("a:"+a)
    console.log("b:"+b)
}
var obj = {name: "aaaa"}
fun.call(obj,2,3);

-这样是同样适用的。

-apply()需要将实参封装在一个数组中使用

function fun(a,b){
    console.log(this.name)
    console.log("a:"+a)
    console.log("b:"+b)
}
var obj = {name: "aaaa"}
fun.apply(obj,[2,3]);

16.arguments()

-在调用函数时，浏览器每次都会传递进两个隐含的参数

1.函数的上下文对象this

2.封装实参的对象arguments

​ -arguments是一个类数组对象，它可以通过索引才操作数据，也可以获取长度

​ -在调用函数时，我们所传递的实参都会在arguments中保存

​ -arguments.length可以用来获取实参的长度

​ -即使我们不定义形参，也可以通过arguments来使用实参

​ arguments[0]表示第一个实参

function fun(){
    console.log(arguments.length)
}

fun("ads","Adasd")

​ -它里面有一个属性叫callee

​ 这个属性对应一个函数对象，就是当前正在指向的对象

17.data

//当前时间
var d = new Date()
			
console.log(d)

18.DOM

DOM全称Document Object Model文档对象模型

1.文档

-文档表示的就是整个的html网页文档。

2.对象

-对象表示将网页中的每一个部分都转化为一个对象。

3.模型

-使用模型来表示对象之间的关系，这样方便我们获取对象。

19.事件

事件，就是用户和浏览器之间的交互行为。

比如点击按钮、鼠标移动、关闭窗口。

20.文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写在页面的上边，在代码执行时，页面还没有加载。