美文网首页
javaScript基础

javaScript基础

作者: Wo信你个鬼 | 来源:发表于2018-12-27 16:27 被阅读0次

javaScript介绍

  • javaScript是1995年产生的,也是脚本语言
    *JavaScript是弱类型脚本语言
  • 同一个变量可以改变不同的数据类型,比如变量y一开始为数值类型,可以更改为字符串类型
  • 相反强类型语言的变量是不可以变的,比如:java,c后台语言
  • y = 3 + 2 = 5;
  • 在数学中y代表的是未知数
  • JavaScript中这个y就是代表一个变量,等号叫赋值运算符。
  • y=5;
  • y=“文字”;
  • 像上面的“文字”用双引号括起来的东西叫做字符串。
    *javaScript是由三个部分构成
  • ECMAScript:描述了JavaScript的核心语法。
  • DOM(document object model)即文档对象模型,用来操作html文档。
  • BOM(browser object model)即浏览器对象模型,用来操作浏览器。
  • 怎么将JavaScript应用到网页中
  • 1、通过script标签插入到网页中,在script标签中写入JavaScript代码
  • 可以插入head标签中或者body结束标签前面,建议把script标签插入到>body标签前面。
  • 2、把JavaScript代码直接插入到标签中。
  • 3、通过script标签的src属性引入外部js脚本
    *javascript的核心语法
  • 1,、变量的声明
  • 通过关键字var来声明变量,语法
  • var 变量名 = 值;
  • 在javascript中分号代表着一句话的结束,是可选的,建议写上去。
  • 变量的命名规则
  • 1、第一个字符必须是字母、下划线(_)或者美元($);
  • 2、变量名中间不能使用空格或者其他特殊符号(下划线和美元符除.外);
  • 3、变量名区分大小写。
  • 4、不能使用关键字或者保留字。
    怎么在网页中查看声明变量的值? /
    *1、alert();弹窗
  • 2、document.write();写入网页中
  • 3、console.log();将内容打印在浏览器控制台上
<style type="text/css">
            .test{
                width: 200px;
                height: 200px;
                background: skyblue;
                display: none;
            }

        </style>

<p id="menu">菜单</p>
        <div class="test" id="content">内容</div>
        <p onclick="alert('大家好,我今年岁了!')">点击我弹出一个提示语</p>
        <script src="js/index.js">
        </script>
        <script type="text/javascript">
            //找到菜单,鼠标放到菜单上找到类名叫test的div给这个div添加一个style属性然后把display值变为block
            //document get Element By Id
            //onmouseover鼠标经过的事件
            document.getElementById("menu").onmouseover = function(){
                document.getElementById("content").style.display = "block";

            }
                console.log(num);
            document.write(num);
            console.log(str);
            document.write(str);
//            var -str = "123";
//            console.log(-str);  Uncaught SyntaxError:语法错误的提示
            var _str = "111"
            console.log(_str);
            var age = "18";
            var Age = "19";
            console.log(age,Age);


            var age = "18",
                sex ="nan",
                userName="chaoren";
            console.log(age,sex,userName);
            </script>

JavaScript的数据类型

*JavaScript的数据类型(2种)

  • 原始类型和引用类型他们的储存方式不一样,原始类型的是储存在栈里面的,
  • 引用类型是储存在堆里面的。
  • 1、简单数据类型(原始类型)
  • a、字符串(string)
  • 用引号括起来的就是字符串,包括单双引号。
  • 注意:双引号不能嵌套双引号,单引号也不可以嵌套单引号,但是可以交叉嵌套。
  • b、数值类型(Number)
  • var num = 123;
  • var num = 12.34;
  • 也可以用其他进制表示,比如16进制等
  • 有三个特殊值
  • +Infinity,正无穷大
  • -Infinity,负无穷大
  • NaN:表示不是一个数值,但是他的类型是数值类型。
  • isNaN()方法用于检查其参数的数值类型是否为非数值类型。
  • c、布尔值(boolean)
  • 只有两个值:true(真),false(假)
  • d、undefiend,表示变量未赋值的默认值,也可以代表空。
  • D、null,空,表示对空对象的引用。
  • 通常可以用null来清空数据。
  • 2、复杂数据类型(引用类型)
  • a、对象(object),是属性和方法的集合。
  • 判断数据类型,可以通过typeof()方法来得到。
