JavaScript

小田加油！！

已于 2022-07-24 10:24:42 修改

阅读量325

点赞数

分类专栏： javascript 文章标签： javascript 开发语言

于 2022-06-26 10:08:21 首次发布

本文链接：https://blog.csdn.net/m0_58454229/article/details/125385769

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.初识javascript

javascript是客户端脚本语言，不需要解释，运行过程由js引擎逐行解释并执行。

浏览器分为：渲染引擎和JS引擎

渲染引擎：俗称内核，用来解析HTML和CSS
JS引擎：也叫做JS解释器，用来解析JS

2.JS组成

ECMAscript：也就是JavaScript基本语法

DOM：文档对象模型，对网页元素操作

ROM:浏览器对象模型，操作浏览器窗口eg：浏览器跳转，弹出框...

JS里书写都用单引号

行内式书写（直接写在元素上）

内嵌式书写

外部式书写（<>之间不要写任何代码！！！）

3.JS输入输出

alert(）----弹出警示框（输出给用户的）

console.log()----控制台输出（输出给程序员）

prompt()----输入框（取过来的值为字符类型）

使用如下：

4.变量

变量：存储数据的容器。变量的本质是在内存里申请一块空间用来存储数据。

声明变量：var 变量名;

声明多个变量(逗号隔开)：var a=9,b=9,c=9;

！！注意：var a=b=c=9；-->var a=9;b=9;c=9;

变量使用：1.声明 2.赋值

JS里面允许不声明直接赋值（不提倡）。

变量命名不能以数字开头，中间不能有空格

有的浏览器认为name是有含义的，尽量不要使用name做变量名。

5.数据类型

JS变量数据类型是运行过程中JS引擎根据=右边的数据类型来判断的。

JS拥有动态类型，JS变量的数据类型是可以变的

数据类型分为：简单数据类型（Number、Boolean、String（引号，单双）、Undefined（声明但没有赋值）、Null（空值））和复杂数据类型（object）

Number类型数字前面加0表示八进制，加0x表示十六进制。Infinity结果无穷大，-Infinity结果无穷小，NaN得出结果非数字

字符串类型和其他类型拼接结果都为字符串类型

布尔类型当和数字类型运算时，true当1，false当0

Undefined和数字运算结果为NaN

Null和数字运算结果时，相当于0

获取数据类型：

typeof---eg：typeof num

6.类型转换

1.转化为字符串类型

变量.tostring()
String(变量)
字符串拼接

2.转化为数字型

parseInt（变量）--字符型转化为数字型（得到的为整数）parseInt（120px）会去掉单位，得到的是120!!
parseFloat（变量）--字符型转化为数字型（得到的为浮点数）
Number（变量）
利用-*/运算

3.转化为布尔类型

Boolean（）--表示空、否定的都转为false（‘’，0，NaN，null，undefined）

7.运算符

算术运算符（浮点数运算会出现出现精度问题）不能直接用浮点数判断相等！
递增递减运算符（++a与a++单独使用是一样的，但是运算时表达式返回的值不一样）
比较运算符（返回true或false）==要求值相等就行了，会默认转换数据类型，会把字符类型转换为数字类型（===是全等，要求两侧的值和数据类型都一样）
逻辑与算符
赋值运算符

运算符优先级如下：逻辑与的优先级大于逻辑或！！

8.流程控制

流程控制分为：顺序、分支（if、switch、三元运算、if else if、if else）、循环（while、for、dowhile）

switch（表达式），开发中表达式经常写成变量，里面的变量和case里的必须是===（全等）关系。如果当前case里没有break，则会继续执行下一个case。

if else if和switch都是多分支语句，但是if else if是依次看是否满足条件，switch会直接跳到满足的case里执行语句。分支少的话最好用if else if，分支多switch效率会更高

断点调试

（F11快捷键执行下一个语句）

9.数组

数组：就是一组数据的集合，存储在单个变量中。

创建数组：

1.new关键字 eg:var 数组名=new Array();//创建了一个空数组

var 数组名=new Array(2)----表示创建了一个数组长度为2的两个空元素的数组

2.数组字面量 eg：var arr=[];

    var arr = [1, "a", true, 5, "c"];
        console.log(arr);

运行可以得到以下结果：

访问数组：

数组名[下标（索引号）]，如果没有某个元素则输出的为undefined。索引号从0开始

数组长度：

数组名.length

不要给数组名直接赋值，否则里面的元素都没有了！！

eg:

输出为：

反转数组：

数组名.reverse()

案例--冒泡排序：

代码如下：

 var arr = [5, 4, 3, 2, 1];
        //趟数n-1
        for (var i = 0; i < arr.length - 1; i++) {
            //次数
            for (var j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j + 1];
                    arr[j + 1] = arr[j];
                    arr[j] = temp;
                }
            }
        }
        console.log(arr);

