一、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>