12-JavaScript引用类型

一、object类型

在JavaScript中所有的都是对象
函数是对象，也是某个对象的方法
数字与字符串的背后也是对象
对象都是引用类型，是数据结构，引用类型的值是引用类型的一个实例
练习题地址：https://blog.csdn.net/u014257214/article/details/104202182

构造函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 构造函数 -->
        <script type="text/javascript">
            // JavaScript没有类,通过构造函数创建对象
            function myFun(name,sex){
                this.name = name
                this.sex = sex
            }
            my_fun = new myFun("chengzi","男")
        
        </script>
    </body>
</html>

1.1、对象object创建

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 创建一个object类型，通过构造函数object创建 -->
        <script type="text/javascript">
            var obj = new Object()
            obj.id = 1
            obj.name = "chengzi"
            
            // console.log(obj.id)
            // 使用[]语法,可以使用变量提单属性名
            // console.log(obj['id'])
            // 如果属性名中包含了非字母字符,只能用[]
            // obj["first name"] =  "chengwei"
            //对象字面量表示法：
            obj = "myid"
            obj = {
                id :12,
                name: "first ojb"
            }
            //键名为数字
            // obj = {
            //     0: "a",
            //     1: "b",
            //     2: c""
            // }
            //将object类型转换为字符串
            console.log(obj.toString())
            //对象遍历
            for (i in obj){
                console.log(i)
            }
        </script>
    </body>
</html>

练习1：请创建一个函数可以根据输入不同的姓名，年龄，性别，创建不同的用户实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function createUser(name, age, sex){
                var  o = new Object()
                o.name = name
                o.age  = age
                o.sex  = sex
                o.toString = function(){
                    return "我的名字" + o.name + "我的年龄:"+o.age + "性别:" + o.sex
                }
                return o
            }
            wangsan = createUser("wangsan", 18, "girl")
            console.log(wangsan)
        </script>
    </body>
</html>

写一个copy对象的函数，实现两个对象之间值相等，但不是同一个对象，比如 obj2拷贝obj1中的每一项，但是obj1的修改不影响obj2（浅拷贝与深拷贝）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function copyObject(object){
            var o = new Object()
            for (i in object){
                // 深拷贝
                /* if (typeof(object[i]) == "object"){
                    o[i] = copyObject(object[i])
                } else {
                    o[i] = object[i]
                } */
                // 浅拷贝
                    o[i] = object[i]
            }
            return o
            }
            var obj = new Object()
            obj.name = {first:"luxp", last:"pp"}
            obj.age = 18
        </script>
    </body>
</html>

1.2、引用赋值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //通过引用赋值，直接 引用对象指针
            var obj = new Object()
            obj.i = 1
            obj.name = "liuxp"
            
            //引用赋值，并不是赋值，而是将obj2的指针指向了obj
            obj2 = obj
            
            //练习2：写一个copy对象的函数，实现两个对象之间值相等但不是同一个对象，比如obj2拷贝obj1的每一项，但是obj1的修改不影响obj2
            //[浅拷贝与深拷贝]
            
            
        </script>
    </body>
</html>

1.3、对象的属性与方法

>>>obj.id
12
>>>obj.name
"first ojb"
>>>obj["id"]
12
>>>obj["name"]
"first ojb"

二、Array类型

array类型是一个有序结构，每一项可以保存任何内容，数组的大小可以动态调整

2.1、数组的创建方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 数组是有序序列表
            // 创建数组方式:
            array = new Array()
            array[0] = "a",
            array[1] = "b",
            array[2] = "c",
            array[3] = "d"
            // 创建执行长度的数组：
            array = new Array(10)
            // 创建包含初始值的数组：
            array = new Array("a","b","c")
            // 使用数组字面量定义数组：
            array = []
            array = ["a","b","c","d"]
            // 避免最后一个逗号，会造成在不同浏览器上有不同的结果
            array = array = ["a","b","c","d",]
            // lenth属性，返回数组的项数[或长度]
            array.length
            
            // isArray判定是不是数组
            Array.isArray(array)
            function myFun(){
                console.log(typeof(arguments))
                console.log(arguments)
                console.log(arguments instanceof Object)
                if (Array.isArray(arguments)){
                    console.log("arguments是数组")
                } else {
                    console.log("arguments不是数组")
                }
            }
            // toString()方法:转换为逗号分隔的字符串
            console.log(array.toString())
            
            // concat方法:
            array1 = [1,2,3]
            array2 = ["a","b","c"]
            value = 10
            array3 = [[1,2,3],[4,5,6]]
            array1.concat(array2)
            /* 使用+操作符,数据转换为字符串进行处理
            练习3：系统中有一些商品：(洗衣机，3000元),(笔记本电脑，12000),(音箱，1000)
            请使用合适的方式表示这组商品
            */
           goods = []
