javascript基础知识

JavaScript实现业务逻辑和页面控制(功能)

一、js组成

• ECMA:JavaScript的语法,所以浏览器产共同遵守
• DOM:页面文档对象,为JS提供很多操作元素方法和属性
• BOM:浏览器对象模型,为JS提供很多操作浏览器窗口的方法和属性

二、js书写位置

1.行内

 <button onclick="alert('被点击了')">点击</button> -->

2.内部

<script>
    // 内部
    alert('页面打开了弹窗')
</script>

3.外部

在外部建立.js 后缀名文件 ，引入

<script src="./JavaScript文件名.js"></script>

三、js注释

• 单行//
• 多行/* */

四、输入输出

1.alert(''“)

浏览器的弹窗

2.console.log()

控制打印数据---主要用于开发人员打印信息,可以测试或者找bug

3.prompt()

收集用户信息

五、变量

数据存储容器,我们可以通过变量名进行获取或者修改

var 变量名=
let 变量名=
const 变量名=

步骤：

(1).声明变量

(2).赋值

1.变量命名规范

可以包含字母数字下划线 $符号

名称必须字母开头,也可以_和$

名称是分大小写

保留字不能用:if,break,case,switch

见名知意

2.多个变量声明

var  name = '张三',age=18,phone='110';

3.变量更新

通过新的值对变量进行赋值、

六、数据类型

对数据进行分类,不同数据占不同的空间变量的数据类型，在程序运行的过程中,根据等号的右边值来确定的，js拥有动态类型相同的变量可以做不同的类型

1.检测数据类型

typeof 数据类型检测

2.数据类型分类

2.1基本数据类型

2.1.1Number

数值类型 包括小数、整数、浮点数

0开头可以表示八进制，0x十六进制，0b开头二进制

Math.floor(x) 小数部分直接去除

Math.round(x) 四舍五入变为整数

isNaN()是否是数字

2.1.2String

用单引号或者是双引号   默认 unicode 编码

转义字符 \

length 属性：取得字符串长度

字符串拼接

使用+与其他类型进行数据拼接,最终获得都是字符串

当不同类型相加，会优先以字符串、数字类型为主(尽量规避)

模板字符串：${}可以是任意表达式，包括单独变量或者数学算式，使用之前需要确保变量声明过

let name="张三"
console.log(他的姓名是${name})

2.1.3Boolean 布尔值

true 和 false

等价 true --1

等价 false--0

2.2复杂数据类型

数组、对象

七、数据类型转换

把一种数据类型转换成另一种数据类型

1.转换成字符型

• toString()转换成字符串
• String()
• 隐式转换

2.转换数字型

• parseInt():转换整型

• parseFloat():转换成浮点型

• Number():必须纯数字

• 隐式转换 运算符:递增递运算符

3.转换布尔型

隐式转换

八、运算符

也称操作符,用于实际赋值,比如和执行算数运算等功能符号

1.算数运算字符

+ - * / %（余数）

2.递增递运算符

• 前置 ++data 先计算后返回
• 后置data++ 先返回再计算

3.比较运算符

两个数据进行比较,比较结果就是布尔值

< >= <= == ===(全等:数据类型要相同) !=(不等于) !==(全不等于:数据类型要考虑)

4.逻辑运算符

• && 逻辑与: 同真为真

• || 逻辑或:有真为真

• ! 逻辑非 :取反

短路运算：

短路运算

逻辑与的情况下: 表达式1为真,结果取决表达式2 表达式1为假,结果就是表达式1

逻辑或:表达式1为真,结果为真 ，表达式1为假,结果就是表达式2结果

5.赋值运算符

既有赋值又有运算

6.计算优先级

小括号>

递增递减运算符>

算数运算符>

关系运算符(>< <= >=)>

比较元素运算符(== === != !==)>

逻辑运算符(先&&后或)

九、流程控制

1.顺序结构

:最简单,最基本的流程结构,没有特定语法,程序按照代码的先后顺序执行

2.分支结构

根据不同条件,执行不同的路径代码,得到不同结果

2.1 if语句

单分支语句if

双分支语句if else

多分支语句 if else if else

2.2switch语句

