web前端中js详解第二篇
Js(二)
1.操作符
由于下面的内容和python相似，所以只挑重要的详细说一下
算术运算
定义方式除了var以外还有一种方式let，这种方式更为严格，如果var声明了相同的变量，则后面赋的值会把前面赋的值覆盖掉，而let相同的变量只能定义一次，否则会报错。
一次性定义多个值：
var a=1,b=2,c="3";
一开始不给赋值，后面再赋值也行
var a,b,c;
a=1
b=2
c="3"
//%:求余数
//当不是数字的运算时，"+"一旦有string类型就是拼接，最终结果为字符串
//而 - / % * 则是自动隐式转换为数字去计算
如果无法隐式转换成数字，就会输出'NaN'
<script>
var a = 'c';
var b = 8;
</script>
赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var a = 8;
// a += 1; //a=a+1
// console.log(a)
// var a = 8;
// var b = a++;
// console.log(a,b)
// //得到的是9和8而不是8和9，因为这时候分两步，第一步: b=a 第二步:a=a+1
// //++在后面是先赋值，再加一，++在后面是先加一，后复赋值
// var c = 1;
// var d = ++c;
// console.log(c,d)
</script>
</body>
</html>
比较运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = '8';
var b = 8;
if(a === b){
alert('hello')
}else {
alert('python')
}
//上面输出python
//全等于时不但数据要一样，而且类型也要一样
//如果是"=="的话就只比值，不比对类型。
</script>
</body>
</html>
逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//&& 与 两边都为真结果才为真，其他都是假
//|| 或 两边都为假结果才为假，其他都是真
//! 非 取反，真变假，假变真
//当两边不一定是布尔值时
//&& 遇到假就停 不会进行数据转换
//|| 遇到真就停 不会进行数据转换
//! 隐式类型转换,将后面的数据先转换为布尔值在取反
var a = true && true && false //输出为假
var b = 0 || 0 || 2 //输出为2
var c = 2 && -1 && '' //输出为空
var d = 0 && null //输出为0，因为第一个条件就不符合了
//先判断2 && -1发现为真，然后往下判断-1 && ''发现为假，然后输出空
//"或"是一直判断下去，直到有真才输出真的值
//"与"是一直判断下去，直到有假才输出假的值
//逻辑运算符不是判断值是否相等的，只判断是不是为真
</script>
</body>
</html>
以下在进行判断时为假：
1.0
2.null
3.undefined
4.NaN
5.''(空字符串)
6.false
2.控制流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 0;
// if (a >= 0){
// alert("真")
// }else {
// alert("假")
// }
// 三目运算:条件? 真语句: 假语句
// a>=0? alert("真"):alert("假")
// var x = 8;
// if (x>50){
// alert('x>50')
// }else if(x>30){
// alert('x>30')
// }else if(x>=10){
// alert('x>=10')
// }else {
// alert("hello world")
// }
//switch速度会比if快一些
var day = 3
switch (day){
case 1:
document.write("1")
//document.write()是写在终端(网页)内，不写在控制器内
//console.log()是写在控制器内
break
case 2:
document.write("2")
break
case 3:
document.write("3")
break
case 4:
document.write("4")
break
}
</script>
</body>
</html>
3.循环
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//循环长这样:
// for(条件){
// 执行语句
// }
//如果外面没有定义变量，for内也可以定义
//和c语言的for循环有一定的类似性
for (var i=1; i<=9; i++){
for (var j=1;j<=i ;j++){
var b = i*j
document.write(i+"*"+j+"="+b+' ')//拼接
}
document.write("<br>")
}
</script>
</body>
</html>
循环实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//点击哪个就弹窗出来对应的数字，可以重复点击，此方法使用循环
var aLi = document.getElementsByTagName('li');
var len = aLi.length;
for (var i = 0; i<len; i++){
aLi[i].wwwww = i //保存值
aLi[i].onclick = function () {
alert(this.wwwww)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//点击哪个就弹窗出来对应的数字，不用循环的方法，但是如果事件多的话就不合适了
var aLi = document.getElementsByTagName('li');
aLi[0].onclick = function (){
alert(0)
}
aLi[1].onclick = function (){
alert(1)
}
aLi[2].onclick = function (){
alert(2)
}
aLi[3].onclick = function (){
alert(3)
}
aLi[4].onclick = function (){
alert(4)
}
</script>
</body>
</html>
while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var i=0
while (i<10){
console.log(i)；
i++；
}
</script>
</body>
</html>
do while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var i=0
do{
console.log(i);
i++;
}
while (i<10)
</script>
</body>
</html>
4.字符串方法
string 字符串
索引，下标，偏移量---从0开始
str[index];通过索引取字符串
str.length;获取长度 空格也算
value.toString();--转换字符串
str.substring();--截取字符串会比较参数值的大小，小的参数在前面，负数变为0
str.slice()--切片，不会交换位置，负数从右到左数
str.split()--字符串切割，返回数组
str.indexOf --查找字符串，成功返回索引，反之返回-1 ===>相当于python中的find
str.toUppweCase()--全部转换大写
str.toLowerCase()--全部转换小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str="wo shi shui";
console.log(str.length);
console.log(str[3]);
//执行以下两行代码输出的东西不变，所以可以发现string方法不能改变值
//string类型不可变
str[0] = "Q";
console.log(str);
//将其他类型的数据转化为字符串
var a = 8;
alert(typeof a.toString())
//substring遵循左闭右开原则
var str1 = "wo shi shui wo zai na";
//截取字符串会自动比较参数值的大小，小的参数在前面，大的参数在前面，这点和python不一样
//下面两行代码输出结果一样
console.log(str1.substring(3,9));
console.log(str1.substring(9,3));
//负数变为0 ===>(0, 9)
console.log(str1.substring(-3,9));
//slice遵循左闭右开原则
console.log(str1.slice(3,9));
console.log(str1.slice(9,3)); //输出为空，python也是为空，所以不能倒着写
console.log(str1.slice(-5,-1));
console.log(str1.split('i'));
alert(str1.indexOf('h',5))//这里的数字意思是从几号位置开始找
</script>
</body>
</html>
5.数组(列表)方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr =["april",'班长','有你','大当家','七叶'];
//索引取值
console.log(arr[3]);
//赋值(改变值)
arr[4] = "忧游";
console.log(arr);
//如果一共5个数据，你修改第八个，也就是跳过一些位置会输出:
//['april', '班长', '有你', '大当家', '七叶', 空 ã3, '忧游']
//添加
arr.push("思雨",'三月') //可以添加多个
arr.unshift("眠",'鲨鱼')
//删除，不能指定，括号里不能填数字
console.log(arr.pop())
console.log(arr.shift())
//指定删除
console.log(arr.splice(3)); //保留前三个，剩下全部删除，如果里面的数字大于总数则一个都不会删除
console.log(arr.splice(2,2)); //从2号位置开始删除2个，但是不包含2号元素
console.log(arr.splice(1,2,"哈哈"));//从1号位置开始删除两个，然后再加上’哈哈‘，不删除只添加的话就把2改为0
// 另一种定义数组方式
var arr11 = Array(); //定义空数组
arr11[0] = 'qqq'; //给空数组添加值，数组没有互异性或者去重功能，所以值可以重复
//排序
var arr2 = [1,5,3,6,3,2,2,8,9]
var arr3 = arr2.sort()
var arr12 = arr2.sort().reverse() //逆序
//拼接
var arr5 = ["思",'月']
var q = arr5.join("和")
console.log(q)
//多拼接
var arr1 = [1,2,3]
var arr4 = [4,5,6]
var arr7 = [7,8,9]
//如果直接用"+"拼接则arr1,arr4,arr7之间没有逗号，最后出来的是字符串不是数组
var arr6 = arr1.concat(arr4).concat(arr7)
console.log(arr4)
</script>
</body>
</html>
6.数字方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//转化为数字(number)类型
var a = '888';
console.log(typeof Number(a))
var b = 'aa';
console.log(typeof Number(b));
//下面这一串代码会随机得到0-1之间的一个浮点数
console.log(Math.random())
//可以这么写，出来的就是他输入的倍数:
console.log(Math.random()*100)
//只取整数部分
console.log(Math.floor(Math.random()*100))
//保留两位小数
console.log(Math.random().toFixed(2))
//转化为数字类型，遇到不是数字的就会停，
var c = '88afevafw123debr';
console.log(typeof parseInt(c))
//parseFloat()可以使小数部分转化为数字类型，遇到不是数字的就停，并输出已转化的
//parseFloat()是从整数部分直到小数都转化，如果整数部分有不是数字的东西也立马就停了，轮不到小数部分
var d = '1325ww6.124353'
console.log(parseFloat(d))
</script>
</body>
</html>
浙公网安备 33010602011771号