<style type="text/css">
            .test{
                width: 200px;
                height: 200px;
                background: skyblue;
            }
        </style>
<div class="web">
            <div class="test" id="test">点击我改变颜色</div>
        </div>

        <script type="text/javascript">
            var onColor = true;
            //一个等号是赋值,两个等号是判断。
            document.getElementById("test").onclick = function(){
                if(onColor == true){
                    document.getElementById("test").style.background = "pink";
//                    onColor = false;
                }else{
                    document.getElementById("test").style.background = "skyblue";
//                    onColor = true;
                }
                //!表示取反,即是真取反后为假
                onColor = !onColor;
            }

            var str = "";
            var str1 = ' ';
            console.log(str1,typeof(str1));
            console.log(str,typeof(str));  //string

            var str2 = "welcome to 'guangzhou'";
            var str3 = 'welcome to "guangzhou"';
            console.log(str2);
            console.log(str3);


            var num =123;
            console.log(num,typeof(num));//number
            var num1 = "123";
            console.log(num1,typeof(num1));//string

            var num2 = 789;
            //+ 代表加法运算
            console.log(num+num2);//912
            //字符串拼接,加号(+)就是字符串拼接符
            console.log(num+num1);//123123

            var person = "英雄";

            console.log(num1+person+num+num2);//直接字符串拼接
            console.log(num+num2+num1+person);//先数值相加再拼接字符串

            document.write("我是一个"+person+"!");

            var good = "好";
            var friend = "女朋友";
            var go = "嘿嘿嘿";
            //document.write是识别标签
            document.write("今天天气真好,我要跟女朋友去约会!")

            document.write("今天天气真"+good+",<br />我要跟"+friend+"去"+go+"!")

            var bool = true;
            console.log(typeof(bool));//boolean
            var bool1 = "true";
            console.log(typeof(bool1));//引号引起了的都是字符串 string

            var age = undefined;
            console.log(typeof(age));
            var userName;
            console.log(userName);

            var sex = null;
            console.log(typeof(sex));//object
            console.log(sex);
            //两个等于号表示判断等于,只判断值
            console.log(undefined == null);//true
            //三个等于号表示判断全等于,即判断数值判断类型
            console.log(undefined === null);//false

            console.log(123 === "123");//false,数据类型不一样。
            console.log(123 == "123");//true

            /*
             *十六进制由0·9和A~F表示,A~F就是代表数值10~15
             * 通常开头为0x代表的是十六进制。
             * 
             * */
            var num = 0x123;
            //十六进制转化为10进制:1*16^2+2*16^1+3*16^0=291
            console.log(typeof(num),num);//number 291
            var num1 = 0x678f;
            //转换为10进制:6*16^3+7*16^2+8*16^1+15*16^0

            //8进制,逢8进一,通常以0开头。
            //十进制的8用八进制来代表

            var num2 = 010;
            console.log(num2);//8

            var num6 = "文字";
            //isNaN() 函数用于检查其参数是否是非数字值。
            //数字的字符串类型的变量用于判断的时候会隐式转换为数值类型。
            console.log(isNaN(num6));//true

            var num3 = +Infinity;//正无穷大
            var num4 = -Infinity;//负无穷大
            console.log(num3,num4);

            var unm5 = NaN;
            console.log(typeof(unm5));//number


            var obj = {
                name:"html",
                age:"18"
            }
            console.log(typeof(obj));//object

            var obj1 = obj;
            console.log(obj,obj1);

            var num = 123;
            var num1 = num;
            console.log(num,num1);
            num1 = 789;
            console.log(num);//123

            obj1.age = "28";
            console.log(obj);
        </script>

*数据类型:

* 简单数据类型

  • 1、字符串(string)
  • 2、数值(number)
  • 3、布尔值(Boolean)
  • 4、undefined
  • 在定义变量后未赋值的时候,JavaScript会自动给变量赋值为undefined
  • 5.null
  • JavaScript有垃圾自动回收机制,在变量不需要使用的时候,系统会自动把此变量赋值为null(即清空改变量)

