JavaScript-2

2019-05-27  本文已影响0人  昆仑草莽

上一节主要简单的讲解了JavaScript修改CSS样式，这一节，我们来看看Javascript自身的属性，以及运算符，控制流程，循环等。
Javascript是一门脚本语言，是语言，就一定有语言特有的属性与操作，，这一章节，我们就来学习Javascript的操作与属性。

Javascript的操作符（运算符）：

运算符是每一种语言都所具有的特性，Javascript也不例外，下面我们看Javascript的运算符。

算术运算符：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-操作符</title>
</head>
<body>
<!--算术运算符-->
<!--算术运算符有 ：+  、-  、 *  、 /  、 %、++、&#45;&#45;-->

<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>
上一篇 下一篇

猜你喜欢

热点阅读