美文网首页
javascript入门5(0805)

javascript入门5(0805)

作者: LAYoung_f1b8 | 来源:发表于2019-08-05 19:51 被阅读0次

    1.函数的对象原型

            <script>

                // var fun = new Function();

                var obj = new Object();

                console.log(obj)

                // caller返回调用的函数,包括注释       

                function fun(){

                    console.log('调用我的是'+fun.caller);

                }

                function demo(){

                    // 调用fun函数

                    fun()

                }

                demo();

                // 若在顶层调用,则返回null

                fun();//null

            </script>

    2.函数中this的指向问题

            <script>

                /*

                    在ECMAScript(ES5)中this的指代与其调用的位置有关

                    常见的this的指代:

                        ***1、this作为普通函数调用时,this指代的是全局对象window(调用全局变量)

                        ***2、this作为普通对象调用,this指代当前对象(实例化的对象)

                        3、this作为构造函数调用,this指代的是实例化对象

                        4、this作为apply切换时调用,this指代的是apply切换后的对象

                 */

                // 1、this作为普通函数调用时

                // 全局变量

                var name = '耿育淼';

                function fun1(){

                    // 局部变量

                    var name = '刘璟';

                    console.log(name);//刘璟  全局变量和局部变量同时存在,优先使用局部变量

                    console.log(this.name);

                }

                fun1();

                // 2 this作为普通对象调用,this指代当前对象

                var name = '孙浩';

                var obj = {

                    name:'小明',

                    age:22,

                    say:function(){

                        console.log(obj == this);//true

                        console.log(obj === this);//true

                        // console.log(obj.name+'是小红的男朋友');//小明

                        console.log(this.name+'是小红的男朋友');//小明

                    }

                }

                obj.say();

                // 示例:

                // 获取所有的this

                var oLi = document.getElementsByTagName('li');

                console.log(oLi);

                // 循环绑定事件

                for(var i=0;i<oLi.length;i++){

                    oLi[i].onclick = function(){

                        // console.log('111')

                        console.log(i);

                        console.log(this)

                        this.style.background = 'green';

                    }

                }

                // 3、this作为构造函数调用

                // 自定义构造函数

                function demo(){

                    this.name = '小李子';

                    this.age = 18;

                    this.say = function(){

                        console.log('正是李子成熟季');

                    }

                }

                var obj1 = new demo();

                console.log(obj1);

                console.log(obj1.name);//小李子

                //

                var obj2 = {

                    name:'向同学',

                    age:20,

                    love:function(){

                        console.log(this.name+'喜欢的是...');

                    }

                }

                // obj2.love();//向同学

                obj2.love.apply(obj1);//小李子

                obj2.love.apply();//孙浩  若apply()未传入参数,则代表全局变量

            </script>

    3.数组方法

            <script>

                /*

                    函数的三要素:

                        功能

                        参数

                        返回值

                 */

                // concat()数组连接  不改变原数组

                var arr = [1,2,3,4,5];

                var newArr = arr.concat('龚瑞');

                console.log(newArr);//[1, 2, 3, 4, 5, "龚瑞"]

                console.log(arr);//[1, 2, 3, 4, 5]

                var arr = [1,2,3,4,5];

                // 多个参数之间采用逗号连接

                var newArr = arr.concat('龚瑞','成哥');

                console.log(newArr);// [1, 2, 3, 4, 5, "龚瑞", "成哥"]

                var arr = [1,2,3];

                var arr1 = [4,5,6];

                var newArr = arr.concat(arr1);

                console.log(newArr);//[1, 2, 3, 4, 5, 6]

                // join()将数组按照指定的字符拼接为字符串(默认按照逗号连接)

                var arr = ['周','三','就','是','情','人','节'];

                var newStr = arr.join();//周,三,就,是,情,人,节

                var newStr = arr.join('');//周三就是情人节

                console.log(newStr);

                /*

                    出栈入栈  直接改变原数组

                        push()从数组的尾部压入一个元素

                        pop()从数组的尾部弹出一个元素,并接收返回的元素

                        unshift()从数组的头部压入一个元素

                        shift()从数组的头部弹出一个元素,并接收返回的元素

                 */

                // push()从数组的尾部压入一个元素

                var arr = [1,2,3,4,5];

                arr.push('向同学');

                console.log(arr);// [1, 2, 3, 4, 5, "向同学"]

                // 若压入的是数组,最终只占一个下标

                var arr1 = ['黄满鑫','陈冬梅','耿育淼'];

                arr.push(arr1);

                console.log(arr);//[1, 2, 3, 4, 5, "向同学", Array(3)]

                // pop()从数组的尾部弹出一个元素,并接收返回的元素

                var res = arr.pop();

                console.log(res);//返回弹出的元素   ["黄满鑫", "陈冬梅", "耿育淼"]

                console.log(arr);

                // unshift()从数组的头部压入一个元素

                arr.unshift('a');

                console.log(arr);

                // shift()从数组的头部弹出一个元素

                var res = arr.shift();

                console.log(arr);

                console.log(res);

            </script>

    4.数组的截取

            <script>

                /*

                    slice(start,end)数组的截取

                        一个参数:从指定下标开始截取,截取到最后

                        两个参数:从指定的下标开始截取,截取到指定下标之前

                 */

                // 一个参数:从指定下标开始截取,截取到最后

                var arr = [1,2,3,4,5];

                var newArr = arr.slice(2);

                console.log(newArr);//[3, 4, 5]

                // 两个参数:从指定的下标开始截取,截取到指定下标之前

                var arr = [1,2,3,4,5];

                var newArr = arr.slice(1,3);

                console.log(newArr);//[2, 3]

                var arr = [1,2,3,4,5];

                // 负数代表倒数第几个

                var newArr = arr.slice(-2);

                console.log(newArr);// [4, 5]

                var arr = [1,2,3,4,5];

                // 负数代表倒数第几个

                var newArr = arr.slice(1,-1);

                console.log(newArr);//[2, 3, 4]

                var arr = [1,2,3,4,5];

                // 负数代表倒数第几个

                var newArr = arr.slice(-3,-1);

                console.log(newArr);//[3, 4]

                // 数组只能从左往右截取

                var arr = [1,2,3,4,5];

                // 负数代表倒数第几个

                var newArr = arr.slice(-1,1);

                console.log(newArr);//[]

            </script>

    5.数组反转和排序

            <script>

                // reverse()数组的反转

                var arr = [1,2,3,4,5];

                arr.reverse();

                console.log(arr);//[5, 4, 3, 2, 1]

                // sort()数组按照ASCII码码值排序  底层为冒泡排序 

                var arr = [4,7,2,9,0,8];

                arr.sort();

                console.log(arr);//[0, 2, 4, 7, 8, 9]

                var arr = [4,7,20,23,9,5,230,8];

                arr.sort();

                console.log(arr);//[20, 23, 230, 4, 5, 7, 8, 9]

                /*

                    数字:48~57

                    大写字母:65~90

                    小写字母:97~122

                 */

                var arr = ['a','A',4,7,2,9,0,8];

                arr.sort();

                console.log(arr);//[0, 2, 4, 7, 8, 9, "A", "a"]

            </script>

    6.数学函数

            <script>

                /*

                    abs()绝对值  max()最大值  min()最小值  floor()向下取整  ceil()向上取整 round()四舍五入  pow()次方根    sqrt()开平方根  random()随机数

                 */

                console.log(Math);

                // abs()绝对值

                var num = 10;//10

                var num = -10;//10

                var res = Math.abs(num);

                console.log(res)

                // 最大值

                var res = Math.max(5,8,2,9,0);

                console.log(res);

                // 最小值

                var res = Math.min(5,8,2,9,0);

                console.log(res);

                // floor()向下取整

                var num = 9.9;

                var res = Math.floor(num);

                console.log(res);//9  只保留整数位

                // 向上取整

                var num = 9.0001;

                var res = Math.ceil(num);

                console.log(res);//10  进一法取整

                // round()四舍五入

                var num = 9.0001;

                var num = 9.6;//10

                var res = Math.round(num);

                console.log(res);//10  进一法取整

                // pow(底数,指数)次方根

                var res = Math.pow(2,10);

                console.log(res);

                // sqrt()开平方根

                var res = Math.sqrt(16);//4

                console.log(res);

                // random()随机数  自动产生0~1的随机数,但是不包含1

                console.log(Math.random());

                // 生成0-9的随机数

                var num = Math.floor(Math.random()*10);

                console.log(num);

                // 生成0~255的随机数

                var num = Math.floor(Math.random()*256);

                console.log(num);

                // 拓展  四舍五入保留指定的小数位

                var num = 36.6666;

                var res = num.toFixed(2);

                console.log(res);

            </script>

    相关文章

      网友评论

          本文标题:javascript入门5(0805)

          本文链接:https://www.haomeiwen.com/subject/ttsvdctx.html