10.函数

函数：封装了一段可以重复执行调用的代码块，防止大量代码的重复使用。

函数声明：

1.function关键字--eg：function 函数名（）{}
2.函数表达式(匿名函数)---eg:var 变量名=function(){};

使用函数：

1.声明函数function函数名（）{}

2.调用函数

函数不调用的话自己不会执行

实参与形参匹配问题：

如果实参数>形参数-----会取形参的个数
实参数=形参数---正常
实参数<形参数-----多余的形参因为没有被传值，会被定义为undefined，函数返回NaN

函数返回值：

函数只是实现某种功能，最终的结果需要返回给调用者。所以尽量不要在函数内部实现输出，用return实现

return语句之后的代码就不执行了（即退出当前函数），return只能返回一个值，如果以逗号隔开只返回最后一个

如果函数没有返回值，则返回的是undefined

argument：

arguments对象(只有函数才有！！！！)存储了传递的所有实参。

arguments展示形式是一个伪数组（1.有数组的length属性2.按照索引方式存储3.没有真正数组的一些方法eg：pop、push等）

使用如下：

 function fn() {
            console.log(arguments);
            console.log(arguments.length);
            console.log(arguments[2]);
        }
        fn(1, 2, 3);

运行如下：

案例--分别用匿名函数和函数实现判断是否为闰年

代码如下：

 function isRunYear(year) {
                   if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) return true;

                   return false;
                    }
 console.log(isRunYear(2001)); 
        //匿名函数
        var isyear = function(year) {
            if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) return true;

            return false;
        };
        console.log(isyear(2000));

运行如下

11.作用域

JS作用域(es6之前)：全局作用域、局部作用域现阶段JS没有块级作用域（es6新增了）

变量作用域：全局变量：在全局声明的变量（在函数里直接赋值的变量）、局部变量：在函数内部定义的变量（函数的形参也可以看作局部变量）

全局变量只有浏览器关闭的时候才会销毁，比较占内存

局部变量当代码块执行完就被销毁了，比较节约资源

作用域链：

内部函数访问外部函数的变量采用的是链式来决定我们要取哪个值，这种结构称为作用域链。（就近原则）

12.预解析

JS解析器在运行代码时先预解析再代码执行

外层预解析再函数内层预解析

预解析：

JS会把var还有function提升到当前作用域最前面。

预解析分为变量预解析（变量提升）-->将所有变量声明提升到最前但不提升赋值、函数预解析（函数提升）--->将函数声明提到最前面但不调用函数

代码执行：从上往下依次执行

如以下两个：

13.对象

对象：是一个具体的事物。对象由属性（特征）和方法（行为）组成。对象表达更清晰

创建对象：

1.利用对象字面量（{}）eg：var obj={}；//这就创建了一个空对象（{}中属性和方法采用键值对的形式：属性名：属性值，方法：后面跟的是个匿名函数）（多个属性和方法之间用逗号隔开）

2.利用new object创建对象eg：var obj=new Object();//创建了一个空对象

3.利用构造函数创建对象(可以利用该方法一次创建多个对象):就是把对象里面一些相同的属性和方法封装出来到函数里面。new创建对象也就是对对象的实例化

构造函数函数名首字母需要大写，且不需要return就可以返回结果

调用构造函数必须使用new，且属性和方法前面必须加this.指向，this就会指向new的对象并把这个对象返回

//利用对象字面量创建对象
        var obj1 = {
            uname: "易烊千玺",
            uage: 21,
            ueat: function() {
                console.log("易烊千玺在干饭");
            },
        };
        obj1.ueat();
        console.log("------------------------");

        //2.new Object创建对象
        var obj = new Object();
        obj.name = "易烊千玺";
        obj.age = 18;
        obj.eat = function() {
            console.log("易烊千玺在干饭");
        };
        console.log(obj.name);
        console.log(obj.age);
        obj.eat();
        console.log("------------------------");

        //3.构造函数创建对象
        function Star(uname, uage, usex) {
            this.name = uname;
            this.age = uage;
            this.sex = usex;
            this.sing=function (song){
                 console.log(song);
            };
        }
        var s1 = new Star("刘德华", 18, "男");
        console.log(s1.age);
        console.log(s1.name);
        console.log(s1.sex);
        s1.sing('冰雨');

