JavaScript02—JavaScript对象

最新推荐文章于 2024-11-05 15:26:40 发布

阿鑫君_ty

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量314

点赞数

分类专栏： javaScript 文章标签： javascript 对象

本文链接：https://blog.csdn.net/qq_34807258/article/details/74355486

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

String对象

声明方式：var str = "hello"; var str2 = new String("hello!");
属性：str.length
方法：
- 大小写转换str.toLowerCase()/str.toUpperCase()
- 获取指定位置字符：str.charAt(指定字符位置)
- 查询指定字符串str.indexOf(findstr)/str.lastIndexOf:从后面找起
- **获取字符串**str.substring(开始位置,[结束位置])
- 替换字符串：str.replace(目的字符串,替换字符串),返回替换后的字符串
- 拆分字符串：str.split(分割用的字符串,[返回数组的最大长度])

Number对象

声明：var num = 12.987;
方法:
- num.toFixed(number)：转化为字符串，保留小数点后指定位数number 四舍五入

Array对象

声明：数组的长度是可变的
- var a1 = new Array();
- var a2 = new Array(3);
- var a3 = new Array(100,"a",true);
- var a4 = [100,200,300];
二维数组：数组中的元素是数组
方法:
- x.reverse()反向数组，返回数组
- x.sort()数组排序，按字符顺序，32,23,111,12排序后111,12,23,32

var arr=[111,12,34,32];
arr.sort();//结果：[111, 12, 32, 34]
arr.sort(function sotFunc(a,b){return a-b;});
//结果：[12, 32, 34, 111]

Math对象

Math对象无需创建可以直接使用

Date对象

声明：var now = new Date(); //自动保存当前时间初始化
var now = new Date("2017/7/4 14:21"); //自动保存当前时间初始化
方法:
- 读取时间（日）day.getDate()//结果：4
- 读取时间（星期）day.getDay()//结果：2
- 读取时间（月）数组形式来存储月份，结果+1 day.getMonth()//结果：6实际月份为（6+1）
- 读取时间（年） day.getFullYear() //结果：2017
- 把 Date 对象的时间部分转换为字符串：toTimeString() “14:29:31 GMT+0800 (中国标准时间)”
- 把 Date 对象的日期部分转换为字符串：toDateString() “Tue Jul 04 2017”
- 根据本地时间格式，把 Date 对象的时间部分转换为字符串：toLocaleTimeString()”下午2:29:31”
- 根据本地时间格式，把 Date 对象的日期部分转换为字符串：toLocaleDateString() “2017/7/4”

使用Date对象获取当前具体时间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>今日是何时</title>
<script type="text/javascript">
function time(){
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth()+1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    var ary = ["日","一","二","三","四","五","六"];
    var day = now.getDay();
    var str = "现在是：" 
        + year + "年" + month + "月" + date + "日 "
        + "周" + ary[day] + " "
        + hour + ":" + minute + ":" + second;
    alert( str );
}
</script>
</head>
<body>
    <div style="margin:0 auto; width:80px;">
        <input type="button" value="今日是何时"
                        onclick="time();" />
    </div>
</body>
</html>

RegExp对象

