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标签写在页面的上边,在代码执行时,页面还没有加载。