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章）
另外，欢迎关注我的新浪微博
