2020-08-24---JavaScript基本语法

最新推荐文章于 2023-03-21 00:02:26 发布

易de

最新推荐文章于 2023-03-21 00:02:26 发布

阅读量177

点赞数 1

分类专栏： H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/108208193

版权

H5 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

52 篇文章 0 订阅

订阅专栏

JavaScript基础语法

一、JavaScript概述

什么是JavaScript？
是一门基于对象和事件驱动的客户端脚本语言。
哪一年？哪个公司？谁？第一个名字叫什么？
1995年网景布兰登 LiveScript
ECMA提出的第一套W3C标准？
ECMA-262
js包含哪几部分？
ECMAScript
BOM
DOM

二、如何引入js

行内脚本通过事件驱动
内部脚本 < script > < /script >
外部脚本 < script src = “” > < /script >
注，如果是外部引入js，那么在script标签中不要写任何内容，因为写了也不执行。

三、如何输出（面试）

alert（）；以警告框的形式输出，缺点：会中断后面语句执行。通常在排错是使用
document.write（）；输出在网页中，缺点：会影响页面布局
console.log（）；在控制台输出，输出对象的详细信息

四、如何换行

页面中换行 ‘< br >’
非页面中换行 \n
转义字符 \ 将特殊含义的符号转成普通字符
\t 横向跳格（一次跳8个空格）

<script>
        // 在页面中换行<br>
        document.write('hello<br>你好');
        //下面的不会换行
        alert("hello<br>你好");
        console.log("hello<br>你好");
        // 非页面中换行 这个可以换行
        alert("hello\n你好");
        console.log("hello\n你好");
</script>

五、注释

HTML < ! – – >
css /* */
js 单行注释 //
多行注释 /* */

六、数据类型

基本数据类型
number（数字） string（字符串） Boolean（布尔） null（空） undefined （未定义）
复合数据类型
object（对象）

七、标识符命名规则

只能包含字母、数字、下划线、$
不能以数字开头
不能是关键字或保留字
语义化
驼峰命名
（1）大驼峰 HowAreYou (构造函数、类名)
（2）小驼峰 howAreYou (函数名)
how_are_you(变量名)
匈牙利命名
整数 i_num
小数 f_num
字符串s_str
字符ch
布尔值 bo
数组 arr
函数 fn
对象 o_div

八、变量或常量

什么是变量？
在内存中开辟空间，用于存储数据，而随着程序的运行，这个空间的数据会发生变化，所以称为变量。
如何声明变量？
（1）显示声明 var 变量1，变量2，变量3；
（2）隐式声明变量名 = 值；
如何给变量赋值？
（1）初始化变量：声明变量的同时给它赋值
（2）先声明，后赋值
什么是常量？
3 true false “3”

九、运算符与表达式

1. ++ - - 递增递减运算符

自增，自减运算只能针对变量，3++会报错
从左到右，如果先看到变量，则先取出变量中的值参与其它运算，变量中的值再+1或-1。如果先看到运算符，则先将变量中的值+1或-1再参与其它运算。
注意：变量在前会有两个值，变量本身的值，和变量自增或自减后的值。
例如：var a = 3;
b = i++; 那么此时从左到右，先看到变量，就用变量本身的值参与运算，得到b的值为3，然后变量中的值再自增，得到a的值为4.

<script>
        // var i = 3;
        // // i ++;
        // // ++ i;
        // //          3  4
        // // console.log(i ++,i);  //3 4
        // // console.log(++ i,i); //4 4
        // //      3  4    5     5  6
        // var j = i ++ + ++ i + i ++;
        // //       3   +  5   + 5
        // console.log(i,j);


        var i = 3;
        //       2     2  3    2     2  3
        var j = -- i + i ++ + -- i + i ++;
        //       2   +  2  + 2  + 2
        //j = 8, i = 3;
        //        4    8  9   4  5   9  10
        var k = ++ i + j ++ + i ++ + j ++;  // i = 5   j = 10  k = 25
            //   4   + 8  + 4  + 9
        console.log(i,j,k);
    </script>

2. 算数运算符

* / %（模，取余） -