　　　　　　 goods[0] = ["洗衣机",3000],
           goods[1] = {"笔记本电脑":12000}
           goods[2] = {"音箱": 1000}
        </script>
    </body>
</html>

2.2、数组的堆栈方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            array = []
            // push方法:将新项添加到尾部
            array.push("a")
            array.push("b")
            array.push("c")
            array.push("d")
            pop方法:从尾部弹出并返回一项
            val = array.pop()
            
            // shift方法:从首部弹出一项并返回
            val = array.shift()
            // unshift方法:从首部压入一项
            var = array.unshift("f")
            // 练习4:实现一个FIFO队列对象,只有两个方法put(向队列写入数据)与get(从队列读取数据)
            var queue = new Object()
            queue.data = []
            queue.put = function(val){
            queue.data.push(val)
            }
            queue.get = function(){
            return queue.data.shift()
            }

        </script>
    </body>
</html>

2.3、数组的查询

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            array = [1,10,2,6,5,4,8,7,9]
            // reverse方法：反转数组
            array.reverse()
            
            // sort方法:对数组每项进行toString()，再根据结果从小到大排序
            array.sort()
            
            // 通过传入比较函数,修改排序方式
            array = ["10",1,,0,"010","oxAF","ox1","oxA",017]
            function compare(value1,value2){
                value1 = parseInt(value1)
                value2 = parseInt(value2)
                console.log(value1,value2,value1>value2)
                if (value1 > value2){
                    return -1
                } else if (value1 < value2){
                    return 1
                } else {
                    return 0
                }
            }
            array.sort(compare)
            // 搜索方法
            // indexOf方法:indexOf(searchItem,start=0)从start位置开始搜索,返回搜索结果索引位置，找不到返回-1
            array.indexOf("10")
            
            // lastIndexOf方法:与indexOf一样，但是搜索方向是从尾部向前搜索
            array.lastIndexOf(10)
            
            // findIndex方法:找到数组中的第一个满足条件的元素
            array = [1,2,7,3,5,7,7]
            function selectEventNumber(value){
                console.log(arguments)
                if (value % 7 == 0){
                    return true
                } else {
                    return false
                }
            }
            array.findIndex(selectEventNumber)
            
            // 练习5:数组 [{"name":"chengzi"},{"name","wangsan"},{"name","ls",{"name","ns"}}],使用sort按照name的值排序
            array = [{"name":"luxp"},{"name":"wangsan"}, {"name":"ls"}, {"name":"ns"} ]
            function compare(val1,val2){
                if (val1.name > val2.name){
                    return true
                } else {
                    return false
                }
            }
            sorted_array = array.sort(compare)

        </script>
    </body>
</html>

2.4、数组分片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            /*splice方法
            splice(index,len)，从index位置开始删除数组len项
            splice(start,0,item1,item2,...itemN),从start位置开始向数组添加新元素
            splice(start,n,item1,item2,...itemN),从start位置开始删除n项，并添加新元素
        
            该方法会返回被删除的数组—更新数值
            */
            array = [1,2,3,4,5,6,7,8,9]
            
            // splice(index,len),index可以是负数
            array_1 = array.splice(0,3)
            
            // splice(start,0,item1,item2,...itemN),start可以是负数
            array.splice(1,0,100,200,300)
            
            // splice(start,n,item1,item2,...itemN),相当于替换操作
            array.splice(1,3,100,200,300)
            // 如果新元素数量超过指定项目数,则表示添加新元素
            array.splice(1,3,100,200,300,400,500)
        </script>
    </body>
</html>

