JavaScript基础入门+自我总结文档笔记

最新推荐文章于 2022-08-05 09:40:55 发布

请叫我聪明鸭

最新推荐文章于 2022-08-05 09:40:55 发布

阅读量148

点赞数

分类专栏： html+css入门基础学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45919348/article/details/122357415

版权

html+css入门基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript基础入门

js的初体验

js的三种写法：

内部、外部、内嵌

输入输出语句：

alert：

浏览器弹出警示框

console：

浏览器控制台打印输出信息

prompt：

浏览器弹出输入框，用户可以输入

 <script>
        // 输入框
        prompt('请输入年龄');
        // 弹出警示框输出的 展示给用户的e
        alert('计算输出结果');

        console.log('打印学信息');
    </script>

变量

1.定义：

变量是程序在内存中申请的一块用来存放数据的空间

2.声明：

1.变量名

var age; // 声明一个名称为age 的变量 var 用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

2.变量的初始化

声明一个变量并赋值，我们称之为变量的初始化。

3.变量的特殊申明

只赋值不声明，变量可以使用

4.命名

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成

不能以数字开头

遵守驼峰命名法

数据类型

1.简介

不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

2.变量的数据类型

变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

3.基本数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WE1GZ4D5-1641518048441)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210903164403086.png)]

Symbol: 是ES6 引入的一种新的原始数据类型，用于表示独一无二的值；主要用于当做属性名，防止属性名重名，因为用字符串当属性名很容易就会在不经意间造成重名；作用：其存在就是为了确保对象属性唯一，不会存在属性冲突。

1.数字型Number

八进制：数字前面加0，比如010（8）=8（10）

十六进制：数字前面加0x

max：alert(Number.MAX_VALUE); // 1.7976931348623157e+308

min：alert(Number.MIN_VALUE); // 5e-324

a.数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

b.isNaN():判断是否为非数字的类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-568AbjMT-1641518048445)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210903171728827.png)]

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);            // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));  // true ，"andy"是一个非数字

2.String类型

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

a.转义符

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

c. 字符串长度length

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

d.字符串的拼接+

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

e. 布尔型 Boolean

4.获取变量数据类型

a、typeof

使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因为如果a不存在（未声明）则会出错，

var num = 18;
console.log(typeof num) // 结果 number

b、instanceof：

instanceof用于判断一个变量是否某个对象的实例，因为typeof遇到null,数组,对象时都会返回object类型，所以当我们要判断一个对象是否是数组时，或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法instanceof

instanceof用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，

5.数据类型的转换

a、转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UNcc0KDi-1641518048447)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210903181726010.png)]

b、转换为数字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YBvAXqox-1641518048450)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210904150436652.png)]

parseInt对于浮点数来说，只取整

隐式转换：可以利用- * /

c.转换为布尔类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uKJ32aMT-1641518048452)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210904220529869.png)]

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined ，其余值都会被转换为 true

运算符

1.算术运算符

（1）、运算符的概述

a、%取余

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i89FvT6D-1641518048453)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210904222336497.png)]

b、不要直接判断两个浮点数是否相等 !

2.递增运算符

前置递增运算符

先自加，后返回值

后置递增运算符（多数）

先返回原值，后自加

var  num = 10;
alert(10 + num++);  // 20
先把num++ 返回原值10，再加上10，算出20后再加1

3.比较运算符

（1）、运算符的概述

比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

（2）、全等===

要求两侧的值和数据类型完全相同

（3）、不全等！==

4.逻辑运算符

（1）、概述

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G2OqxDnD-1641518048454)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210905085920949.png)]

（2）、逻辑与&&

两边都是 true才返回 true，否则返回 false

（3）、逻辑或 ||

两边都为 false 才返回 false，否则都为true

（4）、短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

a、逻辑与

语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

b、逻辑或

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

5.运算符优先级

流程控制

三元表达式？

表达式1 ? 表达式2 : 表达式3;

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

for循环

for( 初始化变量; 条件表达式; 操作表达式 ){
//循环体语句
}

判断条件为true时，先输出循环体再加1；

do 。。while和while区别

while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行

continue break

continue 关键字用于立即跳出本次循环，继续下一次循环

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

break 关键字用于立即跳出整个循环（循环结束）。

数组

1.数组的长度

“数组名.length”可以访问数组元素的数量（数组长度而不是索引号）。

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

2.冒泡排序

过程如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jYSqP880-1641518048456)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210908132536417.png)]

 for (var i = 0; i < arr.length; i++) {            // for(var j=0;j<arr.length-1;j++)            // 减去i的原因是第一趟走过后，最大数一定位于最后，第二趟时没必要再跟最后一个数比较            for (var j = 0; j < arr.length - i - 1; j++) {                if (arr[i] > arr[j]) {                    newarr[0] = arr[i];                    arr[i] = arr[j];                    arr[j] = newarr[0];                }            }        }

函数

1.概述

函数：就是封装了一段可被重复调用执行的代码块

函数不调用代码不执行

2.函数的使用

// 声明函数
function 函数名() {
//函数体代码
}

3.形参和实参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MxvYILua-1641518048457)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210908133433128.png)]

