w3cschool学习笔记——JavaScript核心对象

JavaScript核心对象

String核心对象

String 对象用于处理文本（字符串）。

String 对象创建方法： new String()。

String对象方法

以下罗列的是 String 对象方法以及描述:

示例：

var str = "Hello, Nier";
var a = str.toLowerCase(); // 把字符串转为小写
var b = str.toUpperCase(); // 吧字符串转为大写
var c = "   Hello world ".trim() //去掉字符串两边的空白

indexOf() 方法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

示例：

var str="Hello world, welcome to the w3cschool.";
var n = str.indexOf("welcome"); // 13
var c = str.indexOf("loen"); // -1

replace() 方法

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

如果想了解更多正则表达式教程请查看W3Cschool的：JavaScript 正则表达式

var str="Mr Blue has a blue house and a blue car and a blue hat";
// 将字符串中首次出现的blue替换成red
var n=str.replace("blue", "red"); //Mr Blue has a red house and a blue car and a blue hat
// 用正则匹配字符串中所有出现的blue并替换成red
var c=str.replace(/blue/g, "red"); //Mr red has a red house and a red car and a red hat

第一段字符串中replace为一个个变的而且不包括Blue；第二段正则匹配字符中是一下全部变了。

substring() 方法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

语法：

string.substring(from, to)

参数	描述
from	必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。
to	可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。

示例：

var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));

substring() 提取从 indexStart 到 indexEnd（不包括）之间的字符。特别地：

• 如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
• 如果省略 indexEnd，substring 提取字符一直到字符串末尾。
• 如果任一参数小于 0 或为 NaN，则被当作 0。
• 如果任一参数大于 stringName.length，则被当作 stringName.length。
• 如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

示例：

var anyString = "w3cschool";
// 输出 "w3c"
document.write(anyString.substring(0,3)+"<br>");
document.write(anyString.substring(3,0)+"<br>");
document.write(anyString.substring(3,-3)+"<br>");
document.write(anyString.substring(3,NaN)+"<br>");
document.write(anyString.substring(-2,3)+"<br>");
document.write(anyString.substring(NaN,3)+"<br>");
// 输出 "cho"
document.write(anyString.substring(4,7)+"<br>");
document.write(anyString.substring(7,4)+"<br>");
// 输出 ""
document.write(anyString.substring(4,4)+"<br>");
// 输出 "w3csch"
document.write(anyString.substring(0,6)+"<br>");
// 输出 "w3cschool"
document.write(anyString.substring(0,9)+"<br>");
document.write(anyString.substring(0,12));

Window对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

window作为全局变量，代表了脚本正在运行的窗口，暴露给Javascript代码。

window对象属性

例子:

var winInnerHeight = window.innerHeight; //返回窗口的文档显示区的高度。
var winInnerWidth = window.innerWidth; //返回窗口的文档显示区的宽度。

var winOuterWidth = window.outerWidth; // 返回窗口的外部宽度，包含工具条与滚动条。
var winOuterHeight = window.outerHeight; // 返回窗口的外部高度，包含工具条与滚动条。

var winScreenLeft = window.screenLeft; // 返回相对于屏幕窗口的x坐标
var winScreenTop = window.screenTop; // 返回相对于屏幕窗口的y坐标

窗口对象方法

我们之前有使用过的**alert（）**就是window对象的方法，调用window对象方法可以不需要指定window对象：

alert("hello world");
// 等价于
window.alert('hello world');

窗口对象方法的属性

open() 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace)

**实例:**在新浏览器窗口中打开 www.w3cschool.cn

function open_win() {
	window.open("http://www.w3cschool.cn");
}

**实例:**下面的示例在一个新的浏览器打开一个window空白页：

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();
}

setTimeout() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒 = 1 秒。
提示： 如果你只想重复执行可以使用 setInterval() 方法。 使用 clearInterval() 方法来阻止函数的执行
提示： 使用 clearTimeout() 方法来阻止函数的执行。

setTimeout(function(){ alert("Hello"); }, 3000);

实例：打开一个新窗口，3 秒后将该窗口关闭

var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>这是一个新窗口'</p>");
setTimeout(function(){ myWindow.close() }, 3000);

实例: 使用 clearTimeout() 来阻止函数的执行

var myVar;
 
