***【Java基础之JavaScript】***
2020.10.10 coin
一、 JS的三种使用方式
1、行内JS
在html标签上直接写JS代码
2、内部JS
在script标签中写JS代码，script标签可以放在head中或body中（建议放在body标签最后）
3、外部JS
定义JS文件，通过script标签的src属性引入对应的JS文件
注：如果script标签设置了src属性，则在script双标签之间的JS代码不会生效
<!-- 行内JS -->
<button onclick="alert('Hello World!');">按钮</button>
<!-- 内部JS-->
<script type="text/javascript">
// alert("这是一个按钮！");
</script>
<!-- 引入外部js文件 -->
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
二、基础语法
2.1 语句：
1. JS代码一行为单位，代码从上往下执行，一行一条语句。
2. 语句不加分号结尾，如果一行定义多条语句，每句语句只会必须以分号结尾。（建议都加分号）
3. 表达式不需要以分号结尾，如果加了分号则JavaScript引擎会当做语句执行，生成无用的语句。
2.2注释：
1. HTML代码注释：<!-- HTML注释 – >
2. JS代码注释：
// 单行注释
/* 多行注释 */
2.3标识符：
规则
由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写
规范
（1）见名知意
（2）驼峰命名或下划线规则
2.4关键字（保留字）：
声明变量时，不要使用关键字
三、变量
变量
JS是一种弱类型的语言，在声明变量的时候不需要指明数据类型，直接用var修饰符进行声明。
注：也可以不使用var修饰符，直接声明并赋值。
3.1 变量的声明：
1、先声明再赋值
//先声明再赋值
var coin;
coin = 10000;
console.log(coin);
2、声明并赋值
//声明的同时赋值
var coin=12000;
console.log(coin);
3.2 变量的注意点：
1、如果变量只声明不赋值就会显示undefined
//如果变量只声明不赋值就会显示undefined
var coin;
console.log(coin);//undefined
2、如果变量未声明就使用就报错
//如果变量未声明就使用就报错
console.log(coin);//coin is not defined
3、可以使用var声明多个变量
//可以使用var声明多个变量
var coin,sam,sliver = 15000;
console.log(coin);//undefined
console.log(sam);//undefined
sonsole.log(sliver);//15000
4、如果重新声明一个已经存在的变量，无效
//如果重新声明一个已经存在的变量，无效
var coin;
coin=13000;
console.log(coin);
var coin;
console.log(coin);//13000;
5、如果重新声明一个已经存在的变量并且赋值，会被覆盖
//如果重新声明一个已经存在的变量并且赋值，会被覆盖
var coin;
coin=13000;
console.log(coin);
var coin=14000;
console.log(coin);//14000
6、众所周知JS是一种动态、弱类型的语言，可以声明任意数据类型的变量
//众所周知JS是一种动态、弱类型的语言，可以声明任意数据类型的变量
var str = "Hello World"; // 字符串类型
var flag = true; // 布尔类型
console.log(str);
console.log(flag);
console.log("true");
3.3 变量名提升
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。
这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
注意：
变量提升只对 var 命令声明的变量有效，如果变量不是用 var 命令声明的，就不会发生变量提升。
<script type="text/javascript">
/* 变量名提升 */
console.log(flag);
console.log(name);
/* 变量的声明 */
// 1. 先声明在赋值
var a;
a = 1;
console.log(a);
// 2. 声明并赋值
var b = 2;
console.log(b);
/* 变量的注意点 */
// 1. 如果变量只声明而未赋值，则显示undefinded
var c; // 声明变量
console.log(c); // undefined
// 2. 如果变量未声明就使用，则会报错
// console.log(d); // d is not defined
// 3. 可以使用var同时声明多个变量
var aa,bb,cc = 10;
console.log(aa); // undefinded
console.log(bb); // undefinded
console.log(cc); // 10
// 4. 如果重新声明一个已存在的变量，是无效
var a;
console.log(a); // 1
// 5. 如果重新声明一个已存在的变量并赋值，则会覆盖
var a = 10;
console.log(a); // 10
// 6. JS是一种动态的、弱类型语言，可以声明任意数据类型的变量
var str = "Hello World"; // 字符串类型
var flag = true; // 布尔类型
console.log(str);
console.log(flag);
console.log("true");
// 不使用var声明变量
name = "zhangsan";
// console.log(name);
</script>
四、数据类型
数据类型：JS是弱类型的语言，变量没有数据类型，数据有类型。
4.1 Undefined类型：
值不存在
出现的情况：
1、变量只声明未赋值，值为undefined
2、当定义函数需要形参，调用函数未传递实参时，参数的值为undefined
3、当函数没有返回值，接受值为undefined
4.2 Null类型
表示空值
注意点：
1)、使用typeof操作符测试 null返回object字符串。
typeof操作符：判断变量的类型
2)、undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。
4.3 Boolean类型
true 和f alse
4.4 数值型
数值型包含两种数值：整型和浮点型。
1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中 1 与 1.0 相等，而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是17位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。
2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。
4.5 字符串类型
-
使用’'或""引起来
-
可以使用"+"对字符串进行拼接
4.6 对象类型
数组
var 数组名 = [ ];
对象
var 对象名 ={ };
函数
function 方法名 ( ) {
}
<script type="text/javascript">
/* undefined类型 */
// 1. 变量只声明未赋值，值为undefined
var a;
console.log(a);
// 2. 当定义函数需要形参，调用函数未传递实参时，参数的值为undefined
// 定义函数 function 方法名([参数]) {}
function fn01(str) {
console.log(str);
}
// 调用方法 方法名([参数]);
fn01();
// 3. 当函数没有返回值，接收值为undefined
function fn02() {
console.log("fn02...");
}
var b = fn02();
console.log(b);
console.log("=============");
/* null类型 */
var num = 1; // 数值类型
var flag = true; // 布尔类型
var str = "Hello"; // 字符串类型
console.log(typeof num); // number
console.log(typeof flag); // boolean
console.log(typeof str); // string
// 1）使用 typeof 操作符测试 null 返回 object 字符串。
var aa = null;
console.log(typeof aa); // object
// 2）undefined 派生自 null，所以等值比较返回值是 true。未初始化的变量和赋值为 null 的变量相等。
console.log(undefined == null); // true
// 只声明未赋值的变量 值为null的变量 相等
var bb;
var cc = null;
console.log(bb == cc); // true
console.log("-----------");
/* 数值型 */
// 1 和 1.0相等
console.log(1== 1.0); // true
// 1 + 1.0 等于 2
var n = 1 + 1.0;
console.log(n); // 2
// 将浮点型的整数转换成整型 1.0 -> 1
console.log(1.0);
console.log('==============');
/* 字符串类型 */
// 1. 使用''或""引起来
var s1 = 'Hello';
var s2 = "World";
console.log(s1,s2);
// 2. 可以使用"+"对字符串进行拼接
console.log(s1+ s2);
</script>
五、类型转换
5.1 自动类型转换
1、转字符串：所有的值转字符串都是加引号
2、转boolean型：有值为true，无值为false（0为false，非0为true）
3、转数值型：空值为0，非空的数值型字符串能转换，非数值型字符串转换为NaN
5.2 函数转换
parseInt() 转整数型
parseFloat() 转浮点型
注： 转换时会从值的第零个位置开始找有效数字，直到找到无效数字为止，parseFloat在转换时会比parseInt多识别一个小数点。
5.3 显示转换
toString() 将值转换成字符串
toFixed() 保留指定小数位 ， 四舍五入（需要大于5 ，5的话不会进一）
注：值不能为NULL
JS 为Number、Boolean、String 对象提供了构造方法，用于强制转换数据类型，转换的是值的全部，不是部分。
注：可以住转换null值
5.3.1 比较运算符
== 比较值
1==“1” true
=== 比较值和类型
1===“1” false
<script type="text/javascript">
// parseInt
console.log(parseInt("123abc")); // 123
console.log(parseInt("abc123")); // NaN
console.log(parseInt("123.4abc")); // 123
console.log(parseInt("123")); // 1234
console.log("123");
var a = 1;
var b = "2";
console.log(a+b); // 12
console.log(a + parseInt(b));
// parseFloat
console.log(parseFloat("123abc")); // 123
console.log(parseFloat("abc123")); // NaN
console.log(parseFloat("123.4abc")); // 123.4
console.log(parseFloat("123")); // 1234
console.log(parseFloat("123.4.5")); // 123.4
console.log("----------");
// toString()
var aa = 10;
console.log(aa);
console.log(aa.toString());
var bb = null; // 空值
// console.log(bb.toString()); // Cannot read property 'toString' of null
// toFixed()
var cc = 1.346;
console.log(cc.toFixed(2)); // 保留两位，四舍五入
console.log("----------");
// Number
var q = "1";
var w = "a";
var e = "123abc"
var r = "123.4";
var t = "123.4.5";
console.log(Number(q));
console.log(Number(w));
console.log(Number(e));
console.log(Number(r));
console.log(Number(t));
// Boolean
console.log(Boolean("a")); // true
console.log(Boolean(0)); // false
console.log(Boolean("1")); // true
console.log(Boolean(null)); // false
// String
console.log(10);
console.log(String(10));
console.log(null);
console.log(String(null));
console.log("==========");
// ==
console.log(1=='1');
// ===
console.log(1==='1');
</script>
六、数组
6.1 数组的定义
1、隐式定义
var 数组名 = [ ];//空数组
var 数组名 = [值1，值2，值3…] ;
2、直接实例化
var 数组名 =new Array(值1，值2，值3…);
3、定义数组并设置长度
var 数组名 = new Array(size);
6.2 数组的操作
数组的下标是从0开始的（不会出现下标越界）
获取数组指定下标的值：（如果下表不存在，则undefined）
数组名 [下标]；
设置数组指定下表的值：（如果下标不存在，就自动扩容）
数组名[下标] = 值；
获取数组的长度
数组名.length；
设置数组的长度：
数组名.length = 值；
扩展：
如果设置非整形的下标，则会成为数组的属性，不计入数组的长度
设置属性：
数组名. 属性名 = 值;
数组名[“属性名”] = 值；
获取属性 ：
数组名.属性名;
数组名[“属性名”];
6.3 数组的遍历
6.3.1 for循环遍历
for (var index = 0 ; index <数组长度；index++ ) {
}
相当于java中：
for (int index = 0;index <数组长度; index ++) {
}
6.3.2 for …in 循环
for (var 下标名 in 数组) {
}
6.3.3 forEach循环
数组.forEach(function(element,index){
// element:元素
// index:下标
});
注：
for --> 不遍历属性
foreach --> 不遍历属性和索引中的undefined
for in --> 不遍历索引中的undefined
6.4、数组提供的方法
push 添加元素到最后
indexof 数组元素索引
join 数组转成字符串
split 属于字符串方法：将字符串转换成数组
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并
<script type="text/javascript">
/* 数组的定义 */
// 隐式定义
var arr1 = [];
console.log(arr1);
var arr2 = [1,2,'a',true];
console.log(arr2);
// 直接实例化
var arr3 = new Array(1,2,3);
console.log(arr3);
// 定义数组并设置长度
var arr4 = new Array(5);
console.log(arr4);
console.log("============");
/* 数组的操作 */
// 获取指定下标的值
console.log(arr2[1]); // 2
// 如果下标不存在
console.log(arr2[10]); // undefined
// 设置指定下标的值
arr2[1] = 20;
console.log(arr2);
// 如果下标不存在
arr2[10] = 100;
console.log(arr2);
// 获取数组的长度
console.log(arr3.length); // 3
// 设置数组的长度
arr3.length = 5;
console.log(arr3);
// 设置数组的属性
arr3.name = "zhangsan";
console.log(arr3);
arr3["pwd"] = "123456";
console.log(arr3);
// 获取数组的属性
console.log(arr3["name"]);
console.log("============");
/* 数组的遍历 */
console.log(arr3);
console.log("---for循环遍历----");
// for循环遍历
for(var i = 0; i < arr3.length; i++) {
console.log("下标：" + i + "，值："+ arr3[i]);
}
// for...in
console.log("---for...in----");
for (var i in arr3) {
console.log("下标：" + i + "，值："+ arr3[i]);
}
// forEach
console.log("---forEach----");
arr3.forEach(function(element, index){
console.log("下标：" + index + "，值："+ element);
});
console.log("============");
/* 数组提供的方法 */
var arr5 = ["a","b","c"];
// push 添加元素到最后
arr5[arr5.length] = "d";
arr5.push("e");
console.log(arr5);
// indexOf 数组元素索引
console.log(arr5.indexOf("a")); // 0
console.log(arr5.indexOf("t")); // -1，找不到返回-1
// join 数组转成字符串
console.log(arr5.join("-")); // a,b,c,d,e
// split 字符串方法：将字符串转换成数组
var str = "1,2,3,4,5";
console.log(str.split(","));
</script>
七、函数的定义
7.1、函数的定义
1、函数声明的语句
1、函数声明的语句
function 函数名([参数列表]) {
}
2. 函数定义表达式
var 变量名/函数名 = function([参数列表]) {
}
3. Function构造函数 (了解)
var 函数名 = new FUnction([参数列表],函数体);
7.2、函数的参数
定义函数时设置形参，调用函数时传递实参。
1. 实参可以省略，则形参为undefinded
2. 如果形参名相同，则以最后一个参数为准
3. 可以设置参数的默认值
4. 参数为值传递，传递副本；参数是是引用传递，则传递的是地址，操作的是同一个对象
7.3、函数的调用
函数的调用
1. 常用调用模式
函数名([参数列表]);
2. 函数调用模式 （函数有返回值）
var 变量名 = 函数名([参数列表]);
3. 方法调用模式
对象.函数名([参数列表]);
7.4、函数的返回值
函数的返回值
return
1. 在没有返回值的方法中，用来结束方法。（如果方法没有返回值，使用return，返回的是undefinded）
2. 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
7.5、函数的作用域
函数的作用域
在JS中，只有在函数中才作用域。
1. 在函数中，存在局部变量和全局变量
2. 在函数中，如果声明变量时未使用var修饰符，则该变量是全局变量
<script type="text/javascript">
/* 函数的定义 */
// 1. 函数声明语句
function fn01(a,b) {
console.log(a+b);
}
console.log(fn01);
// 2. 函数定义表达式
var fn02 = function(a,b) {
console.log(a+b);
}
console.log(fn02);
// 3. Function构造函数
var fn03 = new Function('a','b','return (a+b);');
console.log(fn03);
// 相当于
function fn04(a,b) {
return (a + b);
}
console.log("==============");
/* 函数的参数 */
// 1. 实参可以省略，则形参为undefinded
function test01(x, y) {
console.log(x+y);
}
// 调用函数
// 未设置实参
test01(); // NaN
test01(1); // NaN
test01(1,2); // 3
// 2. 如果形参名相同，则以最后一个参数为准
function test02(x,x) {
console.log(x);
}
test02(1,2); // 2
// 3. 可以设置参数的默认值
function test03(x) {
// 如果形参x有值，则值为x传递的值；否则值为"x"
x = x || "x";
console.log(x);
}
test03(10); // 10
test03(); // x
function test04(x) {
(x != null && x != undefined) ? x = x : x = "x";
console.log(x);
}
test04(); // x
test04("Hello");
// 4. 参数为值传递，传递副本；参数是是引用传递，则传递的是地址，操作的是同一个对象
// 值传递
var num = 10; // 变量
// 函数
function test05(num) {
num = 20;
}
// 调用函数
test05(num); // 实参是定义的变量
console.log(num);
// 引用传递
var obj = {name:"zhangsan"};
console.log(obj);
function test06(o) {
o.name = "lisi";
}
test06(obj);
console.log(obj);
console.log("===============");
/* 函数的调用 */
// 常用调用模式
function f1() {
console.log("常用调用模式...");
}
f1();
// 函数调用模式
var f2 = function(a) {
console.log("函数调用模式...");
return a;
}
var num1 = f2(1);
console.log(num1);
// 方法调用模式
// 定义对象 key键：字符串 value值：任意数据类型
var obj = {
name:"zhangsan", // 字符串
age:18, // 数值
sex:true, // 布尔
cats:["大毛","二毛"], // 数组
dog:{ // 对象
name:"张二狗",
age:1
},
sayHello:function(){ // 函数
console.log("你好呀~");
}
}
console.log(obj);
console.log(obj.dog);
console.log(obj.sayHello);
obj.sayHello(); // 对象调用函数
console.log("===============");
/* 函数的返回值 */
function a1(){
console.log("没有返回值...");
return;
console.log('........');
}
console.log(a1());
function a2() {
console.log("有返回值...");
return "test";
}
console.log(a2());
console.log("===============");
/* 函数的作用域 */
var pp = "Hello"; // 全局变量
// 函数中定义的变量是局部变量
function qq() {
// 局部变量
var box = 10;
// 全局变量 （没有使用var修饰符声明，属于全局变量）
box2 = 20;
}
// 调用方法，执行方法中的代码
qq();
console.log(pp); // 全局变量
console.log(box); // box是局部变量
console.log(box2); // 20
</script>
八、内置对象
8.1、String
◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
◦ toLowerCase() 将字符串中的字符全部转化成小写。
◦ toUpperCase() 将字符串中的字符全部转化成大写。
◦ length 属性，不是方法，返回字符串的长度。
8.2、Math
◦ Math.random() 随机数
◦ Math.ceil() 向上取整，大于最大整数
◦ Math.floor() 向小取整，小于最小整数String
8.3、Date
获取日期
◦ getFullYear() 年
◦ getMonth() 月
◦ getDate() 日
◦ getHours() 时
◦ getMinutes() 分
◦ getSeconds() 秒
设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串
<script type="text/javascript">
var str = "Hello World";
console.log(str);
console.log(str.substring(3)); // 从下标3开始，截取到最后
console.log(str.substring(3,5)); // 从下标3开始，到下标5结束
console.log(str.toLowerCase()); // 转小写
console.log(str.toUpperCase()); // 转大写
// ◦ Math.random() 随机数
console.log(Math.random());
// ◦ Math.ceil() 向上取整，大于最大整数
console.log(Math.ceil(1.2));
// ◦ Math.floor() 向小取整，小于最小整数String
console.log(Math.floor(1.2));
// 得到日期对象
var date = new Date();
console.log(date);
// ◦ getFullYear() 年
console.log(date.getFullYear());
// ◦ getMonth() 月
console.log(date.getMonth() +1); // 0~11
// ◦ getDate() 日
console.log(date.getDate());
// ◦ getHours() 时
console.log(date.getHours());
// ◦ getMinutes() 分
console.log(date.getMinutes());
// ◦ getSeconds() 秒
console.log(date.getSeconds());
var mstr = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes();
var dateStr = date.getFullYear()+"-"+(date.getMonth() +1) + "-" + date.getDate()+" " + date.getHours()+":"+ mstr;
console.log(dateStr);
// 时间本地化
console.log(date.toLocaleString())
</script>
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
