csdn_export_md

JavaScript基础语法

重点：变量 ，对象 ， 数组 ，函数

基本用法

行内js

<button onclick="alert('you clicked hered!!!')">click here</button>

内部 JS：

<script type="text/javascript" charset="utf-8">
alert('this is inner js code')
</script>

外部 JS ⽂件：
先创建一个外部jsp文件
用下面代码引用

<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

Jsp基础语法

1.变量
先声明再赋值
var a ; a = 10;
声明同时赋值
var b = 20;
1.1变量的注意点
1）只声明没有赋值，则值为undefined。
2）变量要有定义，变量未声明就使⽤，jsp会报错 提示变量未定义
3）可以在同⼀条var命令中声明多个变量。
4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的
5）若使⽤var重新声明已经存在的变量且赋值，则会覆盖掉前⾯的值
6） JavaScript是⼀种动态类型、弱类型语⾔变量的类型没有限制，可以赋予各种类型的值。
1.2变量提升
jsp的执行引擎是 先解析获取被声明的变量 然后在向下一次执行
然后会造成变量提升

	console.log(a);
			var a = 10;
>undefined

1.3数据类型
数 值（Number）： 整数和小数（⽐如 1 和 3.14）
字符串（String）： 字符组成的⽂本（⽐如"Hello World"）
布尔值（Boolean）： true（真）和 false（假）两个特定值
Undefined： 表示“未定义”或不存在，即此处⽬前没有任何值
Null： 表示空缺，即此处应该有⼀个值，但⽬前为空
对象（object） (引⽤) ： 各种值组成的集合
1)、对象（object） {name:”zhangsan”,age:”18”}
2)、数组（array） [1,2,3]
3)、函数（function） function test() {}

undefined 类型的值是 undefined。
null类型是只有⼀个值的数据类型，即特殊的值null。


函数转换
pareInt();

parseInt("1234blue");
>  1234
parseInt("22.5"); 
> 22
parseInt("blue");
> NaN

parseFloat()

parseFloat("1234blue"); 
>1234.0
parseFloat("22.5");
 > 22.5
parseFloat("22.34.5"); 
> 22.34
parseFloat("blue"); 
>NaN

toString()

var data = 10
console.log(data.toString())
>10

toFixed()

data = 1.4;
console.log(data.toFixed(0));
>1
data = 1.49;
console.log(data.toFixed(1));
>1.5

JS 为 Number、 Boolean、 String 对象提供了构造⽅法，⽤于强制转换其他类型的数据.

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number("5.5") 5.5
Number("56") 56
Number("5.6.7") NaN
Number(new Object()) NaN
Number(100) 100
Boolean(""); // false – empty string
Boolean("hi"); // true – non-empty string
Boolean(100); // true – non-zero number
Boolean(null); // false - null
Boolean(0); // false - zero
Boolean(new Object()); // true – object

String()(强制类型转换)

var s1 = String(null); 
> "null"
var oNull = null;
var s2 = oNull.toString(); 
> won’t work, causes anerror

运算符
算数运算符

+   加  x=y+2    
-   减  x=y-2 
*   乘  x=y*2
/   除  x=y/2 
%   求余数  x=y%2
++  ⾃增（前导加、后导加）
--  ⾃减（前导减、后导减） 

赋值和扩展运算符

=    x=y 
+=   x+=y x=x+y 
-=   x-=y x=x-y 
*=   x*=y x=x*y 
/=   x/=y x=x/y 
%=   x%=y x=x%y 

⽐较运算符

== 等于
=== 全等（值和类型
!= 不等于
> ⼤于
< ⼩于
>= ⼤于或等于
<= ⼩于或等于

逻辑运算符

运算符 描述          例⼦
&&    and           (x < 10 && y > 1) 为 tr
||    or            (x==5 || y==5) 为 fals
!     not           !(x==y) 为 true

三⽬运算符

 ?: 如果…否则… 3>5?3:5
 >5

控制语句

f (条件){
语句体1;
}

if (条件){
语句体1;
}else {
语句体2;
}

switch(表达式) {
case 值1:
语句体1;
break;
case 值2:
语句体2;
break;
default:
语句体n+1;
[break;]
}


基本格式
while(判断条件语句) {
循环体语句;
}
扩展格式：
初始化语句;
while(判断条件语句){
循环体语句;
控制条件语句; // 少了它很容易形成死循环
}

基本格式
do {
循环体语句;
}while(判断条件语句);
扩展格式：
初始化语句;
do {
循环体语句;
控制条件语句;
} while(判断条件语句);

for(初始化语句;判断条件语句;控制条件语句){
循环体语句;
}

