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 ...

随机推荐

Ubuntu 14&period;04 更换阿里云源[转]
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...
python入门一
python类型编程语言主要从以下几个角度为进行分类,编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言. 编译型和解释型编译型:在程序执行之前,有一个单独的编译过程,将程序翻译成 ...
带你走进EJB--MDB实现发送邮件(1)
在实际的项目中我们有这样的需求,用户注册网站成功之后系统会自动的给注册用户发送注册成功通知邮件,而发送通知邮件的具体过程我们可以通过MDB来实现. 在用MDB来实现发送通知过程之前我们需要先了解一下J ...
phpmyadmin数据库导入大小限制的修改
1.遇到导入过大文件时,首先检查php.ini 配置文件中的以下三个地方,upload_max_filesize, memory_limit 和post_max_size,并且推荐修改的值要稍大于导入 ...
Springdata mongodb 版本兼容引起 Error [The &&num;39&semi;cursor&&num;39&semi; option is required, except for aggregate with the explain argument
在Spring data mongodb 中使用聚合抛出异常 mongodb版本为 3.6 org.springframework.dao.InvalidDataAccessApiUsageExce ...
MySQL运行内存不足时应采取的措施？
排除故障指南:MySQL运行内存不足时应采取的措施? 天一阁@ 老叶茶馆 1周前导读排除故障指南:MySQL运行内存不足时应采取的措施? 翻译团队:知数堂藏经阁项目 - 天一阁团队成员:天一阁- ...
VS Code编辑器对git项目的支持
使用git随便clone一个项目下来, 然后用vscode打开项目, 随便打开某个文件, 添加几行代码: 9-11行是我新添加的, 左边绿色的竖条(点击就会看到明细)就表示这几行是新添加的. 然后修改 ...
IIS7虚拟目录出现HTTP错误500&period;19（由于权限不足而无法读取配置文件）的解决方案
今天在window7上配置asp.net网站,但是访问总是提示错误摘要HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效.详细 ...
JS仿淘宝左侧菜单
http://www.webdm.cn/webcode/1c724a06-06f4-4c4f-931a-c683285fa700.html
[leetcode]Binary Tree Zigzag Level Order Traversal &commat; Python
原题地址:http://oj.leetcode.com/problems/binary-tree-zigzag-level-order-traversal/ 题意: Given a binary tr ...