规则：
（1）如果是number类型之间运算，直接运算。
（2）如果不是同类型之间的运算，则先转成数字，再运算。（转成功，直接运算，转失败，则转为NaN，运算结果也为NaN）
（3）true转为1 false转为0 null转为0 ，然后参与运算。
（4）undefined NaN 结果一定是NaN
注：0除以非0的数，结果为0；
非0的数除以0，结果infinite（无穷）；
0除以0，结果NaN。

<script>
        console.log(4 * 4); //16   
        console.log(4 * '4');  //16
        console.log(4 * '4a');   //NaN
        console.log(4 * true);   //4 
        console.log(4 * false);   //0 
        console.log(4 * null);    //0
        console.log(4 * undefined);   //NaN
</script>

		console.log(4 / 4);    //1
        console.log(4 / '4');    //1
        console.log(4 / '4a');   //NaN
        console.log(4 / true);   //4
        console.log(4 / false);   //infinite
        console.log(4 / null);   //infinite
        console.log(4 / undefined); //NaN
        console.log(0 / 4); //0
        console.log(0 / 0); //0   NaN

 		console.log(4 % 4);    //0
        console.log(4 % '4');  //0
        console.log(4 % '4a');  //NaN
        console.log(4 % true);  //0
        console.log(4 % false);  //4   NaN
        console.log(4 % null);   //4   NaN
        console.log(4 % undefined);  //NaN 
        console.log(4 % 0);  //NaN
        console.log(0 % 0);  //NaN

		console.log(4 + 4);      //8
        console.log(4 + '4');   //8  '44'
        console.log(4 + '4a');  //'44a'
        console.log(4 + 4 + '');   //'8'
        console.log(4 + true + '' + 4);  //'54' 
        console.log('' + 4 + 4 - 2);  //42

+

规则：
（1）遵循上面的规则
（2）如果+两边有字符串，就连接成新的字符串；（特别注意，是加号两边有字符串，不是一个表达式里面有加号和字符串就要做字符串的连接）。

		console.log(4 + 4);      //8
        console.log(4 + '4');   //8  '44'
        console.log(4 + '4a');  //'44a'
        console.log(4 + 4 + '');   //'8'
        console.log(4 + true + '' + 4);  //'54' 
        console.log('' + 4 + 4 - 2);  //42

3.关系运算符（结果只有两个true false）

< > <= >=

规则
（1）相同类型比较，直接比较
（2）字符串比较，从左到右依次比较
（3）true转为1，false转为0，null转为0，再比较
（4）undefined NaN ,直接false。

<script>
        console.log(4 > 3);   //T 
        console.log(4 > '3');   //T
        console.log('100' > '2');   //F
        console.log(1 >= true);   //T
        console.log(0 >= false);   //T
        console.log(0 >= null);  //T
        console.log(0 >= undefined);  //F  
        console.log(NaN >= NaN);  //F

        console.log('\n');

        console.log(3 == 3);  //T
        console.log(3 == '3');   //T
        console.log(3 === '3');   //F
        console.log(3 === 3);  //T

        console.log('\n');

        //切记  
        //(null就表示没有东西)
        console.log(null == false);  //F
        console.log(null == 0);   //F
        console.log(null == '');  //F
        console.log(null == undefined);  // T
        console.log(null === undefined);  //F
        console.log(NaN == NaN);   //F
    </script>

4. 逻辑运算符

！（结果只有两个 true false）

非真即假，非假即真
false ， 0 ，‘’ ，undefined ，null ， NaN 天然为假
！‘ ’ 结果为false

&&（结果为表达式的值，不一定为true或false）

如果&& 左边表达式的值为true时，返回右边表达式的值；
如果&&左边表达式的值为false时，发生短路，返回左边表达式的值。

||（结果为表达式的值，不一定为true或false）

如果||左边表达式的值为true时，发生短路，返回左边表达式的值；
如果||左边表达式的值为false时，返回右边表达式的值。

			var i = 3;
            console.log(4 - 3 && (i = 5));  //5
            console.log(i);  //5

            console.log(!(4 - 3) && (i = 6));  //false 
            console.log(i); //5

            console.log(0 % 3 === 0 || (i = 8)); //true

            console.log('100' < 2 || (i = 10));// 10
            console.log(i); //10