* 复杂数据类型

  • 1、对象(object)属性和方法的集合。
  • 语法:键值对写法,即:"键名":"键值"。
  • 我们可以通过.(点来操作符)来访问对象上的属性或者方法
  • 怎么来调用对象里面的方法
  • 通过对象的方法名后面加个小括号来执行这个方法。
  • return用来定义函数的返回值。
  • 2、数组(array),也是数据的集合
  • 数组的下标是从0开始也就是序列号,数组长度(length)的计算是从1开始计算的。
  • 怎么获取数组里面的数据?
    //获取数组长度
    console.log(arr.length);
    var str = "123";
    //字符串也能获取其字符长度
    console.log(str.length,str[1]);
  • 可以通过数组名加中括号,括号里面填下标值。
  • 3、function(函数),具有一定功能的代码块。
  • 语法:通过关键字function来定义,如下:
  • 函数名和参数是可选的。
 function 函数名(参数)
                   {
              书写功能代码区域
                   }
  • return用来定义函数的返回值,以及结束函数的执行。
    //定义了一个函数,就相当于生产了一台机器。
    function myFun(){
    // alter弹窗会阻止js代码的运行
    alert("hello world!");
    return "你好";
    }
    //执行函数,相当于按下机器的运作开关。
    console.log(myFun());
    /*
  • 匿名函数
  • 不能直接定义匿名函数,需要有事件触发的时候才可以,或者是赋值给一个变量。
  • 匿名函数只能在函数定义的后面进行调用。
  • 具名函数无论在哪里都可以调用。
    // fun();调用会报错
    var fun = function(){
    console.log("我是一个匿名函数");
    }
    fun();
  • 函数的参数
  • 可以又多个,参数之间用逗号隔开
  • 定义函数时写的参数我们称为形参
  • 当我们要调用的函数时传入的参数称为实参
function testFun(username,age,sex){//形参
            return "你好,我是"+username+",今年"+age+"岁,性别"+sex+"";
        }
         console.log(testFun("小白",10,"男"));//实参
         var uName = "刘";
     document.write(testFun(uName,10,"男"));
    var obj ={
                "name" :"小芳",//前面的是键名//键值
                "age":"18",
                "skill":function(){//方法
                    console.log("做菜");
//                    return "我是一个方法"
                    return "obj" //return返回
                }
            }
            console.log(obj.age,obj.name);
            console.log(obj.skill);//访问skill方法
            console.log(obj.skill());//执行skill方法

数据类型的转换

1、toString(),将其他类型(包括字符串,布尔值,数值)的数据转换为字符串
当转换数值时tostring方法可以传入一个参数,这个参数代表你想转换的进制数。
2、toFiexd(),将数值类型的数据转换为字符串
接收一个参数,当不填写的时候默认为零;参数代表数值所要保留的小数点位数,遵循我们的四舍五入。
3、parseInt(),字符串类型转换为数值类型的整数
从左到右检测字符串的字符,如果第一个字符为非数字的类型,则终止检测,返回NaN
如果是数字则继续检测继续往下面检测直到遇到非数字为止然后返回前面检测到的数字。
如果需要将为其他进制的数字转换为十进制,需要通过第二个参数来声明其进制数。
比如:var x = "a";=>console.log(parseInt(x,16));//10
4、parsefloat(),将其他类型的数距转换为浮点数值类型
当小数点后面的值为0时,会忽略掉为0
用法和parseInt相同,但是parsefloat是没有第二个参数

var num =123;
            var str = num.toString();
            console.log(str,typeof(str));//123 string
            var bool = true;
            console.log(typeof (bool.toString()));//string
//            var und = undefined;
//            console.log(typeof(und.toString()));//报错,undefined是没有tostring方法的
            //null没有tostring方法
//            var n = null;
//            console.log(typeof(n.toString())); 报错,

            var num1 = 10;
            var num2 = num1.toString(2);
            console.log(num2);
            var num3 = 10.5;
            console.log(num3.toString());
            var num4 = 2e2;//相当于2*10^2 e代表的是10
            console.log(num4,num4.toString());//200,"200"字符串的两百,最后一个。


            var str = 123.45;
            var num = str.toFixed();
            console.log(num,typeof(num));//string
            var num = 12.56;
            console.log(num.toFixed(1));//12.6

            var str = "123";
            console.log(typeof parseInt(str));


            var str1 ="123.45";
            console.log(parseInt(str1),typeof(parseInt(str1)));
            var str = "string";
            console.log(parseInt(str));//NaN

            var str = "true";
            console.log(parseInt(str));//NaN

            var bool = "true";
            console.log(parseInt(bool));//NaN
            var str = "";
            console.log(parseInt(str));//NaN

            var str = "123string";
            console.log(parseInt(str));//123

            var str = "a12b";
            console.log(parseInt(str));//NaN

            var num = "a";
            console.log(parseInt(num,16));//10

            var num = "012";
            console.log(parseInt(num,8));//10
            console.log(parseInt(num));//12

            var num = "12.0";
            console.log(parseFloat(num));//12
            var num = "12.1";
            console.log(parseFloat(num));//12.1
            var num = "12.3.5";
            console.log(parseFloat(num));//12.3

强制类型转换

1、Boolean(),强制转换为布尔值
非空字符串转换为布尔值都为true,空字符串为false,
非零的数值转换为布尔值都为true,零就转换为false
undefiend/null都转换为false

var str = "string";
        console.log(Boolean(str));//true
        var str = "123";
        console.log(Boolean(str));//true
        var str = " ";
        console.log(Boolean(str));//true
        var str = "";
        console.log(Boolean(str));//false

        var num = 23;
        console.log(Boolean(num));//true
        var num = 0;
        console.log(Boolean(num));//false
        var num = -12;
        console.log(Boolean(num));//true
        console.log(Boolean(undefined));//false
        console.log(Boolean(null));//false

2、Number(),强制转换为数字类型

布尔值true       //转换为1
 false,null,""  // 转换为0
 undefined         //转换为NaN
         ```
         console.log(Number(str));//NaN
        var str = "12.35";
        console.log(Number(str));//12.35
        var str = "12.3.5";
        console.log(Number(str));//NaN
        console.log(Number(true));//1
        console.log(Number(false));//0
        console.log(Number(undefined));//NaN
        console.log(Number(null));//0
        var str = "";
        console.log(Number(str));//0 

3、String(),强制转换为字符串

     ```
    console.log(typeof(String(undefined)));//string
    console.log(String(undefined));//"undefined"
    console.log(String(null));//"null"

    var str = "123";
    var num = 123;
    var total = num + parseInt(str);
    console.log(total);
    ```

1、算术运算符

*+ 、 - 、 * 、 / 、% 、 ++ 、--

+加号运算符:

1、如果加号左右两边都为数值类型,则进行加法运算
2、如果加号左右两边其中一个为字符串类型数据,则进行字符串拼接。
3、如果在字符串前面添加一个加号,会隐式的将字符串转换为数值类型。

        var num1 = 23;
        var num2 = 27;
        console.log(num1 + num2);//50
        var num3 = "10";
        console.log(+num3 + num2);//37
        var num4 = "20";
        console.log(+num3 + (+num4));//30

        var num1 = 0.1;
        var num2 = 0.2;
        console.log(num1 + num2);//0.30000000000000004
        console.log((num1 + num2).toFixed(1));//0.3

减法运算符(-)

1、可以进行减法运算
2、在字符串前面加个(-),可以将该字符串转换为数值类型,注意转换后的值为原来值的相反数。
即:-"12"转换为-12

        var num1 = 12;
        var num2 = 10;
        console.log(num1 - num2);//2
        var num3 = "23";
        console.log(num3 -num1);//11
        var num4 = "25";
        console.log(num4 - num3);//2
        console.log(typeof(-num4),-num4);//number -25
        console.log(-num4 + num2);//-15
        console.log(num1 - true);//11
        console.log(num2 - null);//10
        console.log(num1 -" ");//12

乘法运算符(*)

        var num1 = 2;
        var num2 = 3;
        console.log(num1 * num2);//6
        var num3 = "10";
        console.log(num3 * num1);//20
        var num4 = "8";
        console.log(num3 * num4);//80

除法运算(/)

JavaScript中分母可以为0,且分母为0时得到的结果是无穷大(Infinity)

        var num = 10;
        var num1 = 5;
        console.log(num / num1);//2
        var num2 = 0;
        console.log(num2 /num1);//0
        console.log(num1 / num2);//Infinity是无穷大
        var num3 = "2";
        console.log(num / num3);//5

求余(%)

        var num1 = 10;
        var num2 = 2;
        console.log(num1%num2);//0
        var num3 = 3;
        console.log(num1%num3)//1
        var num4 = 0;
        console.log(num1%num4);//NaN

前增量/后增量(++i/i++);

自增1
后增量的优先级是比较低的,基本上和其他的运算一起运算的时候,后增量是最后进行计算的。
前增量和后增量是相反的,他的优先级比较高的,和其他运算符一起运算的时候,前增量基本是最先计算的。

var i = 10;
// i++; console.log(i++);//10 // console.log(++i);//11 console.log(i);//11 var a = i++; console.log(a);//11

前减量/后减量(--i / i--)
自减1

        var i = 10;
        i--; //i = i-1 = 10-1=9
        console.log(--i);//8
        console.log(i);//8

比较运算符

、<、>=、<=、!=(不等于)、!==(完全不等于)、==(等于)、===(完全等于)
两个等号表示判断两个值是否相等,只比较数值大小
三个等号表示判断两个值是否完全相等,既要比较大小,也要比较类型。
浮点数进行计算时,存在不准确性。

var num1 = 0.1;
var num2 = 0.2;
var num3 = 0.3;
console.log(num3 == num1+num2);//false

完全不等于。不仅要比较转换后的值,还要比较转换前的数据类型。

console.log(2 !== "2")//true

!=表示不等于,值比较数值

console.log(2 != "2")//false

        var obj = {
                "name":"123"
            }
            var obj2 = {
                "name":"123"
            }
            var obj3 = obj2;

            console.log(obj == obj2);//false
            //当两个操作数都指向同一个命名空间的时候,返回一个true
            console.log(obj2 == obj3);//true
            //只要操作的数值有一个为NaN,则返回false
            console.log(NaN == NaN);//false
            console.log(0 == -0);//true

如果比较的数据都为字符串的话,会进行字符串比较。
字符串比较是根据Unicode来比较的,从左到右一个字符对应一个字符来进行比较,如果第一个字符已经比较出结果,就只能返回结果,不需要再往下比较,以此类推。

console.log("23" > "5");//false

大写字母小于小写字母

console.log("A" > "a");//false

赋值运算符

= += -= *= /= %=

var num = 10;
num += 1;//=>num=num+1
console.log(num);//11

num += 10;//=>num = num +10;
console.log(num);//21

var num1 = 20;
var num2 = 30;
num1 += num2; //=>num1=num1+num2
console.log(num1);//50
num -=5;//=>num=num - 5;
console.log(num)//16
var num3 = 20;
num3 *= 2;//=>num3=num3 * 2;
console.log(num3);//40
 num3=num3 / 2;
num3 /= 2; 
console.log(num3)//20
var num4 = 5;
num4 %= 2;//=>num4=mun4 % 2;
console.log(num4);//1

转义字符

"" =>双引号
'' =>单引号
\n =>换行符
\b =>退格符
\ =>反斜杠

document.write("今天天气很\"好\"");

逻辑操作符

&&(与)、||(或)、!(非)
逻辑与(&&)
只有两个条件同时满足的时候才会返回true,两个条件都是假的返回的结果是false
即:一假即假
当逻辑语操作不是布尔值的时候,返回值就不一定是布尔值,
可分为以下几种情况
1、当第一个操作数据是对象时,返回第二个操作数据的值。
2、当第二个操作数据为对象时,如果第一个操作数据的值为true,则返回对象的值,如果为false,则返回false。
3、当两个操作数据都是为对象时,会返回第二个操作数据的值。
4、如果操作数据有一个为空(null),则最终结果为null。
5、如果操作数据有一个为(NaN),则最终结果为NaN。
6、如果操作数据有一个为(undefined),则最终结果为undefined。

var bool = true;
var bool1 = false;
console.log(bool && bool1);//false
if(bool && bool1){
    console.log("我要去打水");
    }

逻辑或(||)
只要当两个条件有一个满足,就会返回true,两个条件都是假的返回的结果是false
即一真即真
当逻辑或操作不是布尔值的时候,返回值就不一定是布尔值,
可分为以下几种情况
1、当第一个操作数据是对象时,返回第一个操作数据的值。
2、当第二个操作数为对象时,则第一个操作数为true,返回true;为假的时候返回第二个操作数。
3、、当两个操作数据都是为对象时,会返回第一个操作数据的值。
逻辑非(!)
就是取反,即true取反false或false取反true,就是真变假,假变真
!bool
可以通过!!把其他类型的值转换为布尔值。
比如:

var str = "null";

console.log(!!str);//true

            var bool2 = false;
            console.log( bool1 || bool2);//false
            console.log(bool || bool1);//true
            console.log(!bool);//false
            console.log(bool1 && bool2);//false

            var obj = new Object();
            var str = "123";
            console.log(obj && bool2);//false
            console.log(obj && str);//123
            console.log(bool1 && obj);//false
            console.log(bool && obj);//{}
            var str = bool && obj;
            var obj1 = {
                "name":"test"
            }
            console.log(obj && obj1);
            var str = null;
            console.log(str && bool);//null
            var str1 = NaN;
            console.log(str1 && bool1);//NaN
            var str2 = undefined;
            console.log(str2 && bool);//undefined
            console.log(str1 && str2);//NaN
            console.log(obj || bool);//{}
            var str = "null";
            console.log(Boolean(str));//true
            console.log(!str);//false
            console.log(!!str);//true

条件语句

1、if(条件判断语句){
语句一
}
如果条件语句成立,则执行语句一。
2、if(条件语句){
语句一
}else{
语句二
}
如果条件语句成立,则执行语句一,否则执行语句二。
3、if(条件语句){
语句一
}else if(条件语句二){
语句二
}else{
语句三
}
如果条件语句一成立则执行语句一,然后结束判断,如果不成立继续判断条件语句二,如果成立,则执行语句二,否则执行语句三。

4、switch语法

语法:

switch(参数){
case 匹配参数一:
执行语句一
break;
case 匹配参数二:
执行语句二
break;
case 匹配参数三:
执行语句三
break;
default:

默认执行语句

var price = 15;
if(price <= 15-3){
    console.log("我们去美餐乐吃饭吧!");
}else{
    console.log("我们去吃黄焖鸡!");
}

在JavaScript中判断语句不能连写:

例如:错误写法:

100>=grade>=90
正确写法:grade<=100 && grade>=90
var grade = 98;
if(grade>=90 && grade<=100){
    console.log("优秀");
}else if(grade>=75){
    console.log("良好!");
}else if(grade>=60){
    console.log("你的成绩及格!");
}else{
    console.log("不及格!")
}

判断闰年的条件

能被400整除
能被4整除且不能被100整除

var year = 2000;
var name = "闰年";
var name1 = "平年";
console.log(year%400 == 0  || (year%4 == 0 && year%100!=0)?name:name1);
if(year%400 == 0 || (year%4 == 0 && year%100!=0)){
     console.log(""+year+"是闰年");
}else{
    console.log(""+year+"是平年");
}
var name = "苍老师";
switch(name){
    case "苍老师":
        console.log("啊啊啊啊");
    break;
    case "波多野结衣":
        console.log("噢噢噢噢");
    break;
    case "陈老师":
        console.log("skyblue");
    break;
    default:
        onsole.log("咿呀咿呀");
    }
    if(name == "苍老师"){
        console.log("啊啊啊啊");
    }else if(name == "波多野结衣"){
        console.log("噢噢噢噢");
    }else if(name == "武藤兰"){
        console.log("skyblue");
    }else{
        console.log("咿呀咿呀")
    }

条件运算符(三元运算符)

语法:
条件语句?语句一:语句二
即:如果条件语句成立则执行语句一,否则执行语句二。

var num1 = 10; 
var num2 = 20;
var num3 =30;
console.log(num1>num2?num1:num3>num2?num3:num1);//30

var num3 = num1>num2?num1:num2;
console.log(num3);//20
var year = 2000;
var name = "闰年";
var name1 = "平年";
console.log( year%400 == 0 || (year%4==0 && year%100!=0)?name:name1);

位运算符

位运算是根据二进制来进行计算的(二进制逢二进一)。
1、左移(<<)
十进制的4用二进制来表示

console.log(parseInt(100,2));//4

000000000000000000000000000000 1 0 0

                               2^2*1    +       2^1*0    +    2^0*0
var num1 = 4;

var num2 = num1<<2;

num1:000000000000000000000000000000100

num2:000000000000000000000000000010000

console.log(num2);//16=>num1 * 2^2=16

var num1 = 3;

var num2 = num1 <<2;

console.log(num2);//12=>num1 22=12

var num1 = 4;

var num2 = num1<<1;

console.log(num2);//8=>4*2

var num1 = 3;

var num2 = num1 <<1;

console.log(num2);//6=>3*2

循环语句

1、while

语法:while(条件语句){

语句一

}

档条件成立的时候循坏语句一,直到不成立为止。

var num = 5;
var i = 6;
while(i<num){
i++;
console.log(i);
}
do{

语句一

}while(条件语句)

先执行一次语句一,然后再进行判断,条件成立才继续循环执行语句一,直到条件不成立为止。
注意:无论条件成立与否,语句一都会至少执行一次。

do{
    i++
    console.log(i)
}while (i<num);

for循环

语法:

for(语句一;语句二;语句三){
         需要循环执行的内容
  }

1、语句一:初始化条件判断的初始值
2、语句二:条件判断语句
3、语句三:初始值的自增量
循环过程,先进行条件判断,为true的时候,进入循坏体,执行我们定义的代码,然后进行自增,
自增之后又进入条件判断语句,为true的时候,进入循坏体,然后执行我们定义的代码,然后进入自增,
自增之后再次进入判断语句如此往返循坏,直到条件判断为false的时候,跳出循坏。

for(var i = 0; i < 5; i++) {
                console.log("test");
            }

            var i = 0;
            for(; i < 5;) {
                i++;
                console.log("test");
            }

            for(var i = 1; i <= 5; i++) {
                console.log(i);
            }

            for(var j = 1; j <= 10; j++) {
                if(j % 2 == 0) {
                    console.log(j);
                }
            }
            /*
             *j++>=j=j+1
             * j+=>=j=j+2
             * 
             * */
            for(var j = 2; j <= 10; j += 2) {
                console.log(j);
            }

            for(var i = 1; i <= 10; i += 2) {
                console.log(i);
            }

            //计算5的阶乘:5!=5*4*3*2*1
            var num = 1;
            for(var i = 1; i <= 5; i++) {
                num *= i;
            }
            console.log(num);

            var result = 1;
            for(var i = 1; i <= 5; i++) {
                document.write("result" + "=" + result + "*" + i);
                result = result * i;
                document.write("<br />")
            }
            console.log(result);

            var num = 0;
            for(var i = 1; i <= 10; i++) {
                num += i;
            }

            console.log(num);