2.5、数组遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            array_1 = [true,false,true,false]
            array_2 = [1,2,3,4,5,6,7,8]
            array_3 = [true,1]
            array_4 = ["",null,undefined,NaN]
            array_5 = [Infinity,-Infinity]
            
            // every方法：
            // array.every(func):对数组每一项调用func，如果所有项返回true，那么返回true
            function changeBool(value){
                if  (Boolean(value)){
                    return true
                } else {
                    return false
                }
            }
            array_1.every(changeBool)
            // some方法:
            // 与every类似,只要有一项为true,则返回true
            
            
            // filter方法:
            // 对数组每一项调用func,返回结果为true的项
            array = [0,1,2,3,4,5,6,7,8,"",NaN,undefined]
            array = array.filter(changeBool)
            
            // forEach方法
            // array.forEach(func):数组每一项调用func,无返回值
            array = [0,1,2,3,4,5,6,7,8,"",NaN,undefined,true]
            for (i in array){
                val = array[i]
                console.log(val,"==>",Boolean(val))
            }
            for (i=0;i<array.length;i++){
                console.log(array[i])
            }
            array.forEach(
                function(val,index,obj){
                    console.log(arguments)
                    console.log(val,"==>",Boolean(val))
                }
            )
            // map方法
            // array.map(func):对数组每一项调用func处理,将处理后的新项组成数组并返回
            array = [0,1,2,3,4,5,6,7,8,"",NaN,NaN,undefined]
            new_array = array.map(function(val){
                if (Boolean(val)){
                    return val
                } else {
                    return 0
                    }
                }
            )
            // reduce方法
            // reduce(func,initVal):对每一项进行func处理,并进行归并,initval初始值
            array = [1,2,3,4,5,6]
            value = array.reduce(
                function selectEventNumber(prev,currv){
                    console.log(arguments)
                    return prev+currv
                }
            )
            // reduceRight方法
            // 与reduce一样,只是从末尾到首部开始归并
            array = [1,2,3,4,5,6]
            value = array.reduceRight(
                function selectEventNumber(prev,currv){
                    console.log(arguments)
                    return prev+currv
                },10
            )
            // reduce与reduceright不同结果
            function compare(prev,currv){
                if (prev < currv){
                    return currv+prev
                } else {
                    return prev
                }
            }
            array = [1,2,3,4,5,6,7,8,9,10]
            value1 = array.reduce(compare)
            value2 = array.reduceRight(compare)
        </script>
    </body>
</html>

练习题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 练习6
            // [1,3,5,8,10,15,20],使用filter方法找出5的倍数
            array = [1,3,5,8,10,15,20]
            function filter_five(val){
                if  (val % 5 == 0){
                    return val
                } else {
                    return false
                }
            }
            array = array.filter(filter_five)
            // 网上答案
            array = [1,3,5,8,10,15]
            new_array = array.filter(function(val){
               if (val%5==0){
                   return true
               }
               
            })
            
            /*练习7
            有一组商品价格数量:
            ["商品名称",商品价格,销售额]
            [["good1",1000,5000],["good2",1200,3600],["good3",1500,600],
            ["good4",1000,2000],["good5",1300,5200],["good6",1400,5600]]
            请统计价格在1200以上（不包含1200）的商品销售总额
            
            */
            array = [
            ["good1",1000,5000],
            ["good2",1200,3600],
            ["good3",1500,600],
            ["good4",1000,2000],
            ["good5",1300,5200],
            ["good6",1400,5600]]
            function compare(sell,cur){
                // console.log("cur",cur,cur[0])
                if (cur[1]>1200){
                    return sell+cur[2]
                } else {
                    return sell
                }
            }
            res = array.reduce(compare,0)        
        </script>
    </body>
</html>

三、Date类型

3.1、创建日期对象实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            /* 创建一个当前实际的日期类型对象
            以UTC时间(国际协调时间)1970-01-01 00:00:00开始经过的毫秒数来保存日期,
            当前时间的毫秒数:Date.now()
            */
            date = new Date()
            /*
            通过toString,toLocaleString,tolocaleDateString可以显示不同格式的日期时间
            Date.parse(date)获得毫秒数
            通过date内置方法get*()可以获得年月日时分秒，微妙，星期
            通过date内置方法set*()可以设置date的相关时间参数
            创建指定时间的日期类型对象
            date = new Date("2019-12-24 23:59:59")
            date = new Date("2019/12/24 23:59:59")
            date = new Date("2019.12.24")
            date = new Date("12-30")
            date = new Date("2019")
            date = new Date(Date.now()*3600*1000*24*7)
            date = new Date("2019-02-30")
            */
            
            /*
            时间示例
            根据日期的不同，显示每天的日程
            */
            function showWeek(date){
                switch(date.getDay()){
                    case 1:
                        console.log(date.toLocaleDateString(),"=>星期一")
                        break
                    case 2:
                        console.log(date.toLocaleDateString(),"=>星期二")
                        break                
                    case 3:
                        console.log(date.toLocaleDateString(),"=>星期三")
                        break
                    case 4:
                        console.log(date.toLocaleDateString(),"=>星期四")
                        break
                    case 5:
                        console.log(date.toLocaleDateString(),"=>星期五")
                        break
                    case 6:
                        console.log(date.toLocaleDateString(),"=>星期六")
                        break
                    case 0:
                        console.log(date.toLocaleDateString(),"=>星期天")
                        break
                }
            }
            date = new Date()
            for (i=0;i<7;i++){
                showWeek(date)
                date.setDate(date.getDate()+1)
            }
        </script>
    </body>
</html>

