Javascript高级

JavaScript高级

---

JavaScript输出

• window.alert()弹出警告框

<script> 
window.alert("Warning！"); 
</script> 

• document.write()将内容写到HTML文档中

请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<script> 
document.write(Date()); 
</script> 

• innerHTML写入HTML元素

<p id="demo">我的第一个段落</p> 

<script> 
document.getElementById("demo").innerHTML = "段落已修改。"; 
</script> 

• console.log()写入浏览器的控制台，主要用于调试

<script> 
console.log("Error!"); 
</script> 

JavaScript标识符

变量名除了应该避免js标识符，还应该避免java标识符、windows标识符、html事件句柄等。

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

JavaScript数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

• String

Unicode只是一个编码规范，目前实际实现的unicode编码只要有三种：UTF-8,UCS-2和UTF-16，三种unicode字符集之间可以按照规范进行转换。JavaScript使用16位编码的UCS-2或者UTF-16，不同引擎可能不一样。

//可以使用单引号或双引号：
var carname="Volvo XC60";
var carname='Volvo XC60';
//可以在字符串中使用引号，只要不匹配包围字符串的引号即可
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
//计算字符串表达式的值并以数值形式返回
var res = eval("1+22");

转义序列：\n，\t，\b，\r(回车)，\f(分页符)，\\，\’，\"，\xnn(十六进制数)，\unnnn(十六进制的Unicode字符)

• Number

var x1=34.00;      // 使用小数点来写,最多保留17位小数，且不精确
var y=123e5;      // 12300000
var z=Infinity;
var isFiniteNum=isFinite(z);//超出范围返回false
//NaN的意思是Not a Number，设计返回数值类型的操作遇到非数值类型时返回NaN

• Boolean

使用Boolean()进行转换时

1. 转为true：任何非空对象、非空字符串、非零数值
2. 转为false：null、undefined、空字符串、0、NaN

• Array

//直接创建，逐个赋值
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//condensed array快速创建
var cars=new Array("Saab","Volvo","BMW");
//literal array字面值数组
var cars=["Saab","Volvo","BMW"];

• Object

var person={firstname:"John", lastname:"Doe", id:5566};
var person={
 firstname : "John",
 lastname  : "Doe",
 id        :  5566
};
 //对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
//属性Constructor保存用于创建当前对象的函数

• Undefined

使用var声明变量但未初始化，typeof返回Undefined

Undefined派生于Null，因此使用“==”进行比较时返回true

• Null

逻辑上null表示一个空对象的指针，typeof返回Object

声明空对象时，赋值为null

JavaScript函数

• 定义

function functionName(param1,param2,...){
    //function body;
    //[return ...];
}
var functionName = new function(param1,param2,...){...}
functionName = new function(param1,param2,...){...}

• 使用

1. 直接调用functionName()
2. 在连接中调用<a href="javascript:functionName()">...</a>
3. 在事件中调用，事件类型="functionName()"
4. 递归调用

• 方法

1. apply

var b = {
	message : "",
	setMessage : function(mes){this.message=mes}
}
var a = {
	message : "",
	getMessage : function(){return this.message}
}
//将函数作为对象的方法来调用，将参数以数组形式传递给该方法
b.setMessage.apply(a, ["aaaaa"]);
alert(a.getMessage());

alert(a.getMessage.apply(b));

2. call

var b = {
	message : "",
	setMessage : function(mes){this.message=mes}
}
var a = {
	message : "",
	getMessage : function(){return this.message}
}
//将函数作为对象的方法来调用，将指定参数传递给该方法
b.setMessage.call(a, "aaaaaa");
alert(a.getMessage());

alert(a.getMessage.call(b));

3. toString：返回函数的字符串表示

• arguments对象

1. 存放实参的参数列表
2. 仅在函数体内使用，带有下标属性但并非数组，函数声明时自动初始化
3. arguments.length()获取函数实参的长度
4. arguments.callee()返回当前正在指向的函数
5. arguments.caler()返回调用当前正在执行函数的函数名

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i, max = arguments[0];

    if(arguments.length < 2)return max;

    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

• 指针标识

1. this，指向当前操作对象
2. callee，指向参数集合所属函数
3. prototype，指向函数附带的原型对象
4. constructor，指向创建该对象的构造函数

• 构造函数

//使用Function()函数构造器
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3);
//直接构造
var myFunction = function (a, b) {return a * b} 
var x = myFunction(4, 3);
//在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

• 函数提升

myFunction(5);               
function myFunction(y) {        
    return y * y;        
}
//使用表达式定义函数时无法提升。

• 自调用函数

(function () { 				// 通过添加括号，来说明它是一个函数表达式
    var x = "Hello!!";      
})();						// 如果表达式后面紧跟 () ，则会自动调用。
//实际上是一个匿名自我调用的函数

• 参数匹配

1. 实参比形参多时，将忽略多出的实参。
2. 实参比形参少时，将缺少的形参定义为undefined，也可以手动设置。

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

• 参数传递