break,是用于switch语句和循坏里面的,用于终止语句。
continue用于循环语句,用来跳过循环中的某一次次循环(一个迭代)。

var name = "123";
            switch(name){
                case "123":
                    console.log("123");
                break;
                case "678":
                   console.log("678");
                  break;
                default:
                    console.log("456");
            }

            for(var i=0;i<5;i++){
                if(i==2){
                    break;
                }
                console.log(i);
            }

            for (var i=0;i<5;i++) {
                if(i==2){
                    continue;
                }
                console.log(i);
            }

多层循环

    for(var i = 0; i < 3; i++) {
                console.log("我在外面");
                for(var j = 0; j < 5; j++) {
                    console.log("我在里面");
                }
            }

            for(var i = 0; i < 4; i++) {
                for(var j = 0; j < 6; j++) {
                    document.write("*");
                }
                document.write("<br />");
            }
            //方法一
            for(var i = 0; i < 5; i++) {
                for(var j = 0; j <= 5; j++) {
                    if(j <= i) {
                        document.write("*");
                    }
                }
                document.write("<br/>");
            }
            //方法二
            for(var i = 0; i < 5; i++) {
                for(var j = 0; j <= i; j++) {
                    document.write("*");
                }
                document.write("<br />");
            }

            for(var i = 1; i < 6; i++) {
                for(var j = 1; j < 6; j++) {
                    if(j > (5 - i)) {
                        document.write("*");
                    } else {
                        document.write("<i style='color: transparent;'>*</i>");
                    }
                }
                document.write("<br />");
            }
            //              6    6    6    6
            //            i 1 2    3    4    5
            //            j 5 4.6  3.7  2.8   9
            //                  4    4    4
            //            j=6-i||j=4+i
            for(var i = 1; i <= 5; i++) {
                document.write(i);
                for(var j = 1; j <= 9; j++) {
                    if(j == (6 - i) || j == (4 + i) || i == 5) {
                        document.write("*");
                    } else {
                        document.write("<i style='color: transparent;'>*</i>");
                    }
                }
                document.write("<br />");
            }
            //            
            //            1000   1010  1020.1  1030.301
            //            10       10.1  10.201  10.30301
            /*
             *本息和=本金+本金*利息
             * 
             * */
            var result = 1000;
            for(var i = 0; i < 30; i++) {
                result = result + result * 0.01
            }
            console.log(result);

            var mony = 1000;
            for(var i = 1; i <= 30; i++) {
                mony += (mony * 0.01)
            }
            console.log(mony);

            var rmb = 1010;
            for(var i = 1; i <= 22; i++) {
                rmb += (rmb * 0.01);
            }

            console.log(rmb);

            for (var i=1;i<=9;i++) {
                for (var j=1;j<=9;j++) {
                    if(j<=i){
                        document.write(i+"*"+j+"="+i*j );
                    }
                }
                document.write("<br />");
            }
            for (var i=1;i<=9;i++){
                for (var j=1;j<=9;j++) {
                    if(j>(9-i)){
                        document.write(i+"*"+j+"="+i*j);
                    }else{
                        document.write("<i style='color: transparent;'>*</i>")
                    }
                }
                document.write("<br />");
            }

            var sum = 0;
             var x = 2;
             var y = 1;
             for(var i= 0;i<20;i++){
                 var div = x/y;
                 var t = x;
                 x = x+y;
                 y = t;
                 sum+=div;
             }
                 console.log(sum);

