JavaScript基础笔记（精简）

小匣

已于 2022-10-07 16:13:40 修改

阅读量1.5k

点赞数 2

分类专栏：前端文章标签： javascript

于 2022-04-04 16:33:37 首次发布

本文链接：https://blog.csdn.net/weixin_46160720/article/details/123869675

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML
CSS
JavaScript基础
 JavaScript(高级)DOM
React

前言

提示：（适合有其他语言基础的小伙伴学习）仅记录JavaScript较重要和常用的部分，以供知识复习(高级部分等后续更新)

JavaScript是什么？（了解）
JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言( Script是脚本的意思)
脚本语言∶不需要编译，运行过程中由js解释器(js 引擎)逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程

JavaScript能干什么？（了解）
表单动态校验（密码强度检测)(JS产生最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

JavaScript执行过程（了解）
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JavaScript组成（了解）
在这里插入图片描述

一、书写位置

行内式

<body>
    <!-- 行内式JS -->
    <input type="button" value="确定" onclick="alert('人才！')">
</body>

内嵌式

<!-- 内嵌式JS -->
    <script>
        alert('人才');
    </script>

外部式

在这里插入图片描述
链接

<script src="/JS/myjs.js"></script>

注意

行内式：
可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如:onclick注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读;
引号易错，引号多层嵌套匹配时，非常容易弄混;
特殊情况下使用

内嵌式：
内嵌JS是学习时常用的方式

外部式：
利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

输入输出

alert('我是警示框');
prompt('我是输入框！请输入你的年龄');
console.log('我是控制台');

在这里插入图片描述

二、变量

变量声明

var 变量名;
variable变量的意思

变量注意

由字母(A-Za-z)、数字(O-9)、下划线(_)、美元符号($ )组成，如: usrAge, num01,_name
严格区分大小写。
不能以数字开头。
不能是关键字、保留字。例如: var、for、while
变量名必须有意义。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

三、数据类型（动态类型）

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

数据类型分类

简单数据类型

数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值	0
Boolean	布尔值类型	false
String	字符串类型，JS中字符串都带引号	“”
Undefined	var a；声明了变量a但是没有给值	undefined
Null	var a = null；变量a为空值	null
其中整型特殊的值
lnfinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

一些函数

isNaN()
用来判断一个变量是否为非数字的类型，返回true或者false

字符串类型变量名.length
获取字符串的长度

typeof 变量名或常量
查看数据类型

字面量

类似常量

转换为字符串

方式	说明	用法
toString()	转换为字符串	变量名.toString();
String()	强制转换为字符串	String(变量名);
+	字符串拼接符，与字符串拼接后，都是字符串	变量名+“字符串”

转换为数字型

方式	说明	用法
parseInt(string)函数	将string类型转换为整数数值型	parseInt(‘int值’)
parseFloat(string)函数	将string类型转换为浮点数数值型	parseFloat(‘float值’)
Number()强制转换函数	将string类型转换为数值类型	Number(‘12’)
js隐式转换（- * /）	利用算术运算符进行隐式转换	‘12’ - 0

转换为布尔型

Boolean()函数
代表空、否定的值会被转换为false（0、NaN、null、undefined）

运算符

运算符都在其他语言中学过，这里仅介绍一些不同的地方

==

==判断等价时，会转型
比如 ‘18’ == 18 这里是true

=== 和 `!==`

要一模一样的才是true(数据类型也要一样)
比如 ‘18’ == 18 这里是false

!== 意思相反

逻辑运算符——逻辑中断

逻辑中断又称短原则
短路运算的原理∶当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。
1。逻辑与
语法︰表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
如果有空、0、 ‘’ 、null、 undefined 、NaN
的或者否定的为假其余是真的
2。逻辑或
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2
以此类推

数组

创建数组

var arr = new Array();
var arr = [];
var arr = [1,2,3,4];
var arr = [1,‘舒芯芯’,3,4];

修改数组长度

1、增加长度
arr.length = x；
2、修改索引号
arr[没用过的索引号] = xxx;

函数

function 函数名() {

}

匿名函数，函数表达式

var 变量名 = function() {};
调用时
直接用变量名加（）；
变量名();
同时可以传递参数

形参

function 函数名(参数1，参数2…) {

}

function 函数名(one,two...) {

}

实参不匹配的情况

如果实参的个数和形参的个数一致则正常输出结果
如果实参的个数多于形参的个数
取决形参个数，形参有几个，就用几个，不会影响结果
如果实参的个数s少于形参的个数
形参可以看做是不用声明的变量num2是一个变量但是没有接受值﹑结果就是undefined
任何数与undefined运算结果都是NaN

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

arguments是一个维数组，因此可以进行遍历

具有length属性
按索引方式存储数据
不具有数组的push和pop方法

作用域

JS在es6中才增加了块级作用域，后面讲es6

作用域链

只要是代码，就至少有一个作用域写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

就近原则查找需要用到的变量

对象

在这里插入图片描述

添加属性，直接才用点的方式添加

person.nationality = “English”;

删除属性

person.nationality = “English”;

this 关键词

在 JavaScript 中，this指向该对象，与其他语言同样

对象中创建方法

methodName : function() { 代码行 }

访问对象

objectName.methodName()

循环显示对象的内容

for (var key in person) {
console.log(person[key]);
}

构造函数

function 构造函数名(参数) {
this.属性=c参数;
this.方法= function();
}

数组

以后用笔记软件写完之后再往CSD写，要不然老是忘记保存就关了 — ┭┮﹏┭┮
var arr1 = new Array();
arr1[1] = 123;
var arr = [1,-123,3,true,‘舒芯芯’,6];
console.log(arr1[0]);
for (var i = 0 ; i < arr.length ; i++)
{
console.log(arr[i]);
} arr.length = 10;
console.log(arr);
arr.length = 10;
在这里插入图片描述