形参是接受实参的，形参类似于一个变量，声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参

4.形参和实参个数不匹配问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dsZtj7lB-1641518048459)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210908134137409.png)]

5.return返回值

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。若想返回多个值，应该返回数组。
函数都是有返回值的，如果有return 则返回 return 后面的值，如果没有return 则返回 undefined

6.arguments使用

不确定有多少个参数传递的时候，可以用 arguments 来获取，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

7.函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束var fn = function(){...}；// 调用的方式，函数调用必须写到函数体下面fn();

因为函数没有名字，所以也被称为匿名函数。
这个fn 里面存储的是一个函数。
函数表达式方式原理跟声明变量方式是一致的。
函数调用的代码必须写到函数体后面。

变量的作用域

全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

执行效率上比较全局与局部

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

变量预解析和函数预解析

变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

提升变量时，只提升变量的声明与函数的声明，但是总体的函数的执行顺序不变

<script>        var num = 10;        fun();        function fun() {            console.log(num);            var num = 20;        }        //相当于以下代码        var num;        function fun() {            console.log(num);            var num = 20;            //相对于            var num;            console.log(num);            num = 20;        }        num = 10;        fun();    </script>

对象

对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

1.创建对象的三种方法

（1）.字面量

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。{ } 里面采取键值对的形式表示 ,多个属性和方法用逗号分隔

var star = {    name : 'pink',    age : 18,    sex : '男',    sayHi : function(){        alert('大家好啊~');    }}console.log(star.name)     // 调用名字属性console.log(star['name'])  // 调用名字属性star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

对象的调用

对象的属性调用 : 对象.属性名
对象属性的另一种调用 : 对象[‘属性名’]，方括号里面的属性必须加引号，
对象的方法调用：对象.方法名() ，注意方法名字后面一定加括号

（2）.new Object

var andy = new Obect();andy.name = 'pink';andy.age = 18;andy.sex = '男';andy.sayHi = function(){    alert('大家好啊~');}

（3）.构造函数

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。首字母要大写和 new 一起使用

 <script>        function Star(uname,age,sex){            this.namr=uname;            this.agr=age;            this.sex=sex;        }        var a=new Star('liu','12','男');        alert(a.sex);    </script>

利用构造函数创建对象的过程称作对象的实例化

2.遍历对象属性for in

for…in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {    // 在此执行代码}for (var k in obj) {    console.log(k);      // 这里的 k 是属性名    console.log(obj[k]); // 这里的 obj[k] 是属性值}

内置对象

内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

查文档：MDN: https://developer.mozilla.org/zh-CN/

1.Math对象

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版就近取整注意：其他数字都是四舍五入但是==.5特殊，它往大了取==，-3.5取-3，2.5取3
Math.abs() // 绝对值，当输入的是字符型数字时，会隐式转换成数字型，
Math.max()/Math.min() // 求最大和最小值

2.random

得到一个两数之间的随机整数，包括两个数在内：

function getRandom(min, max) {  return Math.floor(Math.random() * (max - min + 1)) + min; }

3.Date对象

是一个构造函数，所以我们需要实例化后才能使用

使用Date如果没有参数，返回系统的当前时间。
如果Date()里面写参数，就返回括号里面输入的时间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RHlNTvpe-1641518048461)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210909103304571.png)]

返回月份时候应该加1，

// 一个函数，格式化日期对象，成为 HH:mm:ss 的形式   比如  00:10:45        function getDate(){            var date =new Date();            var h=date.getHours();            h<10?'0'+h:h;            var m=date.getMinutes();            m<10?'0'+m:m;            var s=date.getSeconds();            s<10?'0'+s:s;            return h+':'+m+':'+s+'s';        }        alert(getDate());

4.时间戳-总毫秒数

四种方法

   var date=new Date();        alert(date.valueOf());//现在的时间距离1970年1月1日的总的毫秒数        alert(date.getTime());        //简单写法        var date1=+new Date();        alert(date1);        //H5新增的        console.log(Date.now());

5.倒计时案例

用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）

转换公式如下：

d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数/1000); // 计算当前秒数

数组

1.new Array（）

var arr =new Array();//创建一个新的数组var arr1=new Array();//2个空的数组元素var arr2=new Array(2，3);//表示里面有两个元素是2和3

2.instanceof 运算符

