一、JS基本概念

目录

一、概述

二、如何使用JS

三、数据类型

四、运算符

---

一、概述

JavaScript：简称JS，是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】的脚本语言。

1.编译型：在运行程序之前，需要先检查语法是否正确，如果不正确，直接不允许运行。——严格，比如：java/c++/c#...

   解释型：在运行程序之前，不需要先检查语法是否正确，直接执行，但是碰到错误就会停止后续代码 ——更加自由，比如：JavaScript、PHP、Node.js...

2.强类型：变量保存的数据，是由数据类型来决定的。如：java

   弱类型：变量保存的数据是可以随意的，数据类型是由数据来决定的。

3.面向对象 

以后可能经常看到一种写法

对象名.属性名；

对象名.方法名()；

万物皆对象

4.特点：

（1）可以使用一切 编辑器工具编写js代码，编辑器并不代表你的实力

（2）解释型

（3）弱类型

（4）面向对象编程方式

（5）可以做一切css完成不了的效果（轮播/选项卡/购物车/验证/数据渲染...）

二、如何使用JS

1.使用方式：2种

（1）直接在HTML页面中写一个script标签，里面就可以书写你的js代码

<script>js代码</script>

（2）外部js，进行引入-正式开发时使用

        a.创建一个xx.js的文件，里面书写js代码

        b.在HTML页面引入

<script src="js文件路径">

                    只要有了src属性，此处就不可以在写代码了

</script>

2.输出方式/打桩输出：帮助我们检查错误：3种

    （1）在控制台输出日志：console.log（想要输出/查看的东西）；—— 会在f12的console显示日志

    （2）在页面上输出日志:在页面上输出日志：document.write（想要输出/查看的东西）； —— document当前文档 write

    （3）在警告弹出框输入日志：alert（想要输出/查看的东西）;—— 在一个浏览器自带的弹出框中输出日志，但是弹出框会卡住页面，用户只能看到一个白板 - 垃圾

3.变量和常量

变量：

        变量当中并不是直接存入的值，而是存的内存地址

        （1）变量可以“存储”字面量

        （2）变量中国存储的字面量可以随意修改

        （3）通过变量可以对字面量进行描述，并且变量方便修改

特殊：

        （1）变量的命名规则：

                a.不能以关键字命名

                b.不能以数字开头

                c.建议下划线命名法 或 小驼峰命名法

                name,age,gender,weight,height,hobby —— 推荐

              xingming,nianling,xingbie,tizhong,shengao,aihao —— 不推荐：虽然也能简明之意，逼格低！

              更不推荐：a,b,c,d,d1,d2,d3...  此变量名无意义

      （2）如果你的变量名是name，不管你保存的数据是什么数据类型，都会悄悄的给你转变成一个字符串。

      （3）多个变量创建可以简写：

                var 变量名1=值1,变量名2=值2,....;

三、数据类型

1.数据类型：分两大类（原始值和对象共同组成）

（1）原始/基本/值类型：7个

Number、BigInt、String、Boolean、Undefined、Null、Symbol

数值（Number）：在js中所有的整数和 浮点数都是Number类型。

                                js中的数值并不是 无限大，当数值超过 一定范围会显示近似值。

                                Infinity是一个特殊的数值表示无穷

                                NaN也是一个特殊的 数值，表示非法的数值

大整数（BingInt）：大整数用来表示较大的整数 

                                大整数使用n结尾 ，他可以表示的数字范围是无限大的

字符串（String）：在js中使用‘’或者“”来表示字符串

                                转义字符、模板字符串（ES6）

布尔值（Boolean）：主要用来进行逻辑判断

                                    true和false

                                    使用typeof检查一个布尔值时会返回 boolean

空值（Null）：空值用来表示空对象

                        空值只有一个 null

                        使用typeof检查一个空值时会返回 object

                        使用typeof无法检查空值

未定义（Undefined）：当声明一个变量而没有赋值时，它的值就是Undefined

                                      Undefined类型的值只有一个就是 undefined

                                      使用typeof检查一个Undefined类型的值时，会返回  undefined

符号（Symbol）：用来创建一个唯一的标识    

                              使用typeof检查符号时会返回 "symbol"

（2）引用/对象类型：11个

String、Number、Boolean（包装类型）、Array、Function、Date、Math、RegExp、Erro、Object、Global

2.数据类型转化：不同的数据类型操作可能出来的结果不同

（1）转为字符串：●调用toString（）方法将其它类型 转换为字符串。

                                 由于null和undefined中没有toString()。 所以对这两个东西调用toString()时会报错

                               ●调用String()函数将其他类型转换为字符串。

                                 对于null，则直接转换为"null"。

                                对于undefined，直接转换为"undefined"。

