JavaScript基础视频教程总结（071-080章）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>070-080章总结</title>
</head>
<body> <pre>
071. 数组字面量
</pre>
<script type="text/javascript">
console.log("第071"); //创建一个数组
var arr = new Array();
//使用字面量来创建数组
//语法:[]
var arr = [];
console.log(typeof arr);
//使用字面量创建数组时，可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5,10];
console.log(arr[3]);
//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
//元素之间使用,隔开
var arr2 = new Array(10,20,30);
console.log(arr2);
//创建一个数组数组中只有一个元素10
arr = [10];
//创建一个长度为10的数组
arr2 = new Array(10);
console.log(arr2.length);
//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];
//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
//也可以是一个函数
arr = [ function(){alert(1)} , function(){alert(2)} ];
console.log(arr);
//arr[0]();
//数组中也可以放数组，如下这种数组我们称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);
</script> <pre>
072. 数组的4个常用的方法
1.push()
该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
可以将要添加的元素作为方法的参数传递，
这样这些元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
2.pop()
该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
3.unshift()
向数组开头添加一个或多个元素，并返回新的数组长度
向前边插入元素以后，其他的元素索引会依次调整
4.shift()
可以删除数组的第一个元素，并将被删除的元素作为返回值返回
</pre>
<script type="text/javascript">
console.log("第072"); //创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
//push()
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
console.log(arr);
console.log("result = "+result);
//pop()
result = arr.pop();
console.log(arr);
console.log("result = "+result);
// unshift()
arr.unshift("牛魔王","二郎神");
console.log(arr);
//shift()
result = arr.shift();
result = arr.shift();
console.log(arr);
console.log("result = "+result);
</script> <pre>
073. 数组的遍历
所谓的遍历数组，就是将数组中所有的元素都取出来
</pre>
<script type="text/javascript">
console.log("第073"); //创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
for(var i=0 ; i<arr.length ; i++){
console.log(arr[i]);
}
</script> <pre>
074. 数组练习
</pre>
<script type="text/javascript">
console.log("第074"); function Person(name , age ){
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("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",16);
var per5 = new Person("二郎神",38);
// 将这些person对象放入到一个数组中
var perArr = [per,per2,per3,per4,per5];
// 创建一个函数，可以将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
if(p.age >= 18){
//如果大于等于18，则将这个对象添加到newArr中
//将对象放入到新数组中
newArr.push(p);
}
}
//将新的数组返回
return newArr;
}
var result = getAdult(perArr);
console.log(result);
</script> <pre>
075. forEach()方法遍历
</pre>
<script type="text/javascript">
console.log("第075"); /*
* 一般我们都是使用for循环去遍历数组，
* JS中还为我们提供了一个方法，用来遍历数组
* forEach()
* - 这个方法只支持IE8以上的浏览器
* IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
* 还是使用for循环来遍历
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
/*
* forEach()方法需要一个函数作为参数
* - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
* - 浏览器会在回调函数中传递三个参数：
* 第一个参数，就是当前正在遍历的元素
* 第二个参数，就是当前正在遍历的元素的索引
* 第三个参数，就是正在遍历的数组
*
*/
arr.forEach(function(value,index,obj){
console.log(value)
})
</script> <pre>
076. slice和splice方法
</pre>
<script type="text/javascript">
console.log("第076");
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; /*
* slice()
* - 可以用来从数组提取指定元素
* - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
* - 参数：
* 1.截取开始的位置的索引,包含开始索引
* 2.截取结束的位置的索引,不包含结束索引
* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算
* -1 倒数第一个
* -2 倒数第二个
*/
var result = arr.slice(1,4);
result = arr.slice(3);
result = arr.slice(0,-1);
console.log(result);
console.log(arr);
/*
* splice()
* - 可以用于删除数组中的指定元素
* - 使用splice()会影响到原数组，会将指定元素从原数组中删除
* 并将被删除的元素作为返回值返回
* - 参数：
* 第一个，表示开始位置的索引
* 第二个，表示删除的数量
* 第三个及以后。。
* 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
*
*/ arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(3,2,"牛魔王","铁扇公主","红孩儿");
console.log(result);
console.log(arr);
</script> <pre>
077. 数组去重练习
</pre>
<script type="text/javascript">
console.log("第077"); var arrqq = [1,2,3,4,5,2,2,2,4,1,6,7,8,3,2,1,9]
//01
for (var i=0;i<arrqq.length;i++) {
for (var j=i+1; j<arrqq.length; j++) {
if (arrqq[i] == arrqq[j]) {
arrqq.splice(j,1)
//当删除了当前j所在的元素以后，后边的元素会自动补位
//此时将不会在比较这个元素，我需要在比较一次j所在位置的元素
//使j自减
j--
}
}
}
console.log(arrqq);
//02 使用的javascript的 indexOf 方法
Array.prototype.distinct = function(){
var newArr =[]
var repeatArr =[]
this.forEach(function(v){
if(newArr.indexOf(v) < 0){
newArr.push(v)
}
})
return newArr
}
//03 使用对象中的属性查找的方法
Array.prototype.unique = function(){
var newArr = [];
var obj = {};
for(var i = 0; i < this.length; i++){
if(!obj[this[i]]){
newArr.push(this[i]);
obj[this[i]] = 1;
}
}
return newArr;
}
var result1 = arrqq.distinct()
var result2 = arrqq.unique()
console.log(result1)
console.log(result2)
console.log(arrqq)
</script> <pre>
078. 数组的剩余方法
1. concat()可以连接两个或多个数组，并将新的数组返回
- 该方法不会对原数组产生影响
2. join()
- 该方法可以将数组转换为一个字符串
- 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
- 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
如果不指定连接符，则默认使用,作为连接符
3. reverse()
- 该方法用来反转数组（前边的去后边，后边的去前边）
- 该方法会直接修改原数组
4. sort()
- 可以用来对数组中的元素进行排序
- 也会影响原数组，默认会按照Unicode编码进行排序
- 所以对数字进排序时，可能会得到错误的结果。
我们可以自己来指定排序的规则
我们可以在sort()添加一个回调函数，来指定排序规则，
回调函数中需要定义两个形参,
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
- 浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置
- 如果需要升序排列，则返回 a-b
如果需要降序排列，则返回b-a
</pre>
<script type="text/javascript">
console.log("第078"); var arr781 = [1,2,3]
var arr782 = [4,5,6]
var arr783 = [7,8,9]
var result781 = arr781.concat(arr782,arr783,10,11,12)
var result782 = arr781.join("*")
var result783 = arr781.reverse()
console.log( result781 )
console.log( result782 )
console.log( result783 )
console.log( arr781 )
console.log( result783 === arr781 )
var result784 = arr781.sort()
console.log( result784 ) var arr784 = [9,43,22,100]
var result785 = arr784.sort()
//纯数字数组，纯数字字符串数组或组合不传比较器直接用 sort() 排序，是按照元素的第一位的大小进行排序的，并不是我们想要的结果。
console.log( result785 ) //[100, 22, 43, 9] arr784.sort(function(a,b){
//升序排列
return a - b;
//降序排列
//return b - a;
});
console.log( arr784 )
</script> <pre>
079. call和apply
call()和apply()
- 这两个方法都是函数对象的方法，需要通过函数对象来调用
- 当对函数调用call()和apply()都会调用函数执行
- 在调用call()和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
- call()方法可以将实参在对象之后依次传递
- apply()方法需要将实参封装到一个数组中统一传递
如果没有任何实参，则为全局对象
- this的情况：
1.以函数形式调用时，this永远都是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象
</pre>
<script type="text/javascript">
console.log("第079"); function fun79(a,b) {
console.log("a = "+a);
console.log("b = "+b);
}
var obj79 = {
name: "obj79",
sayName:function(){
alert(this.name);
}
}
fun79.call() // window
fun79.call(obj79,2,3)
fun79.apply(obj79,[2,3]);
</script> <pre>
080. arguments
在调用函数时，浏览器每次都会传递进两个隐含的参数：
1.函数的上下文对象 this
2.封装实参的对象 arguments
- arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
- 在调用函数时，我们所传递的实参都会在arguments中保存
- arguments.length可以用来获取实参的长度
- 我们即使不定义形参，也可以通过arguments来使用实参，
只不过比较麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参 。。。
- 它里边有一个属性叫做callee，
这个属性对应一个函数对象，就是当前正在指向的函数的对象
</pre>
<script type="text/javascript">
console.log("第080"); function fun(a,b){
console.log(arguments)
console.log(this)
console.log(arguments instanceof Array); // false
console.log(Array.isArray(arguments)); // false
console.log(arguments[1]); //true
console.log(arguments.length); //2
console.log(arguments.callee == fun); //true
}
fun("hello",true);
</script> </body>
</html>
所有基础课程链接：
1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）
5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）
9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）
13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）
另外，欢迎关注我的新浪微博
JavaScript基础视频教程总结（071-080章）的更多相关文章
- JavaScript基础视频教程总结（131-140章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（121-130章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（111-120章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（101-110章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（091-100章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript基础视频教程总结（081-090章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（061-070章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（051-060章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript基础视频教程总结（001-010章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- Git自学笔记
Git是什么? Git是目前世界上最先进的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git与SVN的区别有哪些? ① Git是分布式的,SVN不是.这是Git和其它非分布式版本控制系 ...
- 图论.DP
见题: 看一眼,就知道是个依赖性背包,于是乎就草草的打了树上DP,一交发现才20,仔细检查也没错呀,忍不住点了题解,只喵一眼看到了强联通缩点等的字样,又重新审了一遍题,发现这句话理解有偏差:软件i只有 ...
- 4、promise
es5 中 var obj = { ajax: function (callback) { console.log('执行') setTimeout(function () { callback &a ...
- .net core 获取客户端ip
1.NUGET安装 Microsoft.AspNetCore.Http 2.在 startup.cs 的 ConfigureServices 中注入 services.AddSingleton< ...
- Python下划线简介
Python中下划线的5种含义 分享一篇文章:The Meaning of Underscores in Python. 本文介绍了Python中单下划线和双下划线("dunder" ...
- React-Native android 开发者记录
1.安装 安装步骤不多废话,按照官网步骤执行即可 安装完之后,react-native run-android发现报错,页面出不来 Error: Unable to resolve module `. ...
- Servlet第五篇（会话技术之Session）
Session 什么是Session Session 是另一种记录浏览器状态的机制.不同的是Cookie保存在浏览器中,Session保存在服务器中.用户使用浏览器访问服务器的时候,服务器把用户的信息 ...
- mysql 中启动服务的命令 、登录命令、退出命令 mysql 的常用命令
1.cmd 以管理员执行 下面命令 启动服务 :net start mysql57 关闭 服务:net stop mysql57 查看mysql 的版本信息 : mysql -V 指定主机地址登录: ...
- GlusterFS
1. GlusterFS概述 GlusterFS是Scale-Out存储解决方案Gluster的核心,它是一个开源的分布式文件系统,具有强大的横向扩展能力,通过扩展能够支持数PB存储容量和处 ...
- MYSQL后更改ROOT的密码后无法启动服务报错1067
安装MYSQL后更改了ROOT的密码后用 net start mysql 启动时报错1067.使用以下命令:1.进入mysql安装目录的bin目录下:cd C:\Program Files\MySQL ...