switch表达式

switch(){

case 值1:

​ 执行代码

​ break

case 值2

​ 执行2

​ break

​ default:

​ 执行代码

}

2.3三元表达式

： ？

var sexName = sex == 1?'男':'女'

区别：

if和switch

if主要用于判断区间

switch用于判断等值(全等)

3.循环结构

循环:有一段代码要重复的执行

3.1for循环

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

初始化变量:循环开始的初始数据

条件判断:执行条件,用来判断是否继续执行

操作表达式:操作初始化变量

continue:终止本次循环

break:跳出循环,整个循环

3.2 while 循环

var i = 0;
while(i<5){
    i++
}

3.3 do..while 循环

var j = 0;
do{
    console.log(j);
    j+=1;
}while(j<3)

十、数组

数组是指一组数据的集合,其中每个数据都被称为元素,数组中可以存放任意类型的元素

1.创建数组

var arr1 = new Array();
var arr2 = [1, 2, 3, "4", true];

Array.from

2.访问数组元素

索引(下标):用来访问数组元素的序号(数组下标从0开始),超出索引会返回undefined

语法:数组[索引]

3.遍历数组

for (var i = 0; i < arr2.length; i++) {
    console.log(arr2[i]);
}

for（let 元素 of 数组变量）{}

数组变量.map((元素，下标))

4.判断是否是数组

Array.isArray()

5.数组长度

数组名.length

6.翻转数组

设置新数组，旧的数组倒序赋值

var list = [1, 2, 3, 4, 5];
var newlist = [];
for (var i = list.length - 1; i >= 0; i--) {
    newlist[newlist.length] = list[i];
    console.log(newlist);
}

十一、对象

对象是一组无序的相关属性和方法的集合,所有的事物都是对象

• 属性:事物的特征
• 方法:事物的行为

1.创建对象

利用字面量,大括号

var person = {
    name:'张三',
    age:18,
    id:18
}

• 属性跟方法采用的是键(属性名)值对的写法
• 多个属性由逗号隔开
• 方法属性后面是一个匿名函数

获取对象值属性值：

• 对象名.属性名,方法情况下:对象名.属性名()
• 对象名['属性名']

构造函数创建

function 构造函数名字(参数1,参数2...){
    this.属性名 = 值
}
new 构造函数名字

• 构造函数名首字母大写
• 不需要return
• 调用时候new

new Object()

var personal = new Object()
console.log(personal);
personal.name = '小红'
personal.age = 20

2.遍历对象

for in

for(item in p3){
    // item属性名
    console.log(item);
    console.log(p3[item]);
}

3.new关键词执行过程

new在内部创建一个空对象

this指向刚刚的空对象

执行构造函数里面的代码,给这个空对象去添加属性跟方法

返回对象

十二、函数

函数是JavaScript中的重要功能,它是一段代码的集合,这段代码可以在不同地方调用,从而提高JavaScript代码的复用性.

1.使用函数

function 函数名(){
    函数体
}

function:定义函数的关键字

调用函数

2.调用函数

格式:函数名()

3.函数参数

形参

function 函数名(形参1,形参2...){}

实参

函数名(实参1,实参2...)

4.形参和实参个数匹配

• 当形参个数 = 实参个数,正常输出
• 当形参个数<实参个数,从左到右匹配
• 当形参个数>实参个数,未匹配形参为undefined

5.函数的返回值

return

6.立即执行函数

不需要调用直接可以自己执行的

作用:创建一个独立的作用域,局部作用域

(function(a){
    console.log('执行',a);
})(10);

十三、作用域

一段代码所用到的变量名,不是总有效的,这个名字使用范围,就叫做作用域，作用域提高了代码的局部性,增强程序的可靠性,减少了名字的冲突性

1.全局作用域

作用域整个script标签,单独的js文件

2.局部作用域

在函数内部起作用

3.全局变量和局部变量

• 全局变量:在浏览器关闭销毁的,比较占内存
• 局部变量:在程序运行完就销毁,比较节省内存

4.预解析

js解析器:预解析+代码执行

js引擎把代码中所有的var声明提升到作用域的最顶层(函数的顶层),变量提升,赋值不会被提升