【前端】JavaScript（一）

一、简介

JavaScript是一门轻量级、基于面向对象的、即时编译的一门解释型语言

计算机语言按照编译模型进行分类分为：

• 编译型：c语言
  编译型语言就是先将代码整体编译后生成一个编译文件，最终交给计算机执行该文件
• 解释型：JavaScript、python、（JIT：JUST IN TIME）
  解释型语言，不会生成一个编译文件，而是解释一行执行一行

语法特点：
1.js严格区分大小写
2.每一行代码应该以分号结尾，但是可以省略
3.js代码的执行顺序，从上往下依次执行

Java与JavaScript区别：

• java是面向对象的编程语言，通常也将java称作为解释型语言！严格意义上java是混合型的编程语言
• JavaScript一门类似于java的编程语言

二、js的引入方式

1.行内式
on+事件名

<button onclick="alert(123)">按钮</button>

2.内部引入式
通过html中的script标签

<script>
	console.log(123)
</script>

3.外部引入式
引入外部js，通过script标签的src属性去指定js文件路径

<script src="demo.js"></script>

src属性它具备阻塞页面的能力，它会将src所指引的文件全部下载完毕后，才会执行后面的内容所以，通常会将外部js文件的引入标签放到body的末尾
注意：在该方式中，不能在script的内容区写额外的js代码，写上了也是无效的！不会执行

三、语句

（一）输入语句

js中输入语句：prompt函数
通过该函数，可以从浏览器中输入

（二）输出语句

输出语句，在js中可以通过输出语句，查看对应的数据和结果，输出语句也可以作为调试程序一种手段

1.页面输出
（不推荐，不常用）

输出数据用户可见，影响页面整体内容（直接显示在页面）

document.write('hello world!')

2.弹窗输出
（不推荐，偶尔使用，通常用户交互的提示手段）
该方式输出内容用户可见，具备交互能力（需要用户点击确定关闭弹窗）
该方式会阻塞后面js代码的执行（弹窗出现的时候，用户不点确定关闭弹窗，就不会继续运行代码，整个界面就渲染不出来）

alert('hello world!')

3.控制台输出
（推荐使用）
使用浏览器控制台工具

console.log('hello world!')//log 没有任何意义  普通信息

输出数据用户不可见（因为只能再在控制台看见嘛）
不会阻塞代码，与用户没有交互（就是不用等待用户点击确定关闭）

console.info(‘输出一条信息’)
console.warn('警告信息')
console.error('错误信息')

（三）注释语句

单行注释：只注释一行的代码 语法 //
多行注释：可以同时注释多行 语法 /**/
快捷注释方式 ctrl+/

四、数据

（一）程序的本质

1.程序的本质是什么？程序的组成是什么，由什么组成了程序？
程序=数据结构+算法
程序=数据+函数（处理逻辑、处理过程）
数据：对现实生活中具体的事物的一种抽象的表达或者描述
函数：封装好的一段可以反复调用的代码块！并且可以对数据进行处理实现某种功能！

2.数据类型
数据是有类型的
JavaScript中也有对应数据类型的划分：四基两空一对象 （bigInt）
四基：Number（数值类型）、String（字符串类型）、Bool（布尔类型）、Symbol（符号类型）
两空：Null（空对象、空引用）、Undefined（未定义的空值）
一对象：Object（对象类型、复杂类型、引用数据类型）
JavaScript中除开基本数据类型以外，”万物皆对象“

（二）基本数据类型

Number：数值类型 数值型的相关数据（整数、小数、负数）

console.log(1)
console.log(3.14)
console.log(-200)
console.log(NaN)//特殊的数值类型：NaN(not a number)

String：字符串类型，由单引号或者双引号引起来的

console.log('a')
console.log('abc')
console.log("hello world!")
console.log('1')

Boolean：布尔类型 true（真）、false（假）
true和false是布尔值，也叫做逻辑值

console.log(true);
console.log(false);

Null 类型 空引用，空对象 该类型的值只有一个 null

console.log(null)

