55.函数作用域练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
函数作用域练习1
*/
// var a = 123;
// function fun(){
// alert("第一个a:"+a);//123
// a = 456;
// }
// fun();
// alert("第二个a: "+a);//456
/*
函数作用域练习2
*/
// var a = 123;
// function fun(a){
// alert("第一个a:" + a);//undefied
// a = 456;
// }
// fun();
// alert("第二个a:" + a);//123
/*
函数作用域练习3
*/
// var a = 123;
// function fun(a){
// alert("第一个a:" +a);//undefined
// a = 456;
// }
// fun();
// alert("第二个a:" +a);//123
/*
函数作用域练习4
*/
var a = 123;
function fun(a){
alert("第一个a:"+a);//123
a = 456;
}
fun(123);
alert("第二个a:"+a);//123
</script>
</head>
<body>
</body>
</html>
56.debug测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
alert(d);
var a = 10;
var b = "hello";
c = true;
function fun(){
alert("hello");
}
var d = 35;
</script>
</head>
<body>
</body>
</html>
57.this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
解析器在调用函数每次都会向函数内部传递一个隐含的参数
这个隐含的参数就是this,this指向的是一个对象
这个对象我们称之为函数执行的上下文对象,
根据函数调用的方式的不同,this会指向不同的对象
1、以函数的形式调用时,this永远都是window
2、以方法的形式调用时,this就是调用方法的那个数
*/
function fun(){
// console.log("a = "+a+ ", b = "+ b );
console.log(this);
}
//fun();
//创建一个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
// console.log(obj.sayName == fun );
// obj.sayName();
// fun();//window
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
58.this的补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
this的补充
*/
//创建一个name变量
var name = "全局";
//创建一个fun()函数
function fun(){
console.log(obj.name);
}
//创建两个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
// fun();//全局
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
59.使用工厂方法调用对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
创建一个对象
*/
var obj = {
name: "孙悟空",
age: 18,
agender: "男",
sayName: function () {
alert(this.name);
}
};
/*
使用工厂方法创建对象
通过该方法可以创建大量的对象
*/
function createPerson(name,age,gender){
//创建一个对象
var obj = new Object();
//向对象中添加属性
obj.name = name,
obj.age = age,
obj.agender = gender,
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}
var obj2 = createPerson("猪八戒",18,"男");
var obj3 = createPerson("猪八戒2",18,"男");
var obj4 = createPerson("猪八戒3",18,"男");
console.log(obj2);
console.log(obj3);
console.log(obj4);
</script>
</head>
<body>
</body>
</html>
60.构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
使用工厂方法创建对象
通过该方法可以创建大量的对象
*/
function createPerson(name,age,gender){
//创建一个对象
var obj = new Object();
//向对象中添加属性
obj.name = name,
obj.age = age,
obj.agender = gender,
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}
/*
用来创建狗的对象
*/
function createDog(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHello = function(){
alert("汪汪~");
};
return obj;
}
var obj2 = createPerson("猪八戒",18,"男");
var obj3 = createPerson("猪八戒2",18,"男");
var obj4 = createPerson("猪八戒3",18,"男");
// console.log(obj2);
// console.log(obj3);
console.log(obj4);
/*
使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型
就导致我们无法区分出多种不同类型的对象
*/
//创建一个狗的对象
var dog = createDog("旺财",3);
console.log(dog);
// dog.sayHello(obj);
</script>
</head>
<body>
</body>
</html>
61.构造函数2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// var obj = new Person();
// var obj2 = new Dog();
/*
创建一个构造函数,专门用来创建Person对象的
构造函数就是一个普通的函数,创建方式和普通函数没有区别
不同的是构造函数习惯首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数时直接调用,而构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新创建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称之为一类对象,也将一个构造函数称为一个类。
我们将通过一个构造函数创建的对象,称之为是该类的实例
this的情况:
1.当以函数的形式调用时,this是window
2.当以方法的形式调用时,谁调用方法this就是谁
3.当以构造函数的形式调用时,this就是新创建的那个对象
*/
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function () {
alert(this.name);
}
}
/*
用来创建狗的对象
*/
function Dog(name, age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
var per = new Person("狐狸精", 18, "女");
var per2 = new Person("狐狸精2", 19, "女");
var per3 = new Person("狐狸精3", 20, "女");
var dog = new Dog();
// console.log(dog);
/*
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象Instance of 构造函数
如果是,则返回true,否则返回false
*/
console.log(per instanceof Person);
console.log(dog instanceof Person);
console.log(dog instanceof Object);
</script>
</head>
<body>
</body>
</html>
62.构造函数3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
创建一个Person构造函数
-在Person构造函数中,为每一个对象都添加了一个sayName方法
目前我们的方法是在构造函数内部创建的,
也就是构造函数每执行一次就会创建一个新的sayName方法
也就是所有实例的sayName都是唯一的
这样就导致了构造函数执行一次就会创建一个新的方法,
执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的
这是完全没有必要的,完全可以使所有的对象共享同一个方法
*/
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
// this.sayName = fun;
}
//将sayName方法在全局作用域中定义
/*
将函数定义在全局作用域,污染了全局作用域的命名空间
而且定义在全局作用域中也很不安全
*/
// function fun(){
// alert("Hello大家好,我是:" + this.name);
// }
Person.prototype.sayName = function(){
alert("Hello大家好!我是:" + this.name);
}
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("孙悟空2",19,"男");
per.sayName();
per2.sayName();
// console.log( per2.sayName == per2.sayName );//true
</script>
</head>
<body>
</body>
</html>
63.原型对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
原型prototype
我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象,这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数通过构造函数调用时,它所创建的对象中都会有一个隐含的属性,
指向该构造函数的原型对象,我们可以通过_proto_来访问该属性
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容,统一设置到原型对象中
当我们访问对象的一个属性或方法时,它会在对象自身中寻找,如果有则直接使用
如果没有则会去原型对象中寻找,如果找到则直接使用
以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
这样不要分别为每一个对象添加,也不会影响全局作用域,就可以使每个对象都具有这些属性和方法了
*/
function MyClass(){
}
//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;
var mc = new MyClass();
var mc2 = new MyClass();
// console.log(mc.__proto__ == MyClass.prototype);
// console.log(MyClass.prototype == Person.prototype );//false
//向mc中添加属性a
mc.a = "我是mc中的a";
console.log(mc2.a);//123
mc.sayHello();
</script>
</head>
<body>
</body>
</html>
64.原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
创建一个构造函数
*/
function MyClass(){
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字"
var mc = new MyClass();
console.log(mc.name);
/*
用in 检查mc中是否有name属性, 如果对象中没有但是原型中有,也会返回true
*/
// console.log("name" in mc);
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有当对象自身中含有属性时,才会返回true
console.log(mc.hasOwnProperty("age"));//false
/*
原型对象也是对象,所以它也有原型
当我们使用一个对象的属性或方法时,会现在自身中寻找
自身中如果有,则直接使用
如果没有则去原型对象中寻找,如果原型对象中有,则使用
如果没有则取原型的原型中寻找,直到找到Object对象原型
Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
*/
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//true
</script>
</head>
<body>
</body>
</html>
65.toString
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.toString = function(){
return "Person[name = "+this.name+",age = "+this.age+",gender = "+this.gender;
};
//创建一个Person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",19,"男");
per.toString = function(){
return "我是一个快乐的小Person";
}
var result = per.toString();
// console.log("result = " + result);//Object
// console.log(per.__proto__.__proto__.hasOwnProperty("toString"));//true原型的原型里面有toString方法
console.log(per2);
console.log(per);
</script>
</head>
<body>
</body>
</html>
66.垃圾回收
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
垃圾回收(gc)
-就像人生活时间长了会产生垃圾一样,程序运行过程中也会产生垃圾
这些垃圾积攒过多以后,会导致程序运行的速度过慢,
所以我们需要一个垃圾回收机制,来处理程序过程中产生的垃圾
-当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,此时这种对象就是一种垃圾
这种垃圾过多会占用大量内存空间,导致程序运行变慢,
所以这种垃圾必须进行清理
-在js中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁
我们不需要也不能进行垃圾回收的操作
--------------------------------------------------
我们只需要做的是将不再使用的对象设置Null即可
*/
var obj = new Object();
//对对象进行各种操作。。。
obj = null;
</script>
</head>
<body>
</body>
</html>
67.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/**
* 内建对象
*
*
* 宿主对象
*
*
* 自定义对象
*
*
* 数组(Array)
* -数组也是一个对象
* -它和我们普通的对象功能类似,也是用来存储一些值的
* -不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素
*
* -索引:
*
* 从0开始的整数就是索引
*
* -数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
*
*/
//创建数组对象
var arr = new Array();
//使用typeOf检查一个数组时,会返回object
// console.log(typeof arr);//object
/*
向数组中添加元素
语法:数组[索引] = 值
*/
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 42;
arr[100] = 100;
/*
读取数组中的元素
语法:数组[索引]
如果读取不存在的索引,它不会报错而是返回undefined
*/
//console.log(arr[3]);
/*
获取数组的长度
可以使用length属性来获取数组的长度(元素的个数)
语法:数组.length
对于连续的数组,使用length可以获取到数组的长度(元素的个数)
对于非连续的数组,使用length会获取到数组的最大的索引 +1
尽量不要创建非连续的数组
*/
// console.log(arr.length);
// console.log(arr);
/*
修改length
如果修改的length大于原长度,则多出部分会空出来
如果修改的length小于原长度,则多出的元素会被删除
*/
arr.length = 10;
// console.log(arr.length);
// console.log(arr);
arr[4] = 50;
arr[5] = 60;
//向数组的最后一个位置添加元素
//语法:数组[数组.length] = 值;
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;
console.log("数组最后一个值:" + arr[arr.length] );
</script>
</head>
<body>
</body>
</html>
68.数组字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个数组
// var arr = new Array();通过对象创建太麻烦了
// arr[0] = 123;
// arr.hello = "abc";
//使用字面量来创建数组
//语法:[]
var arr = [];
// var arr = [];
// console.log(typeof arr);
//使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5,10];
// console.log(arr.length);//6
console.log(arr[3]);//通过索引取值 4
//使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递
//元素之间使用,使用逗号,隔开
var arr2 = new Array(10,20,30);
// console.log(arr2);
//创建一个数组数组中只有一个元素10
arr = [10];
arr2 = new Array(10);
//数组中的元素可以是任意数据类型
// arr = ["hello",1,true,null,undefined];
//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{ name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
//也可以是一个函数
arr = [function(){alert(1)},function(){alert(2)}];
// arr[0]();
// console.log(arr);
// console.log(arr[0]);//10
//数组也可以放数组,如下数组称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);
</script>
</head>
<body>
</body>
</html>
69.数组的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
push()
该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
可以将要添加的元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
var result = arr.push("唐僧","蜘蛛精","白骨精");
*/
var result = arr.push("唐僧","蜘蛛精","白骨精");
console.log(arr);
// console.log("result = " + result);
/*
pop()
该方法可以删除数组的最后一个元素
-调一次删一次
-该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
*/
// var result = arr.pop();
// console.log("result = " + result);
/*
unshift()
-向数组开头添加一个或多个元素,并返回新的数组长度
-向前边插入元素以后,其他元素索引会依次调整
*/
console.log(arr);
arr.unshift("牛魔王","二郎神");
console.log(arr);
/*
shift()
可以删除数组的第一个元素,并将被删除的元素作为返回值返回
*/
result = arr.shift();
console.log(arr);
console.log("result = "+ result);
</script>
</head>
<body>
</body>
</html>
70.数组的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","tans","123"];
//所谓的遍历数组,就是将数组中的所有元素都取出来
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]);
// console.log(arr[3]);
for(var i = 0;i < arr.length ; i++ ){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
71.数组的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function Person(name , age , gender){
this.name = name;
this.age = age;
}
//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age = " + this.age + "]";
};
//创建一个Person对象
var per = new Person("孙悟空",18);
var per2 = new Person("孙悟空2",28);
var per3 = new Person("孙悟空3",8);
var per4 = new Person("孙悟空4",16);
var per5 = new Person("孙悟空5",38);
/*
将这些对象Person对象放入一个数组中
*/
var perArr = [per,per2,per3,per4,per5];
console.log(perArr);
/*
创建一个函数,可以将perArr中的满18岁的Person提取出来,
然后封装到一个新的数组中并返回
arr
形参,要提取信息的数组
*/
function getAdult(arr){
//创建一个新的数组
var newArr = [];
//遍历arr,获取arr中的Person对象
for(var i = 0 ; i < arr.length ; i++){
var p = arr[i];
//判断Person对象的age是否大于18,则将这个对象添加到newArr中
if(p.age >= 18 ){
//如果大于等于18,则将这个对象添加到newArr中
//将对象放入新的数组中
newArr.push(p);
}
}
//将新的数组返回
return newArr;
}
var result = getAdult(perArr);
console.log(result);
</script>
</head>
<body>
</body>
</html>
72.forEach
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
/*
forEach()IE8不支持
forEach()需要一个函数作为参数
--像这种函数,有我们创建但是不由我们调用的,我们称之为回调函数
--数组中有几个元素,函数就执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,
我们可以来定义形参,来读取这些内容
--浏览器会在回调函数中传递三个函数
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遍历元素的索引
第三个参数,就是正在遍历的数组
*/
arr.forEach(function(value,index,obj){
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
73.slice和splice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
/*
slice()
--可以从数组中提取指定元素
--该方法不会改变元素的数组,而是将截取的元素封装到一个新的数组中返回
--参数:
1.截取开始的位置索引,包含开启索引
2.截取结束的位置的索引,不包含结束索引
--第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个负值,如果传递一个负值,则从后往前计算
--1.倒数第一个
--2.倒数第二个
*/
var result = arr.slice(0,2);
result = arr.slice(3);
result = arr.slice(1,-2);
// console.log(result);
/*
splice()更好用一点!!
--可以用于删除数组中的指定元素
--使用splice()会影响到原数组,会将指定元素从数组中删除
并将被删除的元素作为返回值返回
--参数:
第一个,表示开始位置的索引
第二个,表示删除的数量
第三个及以后。。
可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(1,1,"牛魔王","铁扇公主","红孩儿");//第一个一是插入的位置
console.log(arr);
// console.log(result);
</script>
</head>
<body>
</body>
</html>
74.Splice练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个数组
var arr = [1,2,3,2,1,3,4,2,5,2];
//去除数组中重复的数字
//获取数组中的每一个元素
for( var i = 0;i < arr.length; i++ ){
// console.log(arr[i]);
/*
获取当前元素后的所有元素
*/
for(var j = i + 1 ; j < arr.length;j++ ){
// console.log("------->" + arr[j] );
//判断两个元素的值是否相等
if(arr[i] == arr[j]){
//如果相等则证明出现了重复元素,则删除j对应的元素
arr.splice(j,1);
j--;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
75.数组的剩余方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["孙悟空2","猪八戒3","沙和尚4"];
var arr3 = ["孙悟空3","猪八戒4","沙和尚5"];
/*
concat()可以连接两个或多个数组,并将新的数组返回
--该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
// console.log(result);
/*
join()
-该方法可以将数组转换成一个字符串
--该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
--在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
如果不指定连接符,则默认使用,(逗号)作为连接符
*/
arr = ["孙悟空","猪八戒","沙和尚"];
result = arr.join("-");//转换成String
console.log(result);
/*
reverse()
--该方法用来反转数组(前边的去后边,后边的去前边)
--该方法会直接修改原数组
*/
arr.reverse();
// console.log(arr);
arr = ["b","d","e","a","c"];
/*
sort()
--可以用来对数组进行排序
--也会影响原数组,默认会按照Unicode编码进行排序
所以对数字排序有可能得到错误的结果
我们可以在sort()添加一个回调函数,来指定排序规则
回调函数需要定义两个形参,
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
--浏览器会根据回调函数的返回值来决定元素的顺序,
如果返回一个大于0的值,则元素会交换位置
如果返回一个小于0的值,则元素位置不变
如果返回一个0,则认为两个元素相等,也不交换位置
*/
arr = [5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
// if( a > b ){
// return 1;
// }else if(a < b ){
// return -1;
// }else{
// return 0;
// }
//升序排列
// return a - b;
//降序排列
return b - a ;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>
76.call和apply
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun(){
alert(this.name);
}
/*
call()和apply()
-这两个方法都是函数对象的方法,需要通过函数对象来调用
-当对函数调用call()和apply()都会调用函数执行
-在调用call和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行的this
*/
var obj = {name:"obj"};
var obj2 = {name:"obj2"};
fun.call(obj);
fun.apply(obj);
</script>
</head>
<body>
</body>
</html>