function myFunction() {
    myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
 
function myStopFunction() {
    clearTimeout(myVar);
}

JavaScript JSON

JSON (英文全称 JavaScript Object Notation) 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

JSON 是一种轻量级的数据交换格式。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。

文本可以被任何编程语言读取及作为数据格式传递。

JSON实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:

{"sites":[
    {"name":"W3Cschool", "url":"www.w3cschool.cn"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"W3Cschool"

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{"name":"W3Cschool", "url":"www.w3cschool.cn"}

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

{"sites":[
    {"name":"W3Cschool", "url":"www.w3cschool.cn"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

在以上实例中，对象 “sites” 是一个数组，包含了三个对象。

每个对象为站点的信息（网站名和网站地址）。

JSON.parse() 方法

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

语法：

JSON.parse(text[, reviver])

//参数说明：
//text: 必需， 一个有效的 JSON 字符串。
//reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

返回值：

返回给定 JSON 字符串转换后的对象。

实例：

var text = '{"employees":[' +
	'{"name":"W3Cschool","site":"http://www.w3cschool.cn" },' +
	'{"name":"Google","site":"http://www.Google.com" },' +
	'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
	obj.employees[1].name + " " + obj.employees[1].site;

实例: 带 reviver 的案例

JSON.parse('{"p": 5, "s": 1.5, "t": -3}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // {"p": 10, "s": 3, "t": -6}

实例：如果带reviver函数遍历属性的顺序是从内向外的。

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3 
// ""

JSON.parse()不允许用逗号作为结尾。

JSON.stringify() 方法

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

语法：

JSON.stringify(value[, replacer[, space]])

参数说明：

• value: 必需， 要转换的 JavaScript 值（通常为对象或数组）。
• replacer:可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
• space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

返回值：

返回包含 JSON 文本的字符串。

var str = {"name":"W3Cschool", "site":"http://www.w3cschool.cn"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一个参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
 
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
document.write( "使用参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出

Math对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

Math 对象属性

例子:

document.write(Math.PI);
// -> 3.141592653589793

提示: Math 没有构造函数。没有必要先创建一个Math对象。

Math 对象方法

Math对象包含许多用于计算的方法：

例如，以下将计算一个数字的平方根。

var number = Math.sqrt(4); 
document.write(number);
// -> 2

floor() 方法

Math.floor() 返回小于或等于一个给定数字的最大整数。

Math.floor()向下取整。

Math.floor( 45.95);  // 45 
Math.floor( 45.05);  // 45 
Math.floor( 4 );  // 4 
Math.floor(-45.05);  // -46 
Math.floor(-45.95);  // -46

random() 方法

Math.random() 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：

实例, 返回 1 到 10 之间的一个随机数:

Math.floor((Math.random()*10)+1);

实例, 返回 min（包含）～ max（包含）之间的数字：

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

round 方法

Math.round() 返回一个数字四舍五入后最接近的整数。

<body>
<input type="text" id="num" value="4.56" />
	<p>单击按钮舍入与数值<span id="shownum"></span>最近的整数。</p>
	<p id="demo"></p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var num = document.getElementById("num").value;
	var shownumObj = document.getElementById("shownum");
	shownumObj.innerHTML = num;
	document.getElementById("demo").innerHTML=Math.round(num);
}
</script>
</body>

注意，与很多其他语言中的round()函数不同，Math.round()并不总是舍入到远离0的方向（尤其是在负数的小数部分恰好等于0.5的情况下）。

实际应用一下math对象：

创建一个程序，让用户输入一个数字并通过提醒显示平方根。

var n = prompt("请输入一个数字:", "");
var answer = Math.sqrt(n);
alert("数字" + n + " 的平方根是: " + answer);

setInterval

setInterval() 方法调用函数或以指定的间隔（以毫秒为单位）来计算表达式。

它将持续调用该函数，直到调用 clearInterval() 或窗口关闭。

function myAlert() {
   alert("你好 世界");
}
setInterval(myAlert, 3000); // 每个 3 秒执行一次 myAlert

提示: 将函数的名称传递给 setInterval 方法时，不带圆括号。

Date 对象

日期对象用于处理日期和时间。

日期由 年，月，日，时，分，秒和毫秒组成。

使用 new Date() , 将创建一个存储当前日期和时间的日期对象。

var d = new Date();
//d 存储了当前的日期和时间

初始化日期的其他方法允许从指定的日期和时间创建新的日期对象。

new Date(milliseconds) // 毫秒
new Date(dateString) // 日期字符串
new Date(year, month, day, hours, minutes, seconds, milliseconds) //年，月，日，时，分，秒和毫秒

提示: JavaScript日期以1970年01月01日00:00:00世界时（UTC）计算。一天包含 86400000 毫秒。

//Fri Jan 02 1970 08:00:00 GMT+0800 (中国标准时间)
var d1 = new Date(86400000); 

//Thu Oct 19 2017 15:56:00 GMT+0800 (中国标准时间)
var d2 = new Date("October 19, 2017 15:56:00");

//Sat Jun 11 1988 11:42:00 GMT+0800 (中国标准时间)
var d3 = new Date(88,5,11,11,42,0,0);

提示: JavaScript计数从0到11的月份。1月是0，12月是11。
日期对象是静态的，而不是动态的。计算机时间正在往前走，但是日期对象一旦创建，日期就不会改变。

Date 方法

当创建一个Date 对象时，有很多方法可以对它进行操作。

例如:

var d = new Date();
var hours = d.getHours();
//hours 等于当前的小时数值

写一个程序实例，每秒打印一次当前浏览器的时间：

<html>
<head>
</head>
<body>
<script>
function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000); // setInterval 第二个参数单位是 毫秒
</script>
</body>
</html>

我们定义了一个 printTime 函数,通过 new Date() 生成当前时间的对象,然后通过 getHours(),getMinutes(),getSeconds() 获取到当前的时,分,秒,并打印出来.

通过 setInterval 每隔 1秒执行一次 printTime 函数

提示: innerHTML 属性设置或返回元素的HTML内容。在我们的例子中，我们正在改变我们文档体的HTML内容。这将每秒覆盖内容，而不是重复打印到屏幕。
html

```

我们定义了一个 printTime 函数,通过 new Date() 生成当前时间的对象,然后通过 getHours(),getMinutes(),getSeconds() 获取到当前的时,分,秒,并打印出来.

通过 setInterval 每隔 1秒执行一次 printTime 函数

提示: innerHTML 属性设置或返回元素的HTML内容。在我们的例子中，我们正在改变我们文档体的HTML内容。这将每秒覆盖内容，而不是重复打印到屏幕。