js物件、基本型別和字面值
阿新 • • 發佈:2019-01-08
一、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>