Undefined 空值 该类型的值只有 Undefined

console.log(undefined);

（三）复杂数据类型（引用数据类型）

在JavaScript中某种意义上，除开以上几个数据类型之外，其他的都成为对象类型，“万物皆对象”
在js中对象是有具象的表达的，具象的描述的！
一对象：object（对象）抽象的表达
{}（对象）、[]（数组对象）、函数（函数对象）、js的内置对象、浏览器提供的对象（宿主对象）

（四）{}对象

它是由花括号包裹的，将一些key:value键值对的数据，进行统一保存！该对象是无序的！

对象的结构：
{
​ key:value,
​ key:value,
​ …
}

如何创建一个对象
1.通过字面量直接创建一个对象，该方式也是使用比较频繁的一种

var person1={
	name:'张三',
	age:18,
	sex:'男',
	addders:'重庆市'
}

2.通过new构造函数

var person2=new Object()

如何访问对象的数据
1.直接访问该对象的整体

console.log(person1,perso2)

2.如何访问对象中具体属性的值
1）通过 对象名.属性名 点语法

console.log(person1.name,person1.age)

访问对象中的不存在的属性时，不会报错，只是返回undefined

console.log(person1.xxx)//undefined

2）通过 对象名[属性名]
注意：通过[]访问对象属性时，必须给属性加上引号，如果是变量中保存的是字符串类型，也是可以的

var xxx='name'
console.log(person1['name'])//console.log(person1[xxx])

对象中不允许存在相同属性名的属性
如何修改对象中属性的值
通过‘=’赋值运算符进行修改，如果对一个存在的属性赋值时，新的属性值会覆盖之前的属性值

person1.age=20
conson.log(person1)

person1['name']='李四'
conson.log(person1)

如何向现有的对象中添加额外的属性
如果对一个不存在的属性赋值时，该对象首先会创建一个属性，然再对其进行赋值

person1.xxx='我是新的属性'
conson.log(person1)

（五）[]数组

JavaScript中由[]括起来的，用于存储有序的数据的一个数据结构，称作为数组！
[]中可以同时存储多个不同类型的数据，多个数据之间使用逗号分隔即可
注意：数组类型，也属于对象！
如何创建一个数组
1.字面量

var arr1=[1,2,'a']
console.log(arr1)

2.new 构造函数

var arr2=new Array()//如果不向构造函数传入参数，那么该数组是空数组
console.log(arr2)

如何访问
访问数组中具体的某一个元素的值，通过 数组名[下标值] 注意：下标值是从0开始的

    var arr = [1,2,3,'a','b']
    console.log(arr[3])

如何修改

    var arr = [4,5,6,7,8]
    arr[0] = 50
    console.log(arr)
    
    arr[6] = 'xxx'
    console.log(arr[6],arr)
    
    arr[20] = 'yyy'
    console.log(arr)
    // 注意：不建议对超过当前数组长度的下标进行赋值！这样会造成很多的空元素

    console.log(arr[5])
    
    var arr = ['a','b','c']
    console.log(arr,arr.length) // 数组.length 可以返回当前数组的长度

如何添加

    arr.push('d') // push方法只有数组类型的才可以调用，在当前数组的末尾添加一个新的元素
    console.log(arr)

如何删除

    var res = arr.pop()  //删除数组中最后一个元素
    console.log(arr.pop()) 

五、运算符

通过js给定的符号，对数据进行运算或者操作，得到一个新的数据
js中的运算符：算术运算符、单目运算符、自增和自减运算符、比较运算符、逻辑运算符、括号运算符、逗号运算符、条件运算符
（一）算术运算符
+、-、*、/、%（模、取余）、**（幂运算）
+（加号）：将+号两边的number类型数据，进行相加得到一个相加后的值
如果+号两边不是number类型，它会先将其隐式转为number类型然后再进行计算
注意：+号运算也可以用作为字符串的拼接，当+号的两侧有一边为string类型的数据，那么加法运算变成了字符串的拼接，通常利用这个特性进行两个字符串的拼接

