0%

javascript

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

javascript 对象

JS Array

forEach()

JavascriptforEach()标准格式

1
array1.forEach(callbackfn[, thisArg])

** 参数 **

  • arry1 必需 一个数组
  • callbackfn 必需 一个最多可以接受三个参数的函数,对于数组中的每一个元素,forEach都会调用callbackfn函数一次
  • thisArg 可选 可在callbackfn函数中为其引用this关键字的对象,如果省略thisArg,则undefined将用做this的值

** 注意 **

  • 如果callbackfn 参数不是函数对象,则将引发TypeError 异常。
  • 对于数组中的每个元素,forEach 方法都会调用callbackfn 函数一次(采用升序索引顺序)。
  • 不为数组中缺少的元素调用该回调函数。
  • 除了数组对象之外,forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

** callbackfn语法 **

回调函数callbackfn的标准格式:

1
function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

回调参数含义:
value 数组元素的值。
index 数组元素的数字索引。
array1 包含该元素的数组对象。

** 修改数组对象 **
forEach 方法不直接修改原始数组,但回调函数可能会修改它。 下表描述了在 forEach 方法启动后修改数组对象所获得的结果。

forEach 方法启动后的条件—————–元素是否传递给回调函数?

  • 在数组的原始长度之外添加元素————-否。
  • 添加元素以填充数组中缺少的元素———–是,如果该索引尚未传递给回调函数。
  • 元素已更改——————————-是,如果该元素尚未传递给回调函数。
  • 从数组中删除元素————————-否,除非该元素已传递给回调函数。

下面的示例阐释了 forEach 方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Define the callback function. 
function ShowResults(value, index, ar) {
document.write("value: " + value);
document.write(" index: " + index);
document.write("<br />");
}

// Create an array.
var letters = ['ab', 'cd', 'ef'];

// Call the ShowResults callback function for each
// array element.
letters.forEach(ShowResults);

// Output:
// value: ab index: 0
// value: cd index: 1
// value: ef index: 2

在下面的示例中,callbackfn 参数包含回调函数的代码。

1
2
3
4
5
6
7
8
9
10
11
// Create an array. 
var numbers = [10, 11, 12];

// Call the addNumber callback function for each array element.
var sum = 0;
numbers.forEach(
function addNumber(value) { sum += value; }
);

document.write(sum);
// Output: 33

下面的示例阐释了 thisArg 参数的用法,该参数指定可对其引用 this 关键字的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Define the object that contains the callback function. 
var obj = {
showResults: function(value, index) {
// Call calcSquare by using the this value.
var squared = this.calcSquare(value);

document.write("value: " + value);
document.write(" index: " + index);
document.write(" squared: " + squared);
document.write("<br />");
},
calcSquare: function(x) { return x * x }
};

// Define an array.
var numbers = [5, 6];

// Call the showResults callback function for each array element.
// The obj is the this value within the
// callback function.
numbers.forEach(obj.showResults, obj);

// Embed the callback function in the forEach statement.
// The obj argument is the this value within the obj object.
// The output is the same as for the previous statement.
numbers.forEach(function(value, index) { this.showResults(value, index) }, obj);

// Output:
// value: 5 index: 0 squared: 25
// value: 6 index: 1 squared: 36
// value: 5 index: 0 squared: 25
// value: 6 index: 1 squared: 36

摘自微软TechNet

JS Math

Math对象用于执行数学任务

使用Math的属性和方法的语法

1
2
var pi_value = Math.PI;
var sqrt_value = Math.sqrt(15);

注释
Math 对象并不像 DateString 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math 对象属性

1
2
3
4
5
6
7
8
9
属性	描述
E 返回算术常量 e,即自然对数的底数(约等于2.718)。
LN2 返回 2 的自然对数(约等于0.693)。
LN10 返回 10 的自然对数(约等于2.302)。
LOG2E 返回以 2 为底的 e 的对数(约等于 1.414)。
LOG10E 返回以 10 为底的 e 的对数(约等于0.434)。
PI 返回圆周率(约等于3.14159)。
SQRT1_2 返回返回 2 的平方根的倒数(约等于 0.707)。
SQRT2 返回 2 的平方根(约等于 1.414)。

Math 对象方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
方法          描述
abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。

JS Number

Number() 函数把对象的值转化为数字

JS Date

setTimeout()

js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等

意义setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式
语法setTimeout(code,millisec)
参数
code —— 延时后需执行的代码
millisec —— 延时时间
提示setTimeout() 只执行code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()
示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert('对不起, haorooms博客要你等候多时')", 3000 )
</script>

</body>
</html>

setInterval()

意义setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法setInterval(code,millisec[,'lang'])
参数
code —— 要调用的代码
millisec —— 周期性执行或调用code之间的时间间隔,单位毫秒

区别

setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令,则可循环运行。(即 要循环运行,需函数自身再次调用 setTimeout()

setinterval是循环运行的,即每到设定时间间隔就触发指定代码。这是真正的定时器。

setinterval使用简单,而setTimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第一次1秒,第二次2秒,第三次3秒。

clearTimeout()

语法clearTimeout(timeoutID)
说明:要使用 clearTimeout( ), 我们设定 setTimeout( ) 时 , 要给予这 setTimout( ) 一个名称 , 这名称就是 timeoutID , 我们叫停时 , 就是用这 timeoutID 来叫停 , 这是一个自定义名称 , 但很多人就以 timeoutID 为名
示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
x = 0
y = 0
function count1()
{ x = x + 1
  document.display1.box1.value = x
  meter1=setTimeout("count1()", 1000)
}
function count2()
{ y = y + 1
  document.display2.box2.value = y
  meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body>
<p> </br>
<form name="display1">
<input type="text" name="box1" value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter1) " >
<input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name="display2">
<input type="text" name="box2" value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter2) " >
<input type=button value="继续计时" onClick="count2() " >
</form>

<script>
count1()
count2()
</script>
</body>
</html>

JS Functions

parseInt()

含义
parseInt() 函数可解析一个字符串,并返回一个整数。
语法

1
parseInt(string, radix)

参数 描述
string 必需。要被解析的字符串。
radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

  • 如果省略radix参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x”“0X” 开头,将以 16 为基数。
  • 如果radix参数小于 2 或者大于 36,则 parseInt()将返回NaN`。

返回值
返回解析后的数字。

说明
当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。

举例,如果 string"0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。

提示

  • 只有字符串中的第一个数字会被返回。
  • 开头和结尾的空格是允许的。
  • 如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。
  • *示例**
    1
    2
    3
    4
    5
    6
    parseInt("10");			//返回 10
    parseInt("19",10); //返回 19 (10+9)
    parseInt("11",2); //返回 3 (2+1)
    parseInt("17",8); //返回 15 (8+7)
    parseInt("1f",16); //返回 31 (16+15)
    parseInt("010"); //未定:返回 10 或 8

number()

Number()函数把对象的值转化为数字
语法

1
Number(object)

参数

1
2
参数          描述
object 必需,Javascript对象

返回值

  • 如果参数是Date对象,Number()返回的是从1970 年 1 月 1 日至今的毫秒数
  • 如果对象的值无法转换为数字,那么 Number() 函数返回 NaN

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">

var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");

document.write(Number(test1)+ "<br />");
document.write(Number(test2)+ "<br />");
document.write(Number(test3)+ "<br />");
document.write(Number(test4)+ "<br />");
document.write(Number(test5)+ "<br />");

</script>
1
2
3
4
5
6
# 输出
1
0
1256657776588
999
NaN