逻辑运算符案例

	// 1. 输出下列表达式的值。 
        // 1) (100>3)&&(‘a’>’c’) 
            console.log(100>3 && 'a'>'c');
                // false 
        // 2) (100>3)||(‘a’>’c’) 
            console.log(100>3 || 'a'>'c');
                //true
        // 3) !(100<3)
            console.log(!(100>3));
                //true

    // // 2. 构造一个表达式来表示下列条件： 
    //     // 1) number 等于或大于 90，但小于 100 
    //         number >= 90 && number < 100
    //     // 2) ch 不是字符 q 也不是字符 k 
    //         ch != 'q' && ch != 'k'
    //     // 3) number 界于 1 到 9 之间（包括 1 不包括 9），但是不 等于 5 
    //         number >=1 && number < 9 && number != 5
    //     // 4) number 不在 1 到 9 之间
    //         number < 1 || number > 9

    // 3. 判断这个字符是空格，是数字，是字母
        var ch = '19';
        // ch === ' '  || ch > 0 && ch < 9 || ch > 'a' && ch < 'z' || ch > 'A' && ch < 'Z'
        console.log(ch === ' '  || ch > '0' && ch < '9' || ch > 'a' && ch < 'z' || ch > 'A' && ch < 'Z');
        //true

    // // 4. 有 3 个整数 a,b,c，判断谁最大，列出所有可能
    //     a>b && a>c
    //     b>a && b>c
    //     c>a && c>b

    // 5. 判断 year 表示的某一年是否为闰年，用逻辑表达式表示。 闰年的条件是符合下面二者之一： 
    // 1) 能被 4 整除但不能被 100 整除 2) 能被 400 整除
        //year % 4 === 0 && year % 100 !== 0 || year % 100 ===0
        var year = 2018;
        console.log(year % 4 === 0 && year % 100 !== 0 || year % 100 ===0);

        // !(year % 4) && (year %100) || !(year % 400)
        var year= 2008;
        console.log(!(year % 4) && (year % 100) || !(year % 400));

5.三目（三元）运算符

一元（一目）！ ++ - - +（正） -（负）
二元（二目） + - * / % 关系运算符
三元（三目）？：
语法：
条件？语句：语句
当条件为true时，执行冒号前面的语句；
当条件为false时，执行冒号后面的语句。

<script>
        //根据成绩判断，是否及格？ 90  
            var i_score = prompt('请输入你的成绩');
            console.log(i_score >= 90 ? '及格':'不及格');

        // 2. 判断一个年份是闰年还是平年 
        // 1) 能被 4 整除但不能被 100 整除或能被 400 整除的年份是 闰年
            var year = 2015;
            console.log((year % 4 === 0 && year % 100 !== 0 || year % 100 ===0) ? '闰年' : '平年');

            var year = 2003;
            console.log((!(year % 4) && (year %100) || !(year % 400)) ? '闰年' : '平年')

            // !(i_year % 4) && i_year % 100 || !(i_year % 400) ? '闰年' : '平年'

        // 3. 判断一个数是偶数还是奇数 
            var num =10;
            // num % 2 === 0 ? "偶数":"奇数";
            console.log(num % 2 === 0 ? "偶数":"奇数");
        // 4. 判断一个数是正数还是负数
            var num = -12;
            // num > 0 ? "正数" : "负数"
            console.log(num > 0 ? "正数" : "负数");
    </script>

6. 赋值运算符

简单赋值 =

复合算数赋值

规则：先取 运算符左边变量的值 与 运算符右边的表达式的值 进行相应的算数运算，最后将结果赋给左边的变量。

<script>
        // 先取 运算符左边变量的值 与 运算符右边的表达式的值  进行相应的 算数运算，最后将结果赋给左边的变量。
        var a = 5;
        a *= a + 3; 
        //先取运算符左边变量的值 5
        //与 运算符右边表达式的值 5+3=8
        //进行相应的算数运算 5*8=40
        //最后将结果赋给左边的变量  a = 40
        //这个表达式实际上等价于  a = a * (a + 3)
        console.log(a);//40
    </script>

7.特殊运算符

new

作用：用于创建对象
语法： new 构造函数（）
var o_number = number();
var o_str = string();
var o_boo = boolean();
var o_obj = object();