for...in循环

            var arr=[1,2,3,4,5];
            for(item in arr){
                console.log(item,arr[item]);
            }
            for (var i=0;i<arr.length;i++) {
                console.log(i,arr[i]);
            }
            var person={
                name:"吴亦凡",
                age:"13",
                sex:"女",
                skill:function(){
                    console.log("加拿大炮王");
                }
            }
            for(item in person){
                console.log(item,person[item]);
            }
 //for-in循环的有趣用法,可以通过for-in循环把对象的键名保存到数组里面
            var arr1=[];
            var j=0;
            for(arr1[j++] in person){

            }
            console.log(arr1);

            //怎么清空数组
            //方法一
            arr1=[];
            console.log(arr1);
            //方法二
            arr1.length=0;
            console.log(arr1);

            var str = "678";
            for(item in str){
                console.log(item,str[item]);
            }
try{

书写需要检测的代码
}catch(e){

e代表当try语句中代码发生错误的时候,传递过来的参数。

书写返回的错误 }

try{
            var str="789";
                console.log(str);
            }catch(e){
                    console.log(e.message);
                    //自定义代码错误提示
                    var err=e.message;
                    var txt = "你的代码发生错误:";
                    alert(txt+err);

            }

            function test(){
                var num=prompt("请输入一个大于3的数");
                try{
                console.log(num,typeof num);
//                空字符串用于判断的时候会自动转换为数值0(另一个值为数值的情况下);所以需要把if(num=="")这个判断放在最前面
                    if(num=="") throw "你没有输入任何东西";
                    if(num==null) throw "你取消了";
                    if(num<=3) throw "你输入的数值太小";
                    if(isNaN(num)) throw "你输入的不是数值";
                }catch(e){
                console.log(e);
                    alert(txt+e);
                }
            }

相关文章

网友评论

      本文标题:javaScript基础

      本文链接:https://www.haomeiwen.com/subject/bwtdlqtx.html