一、主要内容
二、基础语法
1.引入方式
- 行内式
1.行内js 写在标签中
<button type="button" onclick="alert('弹出框')">按钮</button>
- 内部 JS
<!-- 内部js -->
<script type="text/text/javascript">
console.log("打印语句");
</script>
写在body或head标签中
- 外部 JS ⽂件
创建js文件，通过script标签引入进来（script标签如果存在src属性，那么标签体中的js代码无效），在head标签中引入。
创建js文件，通过script标签引入进来（script标签如果存在src属性，那么标签体中的js代码无效）
<!-- 3.外联式 -->
<script src="js/test.js" type="text/javascript" charset="UTF-8">
</script>
2.变量
变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
变量的声明
// 先声明再赋值
var a ;
a = 10;
// 声明同时赋值
var b = 20;
[1]变量的注意点
（1）若只声明⽽没有赋值，则该变量的值为undefined
var box;
console.log(box);//undefined
（2）变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。
console.log(box2);
（3）可以在同⼀条var命令中声明多个变量。
var a, b, c = 10;
console.log(a,b,c);//undefined,undefined,10
（4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的。
var box = 10
var box;//改行代码无效
（5）若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值
var box = 10;
var box = 25;
console.log(box);//25
（6）JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的值
var box = 'hello world';
box = 10;
console.log(box);//10
[2]变量提升
JavaScript 引擎的⼯作⽅式是，先解析代码，获取所有被声明的变量，然后再⼀⾏⼀⾏地运⾏。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
console.log(msg);
var msg = "so easy";
// 变量提升，相当于下⾯的代码
var msg;
console.log(msg);
msg = "so easy";
//说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值。
注意：变量提升只对 var 命令声明的变量有效，如果变量不是⽤ var 命令声明的，就不会发⽣变量提升。
[3]数据类型
JavaScript 中有 6 种数据类型，其中有五种简单的数据类型：Undefined、Null、布尔、数值和字符串。⼀种复杂数据类型Object。
数 值（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 类型的值是 undefined。
undefined 是⼀个表示"⽆"的原始值，表示值不存在。
出现undefined的常⻅情况：
（1）当声明了⼀个变量⽽没有初始化时，这个变量的值就是 undefined
var box;
console.log(box); //undefined
（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为 undefined。
function noData(str) { // js函数形参只需要变量名即可
console.log(str); // undefined
}
noData(); // 调⽤⽅法时，未传递参数
（3）函数没有返回值时，默认返回 undefined。
// ⽅法没有返回值
function noData() {
console.log("Hello");
}
var re = noData();// 定义变量接收⽆返回值的⽅法
console.log(re);
- null
null类型是只有⼀个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示⼀个空对象引⽤。
使⽤Null类型值时注意以下⼏点：
1）使⽤ typeof 操作符测试null返回object字符串。
2）undefined 派⽣⾃ null，所以等值⽐较返回值是true。未初始化的变量和赋值为null的变量相等
console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box); // 两个的值相等
- 布尔类型
布尔类型有两个值：true、false。常⽤来做判断和循环的条件 - 数值型
数值型包含两种数值：整型和浮点型。
1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，⽽且 1 加上1.0 得到的还是⼀个整数。浮点数最⾼精度是17位⼩数，由于浮点数运算时可能不精确，尽量不要使⽤浮点数做判断。
2）在存储数值型数据时⾃动将可以转换为整型的浮点数值转为整型。
console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // ⾃动将可以转换为整型的浮点数转为整型
console.log(num); // 8
- 字符串
使⽤ ’ ’ 或 " "引起来，如：‘hello’，“good”。
使⽤加号 ‘+’ 进⾏字符串的拼接，如：console.log(‘hello’ + ’ everybody’); - 对象
对象是⼀组数据和功能的集合。
说明：
{}：表示使⽤对象字⾯量⽅式定义的对象。空的⼤括号表示定义包含默认属性和⽅法的对象。
[4]代码整合
变量代码整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
变量
变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。
JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
声明方式
1.声明并赋值
2.先声明再赋值
注意点：
1.若只声明而没有赋值，则该变量的值为undefined。
2.变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义
可以在同一条var命令中声明多个变量。
//若使用var重新声明一个已经存在的变量，是无效的。
//若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
//JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
变量提升 (只针对var声明的变量)
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。
这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
不用var声明的变量，会是一个全局变量（在函数中才会有作用域问题）
-->
<script type="text/javascript">
//声明并赋值
var a=10;
//alert(a); aletr会阻止代码的运行
console.log(a);
//声明
var b;
b=20;
console.log(b);
//1.若只声明而没有赋值，则该变量的值为undefined。
var c;
console.log(c);//undefined
//变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义
// console.log(d);
//可以在同一条var命令中声明多个变量。
var a1,a2,a3=100;
/* console.log(a1); undefined
console.log(a2); undefined
console.log(a3); 100 */
var a1;
var a2;
var a3=100;
var a1=11,a2=22,a3=33;
console.log(a1,a2,a3);
//若使用var重新声明一个已经存在的变量，是无效的
var a;
console.log(a);
//若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
var a=999;
console.log(a);//999
console.log("----------------");
//JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
var ab=1;//数值型
var ac='文本字符串';//字符串
var ad=true;//布尔型
var ae=[1,2,3,4];//数组
var af={
name:'张三',
age:18,
inMarry:false
};
console.log(ab);
console.log(ac);
console.log(ad);
console.log(ae);
console.log(af);
console.log('----------------');
//变量名提升
console.log(abc);
var abc= 100 ;
bcd=20;
console.log(bcd)
</script>
</body>
</html>
数据类型代码整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
数据类型
undefined
null
typeof() 获取变量的数据类型
null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。
使用Null类型值时注意以下几点：
1）使用typeof操作符测试null返回object字符串。
2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。
-->
<script type="text/javascript">
//当声明了一个变量而没有初始化时，这个变量的值就是undefined
var a;
console.log(a);//undefined
//调用函数时，该函数有形参，但未提供实参，则该参数为undefined
function test(a){
console.log(a);
}
//调用函数
test();//undefined
//函数没有返回值时，默认返回 undefined。
function test2(a){
console.log(a);
}
//调用函数
var result=test2(11);
console.log(result);
console.log("--------");
//null typeof
var a=10;
var b="文本";
var c=true;
var d=null;
var e;
var f=[1,2,3,4];
console.log(typeof(a));//number
console.log(typeof(b));//string
console.log(typeof(c));//boolean
console.log(typeof(d));//object
console.log(d==e);//true
console.log(typeof(f));//object
//数值型
var num1=1.0;
console.log(num1);//1
var num2=1.0+1;
console.log(num2);//2
var num1=1.0==1;
console.log(num1);//true
//字符串
var str1='str01';
var str2='str02';
console.log(str1,str2);
console.log(c+'');
</script>
</body>
</html>
3. 类型转换
[1]⾃动类型转换
[2]函数转换（String to Number）
JS 提供了 parseInt()和 parseFloat()两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对 String 类型调⽤这些⽅法，这两个函数才能正确运⾏；对其他类型返回的都是 NaN(Not a Number)。
- parseInt()
在转换之前，⾸先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到⾮字符
parseInt("1234blue"); // returns 1234
parseInt("22.5"); // returns 22
parseInt("blue"); // returns NaN
- parseFloat()
该⽅法与 parseInt() ⽅法的处理⽅式相似，从位置 0 开始查看每个字符，直到找到第⼀个⾮有效的字符为⽌，然后把该字 符之前的字符串转换成数字。不过，对于这个⽅法来说，第⼀个出现的⼩数点是有效字符。如果有两个⼩数点，第⼆个⼩数点将被看作⽆效的，parseFloat()⽅法会把这个⼩数点之前的字符串转换成数字。
parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN
- 显示转换
⼏乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。
Number还提供了toFixed()函数将根据⼩数点后指定位数将数字转为字符串，四舍五⼊
// 将内容转换为字符串形式
var data = 10
console.log(data.toString())
// 根据⼩数点后指定位数将数字转为字符串，四舍五⼊
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));
// 不能对null和undefined使⽤
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())
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() 是最简单的，因为它可把任何值转换成字符串。要执⾏这种强制类型转换，只需要调⽤作为参数传递进来的值的 toString() ⽅法，即把 1 转换成"1 "，把 true转换成"true "，把 false 转换成 "false "，依此类推。强制转换成字符串和调⽤ toString() ⽅法的唯⼀不同之处在于，对 null 或 undefined 值强制类型转换可以⽣成字符串⽽不引发错误：
var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror
最简单的⼀种转换为字符串的⽅式，直接在任意数据后⾯ + “” 即可。
[3]代码整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
自动类型转换
函数转换
parseInt()
在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，
如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符
parseFloat()
该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，
然后把该字 符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。
如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。
显示转换
几乎每个数对象都提供了**toString()**函数将内容转换为字符串形式，其中Number提供的**toString**()函数可以将数字转换为字符串。
Number还提供了**toFixed()**函数将根据小数点后指定位数将数字转为字符串，四舍五入
-->
<script type="text/javascript">
//parseInt
var a="123";
var b="123.98"
var c="wea";
console.log(parseInt(a));//123
console.log(parseInt(b));//123
console.log(parseInt(c));//NaN not a number
console.log("------------");
//parseFloat()
var a="123";
var b="123.09";
var c="123.34.32";
var d='abc';
console.log(parseFloat(a));//123
console.log(parseFloat(b));//123.09
console.log(parseFloat(c));//123.34
console.log(parseFloat(d));//NaN
console.log("------------");
//toString
var a=10;
var b=true;
console.log(a.toString());//字符串 10
console.log(b.toString());//字符串true
console.log(typeof(b) + "");//字符串boolean
var c1;
var c2=null;
//console.log(c1.toString());
//console.log(c2.toString());
//04-类型的转换.html:56 Uncaught TypeError: Cannot read property 'toString' of null
//toFixed
var a=1.4;
console.log(a.toFixed(0));//1
var a=2.989;
console.log(a.toFixed(1));//3.0
console.log(Number(undefined));//NaN
console.log("-------");
var aaa;
var bbb=null;
console.log(aaa==bbb);//true ==比较值是否相等
console.log(aaa===bbb);//false ===比较值和类型是否相等
console.log(typeof(bbb));//object null的类型是object
console.log(typeof(undefined));//undefined 的类型是undefined
</script>
</body>
</html>
4.运算符
运算符⽤于执⾏程序代码运算，会针对⼀个及其以上操作数来进⾏运算。
[1] 算数运算符
[2] 赋值和扩展运算符
[3] 比较运算符
[4] 逻辑运算符
三⽬运算符
表达式?表达式成立值:表达式不成立值
5. 数组
数组是按次序排列的⼀组数据，每个值的位置都有编号（从0开始），整个数组⽤⽅括号表示
[1] 数组定义
JS 中定义数组的三种⽅式如下（也可先声明再赋值）：
var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定⻓度
[2]基本操作
数组的⻓度可以通过length属性来获取，并可以任意更改
数组名.length
数组名.length = 新⻓度
数组中的每⼀个元素都可以被访问和修改，甚⾄是不存在的元素，⽆所谓越界
数组名[下标]
数组名[下标] = 新值
[3]数组遍历
数组的遍历即依次访问数组的每⼀个元素 ，JS提供三种遍历数组的⽅式：
- 普通的for循环遍历
for(var i=0; i<=数组.length-1; i++){
}
如：
for(var idx=0;idx<arr.length;idx++){
console.log(arr[idx]);
}
- for … in
for(var 下标(名称任意) in 数组名){
数组名[下标]是获取元素
} // 下标(名称任意)
如：
for(var idx in arr){
console.log(arr[idx]);
}
- forEach
数组名.forEach(function(element,index){
// element(名称任意)：元素，index(名称任意)：下标
})
如：
arr.forEach(function(elem,idx){
console.log(idx + "-->" + elem);
});
- 了解
数组在使⽤的时候建议⼤家规矩来⽤。在存放数据时，从下标0开始顺序的存放数组元素。
如果下标：
1.为⾮负整数(包括整数字符串)：⾃动从0开始,不存在添加 undefined
2.为负数、⼩数、⾮数字符串：这些内容不计算在⻓度内，当成"属性"处理，相当于⾃定义属性。
数组⾮常灵活，使⽤数组元素
1.下标: ⾮负整数(包括整数字符串)：
数组.下标
数组[下标]
2.下标：负数、⼩数、⾮数字字符串：
数组[属性]
* for --> 不遍历属性
* foreach -->不遍历属性和索引中的undefined
* for in -->不遍历索引中的undefined
- 数组提供的操作⽅法
Array对象为我们提供了⼀些⽅法，可以很⽅便地操作数组
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后⼀项
shift 删除第⼀项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切⽚）数组，原数组不发⽣变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并
[4]代码整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
数组
初始化
1.隐式创建
var 数组名 = [值1,值3,值2];
2.直接实例化
var 数组名 = new Array(值1,值3,值2);
3. 创建数组并指定长度
var 数组名 = new Array(size);
设置值
数组[下标] = 值;
取值 (如果没有值的情况下，取到的是undefined)
数组[下标]
长度
设置
数组.length = size;
取值
数组.length
数组的遍历
1.for
2.for in
3.forEach
-->
<script type="text/javascript">
//定义数组 隐式创建
var arr=[1,2,3];
console.log(arr);
// 直接实例化
var arr2=new Array(1,2,3);
console.log(arr2)
// 创建数组并指定长度
var arr3=new Array(6);
console.log(arr3.length);//6
//数组的长度可以通过length属性来获取，并可以任意更改
arr3.length=5;
console.log(arr3.length);//5
//数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界
arr3[0]='text';
arr3[1]=true;
arr3[2]=123;
console.log(arr3);
console.log("============");
var arr2=new Array(true,4,'adwd',6,7);
console.log(arr2.length);
console.log(arr2);
console.log(arr3.length==9);
console.log("==============")
var newArr = new Array(true,6,'abc',8,9);
newArr.length = 7;
newArr["name"] = "zhansgan";
console.log(newArr.name);
console.log(newArr);
console.log("========for=========");
//遍历 for 打印非空数据和空数据
for(var i=0;i<newArr.length;i++){
console.log(newArr[i]);
}
console.log("=========for in========");
//遍历 打印非空数据和属性
for(var i in newArr){
console.log(newArr[i]);
}
console.log("=========forEach========");
//遍历 打印非空数据
newArr.forEach(function(num,index){
console.log(num +"-------"+index);
});
console.log("=========循环结束========");
//数组提供的方法
var arr = ['1','a',5,'3'];
console.log(arr);//1,a,5,3
//后追加
arr.push(10);
console.log(arr);//1,a,5,3,10
//前追加
arr.unshift('b');
console.log(arr);//b,1,a,5,3,10
//后删除
arr.pop();
console.log(arr);//b,1,a,5,3
//前删除
arr.shift();
console.log(arr);//1,a,5,3
//反转
arr.reverse();
console.log(arr);//3,5,a,1
// 数组转成字符串
console.log(arr.join('\''));//3'5'a'1
console.log(arr);//3,5,a,1
console.log(arr.indexOf('a'));//2
console.log(arr.slice(2,5));//3,5
console.log(arr);//3,5,a,1
arr.splice(1,1,'一','二');
console.log(arr);//3,'一','二',a,1
var arr1 = [0,'100'];
console.log(arr.concat(arr1));//3,'一','二',a,1,0,'100'
console.log(arr);//3,'一','二',a,1
console.log(arr1);//0,'100'
</script>
</body>
</html>
6.函数
函数，即⽅法。就是⼀段预先设置的功能代码块，可以反复调⽤，根据输⼊参数的不同，返回不同的值。函数也是对象。
[1]函数的定义
有三种函数定义的⽅式：函数声明语句、函数定义表达式、Function构造函数
函数声明语句:
function 函数名([参数列表]){
}
例如：
function foo(){
console.log(1);
}
foo();
该种⽅式定义的函数具有声明提升的效果
foo();
function foo(){
console.log(1);
}
// 变量声明提升
console.log( a );
var a = 2;
函数定义表达式
以表达式⽅式定义的函数，函数的名称是可以不需要的
var 变量名 = function ([参数列表]) {
}
变量名();
例如：
var fun = function(){
console.log("Hello");
}
fun();
这种写法将⼀个匿名函数赋值给变量。这时，这个匿名函数⼜称函数表达式，因为赋值语句的等号右侧只能放表达式
Function构造函数
Function构造函数接收任意数量的参数，但最后⼀个参数始终都被看成是函数体，⽽前⾯的参数则列举出了新函数的参数。
var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
return (x + y);
}
add();
注意：
1. js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。
2. js中允许有不定数⽬的参数，后⾯介绍arguments对象
[2]函数的参数、调⽤和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);
// 引⽤传递
var obj = {name: "tom"};
function paramter(o) {
o.name = 2; }
paramter(obj);
console.log(obj.name);
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3; }
paramter2 (obj2);
console.log(obj2)
[3] 函数的调⽤
- 常⽤调⽤⽅式
函数名([实参]);
存在返回值可以变量接收，若接收⽆返回值函数则为undefined。
- 函数调⽤模式
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。
作⽤：
- 在没有返回值的⽅法中，⽤来结束⽅法。
- 有返回值的⽅法中，⼀个是⽤来结束⽅法，⼀个是将值带给调⽤者
[4] 函数的作⽤域
函数作⽤域：全局 (global variable) 和 局部 (local variable)
全局变量与局部变量同名问题
function display(box){
var box = 3; // 此处box与全局变量box没有关系，这⾥的box为传递的参数，相当于新声明的局部变量
var b = 2; // 局部变量
console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);
在函数中定义变量时，若没有加var关键字，使⽤之后⾃动变为全局变量
function fun(){
a = 100; }
fun();
alert(a);
[5]代码整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
函数的定义
1.函数声明式 （声明提升）
function 方法名([参数列表]){
......
}
2.函数定义表达式
var 方法名 = function([参数列表]){
}
3.Function构造函数
var 方法名 = new Function('参数1','参数2','方法体');
方法名([参数列表]);
注意：
1. js中的函数没有重载，同名的函数，会被后面的函数覆盖。
2. js中允许有不定数目的参数，后面介绍arguments对象
函数的参数、调用和return语句
- 实参可以省略，那么对应形参为undefined
- 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
- 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
- 参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象。
函数的调用
常用调用方式
test(15);
函数调用模式
var aa = test(200);
方法调用模式
obj.say();
return
函数的执行可能会有返回值，需要使用return语句将结果返回。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。
作用：
1. 在没有返回值的方法中，用来结束方法。
2. 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
函数的作用域
函数作用域：全局 (global variable) 和 局部 (local variable)
-->
<script type="text/javascript">
//1.函数声明式
function test(ab){
console.log(ab);
}
// 同名的函数，会被后面的函数覆盖。
function test(){
console.log("同名函数");
}
test(15);
//函数定义表达式
var test2 = function(){
console.log("函数定义表达式");
}
test2();
//Function构造函数
var test3 = new Function('a','b','console.log(a+b)');
test3(2,3);
//若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
function test(a,a){
console.log(a);
}
test(10,20);
//可以给参数默认值：当参数为特殊值时，可以赋予默认值。
function test(a){
a = (a == undefined)? "默认值": a
console.log(a);
}
test(999);
function test2(a){
a = "默认值" || a;
console.log(a);
}
test(200);
// 函数调用模式**
function test3(a){
a = "默认值" || a;
return 89;
}
var aa = test(200);
var obj = {
name:"zs",
say:function(){
console.log("对象中的方法");
}
};
obj.say();
console.log("=======");
//return
function test5(){
console.log("第一行");
return ;
console.log("第三行");
}
test5();
//函数作用域
// if(true){
// var c = 10;
// }
// console.log(c);
function test6(){
a = 10; //当前变量是一个全局变量
}
test6();
console.log(a);
</script>
</body>
</html>
7.内置对象
Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date ⽇期对象，⽤来创建和获取⽇期
Math 数学对象
String 字符串对象，提供对字符串的⼀系列操作
[1]Sting
◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定⼦字符串的位置，从左到右。找不到返回-1 ◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
◦ toLowerCase() 将字符串中的字符全部转化成⼩写。
◦ toUpperCase() 将字符串中的字符全部转化成⼤写。
◦ length 属性，不是⽅法，返回字符串的⻓度。
[2] Math
◦ Math.random() 随机数
◦ Math.ceil() 向上取整，⼤于最⼤整数
◦ Math.floor() 向⼩取整，⼩于最⼩整数String
[3]Date
// 获取⽇期
◦ getFullYear() 年
◦ getMonth() ⽉
◦ getDate() ⽇
◦ getHours() 时 ◦ getMinutes() 分 ◦ getSeconds() 秒
// 设置⽇期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串
说明：
- getMonth()：得到的值：011（1⽉12⽉）
- setMonth()：设置值时0~11
- toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
8.对象
[1] 对象的创建
JS 创建⾃定义对象，主要通过三种⽅式：字⾯量形式创建对象、通过new Object对象创建 、通过Object对象的create⽅法创建对象。
- 字⾯量形式创建
var 对象名 = {};//创建⼀个空的对象
var 对象名 = {键:值,键2:值2,...}
var obj = {
'name' : 'hello',
age : 12,
sayHello : function () {
console.log("我是对象中的⽅法");
},
courses : {
javase : 4,
javascript : 3
},
isLike : true,
members : [
{name : "⼩红",age : 20},
{name : "⼩绿",age : 22},
{name : "⼩蓝",age : 27},
{name : "⼩⻩"}
]
};
- 通过new Object创建
var 对象名 = new Object(); // 创建⼀个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);
- 通过Object对象的create⽅法创建
var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)
[2]对象的序列化和反序列化
序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调⽤JSON⽅法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。
// 序列化对象，将对象转为字符串
JSON.stringify(object);
// 反序列化，将⼀个Json字符串转换为对象。
JSON.parse(jsonStr);
[3]this
this是JavaScript语⾔的⼀个关键字。
它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。
随着函数使⽤场合的不同，this的值会发⽣变化。但是有⼀个总的原则，那就是this指的是，调⽤函数的那个对象。
在函数中使⽤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
在对象中的函数使⽤this，代表当前的上级对象。
var obj = {
name : '张三',
age : 20,
sayHello : function () {
console.log(this.name)//张三
console.log(this)//Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
}
}
obj.sayHello();
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