1. 值传递，不改变作用域外的值
2. 对象传递，传递引用，会改变外部对象内的值

var x = 1;
// 通过值传递参数
function myFunction(x) {
    x++; //修改参数x的值，将不会修改在函数外定义的变量 x
    console.log(x);
}
myFunction(x); // 2
console.log(x); // 1

var obj = {x:1};
// 通过对象传递参数
function myFunction(obj) {
    obj.x++; //修改参数对象obj.x的值，函数外定义的obj也将会被修改
    console.log(obj.x);
}
myFunction(obj); // 2
console.log(obj.x); // 2

• JavaScript 闭包

JavaScript 闭包使得函数拥有私有变量变成可能，可以访问函数上一层作用域的变量。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
//计数器受匿名函数的作用域保护，只能通过 add 方法修改。
add();
add();
add();
// 计数器为 3
//变量counter一直保存在内存中，谨慎使用闭包

JavaScript JSON

JSON 英文全称 JavaScript Object Notation，是用于存储和传输数据的格式，通常用于服务端向网页传递数据 。

• JSON数据

"firstName":"John"

• JSON对象

{"firstName":"John", "lastName":"Doe"}

• JSON数组

"employees":[
        
    {"firstName":"John", "lastName":"Doe"},
        
    {"firstName":"Anna", "lastName":"Smith"},
        
    {"firstName":"Peter", "lastName":"Jones"}
        
]

JavaScript:void(0)

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

• 死链接

<a href="https://www.w3cschool.cn/javascript/javascript:void(0)">单击此处什么也不会发生</a>
//以下代码只执行alert('Warning!!!')
<a href="https://www.w3cschool.cn/javascript/javascript:void(alert('Warning!!!'))">点我!</a> 

• 无返回值

a = void ( b = 5, c = 7 ); 
document.write('a = ' + a ); 

• href="#"方法

href="https://www.w3cschool.cn/javascript/javascript-void.html#"

1. href="#"方法其实也是空连接的意思，但是点击之后会自动跳转到页面的最上面，因为用了这个方法就相当于点击了一个锚记，但是这个锚记又没写ID，所以就默认跳转到页面顶部。

2. 从上面的例子也可以看出，当要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0)，多用于ajax；但是在需要对页面进行refresh的情况下，那就要仔细了。

• href = "#"当页面有滚动条时，点击后会返回到页面顶端的解决办法

1、点击链接后不做任何事情

<a href="javascript:void(0);" >test</a> 
<a href="javascript:;" >test</a> 
<a href="####" >test</a> 
//使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的 

2、点击链接后，响应用户自定义的点击事件

<a href="javascript:void(0)" onclick="doSomething()">test</a> 
<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> 
//或者直接使用href="https://www.w3cschool.cn/javascript/" 
<a href="#" onclick="alert();event.returnValue=false;">test</a> 

• 使用javascript:void(0)会引起什么问题？

链接（href）直接使用javascript:void(0)在IE中可能会引起一些问题，比如：造成gif动画停止播放等，所以，最安全的办法还是使用“####”。为防止点击链接后跳转到页首，onclick事件return false即可。 如果仅仅是想鼠标移过，变成手形，则可以使用。

• JS操作的href是javascript:void(0)有什么好处

<a href=”void(0);” rel=”nofollow”>
Click here to do nothing
</a>
<a href=”void(document.body.style.backgroundColor=’green’);” rel=”nofollow”>
Click here for green background
</a>
//既保证了返回值是undefined，又保证如果连接点击需要处理一些代码，随时将0替换掉就可以。

• 解决IE下使用javascript:void(0)方法会跳转的方法

一般情况下，在IE下的A标签使用onclick的方法，在href属性下都加上javascript:void(0)或者javascript:;

原代码如下：

<a href="javascript:void(0)" title="关闭" onclick="delbook();">关闭</a>

或者：

<a href="javascript:;" title="关闭" onclick="delbook();">关闭</a>

以上两种方法都可能会出现跳转。

但是你会发现：在执行完clidk事件后会执行javascript:void(0),或者javascript:;

解决办法：

<a href="javascript:void(0)" title="关闭" onclick="delbook();return false;">关闭</a>

或者

<a href="javascript:void(0)" target="_self" title="关闭" onclick="delbook();">关闭</a>

使用return false;可以阻止javascript:void(0)去执行。

使用target="_self"可以阻止会跳转到其他页面，因其是空函数，则不会发生页面刷新。

当然，在使用target="_self"的情况下，你可以直接这样写。

<a href="javascript:delbook()" target="_self" title="关闭">关闭</a>

只要是页面中有刷新或者跳转动作就要用上面的解决方法。

• js跳转

window.open(”url“) 

2.用自定义函数

<script> 
function openWin(tag,obj) 
{ 
obj.target="_blank"; 
obj.href = "Web/Substation/Substation.aspx?stationno="+tag; 
obj.click(); 
} 
</script> 
<a href="javascript:void(0)"onclick="openWin(3,this)">点我</a>

window.location.href='';