懂得都懂，不懂没办法

break: 停⽌本层循环
continue:暂停本次循环，继续下⼀次

数组
数组定义

var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定⻓度

数组遍历

普通for循环
for(var i=0; i<=数组.length-1; i++){
}

* for in 
for(var 下标(名称任意) in 数组名){
数组名[下标]是获取元素
} // 下标

forEach
(注意)*数组名*.forEach(function(element,index){
// element(名称任意)：元素， index(名称任意)：下标
})

数组提供的方法：

push 添加元素到最后
unshift 添加元素到最前
pop 删除最后⼀项
shift 删除第⼀项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切⽚）数组，原数组不发⽣变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

函数
函数的定义

function 函数名([参数列表]){
}

var 变量名 = function ([参数列表]) {
}
变量名();

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
return (x + y);
}
add();

注意点

1. js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。
2. js中允许有不定数⽬的参数，后⾯介绍arguments对象

1111函数的参数、调用和return语句

实参可以省略，那么对应形参为undefined
若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准。
可以给参数默认值：当参数为特殊值时，可以赋予默认值。
参数为值传递，传递副本 ；引⽤传递时传递地址，操作的是同⼀个对象

// 调⽤函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN
// 若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准
function add2(a , a) {
console.log(a);
}
add2(1,2);
// 给参数默认值
function defaultValue(a){
a = a || "a";
return a;
}
console.log(defaultValue());
function f(a){
//若参数a不为undefined或null，则取本身的值，否则给⼀个默认值
(a !== undefined && a !== null) ? a = a : a = 1;
return a;
}
console.log(f());
// 值传递
var num = 12;
function change(n) {
n = 30;
}
change(num);
console.log(num);
>12

// 引⽤传递
var obj = {name: "tom"};
function paramter(o) {
o.name = 2;
}
paramter(obj);
console.log(obj.name);
>2
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3;
}
paramter2 (obj2);
console.log(obj2)
>1,2,3

函数的调用

常用
函数名([实参]);

函数调用
function add(a,b){
return a+b;
}
var sum = add(1,2)
console.log(sum);

方法调用
var o = {
m: function(){
console.log(1);
}
};
o.m();

return
函数的执⾏可能会有返回值，需要使⽤return语句将结果返回。 return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返undefined。
作⽤：

1. 在没有返回值的⽅法中，⽤来结束⽅法。
2. 有返回值的⽅法中，⼀个是⽤来结束⽅法，⼀个是将值带给调⽤者。
   懂得都懂

函数的作用域
全局变量与局部变量同名问题

var box =1; // 全局变量
function display(box){
var box = 3; // 此处box与全局变量box没有关系，这⾥的box为传递的参数，相当于新声明的局部变量
var b = 2; // 局部变量
console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);

在函数中定义变量时，若没有加var关键字，使⽤之后⾃动变为全局变量

内置对象
Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date ⽇期对象，⽤来创建和获取⽇期
Math 数学对象
String 字符串对象，提供对字符串的⼀系列操作

String
◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定⼦字符串的位置，从左到右。找不到返回-1
◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末
尾。
◦ toLowerCase() 将字符串中的字符全部转化成⼩写。
◦ toUpperCase() 将字符串中的字符全部转化成⼤写。
◦ length 属性，不是⽅法，返回字符串的⻓度。

Math
◦ Math.random() 随机数
◦ Math.ceil() 向上取整，⼤于最⼤整数
◦ Math.floor() 向⼩取整，⼩于最⼩整数String

Date
◦ getFullYear() 年
◦ getMonth() ⽉
◦ getDate() ⽇
◦ getHours() 时
◦ getMinutes() 分
◦ getSeconds() 秒
// 设置⽇期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串

对象

对象的创建

var 对象名 = {};//创建⼀个空的对象
var 对象名 = {键:值,键2:值2,...}
通过new 来创建
var 对象名 = new Object(); // 创建⼀个空的对象
通过create方法创建引用的对象
var 对象名 = Object.create(null);//创建和null对象相同的对象

序列化和反序列化

// 序列化对象，将对象转为字符串
JSON.stringify(object);
// 反序列化，将⼀个Json字符串转换为对象。
JSON.parse(jsonStr);

this
在函数中使⽤this属于全局性调⽤，代表全局对象，通过window对象来访问。

function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
console.log(this.x) // 10
this.x = 1;
console.log(this.x) // 1
console.log(this)
}
test();
console.log(x); // 1
console.log(this);

在对象中的函数使⽤this，代表当前的上级对象

var obj = {
name : '张三',
age : 20,
sayHello : function () {
console.log(this.name)
console.log(this)
}
}
obj.sayHello();