调用对象：

对象名.属性名

对象名['属性名'](1.[]可以用变量作为属性名或访问2.可以用数字作为属性名3.可以动态访问的属性名，可以在程序运行时创建和修改属性)

调用对象方法：对象名.方法名()；

判断是否有该属性：对象['属性名']

遍历对象操作：很少用来遍历方法

for（变量 in 对象）

输出变量---得到的是所有属性名

输出对象[变量]---得到的是属性值

eg：

   for (var k in s1) {
            console.log(k);
            console.log(s1[k]);
        }

14.内置对象

JS对象：自定义对象、内置对象、浏览器对象

内置对象：JS提供的一些方法和功能

15.查文档

学习一个内置对象的使用，可以通过查文档学习（MDN/W3C）

MDN：https://developer.mozilla.org/zh-CN/（HTML、CSS...）

具体请查MDN文档，下面只是大概介绍了。

Math对象

不是一个函数对象，Math不是构造函数，所以不需要new来调用，直接使用就行了

一些常用的方法：Math.abs()----绝对值Math.abs('-1')-->1会把字符串型隐式转换为数字类型

Math.floor()----向下取整

Math.ceil()----向上取整

Math.round()----四舍五入（.5特殊，往大取eg-1.5-->-1）

Math.random()----随机数

得到一个两数之间的随机整数：

 return Math.floor(Math.random() * (max - min)) + min;

日期对象

是构造函数，所以必须要new来调用创建日期对象

参数常有的形式：

数字型：eg：2020,2,9，返回的会大一个月
字符型：eg：'2020-2-9 10:10:10'(最常用的)

相关函数：

获得总的毫秒数（时间戳，即不会有重复的现象）：（距离1970年1月1日的总毫秒数）

1.通过valueof()获得
2.通过getTime()获得
3.通过var date=+new Date();输出date（最常用的）
H5新增方法：打印Date.now()（不需要考虑兼容性时可以用）

数组对象

检测是否为数组

instanceof 运算符----判断是否为数组使用:xxx instanceof Array
H5新增方法（ie9以上才支持）：Array.isArray(xxx)

添加删除数组元素

数组反转-----.reverse()

数组排序-----.sort()

使用：

 var arr1 = [13, 4, 77, 1, 7];
        arr1.sort();
        console.log(arr1);

发现代码运行如下：

这没有按照我们的期望，因为sort比较单位数和双位数，会先看第一位数。

修改如下：

var arr1 = [13, 4, 77, 1, 7];

        arr1.sort(function(a, b) {
            //   return a - b; //升序
            return b - a;
        });
        console.log(arr1);

返回数组索引

数组.indexOf（数组元素，起始位置(可以省略)）---只返回第一个满足的索引号，如果数组里没有找到该元素则返回-1。
数组.lastIndexOf(数组元素，起始位置(可以省略))从后面开始找---即只返回最后一个满足的索引号，如果数组里没有找到该元素则返回-1。

使用如下：

 var str = "改革春风吹满地，春天来了";
        console.log(str.indexOf("春", 3));//8
        console.log(str.lastIndexOf("春", 7));//2

数组转换成字符串

数组.toString()
数组.join(分隔符)--默认为逗号分隔eg:arr.join('-')就是以-分隔

字符串对象

字符串不可变性，看上去改变了其实是地址改变了，本身的值并没有改变。所以不要大量拼接字符串（比较占内存资源）

返回字符串位置（同数组indexOf、.lastIndexOf）

根据位置返回字符

字符串的操作方法

substr()---截取字符串

replace(被替换的字符，替换为的字符)---只会替换第一个满足的字符

字符串转换为数组split(分隔符)---分隔符取决于字符串里的

eg：

16.简单数据类型

简单数据类型（值数据类型）：在存储变量中存储的是值本身。eg：null、boolean、undefined、string、number

简单数据类型null返回的是一个空的对象（object）

复杂数据类型（引用数据类型）：在存储变量中存储仅仅的是地址。通过new关键字创建的对象eg：Object、Array、Date等形参和实参保存的是同一个地址，操作的是同一个对象。

简单数据类型放在栈里面，复杂数据类型放在堆里面，JS中没有堆栈的概念！！！

小田加油！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript基础
复制链接

扫一扫

专栏目录