- <!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>
JavaScript基础视频教程总结(071-080章)
最新推荐文章于 2024-05-18 21:57:13 发布