上一节主要简单的讲解了JavaScript修改CSS样式，这一节，我们来看看Javascript自身的属性，以及运算符，控制流程，循环等。
Javascript是一门脚本语言，是语言，就一定有语言特有的属性与操作，，这一章节，我们就来学习Javascript的操作与属性。
Javascript的操作符（运算符）：
运算符是每一种语言都所具有的特性，Javascript也不例外，下面我们看Javascript的运算符。
算术运算符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-操作符</title>
</head>
<body>
<!--算术运算符-->
<!--算术运算符有 ：+ 、- 、 * 、 / 、 %、++、---->
<script type="text/javascript">
var numa = 1;
var numb = 2;
var numc = '1';
document.writeln('a'+'+'+'b'+'='+ (numa + numb));
document.writeln(numa - numb);
document.writeln(numa * numb);
document.writeln(numa / numb);
document.writeln(numa % numb);
document.writeln(numa == numc);
document.writeln(numa === numc)
</script>
</body>
</html>
对于算术运算符要注意的是，字符串和数字之间的相加减，以及布尔类型和字符，数字之间的相加减
赋值运算符：
<script type="text/javascript">
// 赋值运算符
// 赋值运算符有： = 、+=、-=、 *=、/=、
var num = 10;
document.writeln("=" ,num);
num += 5;
document.writeln("+=" ,num);
num -= 4;
document.writeln("-=" ,num);
num /= 3
document.writeln("/=" ,num);
num *= 2
document.writeln("*=" ,num)
</script>
比较运算符：
<script type="text/javascript">
// 比较运算符
// 比较运算符有: >、>=、<、<=、==、===（全等）
var a = 10;
var b = 15;
var c = "10"
document.writeln(a>b);
document.writeln(a>=b);
document.writeln(a<b);
document.writeln(a<=b);
document.writeln(a==c);
document.writeln(a===c);
</script>
逻辑运算符：
<script type="text/javascript">
// 逻辑运算符
// 逻辑运算符有：&&（与）、||（或）、! （非）
var a = 10>4 && 3>4;
document.writeln(a);
var b = 10>4 || 3>4;
document.writeln(b);
var c = !0;
document.writeln(c)
</script>
以下在进行判断的时候为假
1、0
2、null
3、undefined
4、NaN
5、‘’空字符串
6、false
需要注意:逻辑运算符两边的数值
1、均为布尔值
2、其他数据类型
流程控制：
流程图：
显示了控制语句的作用。
控制流程：if... else...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-控制流程</title>
</head>
<body>
<script>
var name = "白菜";
if(name=="apple"){
document.writeln(name +"是水果");
}else{
document.writeln(name+"不是水果");
}
//简化代码
if(name)document.writeln("有内容")
// 优化写法，值适合与if...else
name ? document.writeln(name+"是水果"):document.writeln(name+"不是水果")
</script>
</body>
</html>
控制流程：if...else if...else if...else
<script>
var name ="apple"
if(name==="banana"){
document.writeln("这是banana")
}else if(name==="dog"){
document.writeln("这是只小狗")
}else if(name==="apple"){
document.writeln("这是苹果")
}else{
document.writeln("这什么都不是")
}
</script>
循环
1、for(){},
2、while(){},
3、do{}while()
<script>
// for循环
for(i=1;i<=10;i++){
document.writeln(i);
}
// 遍历列表一（推荐使用）
arr = [1,2,3,4,"apple","pear"];
for(var j=0;j<arr.length;j++){
document.writeln(arr[j]);
}
// 遍历列表二 速度比一慢
arr.forEach(function (value,i) {
document.writeln(arr[i])
})
</script>
<script>
//while循环
var i=0;
while(i<10){
document.writeln(i);
i++;
}
</script>
<script>
var i=0;
do{
document.writeln(i);
i++;
}while(i<10)
</script>
while与do...while的区别：前者先做判断，后做循环，后者先做循环后做判断，也就是说，前者如果不满足条件，不会执行循环。后者不论是否满足条件，都会执行一次循环，在做判断。
字符串方法：
| 参数 | 描述 |
|---|---|
| length() | 长度 |
| []/charAt() | 下标 |
| replace() | 替换 |
| split() | |
| toUpperCase() | 大写 |
| toLowerCase() | 小写 |
| indexOf() | 下标 |
| Substring() | 截取 |
| Slice() | 切割 |
var str1 = "hello world python";
document.writeln('长度：'+str1.length+'<br>');// 长度
document.writeln('下标：'+str1[2]+'<br>');// 下标
document.writeln('下标：'+str1.charAt(4)+'<br>');// 下标
document.writeln('指定Unicode编码：'+str1.charCodeAt(2)+'<br>');//charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
document.writeln('替换：'+str1.replace('python','love')+'<br>');// 替换
document.writeln('分割：'+str1.split('o')+'<br>');// 分割
document.writeln('转大写：'+str1.toUpperCase()+'<br>');//转换大小写
document.writeln('转小写：'+str1.toLowerCase()+'<br>');//转换大小写
document.writeln('查下标：'+str1.indexOf('o')+'<br>');//下标索引，如果要查询第二个字母，indexOf('o',5)
//substring会比较参数大小，slice不会比较参数大小
document.writeln('截取：'+str1.substring(1,4)+'<br>');//截取，和python的切片类似
document.writeln('切割：'+str1.slice(3,7)+'<br>');//切割
</script>
数组方法：
数组常用方法：
| 长度 | 下标 | 追加 | 添加 | 前删 | 后删 | 索引 | 切片 | 替换 | 拼接 | 排序 | 反向 | 连接 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| length() | [] | push() | ubshift() | pop() | shift() | indexOf() | slice() | splice() | join() | sort() | reverse() | concat() |
数组的增删改查：
<script>
var arr = [1,2,3,4,"apple","smith"];
document.writeln('原列表：'+arr+'<br>');
document.writeln('长度：'+arr.length+'<br>');// 长度
arr.push("python","java")
document.writeln('后增加：'+arr+'<br>');//后增加
arr.unshift("javascript")
document.writeln('前增加：'+arr+'<br>');//前增加
arr.pop()
document.writeln('后删除：'+arr+'<br>');//后删除
arr.shift()
document.writeln('前删除：'+arr+'<br>');//前删除
arr[0]="改变的值";
document.writeln('改变值：'+arr+'<br>');//改
document.writeln('查询值：'+'arr[3]：',arr[3]+'<br>');//查元素的值
document.writeln('查询下标：'+'indexOf：',arr.indexOf("apple")+'<br>');//查询值得下标
</script>
<script>
var arr = [1,2,3,4,"apple","smith"];
document.writeln('原列表：'+arr+'<br>');
arr1 = arr.slice(1,4);
document.writeln("数组切片："+arr1+"<br>");//切片
arr.splice(4,1,"苹果","香蕉");//移除数组的第五个元素，并在数组第三个位置添加新元素:
document.writeln("数组替换："+arr+"<br>");//替换
arr3 = arr.join(" ");
document.writeln("数组拼接："+arr3+"<br>");//拼接
arr4 = arr.sort();
document.writeln("数组排序："+arr4+"<br>");//排序
arr5 = arr.reverse();
document.writeln("数组反序："+arr5+"<br>");//反序
var arrb = [5,6,7,8,9,"手机","电脑"];
arr_aaa = arr.concat(arrb);
document.writeln("数组连接："+arr_aaa+"<br>");//连接
</script>
数组补充方法：
| 参数 | 描述 |
|---|---|
| toString() | 字符串 |
| toFixed() | 小数字符串 |
| isNaN() | 判断是否数字，not a number 缩写 |
| isArray() | 判断数组 |
| parseInt() | 整数 |
| parseFlost() | 浮点数 |
| Number() | 数字 |
<script>
var num = 100.12;
document.writeln("字符串："+num.toString()+"<br>");//字符串
document.writeln("小数字符串："+num.toFixed()+"<br>");//小数字符串
var num1 = 123.4567 ;
var num2 = "1000哈哈哈"
document.writeln("整数："+parseInt(num1)+"<br>")//整数
document.writeln("小数："+parseFloat(num1)+"<br>")//小数
document.writeln("数字："+Number(num1)+"<br>");//数字
document.writeln("数字："+Number(num2)+"<br>");//数字
document.writeln("判断数字1："+isNaN(Number(num))+"<br>");//判断数字
document.writeln("判断数字2："+isNaN(Number(num2))+"<br>");//判断数字
var a =[1,2,3,4];
document.writeln("查看a的类型"+typeof a+"<br>");//查看a的类型
document.writeln("判断数组："+Array.isArray(a)+"<br>");//判断数组
document.writeln("判断数组："+Array.isArray(num)+"<br>");
document.writeln("判断数组："+Array.isArray([2,3])+"<br>");
</script>
网友评论