js对象、基本类型和字面值

最新推荐文章于 2022-11-05 13:09:11 发布

Abel_01_xu

最新推荐文章于 2022-11-05 13:09:11 发布

阅读量519

点赞数

分类专栏： JS

JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、js字面值

1. 概念

表示某种特定类型的一个值。

2. 举例

一个引用的字符串（string）、浮点数（Number）、布尔值（Boolean）

"this is a string example" 2.37 true/false

二、js基本类型

1.概念

特定的数据类型的一个实例

2. 五种类型

String、Number、Boolean、null、undefined

以上前三种类型基本类型，有对应的构造方法对象。

基本类型变量（没有使用new创建的变量）严格地等于字面值，二对象实例则不会。因为基本类型是根据值来进行比较的，而值是字面值。

三、示例

3.1 从字符串提取一个列表

//提取朋友的姓名
var str = "this is a list of friends:xushuai,zhuxiao,huxiang,bianjingbin.";
var start = str.indexOf(':');
var end = str.indexOf('.', start + 1);
alert(start);//25
alert(end);//61
var list = str.substring(start + 1, end);
var re = list.split(',');
console.log(re);

//提取朋友的姓名
var str = "this is a list of friends: xushuai,zhuxiao , huxiang,bianjingbin.";
var start = str.indexOf(':');
var end = str.indexOf('.', start + 1);
alert(start);//25
alert(end);//61
var list = str.substring(start + 1, end);
var re = list.split(',');
console.log(re);
//forEach()方法作为参数传递的函数（回调函数），应用到每一个数组元素身上。
//该回调函数支持三个参数：数组元素的值，可选的数组元素的索引，数组自身
re.forEach(function (element, index, array) {
    array[index] = element.trim();
});
console.log(re);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>全局搜索</title>
    <style>
        .found{
            background-color:#ff0;
        }
    </style>
    <!--<script src="../JS/面向对象的程序设计.js"></script>-->
</head>
<body>
    <form id="search">
        <textarea id="incoming" cols="100" rows="15"></textarea>
        <p>
            Search pattern:<input id="pattern" type="text" />
        </p>
    </form>
    <button id="searchSubmit">搜索</button>
    <div id="searchResult"></div>
    <script>
        document.getElementById("searchSubmit").onclick = function () {
            //获取模式
            var pattern = document.getElementById("pattern").value;
            var re = new RegExp(pattern, "g");

            //获取字符串
            var searchString = document.getElementById("incoming").value;

            var matchArray;
            var resultString = "<pre>";
            var first = 0;
            var last = 0;

            //找到每一个匹配
            while ((matchArray = re.exec(searchString)) != null) {
                last = matchArray.index;//index属性声明的是匹配文本的第一个字符的位置

                //获取所有匹配的字符串，将其连接起来
                resultString += searchString.substring(first, last);

                //使用class，添加匹配的字符串
                resultString += "<span class='found'" + matchArray[0] + "</span>";
                first = re.lastIndex;//该属性设置为匹配文本的最后一个字符的下一个位置
            }

            //完成字符串
            resultString += searchString.substring(first, searchString.length);
            resultString += "</pre>";

            //插入到页面
            document.getElementById("searchResult").innerHTML = resultString;
        }
    </script>
</body>
</html>

3.2 使用捕获圆括号交换一个字符串中的单词

3.2.1 String.replace特殊模式

模式	用途
$$	允许替换中有一个字面值美元符号
$&	插入匹配的字符串
$`	在匹配之前插入字符串的一部分
$'	在匹配之后插入字符串的一部分
$n	插入使用RegExp的第n次捕获圆括号的值

4. 使用带有定时器的函数闭包

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #redbox{
            position:absolute;
            left:100px;
            top:100px;
            width:200px;height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="redbox"></div>
    <script>
        var intervalId = null;
        document.getElementById("redbox").addEventListener("click", startBox, false);
        function startBox() {
            if (intervalId == null) {
                var x = 100;
                intervalId = window.setInterval(
                    function () {
                        x += 30;
                        var left = x + "px";
                        document.getElementById("redbox").style.left = left;
                    }, 1000);
            } else {
                clearInterval(intervalId);
                intervalId = null;
            }
        }
    </script>
</body>
</html>

5. 把表中一列的所有数字加和

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>把表格值转换为数学，并且求得加和结果</title>
</head>
<body>
    <table id="table1">
        <tr>
            <td>sssss</td>
            <td>234</td>
        </tr>
        <tr>
            <td>fffff</td>
            <td>78</td>
        </tr>
        <tr>
            <td>ggggg</td>
            <td>176</td>
        </tr>
    </table>
    <script type="text/javascript">
        var sum = 0;
        //找到第二列中的所有单元格
        var cells = document.querySelectorAll("td+td");

        for (var i = 0; i < cells.length; i++) {
            sum += parseFloat(cells[i].firstChild.data);
        }
        //将求和结果添加至表尾
        var newRow = document.createElement("tr");
        //第一个单元格
        var firstCell = document.createElement("td");
        var firstCellText = document.createTextNode("Sum:");
        firstCell.appendChild(firstCellText);
        newRow.appendChild(firstCell);

        //带有总和的第二个单元格
        var secondCell = document.createElement("td");
        var secondCellText = document.createTextNode(sum);
        secondCell.appendChild(secondCellText);
        newRow.appendChild(secondCell);

        //给表添加行
        document.getElementById("table1").appendChild(newRow);
    </script>
</body>
</html>

Abel_01_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js对象、基本类型和字面值

一、js字面值1. 概念表示某种特定类型的一个值。2. 举例一个引用的字符串（string）、浮点数（Number）、布尔值（Boolean） "this is a string example" 2.37 true/false二、js基本类型1.概念特定的数据类型的一个实例2....
复制链接

扫一扫

专栏目录