console.log(5+6)
console.log(5+1.2)
console.log(-5+15)
console.log(10+'1')//101
console.log('hello'+'world!)
console.log(15+true)//15+number(true)=15+1=16
console.log(15+null)//15
console.log(15+undefined)//NaN加任何的number数据得到的都是NaN
console.log(null+true)//1

-（减号）：将-号两边的number类型数据，进行相减得到一个相减后的值
如果-号两边不是number类型，它会先将其隐式转为number类型然后再进行计算

console.log(10-5);
console.log(5-5);
console.log(5-50);
console.log(5.5-5);
console.log(10-'1xx');//NaN  // 注意： number类型减去NaN得到的也是NaN
console.log(10-true);9
console.log(10-null);//10
console.log(10-undefined);//NaN

* （乘号）：将 * 号两边的number类型数据，进行相乘得到一个相乘后的值
如果*号两边不是number类型，它会先将其隐式转为number类型然后再进行计算

console.log(5*5)
console.log(5*true)//5
console.log(5*null)//0
console.log(5*undefined) //NaN  //任何number类型乘以NaN得到的都是NaN

/（除号）：将/号两边的number类型的数据，进行相加得到一个相加后的值

如果/号的两边不是number类型，它会先将其隐式转为number类型然后再进行计算

注意：js中的除法，就是数学意义上的除法，除不尽会有小数

        //console.log(null/null)//NaN
        // console.log(5/5);
        // console.log(5.5/5);
        // console.log(-1/5);
        // console.log(5/true);//5
        // console.log(5/null);//Infinity
        // console.log(5/undefined); //NaN  // number类型与NaN想乘得到的是NaN
        // console.log(5/'11xxx');//NaN

%（取模运算）：两个number类型进行模运算，得到的是两数相除的余数

console.log(5%3)//2

**（幂运算）

console.log(2**3)//8

（二）一元运算符
一元运算符（单目运算）：一元运算是对一个数据进行运算，而不是多个数据之间的运算
+、-、typeof、new、delete、！

console.log(+'123')//123
console.log(-'123')//-123
var res=typeof name
console.log(res)//string

++（自增）、--（自减）
前自加：先将变量的值进行加1后，再参与后续的计算
语法 ++变量名
后自加：先使用变量当前值参与运算，运算完毕后，再将变量的值进行加1
语法 变量名++
注意：不管是前自加还是后自加，最后变量的值都会在原值上加1

var num=50
console.log(++num)//51
console.log(num++)//51
console.log(num)//52

（三）赋值运算符
=：运算过程是将赋值号右边表达式的值，赋值给左边的变量
注意，js中的赋值运算符不是数学上的等于符号！
复合赋值运算符：+=、-=、*=、/=、%=
（四）相比运算符
< 、> 、<= 、>=
将左边两边的表达式进行数据的比较，得到的一定是逻辑值（布尔值）true、false
（五）相等运算符
==、 !=、 ===、 !==
==（相等）：相等运算符在比较左右两边时，如果左右两边的数据类型不同，它会先进行隐式转换将两边的类型统一，再进行比较
===（全等）：全等运算符在比较左右两边时，如果左右两边的数据类型不同，它会直接返回false，不会进行隐式的数据转换

console.log(100=='100')
console.log(100==='100')

console.log(null==null)
console.log(null==undefined)
console.log(null==true)

console.log(null===null)
console.log(null===undefined)
console.log(null===true)

!=（不等）：不等运算符在比较左右两边时，如果左右两边的数据类型不同，它会先进行隐式转换将两边的类型统一，再进行比较
!==（不全等）：不全等运算符在比较左右两边时，如果左右两边的数据类型不同，它会直接返回true，不会进行隐式的数据转换

console.log(5!=5)//false
console.log(5!==5)//false
console.log(5!='5')//false
console.log(5!=='5')//true

（六）逻辑运算符
与（&&）、或（||）、非（！）
将两边表达式进行逻辑比较，得到的也是一个逻辑值！（true、false）
结果：逻辑运算符的结果不一定是true或false，是表达式的计算结果
不管是逻辑与还是逻辑或，它是将表达式的值，作为整个逻辑表达式的值进行返回！
逻辑与&&
表达式1&&表达式2
从左往右，计算表达式1的逻辑值&&表达式2的逻辑值
true&&true==》true
true&&false==》false
false&&false==》false
口诀：一假即假，全真才真
注意：js中的逻辑与是属于短路与，一旦表达式1为false，将不再计算表达式2的运算，直接将表达式1的值进行返回

var num=50
console.log(5>30&&num++<100)
console.log(num)

逻辑或||
表达式1||表达式2
从左往右，计算表达式1的逻辑值||表达式2的逻辑值
true||true==》true
true||false==》true
false||false==》false
口诀：一真即真，全假才假
注意：js中的逻辑或是属于短路或，一旦表达式1为true，将不再计算表达式2的运算，直接将表达式1的值进行返回
不管是逻辑与还是逻辑或，它是将表达式的值，作为整个逻辑表达式的值进行返回！

console.log(5>3&&6>4)//true
console.log(5&&10)//10
console.log(5||10)//5

// console.log(true && true && true && 5 > 30);
// console.log(false || 100 || false || 30);
// console.log(50);
// console.log(Boolean(null));

逻辑非！
逻辑非也是一元运算（单目运算）
注意：如果对一个值连续取反，那么将得到该值的逻辑值

console.log(!!50);//true

（七）条件运算符
条件运算符（三目运算符）： 表达式1 ？ 表达式2 ： 表达式3
计算过程：
首先计算表达式1的逻辑值
如果为true 那么将表达式2的值作为整个条件表达式的值进行返回，反之则将表达式3的值做整个条件表达式的值返回

var res =  5>3 ? 20 : 30
console.log(res);//20

（八）括号运算符
括号也是一种运算符，并且优先级最高，有括号先算括号

console.log(5+2*10)//25
console.log((5+2)*10)//70

（九）逗号运算符
,在大多数时候是作为分隔符使用的，比如多个变量的声明时var a,b,c,;
,也可以作为运算符使用
,表达式的值是将最后一个表达式的值作为整个逗号表达式的值返回
表达式1,表达式2,表达式3

var res = (1,2,5>3)
console.log(res);//true
var res = (1,2)
console.log(res);//2
var res = (1,null)
console.log(res);//null
var res = (1,undefined)
console.log(res);//undefined

六、流程控制语句

（一）顺序结构

js代码整体的运行轨迹是从上往下依次执行的！

（二）选择结构

单分支：if语句
双分支：if…else语句
多分支：if…else语句的嵌套
条件分支：switch…case

（三）循环结构

for、while、do…while

七、函数

函数：封装好的一段可以反复调用的代码块！并且可以对数据进行处理实现某种功能！
①封装好的
②重复使用
③实现某种功能或者目的

（一）创建与声明

//无参函数
function 函数名（）{
​	函数体：
​	语句；
​	语句；
​	......
}

//有参函数
function 函数名（形参函数）{
​	函数体：
​	语句；
​	语句；
​	......
}

（二）调用函数

语法 ：函数名（）
注意：不管该函数有没有形参，函数名后面的小括号都必须写上！
只有写上小括号该函数才会被调用执行！
形参（形式参数）：形参也是一个变量，形参默认情况下初始值是undefined
实参（实际参数）：实参是在函数被调用时传入的参数数据
传参规则
三一原则
​ ①遵循参数的顺序一致
​ ②遵循参数的个数一致
​ ③遵循参数的类型一致
函数返回值
函数是一个表达式，函数表达式默认的返回值是undefined

function fun(){
    console.log(666)
}
console.log(fun())//undefined

如果需要指定返回值，请使用return语句将数据返回
return 表达式

function fun(){
    console.log(666)
    return []
}
console.log(fun())//[]

return语句除了可以指定函数的返回值，还可以结束当前函数的执行

function fun(){
    console.log(666)
    return
    console.log(777)
}
fun()
//console.log(fun())

（三）匿名函数

正常函数的创建和声明

function fun(){
    console.log(666)
}

匿名函数的创建

var myfun=function(){
    console.log('xxx')
}
fun()
myfun()

（五）函数参数传递

函数的参数传递分为两种情况：
1.值传递
当函数在调用时，实参数据是基本数据类型时，这是传递给形参的是值，两个独立的空间
当函数在运行中改变了形参变量是不会影响到实参变量的
2.引用（地址）传递
当函数在调用时，实参数据是引用数据类型时，这是传递给形参的是地址值，共享一个空间
当函数在运行中改变了形参变量是会影响到实参变量的

八、作用域&作用域链

（一）作用域

作用域：var声明的变量以及function声明的函数在声明创建的时候，其作用域就已经确定了！
JavaScript中在现在学习的阶段下：无函数，不作用域！
（1）全局作用域
（2）函数作用域
作用域的作用是划分变量和函数的使用区域和执行环境！

（二）作用域链

作用域链：将多个作用域进行关联，形成一个隐式的链条，通过这个链条可以访问到上级作用域
注意：作用域链是从里往外依次寻找，不能从外往里找

var a=100
function fun(a){
    console.log(a)
}
fun(200)//200

var a=100
function fun(){
	a=300
    console.log(a)//300
}
fun()
console.log(a)//300

注意：var可以在当前的作用域声明该作用域下的变量

function fun(a){
	var a
	a=200
    console.log(a)//300
}
fun(300)
console.log(a)//找不到a

函数嵌套时的作用域链
注意：函数的作用域只和创建和声明时的位置有关，和函数在哪里执行无关！
全局作用域是无法访问到函数作用域中的变量，或者函数的！
函数作用域可以通过作用域链对全局作用域进行访问

var a=100
function fun1(a){
    console.log(a)//300
    function fun2(){
        console.log(a)//300
    }
    fun2()
}
fun1(300)
console.log(a)//100

全局作用域无法访问函数作用域下的变量或者函数
同级作用域无法相互访问

        // function fun1(){
        //     var a = 100
        //     console.log(b)
        // }
        // function fun2(){
        //     var b = 200
        //     console.log()
        // }
        // fun1()
        // fun2()

（三）js的预解析

js的代码并不是一上来就马上开始解释执行，而是在执行前有一个短暂的预解析的过程
预解析中主要做以下事情：
​ 1.构建全局对象
​ 2.寻找当前作用域下所声明的所有的var 声明变量 以及 function声明的函数，将他们提前到当前作用域开始的位置

将var声明的变量提前到当前作用域开始的位置，其他的操作还是待在原处
console.log(a)
var a=100
console.log(a)

//var a
//console.log(a)
//a=100
//console.log(a)

九、原型&原型链

（一）原型属性

原型属性，每一个对象身上都具备一个属性，该属性称作为原型属性！
原型属性有两类：
（1）显式原型属性 (prototype)
注意:每一个函数都具备 prototype,并且还具备__proto__
（2）隐式原型属性 (__proto__)
注意：每一个实例对象，都具备 __proto__

（二）原型对象

原型对象：存放在prototype属性或者__proto__属性中的对象，称作为原型对象
prototype，存放在该属性中的对象称作为显式原型对象
__proto__，存放在该属性中的对象称作为隐式原型对象
显式原型对象（prototype）的作用：
（1）当函数作为构造函数使用，该属性才发发挥作用，如果是普通函数执行，原型对象毫无作用
（2）当函数作为构造函数时，会创建一个实列的空对象，创建好空对象后，就会把 prototype中指向的原型对象赋值给 空对象的__proto__属性中，这样被创建好的空对象就具备了自己的原型对象！

（三）原型链

原型链：JavaScript通过每个实例对象上的__proto__隐式原型属性，将原型对象进行链接，在通过原型对象的原型属性再进行链接，以此往复，直到最终的null，这样便形成了JavaScript中的原型链！
原型链的寻找一定是通过实例对象的__proto__去寻找的！