找出往后500年的闰年，并console中输出出来
闰年计算方法：
普通年能被4整除且不能被100整除的为闰年
世纪年能被400整除的是闰年。(如2000年是闰年，1900年不是闰年)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            date = new Date()
            year = date.getFullYear()
            for (i=0;i<=500; i++,year++){
                if (year%4 == 0 && year%100 != 0){
                    console.log(year) 
                }
                if (year%100 ==0 && year%400 ==0){
                    console.log(year)
                }
             }
        </script>
    </body>
</html>

3.2、获得日期时间戳

>>>Date.parse(date)
1621589708000
>>>date.toLocaleDateString()
"2021/5/21"
>>>date.toLocaleString()
"2021/5/21 下午5:35:08"
>>>date.toLocaleTimeString()
"下午5:35:08"
>>>date.toString()
"Fri May 21 2021 17:35:08 GMT+0800 (中国标准时间)"

3.3、修改日期

3.4、获得日期信息

>>>date.getDay()
5
>>>date.getFullYear()
2021
>>>date.getMonth()
4
>>>date.getHours()
17
>>>date.getDate()
21
>>>date.getMinutes()
35
>>>date.getMilliseconds()
24

四、RegExp类型

4.1、创建正则实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            string = "I'm a python programmer,python is very good language"
            // 正则表达式字面量表示
            reg = /p[a-z]+n/
            // 正则对象表示,gmi
            reg = new RegExp("p[a-z]+n","g")
            // reg = new RegExp("p[a-z]+o","g")
            // reg = new RegExp(("p[a-z]+)0","gi")
            // reg = new RegExp("i")
            // reg = new RegExp("i","i")
            // reg = new RegExp("i","igm")
            
        </script>
    </body>
</html>

4.2、exec与test实例方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // reg实例方法
            // exec返回一个对象
            val = reg.exec(string)
            // 如果设置了flag = g,每exec一次,向后匹配一次,直到全部匹配
            // test,如果字符串与正则匹配则返回true
            email = "luxp@126.com"
            url = "http://www.python-xp.com"
            emailReg = new RegExp("([a-z]+)@[1-9]+\.com")
            urlReg = new RegExp("http:\/\/[a-z0-9]+\.[a-z0-9-]+\.com","i")
            newurlReg = new RegExp("http:\/\/[a-z0-9]+\.[a-z-]+\.com","i")
            console.log(emailReg.test(email))
            console.log(urlReg.test(url))
            console.log(newurlReg.test(url))
            
            // String类型的内置方法
            // 字符串搜索
            val = email.search(emailReg)
            // 字符串匹配,返回匹配的项
            string = "I'm a python programmer,python is very good language"
            replaceReg = /p([a-z]+)o/g
            val = string.match(replaceReg)
            console.log(val)
            
            /* 替换replace(substr,newstr)
            将字符串中的substr替换为newstr,substr可以是正则表达式
            只有在flag=g的情况下,才替换所有的substr,newstr可以是一个函数
            */
            replaceReg = /p([a-z]+)o/g
            new_string = string.replace(replaceReg,"c++")
            // 可以是一个回调函数
            newstr = string.replace(replaceReg,function(){
                console.log(arguments)
                return "C++"
            })
            /*
            注册用户要求: 不能含有kefu， kf，admin等字符，并且以任意英文字母开头，包含英文或者数字，
            最短不能少于5个字符，最长不能超过15个字符，写一个用户输入验证函数
            */
            reg1 = new RegExp("^[a-z]\\w{4,14}$")
            reg2 = new RegExp("(kf)|(kefu)|(admin)")
            function validateUserName(user_name){
                if (!reg1.test(user_name)){
                    return false
                }
                if (reg2.test(user_name)){
                    return false
                }
                return true
            }    
        </script>
    </body>
</html>

posted @ 2021-05-05 22:20 西瓜的春天阅读(56) 评论(0) 收藏举报

刷新页面返回顶部

西瓜的春天

斯人若彩虹，遇上方知有

12-JavaScript引用类型

一、object类型

构造函数

1.1、对象object创建

写一个copy对象的函数，实现两个对象之间值相等，但不是同一个对象，比如 obj2拷贝obj1中的每一项，但是obj1的修改不影响obj2（浅拷贝与深拷贝）

1.2、引用赋值

1.3、对象的属性与方法

二、Array类型

2.1、数组的创建方式

2.2、数组的堆栈方法

2.3、数组的查询

2.4、数组分片

2.5、数组遍历

三、Date类型

3.1、创建日期对象实例

3.2、获得日期时间戳

3.3、修改日期

3.4、获得日期信息

四、RegExp类型

4.1、创建正则实例

4.2、exec与test实例方法