RegExp对象表示正则表达式
声明：var reg1 = /^\d{3,6}$/**gi**; var reg2 = new RegExp("^\d{3,6}$");
g：全局匹配
i：忽略大小写检测
方法:
- reg.test(str)检索字符串中的指定值，返回true或false
- str.replace(regexp,toStr) 返回替换后的结果
- str.match(regexp) 返回匹配字符串的数组
- str.search(regexp) 返回匹配字符串的首字符索引

使用RegExp对象验证账号密码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录系统</title>
<style type="text/css">
#d1 {
    //border: 1px solid black;
    width: 200px;
    margin: 20% auto;
}
h1, p {
    text-align: center;
}
</style>
<script type="text/javascript">
function checkName( emt ){
    //调用时，传入this（正在操作的那个文本输入框）
    console.log("失去焦点了！开始检查账号！");
    console.log( emt );

    var name = emt.value;
    console.log("输入的账号是：" + name);

    var regexp = /^[a-z0-9]{3,10}$/;
    var isValid = regexp.test(name);

    if( isValid ){
        return true;
    } else {
        alert("输入的账号，不是3~10位的小写字母或数字");
        return false;
    }
}
function checkPassword( emt ){
    console.log( emt );
    var password = emt.value;

    var regexp = /^.{8,30}$/;
    var isValid = regexp.test(password);
    if( isValid ){
        return true;
    } else {
        alert("输入的密码，不是8到30位的！");
        return false;
    }
}
</script>
</head>
<body>
    <div id="d1">
        <h1>登录系统</h1>
        <form action="login.do">
            <p>
                账号：
                <input type="text" id="name" 
                    onblur="checkName(this);"/>
                <!-- onblur属性，用于对失去焦点事件进行处理 -->
            </p>
            <p>
                密码：
                <input type="password" id="password"
                    onblur="checkPassword(this);"/>
            </p>
            <p>
                <input type="submit" value="登录"/>
                <a href="#">注册</a>
            </p>
        </form>
    </div>
</body>
</html>

Function对象

JS中函数就是function对象
函数：默认返回undefined，没有函数重载，无论参数多少调用同一个函数，没有接收到参数的默认为undefined
arguments对象：表示函数参数的数组

使用arguments对象模拟重载

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数的定义</title>
<script type="text/javascript">
function add( a ){
    a++;
    console.log( a );
}

//让add引用变量，指向了一个新的function对象
function add( a, b ){
    //add(10)，会将10传入给a；参数b没有传入，默认值是undefined
    console.log( a + ", " + b ); //10, undefined
    var result = a + b;
    console.log( result );
}

// 使用隐含对象arguments，获得传入的参数
// 对于传入的参数个数是可变的，可使用arguments对象
function add(){
    //console.log( arguments );
    if( arguments.length == 0 ){
        console.log( "没有传入任何参数." );
    } else if( arguments.length==1 ){
        console.log( ++arguments[0] );
    } else {
        var sum = 0;
        for( var i=0; i<arguments.length; i++ ){
            sum += arguments[i];
        }
        console.log( sum );
    }
}
</script>
</head>
<body>
    <h1>函数的定义</h1>
    <input type="button" onclick="add();" value="测试：不传入参数"/>
    <input type="button" onclick="add(10);" value="测试：传入10"/>
    <input type="button" onclick="add(10, 23);" 
                            value="测试：传入(10, 23)"/>

</body>
</html>

eval函数：计算表达式字符串，只接受原始字符串作为参数，参数不合法则抛出异常

使用eval()函数实现简单计算机

<!--input+select-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script type="text/javascript">
    function method() {
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        var operator = document.getElementById("operator").value;
        var str = num1+operator+num2;
        console.log(eval(str));
        var result = document.getElementById("result");
        result.innerText = eval(str);
    }
    </script>
</head>
<body>
<input id="num1" type="text"/>
<select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input id="num2" type="text"/>
<input type="button" value="=" onclick="method();"/>
<span id="result"></span>
</body>
</html>

//使用button+input实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<script type="text/javascript">

// 用于判断，是否是一个全新的计算过程
var isNewCalc = true;

function clk( btn ){
    //获得被点击的按钮 上面的数字
    console.log( btn.value );
    //获得文本输入框
    var inputText = document.getElementById("txtExp");

    if( btn.value == "=" ){
        var result = eval( inputText.value );
        inputText.value = result;
        isNewCalc = true;
    } else if( btn.value=="C" ){
        inputText.value= "0";
        isNewCalc = true;
    } else if( btn.value=="DEL" ){
        var txt = inputText.value;
        inputText.value = txt.substring(0, txt.length-1);
    } else {
        if( isNewCalc ){
            inputText.value = "";
            isNewCalc = false;
        }
        inputText.value += btn.value;
    }
}
</script>
</head>
<body>
    <h1>简单计算器</h1>
    <div style="border: 1px solid black; width: 270px; padding: 5px;">
        <p>
            <input type="button" value="1" onclick="clk(this);" />
            <input type="button" value="2" onclick="clk(this);" />
            <input type="button" value="3" onclick="clk(this);" />
            <input type="button" value="4" onclick="clk(this);" />
            <input type="button" value="5" onclick="clk(this);" />
            <input type="button" value="+" onclick="clk(this);" />
            <input type="button" value="-" onclick="clk(this);" />
            <input type="button" value="=" onclick="clk(this);" />
        </p>
        <p>
            <input type="text" id="txtExp" size="30" value="0"/>
            <input type="button" value="DEL" onclick="clk(this);" />
            <input type="button" value="C" onclick="clk(this);" />
        </p>
    </div>
</body>
</html>