js总结篇上（看完你就学会整个js）

最新推荐文章于 2024-09-12 14:28:05 发布

Sakura1921

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量330

点赞数 2

分类专栏：重头开始之js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Sakura1921/article/details/123041958

版权

这篇博客全面概述了JavaScript的基础知识，包括JavaScript的组成、五大基本数据类型、转换类型、运算符和条件判断语句。此外，还深入探讨了对象、函数、作用域、this、构造函数、原型对象、数组、Date和Math对象、String对象以及正则表达式等核心概念，是前端学习者的宝贵资源。

摘要由CSDN通过智能技术生成

1.javascript基础

1. javascript组成

* ECMAScript(核心标准)
* 扩展-->浏览器端
  * DOM
  * BOM
* 扩展-->服务器端
  * NODEJS

1.1 js常识

js输出
    document.write   向body中写字符串
    console.log      向控制台输出
    alert            弹出警告框输出

编写位置
1.外联文件
        <script src="引入的文件位置"></script>
2.内联文件
        <script type="text/javascript">
            js代码编写的位置
        </script>

js基本语法
    严格区分大小写
    语句分号结尾
    没有添加分号时浏览器自动添加，但是消耗资源并且可能添加出错

js字面量和变量
    字面量即为常量
    变量可被字面量赋值
    变量声明和赋值可分开或一起
        var a;
        a = 1;
    或者
        var a = 1;
js标识符
    所有可以自定义的变量都叫做标识符，并且遵循以下规范：
        1.只能以字母数字，下划线，$构成
        2.不能以数字开头
        3.不能使用ES的关键字和保留字
        4.一般使用驼峰命名法
    标识符以unicode编码表示，因此可以使用UTF-8的所有内容，但是一般只使用英文

2.五大基本数据类型

 1.string
 2.number
        可以表示整数与浮点数
        2进制浮点数以分数表示，不准确
        NaN与Infinity是数值的字面量，表示非数与无穷
        typeof 参数  检测某个值的类型
 3.boolean
        只有两个值：true  false
 4.null
        表示一个空对象
        var a = null;
        console.log(typeof a);
        结果为object
 5.undefined
        已经声明的变量未赋值则成为undefined
        var a;
        console.log(typeof a);
        结果为undefined

3.转换类型

强制类型转换
    1.string
        两种办法：a.toString()   String()
            toString只能用于对象，因此null和undefined无法调用
            String()对于Number, String, Boolean来说会调用底层的toString()方法，对于null和undefined会直接进行转换
    2.number
        三种方法：Number(), parseInt(), parseFloat()
            Number()：
                对于字符串来说如果只包含数字，直接转换成数字，如果包含非数字转换成NaN，如果是""或者"  "则转换成0
                对于boolean值，true转换成1，false转换成0
                对于null，转换成0
                对于undefined，转换成NaN
            parseInt()：
                首先将所有内容转换成字符串再开始解析。
                从左到右依次解析，需要非整数直接舍去，第一位非整数返回NaN
            parseFloat()：
                与parseInt()相似，只是遇到第一位小数点不会忽略会转换成小数，其余与之相同
    3.boolean
        一种方法：Boolean()
            对于数字：只有0跟NaN会转换成false
            对于字符串：只有""会转换成false
            对于null和undefined，只会转换成false

4.运算符

运算符有以下种类：typeof，+，-，*，/，%，所有的运算符都不改变原始变量而是返回进行运算后的结果,并且NaN与任何值进行运算结果都为NaN
        typeof:
            typeof返回一个变量或者字面量的类型，返回值为string
            var a = typeof 2;
            console.log(a);
            console.log(typeof a);
            结果为：number与string
        +：
            数字的加法运算
            遇到非number的值，会将其转换成number
            遇到string的值，会转换成string然后进行接串操作，可应用于长字符串的换行与隐性string类型转换
        其余运算符进行相应数学运算并且在遇到非number值时，会全部转换成number值后再进行运算操作，此特性可用于隐式number类型转换，但还有更简单的方法
            var a = "123";
            console.log(a / 1);
            console.log(typeof (a / 1));
            结果为123和number类型