instanceof 运算符，可以判断一个对象是否属于某种类型

Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];var obj = {};console.log(arr instanceof Array); // trueconsole.log(obj instanceof Array); // falseconsole.log(Array.isArray(arr));   // trueconsole.log(Array.isArray(obj));   // false

3.添加和删除数组元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZbuR42cw-1641518048462)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210909155121713.png)]

            var arr=[1,2,3];            arr.push(4,5);//添加多个元素            console.log(arr);            console.log(arr.unshift(9));//unshif()里面直接写参数元素就行 了            console.log(arr.pop());//删除哪个返回值就是哪个

4.数组排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SthFlIbW-1641518048464)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210909160302717.png)]

var arr = [1,12， 64, 9, 6];arr.sort(function(a, b) {//当不加function函数时候，排序的方式是1，12，6，64，9，先看左边等于1的情况再看等于6的情况    return b - a;      // 降a序    // return a - b;   // 升序});console.log(arr);

5.数组索引

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zUBVo4In-1641518048465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210909160819653.png)]

indexOf（）：数组有相同元素时，只返回第一个满足的索引号，从前查找

lastIndexOf():从后开始索引，

<script>        var arr=['blue','blue','orange'];        arr.indexOf('blue');//只返回第一个满足的索引号，如果找不到元素返回-1    </script>

6.数组去重（重点案例）

 <script>        function unique(arr) {            var newArr =new Array();            for (var i = 0; i < arr.length; i++) {                if (newArr.indexOf(arr[i]) == -1) {                    newArr.push(arr[i]);                }            }            return newArr;        }        var arr = ['c', 'a', 'z', 'a', 'c'];        console.log( unique(arr));    </script>

7.join(‘任意分隔符’)

与toString（）的作用一样，只是join可以变成由任意字符连接

var arr=['green','red']arr.join('-')//输出为green-red

简单类型与复杂类型

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

1.栈

简单数据类型存放到栈里面

2.堆

复杂数据类型存放到堆里面，在栈里面开辟地址，然后这个地址指向堆里面的数据

正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

用于定义一些字符串的规则：

计算机可以根据正则表达式来检查一个字符串是否符合规则。
获取将字符串中符合规则的内容提取出来
或：使用 | 【】表示或
和：【a-z】这是表示任意小写字母
“i" 忽略大小写
”g“ 全局匹配大小

创建正则对象：

语法：var 变量=new RegExp(“正则表达式”，“匹配模式”)

正则方法：

1.-test（）：使用这个方法检查一个字符串是否符合正则表达式的规则，如果符合返回true，否则返回false，严格区别大小写

 <script>        var a=new RegExp("a");//不忽略大小写     var b=new RegExp('a','i')//表示忽略大小写        console.log(a.test('bac'));        console.log(a.test('bcd'));    </script></body>

字面量创建正则表达式

语法：var 变量=/正则表达式/匹配模式

 reg=/b/i;        console.log(typeof reg);

常见单词

console：控制台

请叫我聪明鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础入门+自我总结文档笔记

JavaScript基础入门
复制链接

扫一扫

专栏目录

JavaScript基础入门+自我总结文档笔记

JavaScript基础入门

js的初体验

js的三种写法：

输入输出语句：

alert：

console：

prompt：

变量

1.定义：

2.声明：

1.变量名

2.变量的初始化

3.变量的特殊申明

4.命名

数据类型

1.简介

2.变量的数据类型

3.基本数据类型

1.数字型Number

a.数字型三个特殊值

b.isNaN():判断是否为非数字的类型

2.String类型

a.转义符

c. 字符串长度length

d.字符串的拼接+

e. 布尔型 Boolean

4.获取变量数据类型

a、typeof

b、instanceof：

5.数据类型的转换

a、转换为字符串

b、转换为数字

c.转换为布尔类型

运算符

1.算术运算符

（1）、运算符的概述

a、%取余

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i89FvT6D-1641518048453)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20210904222336497.png)]

b、不要直接判断两个浮点数是否相等 !

2.递增运算符

前置递增运算符

后置递增运算符（多数）

3.比较运算符

（1）、运算符的概述

（2）、全等===

（3）、不全等！==

4.逻辑运算符

（1）、概述

（2）、逻辑与&&

（3）、逻辑或 ||

（4）、短路运算（逻辑中断）

a、逻辑与

b、逻辑或

5.运算符优先级

流程控制

三元表达式 ？

for循环

do 。。while和while区别

continue break

数组

1.数组的长度

2.冒泡排序

函数

1.概述

2.函数的使用

3.形参和实参

4.形参和实参个数不匹配问题

5.return返回值

6.arguments使用

7.函数表达式方式(匿名函数）

变量的作用域

全局变量

执行效率上比较全局与局部

变量预解析和函数预解析

对象

1.创建对象的三种方法

（1）.字面量

对象的调用

（2）.new Object

三元表达式？