typeof

作用：用于检测数据类型

<script>
        console.log(typeof 3); // number
        console.log(typeof '3');  //string
        console.log(typeof true); //boolean
        console.log(typeof null); //object
        console.log(typeof undefined); //undefined
        console.log(typeof NaN); //number
        console.log(typeof typeof 3); //string
    </script>

十、内置函数

就是已经封装好，可以直接用的函数。

1.isNaN() 判断是否为NaN

判断括号中的表达式的值是否是 NaN,如果是 NaN, 则返回 true,否则返回 false

 <script>
        // 判断括号中的表达式的值是否是 NaN,如果是 NaN, 则返回 true,否则返回 false
        console.log(isNaN(3)); //false
        console.log(isNaN('3')); //false
        console.log(isNaN('2 2')); //true
        console.log(isNaN("3.4.2")); //false  true
        console.log(isNaN('a3')); //false   true
        console.log(isNaN(NaN)); //true
        console.log(isNaN('3+undefined'));  //true
        console.log(isNaN(0 / 0)); //true
        console.log(isNaN(3 / 0)); //false
    </script>

2.eval（）解析字符串为表达式并返回表达式的结果

eval():将字符串强制转换成表达式并返回表达式的值

<script>
        var str = 'a + 8';
        console.log(str); //'a + 8'
        // console.log(eval(str));  会报错，因为把字符串强制转换成表达式时，计算机会a没有被定义，所以会报错。

        var st = 'undefined + 4';
        console.log(st);  //'undefined + 4'
        console.log(eval(st));  //NaN
    </script>

3.parseInt(“字符串”，2~36)

将字符串左边有效的数字部分，转为整数。如果第一个字符是非有效数字，则转为NaN，第二个参数用来限制第一个参数的进制范围。

（1）如果省略第二个参数或第二个参数为0，表示十进制。
（2）如果第二个参数为小于2或大于36，则结果为NaN。
（3）如果第一个参数不符合第二个参数的进制范围，则返回NaN。

<script>
        console.log(parseInt("5 5")); //5 
        console.log(parseInt("3.256"));//3
        console.log(parseInt("3a"));//3
        console.log(parseInt("a3"));//NaN
        console.log(parseInt("0x56"));//86    //0x ：表示十六进制数
        console.log(parseInt("3",2));//NaN
        console.log(parseInt("3a",1));//NaN
    </script>

4.parseFloat（“字符串”）

将字符串左边有效的数字部分，转为小数，如果第一个字符是非有效数字，则转为NaN。

<script>
        console.log(parseFloat("5 5")); //5 
        console.log(parseFloat("3.256"));//3.256
        console.log(parseFloat("3a"));//3
        console.log(parseFloat("a3"));//NaN
        console.log(parseFloat('3.405.2'))//3.405
        console.log(parseFloat('')); //NaN

    </script>

5.number（‘字符串’）

将有效数字字符串转为数字，如果其中有一个非有效数字，则转为NaN

<script>
        //  5. Number('字符串') ： 将有效数字字符串转为数字。如果其中有一个非有效数字，则转为NaN
        console.log(Number(3.5));//3.5
        console.log(Number('3.2a'));//NaN
        console.log(Number('a3'));//NaN
        console.log(Number('3 3'));//3  NaN
        console.log(Number("3.4.5"))//3.4  NaN
        console.log(Number('2.37'));
        console.log(Number(true)); //1
        console.log(Number('')); //0
    </script>

十一、代码规范

1. 运算符两边加一个空格
2. 语句结束加分号
3. 如果在{}中缩进一个tab
4. 小括号嵌套，加空格  ( ( ) )

易de

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-08-24---JavaScript基本语法

一、JavaScript概述什么是JavaScript？是一门基于对象和事件驱动的客户端脚本语言。哪一年？哪个公司？谁？第一个名字叫什么？1995年网景布兰登 LiveScriptECMA提出的第一套W3C标准？ECMA-262js包含哪几部分？ECMABOMDOM二、如何引入js行内脚本通过事件驱动内部脚本 < script > < /script >外部脚本 < script src = “” > < /scr
复制链接

扫一扫