一元运算符
    正号+和负号-
        两者能够进行相应的数学运算同时在遇到非number的值时会将其强制转换成number值再进行运算，此特性可用于隐式number类型转换
            var a = "123";
            console.log(+a);
            console.log(typeof +a);
            结果为123和number类型
自增与自减
    ++
        分为前++(++a)和后++(a++)，对于a值来说都是增加1，但是表达式的返回值不同，前++返回新值，后++返回原值
    --
        特性与自增相同，只是对于a值来说是减少1
逻辑运算符
    包括!, &&, ||三种运算符
        !：两次取非会得到原值的布尔值，可以利用这个特性进行隐式布尔值转换
            var a = "123";
            console.log("a = " + !!a);
            结果为true，与Boolean(a)相同
        &&：两个值都为true结果才为true
        ||：两个值都为false结果才为false
    在JS中&&与||都是属于短路操作，即当一个值满足要求时才会继续执行第二个操作，第一个值不满足要求时不执行第二个操作
    当参数不是boolean值时先会将参数转换成boolean值后再按照以上规则输出原值
        &&：
            当第一个值为true时，返回第二个值
            当第一个值为false时，返回第一个值
            console.log("123" && "456");
            结果为"456"
            console.log(NaN && "111");
            结果为NaN
        ||：
            当第一个值为false时，返回第二个值
            当第一个值为true时，返回第一个值
            console.log(NaN || "111");
            结果为"111"
            console.log("123" || "456");
            结果为"123"
赋值运算符
    有以下几种：=, +=, -=, /=, *=
    var a += 3;
    var a = a + 3;
    两者等价，对于其他的赋值运算符，与+=规则相同
关系运算符
    有以下几种：<, >, <=, >=
    有一方为number值时，将非number值转换成number值再进行比较
    NaN与任何值进行任何比较结果都为false， 包括NaN本身
        console.log(NaN >= NaN);
        结果为false
    当两方都为string时，按位比较字符编码，因此在两者都为string类型值为数字时进行比较，结果可能不符合预期，可应用于英文名字的排序
        console.log("11" > "2");
        结果为false
unicode编码
    在js中使用时在编码前加\u对编码进行转义输出
        console.log("\u0031");
        结果为1，编码为16进制
    在HTML中使用时以 &#编码; 的格式输出
        &#0048;
        结果为1，编码为10进制
相等运算符
    包括==, !=, ===, !==
    ==, !=
        两者类型相同时判断是否相等，类型不同时进行类型转换再判断是否相等，转换成哪种类型无法确定
        由于undefined衍生于null，因此两者相等
            console.log(undefined == null);
            结果为true
        NaN与任何值进行运算结果都为false，包括自己
            console.log(NaN == NaN);
            结果为false
    ===, !==
        除不进行类型转换外，规则与==, !==类似
        当两者类型不同时，===直接返回false，!==直接返回true
        NaN的规则在此处同样适用
            console.log(NaN === NaN);
            结果为false
        undefined与null在这种运算符下，才会不相等
            console.log(undefined === null);
            结果为false
三元运算符
    语法格式为(表达式)?(语句1):(语句2);
        当表达式结果为true时执行语句1，否则执行语句2
        当表达式结果为非boolean值时，会转换成boolean值后再对表达式进行判断
逗号运算符
    用来分割不同语句，可以同时声明多个变量
运算符优先级
    按照优先级表进行先后运算，可以使用()改变优先级

5.条件判断语句

条件判断语句
    语法1：满足条件只执行紧接着的第一条语句，后面语句与判断语句无关
        if(表达式)
            语句1;
    语法2：满足条件执行代码块中的代码，代码块外的代码与判断语句无关
        if(表达式){
            语句1;
            语句2;
        } 
    语法3：满足条件执行前一个代码块中的代码，否则执行后一个代码块中的代码
        if(表达式){
            语句...
        }else{
            语句...
        }
    语法4：从上到下依次判断