（2）转为数值：●使用Number（）函数。

                              转换的情况：

                                        字符串：

                                                 如果字符串是一个合法的数字，则会自动转换为对应的数字

                                                 如果字符串不是合法数字，则转换为NaN

                                                 如果字符串是空串或纯空格的字符串，则转换为0

                                       布尔值：

                                                  true转换为1，false转换为0

                                                  null 转换为 0

                                                  undefined 转换为 NaN

                        专门用来将字符串转为数值的两个方法：

                                 parseInt() —— 将一个字符串转换为一个整数

                                 parseFloat() —— 将一个字符串转换为浮点数        

（3）转为布尔值：●使用Boolean()函数来将其他类型转换为布尔值

                                转换的情况：

                                            数字：

                                               0 和 NaN 转换为false

                                               其余是true

                                           字符串：

                                                空串转换为false

                                               其余是true

                                           null和undefined 都转换为 false

                                            对象：对象会转换为true

               所有表示空性的没有的错误的值都会转换为false：

                    0、NaN、空串、null、undefined、false

四、运算符

1.算数运算符：+  -  *  /  %

(1) %：读作取余，俗称模，两个数相除，不去商，而取除不尽的余数

        固定套路：

                ●判断奇偶性：num%2，结果为0说明是偶数，结果为1说明奇数 —— 以后可以用于判断

                ●获取一个数字的倒数n位:

                1234%10 —— 4

                1234%100 —— 34

                1234%1000 —— 234

(2) 特殊：其实算数运算符具有隐式类型转换，默认转为数字在运算

+运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接

        a = '1' + 2 // "1" + "2"
        console.log(a); //12

- * / %：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以

 如果字符串包含了非数字字符，直接转为NaN:Not A Number —— 不是一个数字，但是确实是数字类型，全是缺点：

        ●参与任何算术运算，结果仍为NaN

        ●参与任何比较运算，结果都是false

2.赋值运算符：

i++;递增，每次只会固定+1

i+=1;累加，每次加几由我们程序员决定

i=i+1;最老土的写法

面试：++i 和 i++的区别？

单独使用时，放前放后无所谓，效果一样

但是如果参与了别的表达式，变量中的值都会+1

前++(++i)【返回的是加了过后】的新值 

        let a = 10

        let b = ++a;
        console.log(b) //11
        console.log(a); //11

后++(i++)【返回的是加了过前】的旧值

        let a = 10

        let b = a++;
        console.log(b) //10
        console.log(a); //11

3.短路逻辑运算

&&短路：如果前一个条件满足，才执行后一个操作，如果前一个条件不满足，则不管后续代码

        var money = 500;

        if (money >= 500) {

            money *= 0.8

        };

         console.log(money); //400

         

         等同于：

        money >= 500 && (money *= 0.8);  

        console.log(money); //400

        

||短路：实现浏览器兼容性问题：二选一

        d1.onclick = function(e) {

            e = e || window.event; // 前一个满足，不看后面，前一个不满足，才用后面



            console.log(e.clientX);

        }

4.位运算

左移：m<<n，读作m左移了n位 —— m*2的 n次方

右移：m>>n，读作m右移了n位 —— m/2的n次方

缺点：底数只能固定为2，虽然设置了幂，但是不能设置底数

        console.log(8 * 2 * 2 * 2 * 2 * 2 * 2 * 2);

        console.log(8 << 7);



        console.log(1024 / 2 / 2 / 2 / 2);

        console.log(1024 >> 4);

5.三目运算：

语法：看条件满足否，满足则作操作1，不满足则作默认操作

（1）条件?操作1:默认操作;

（2）条件1?操作1:条件2?操作2:默认操作

特殊：

（1）默认操作不能省略，省略后会报错

（2）如果操作有多句话，还是推荐使用if分支，多句操作再同一行不方便以后维护

6.相等运算符

        （1）==  相等。

                        ●用来比较两个值是否相等。

                

        let a = 1 == 1;
        console.log(a); //true

                       ●比较两个不同类型的值时，会将其转换为相同的类型再比较（通常转换为数值 ）

        let a = 1 == "1";
        console.log(a); //true

                       ●null和undefined进行相等比较时也会返回true

 result = null == undefined //true

                       ●NaN不和任何值相等，包括它本身

   result = NaN == NaN //false

        （2）=== 全等。

                       ●不会进行自动的类型转换，如果两个值的类型不同直接返回false

        let a = 1 === "1";
        console.log(a);//false

                       ● null和undefined进行全等比较时也会返回false

 result = null === undefined //false

                        ●NaN全等返回true

   result = NaN === NaN //false

        （3）！=不等。

                        ●用来检查两个值是否不相等。

        result = 1 != 1;
        console.log(result);//false

                        ●会自动进行类型转换。

        result = 1 != "1";
        console.log(result);//false

        (4) !== 不全等。

                        ●不会自动进行类型转换

        result = 1 !== "1";
        console.log(result);//true