JavaScript
1. JS简介
1.1 js基础简介
1.1.1 是什么?
js是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
1.1.2 做什么?
网页特效、表单验证、数据交互、服务端编程(node.js)
1.1.3 有什么?
ECMAScrpit:规定了js基础语法的规范。
Web APIs:DOM :操作文档 BOM:操作浏览器
权威网站:MDN
1.2 JavaScript书写位置
1.2.1 内部JavaScript
直接写在html文件里面,用script标签包住
规范:script标签写在</body>上面
拓展:alert('你好 ,js')页面弹出警告对话框
<body> • <h1>123</h1> • <!-- 内部 js --> <script> • alert('你好,js') • </script> </body>
1.2.2 外部JavaScript
代码写在以 .js结尾的文件里
语法:通过script标签的src,引入到html页码中
<body> • <h1>456</h1> • <!-- 通过src引入外部 js --> <script src="./my.js"></script> </body>
引入外部js之后,标签内无需在写代码,否则会被忽略。
1.2.3 内联JavaScript
代码写在标签内部,与vue框架书写类似
<button οnclick="alert('月薪过万')">点击我月薪过万</button>
1.3 JavaScript注释
单行注释 ://
多行注释 :/* */
1.4 JavaScript结束符
代表语句结束,英文分号 ; ,可写可不写,换行符(回车)会被识别成结束符,所以一个完整的语句,不要手动换行。
为了统一书写格式,要么每句都不写,要么每句都写(按照团队要求)。
1.5 JavaScript输入输出语法
1.5.1 输出语法:
document.write('要输出的内容'); 向文档中输出,在body(页面)中打印输出的内容。
document可以识别标签
<script> document.write('好的') document.write('<h1>haode</h1>') </script>
alert('要输出的内容');
页面弹出警告对话框
alert('好的')
console.log('控制台打印');
控制台输出语法,程序员调试使用。(网页F12下的控制台)
1.5.2输入语句:
prompt('你是什么方向的开发')
页面弹出输入框
1.6字面量
字面量(literal)是在计算机中描述 事/物
2. 变量
2.1 介绍
是个容器,是程序在内存中申请的一块用来存储数据的小空间。
2.2 变量的基本使用
声明变量:let 变量名;
给变量赋值:
let name name = ‘昂’
可以直接初始化变量
let name = ‘昂’
let不允许多次声明一个变量,但是可以一次声明多个变量。
2.3 变量的命名规则与规范
1.规则:
必须遵守,不遵守就会报错
-
不能使用关键字(let if for...)
-
只能用下划线_,字母,数字,$组成,且数字不能开头
-
字母严格区分大小写,如Age和age是不同的变量
2.规范:
建议,不遵守不会报错,但不符合通识
-
起名要有意义
-
遵守小驼峰命名法
变量拓展-var
let为了解决var的一些问题
var声明:
-
可以先声明在使用(不合理)
-
var声明过的变量可以重复声明(不合理)
-
比如变量提升,全局变量,没有块级作用域等等
结论:以后声明变量我们统一使用let
变量拓展-数组
数组(Array)是一种可以按顺序保存多个数据的数据类型
声明:let 数组名 = [] 可以存储不同类型的数据
let arr = ['刘','关','张', 18]
取值:数组名[下标]
console.log(arr[1])
3. 数据类型
3.1 JS中的基本数据类型
3.1.1 number 数字型
JS中的正数、负数、小数等 统一称为数字类型。JS是弱数据类型,变量到底属于那种类型,当赋值之后,我们才能确认。Java是强数据类型 例如int a = 3;就必须是整数。
3.1.2 string 字符串型
通过单引号('')、双引号("")或反引号(``)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
字符串拼接:使用 + 号拼接(比较麻烦)
console.log('大家好,我叫'+str+',今年'+age+"岁")
模板字符串:作用 也是拼接字符串,简化之前的+号拼接字符串
``反引号包裹整个语句(英文模式下的波浪号),拼接变量时用${}包裹变量。
console.log(`大家好,我叫${name},今年${age}岁`)
3.1.3 boolean 布尔型
只有两个值true 和 false
3.1.4 undefined 未定义型
只声明,不赋值,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined。
开发场景:如果检测变量是undefined就说明没有值传过来。
3.1.5 null 空类型
null表示值为空
null和undefined的区别:
undefined表示没有赋值
null表示赋值了,但是内容为空
开发场景:如果一个变量里面确定存放的是对象,如果还没准备好对象,可以先放个null。
typeof 关键字检测数据类型
let age = 18 let name = 'aaa' let boo = true let un let nu = null console.log(typeof age) //number console.log(typeof name) //string console.log(typeof boo) //boolean console.log(typeof un) //undefined console.log(typeof nu) //object
3.2 JS中的引用数据类型
-
object 对象
-
function 函数
-
array 数组
4. 类型转换
JS是弱类型数据语言:JS也不知道变量到底属于那种数据类型,只有赋值了才清楚。
注意:使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。
4.1 隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
-
+号两边只要有一个是字符串,都会把另外一个转成字符串
-
除了+以外的算术运算符 比如- * / 等都会把数据转成数字类型
缺点:
-
转换类型不明确,靠经验才能总结
小技巧:
-
+号作为正号解析可以转换成Number
4.2 显式转换
自己写代码告诉系统该转成什么类型
转为数字型:
-
Number(数据)
转成数字类型
如果数据中有其他类型的数据比如字母就会返回NaN(Not A Number)即不是一个数字
NaN也是Number类型的数据,代表非数字
-
parseInt(数据)
只保留整数
-
parseFloat(数据)
可以保留小数
5. 运算符
5.1 算术运算符
+:加
-: 减
*:乘
/:除
%: 取余(前面的数比后面的数小,余数就是前面的数)
先乘除,后加减,从左到右,有括号先算括号。
5.2 赋值运算符
=:将等号右边的值赋给左边,要求昨边必须是一个容器
其他赋值运算符:
+=:加等
-=:减等
*=:乘等
/=:除等
%=:模等
5.3 一元运算符
自增:++ 让变量的值+1
自减:-- 让变量的值-1
i++和++i单独使用没有区别,参与运算就有区别了
i++是先赋值在自增
++i是先自增在赋值
5.3 比较运算符
<:小于
<=:小于等于
==:左右两边是否相等,只要值一样就行,不管数据类型
===:左右两边是否类型和值都相等
!==:左右两边是否不全等
比较结果为boolean,只有true或者false
比较运算符的细节:
-
字符串比较,是比较的字符相对应的ASCII码
从左往右依次比较,如果第一位一样在比较第二位,以此类推,用得少,了解即可
-
NaN不等于任何值,包括他本身
-
尽量不要比较小数,因为小数有精度问题
-
不同类型之间比较会发生隐式转换
5.4 逻辑运算符
逻辑运算符用来解决多重条件判断
&& 逻辑与 一假则假
|| 逻辑或 一真则真
! 逻辑非 真假取反
逻辑运算符中的短路
&& 左边为false就不在执行,直接返回false
|| 左边为true就不在执行,直接返回true
有五个值是当false来看的
1.false 2.数字0 3.'' 4.undefined 5.null
5.5 运算符优先级
优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算数运算符 先* / %后+ -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&& 后| |
7 赋值运算符 =
8 逗号 ,
6. 语句
6.1 表达式和语句
-
表达式:表达式是一组代码的集合,JavaScript解释器会将其计算出一个结果 比如;3+4 i+1
-
语句:比如 if语句 for循环语句 alter()弹出警示框
6.2 分支语句
程序三大流程控制语句
1.顺序结构 2.分支结构 3.循环结构
if分支语句
单分支:
if(表达式){ ... }
多分支:
if(表达式1){ ... } else if(表达式2){ ... }else if(表达式3){ ... }
三元运算符
条件?条件为真返回:条件为假返回
switch语句
switch(表达式){ case 值1:(找到和小括号里数据全等的case值,执行他的代码) 代码1 break ...... default:(所有case走完没有符合的“===”就执行default) 代码n break }
-
switch case语句一般用于等值判断,不适合与区间判断
-
switch case一般需要配合break关键字使用,没有break会造成case穿透
6.3 循环语句
6.3.1 while循环
while(循环条件){ 要重复执行的代码(循环体) } 例: let i = 1 while(i<=3){ document.write('我会循环三次<br>') i++ }
循环三要素
-
变量起始值
-
终止条件(没有终止条件,循环就会一直执行,造成死循环)
-
变量变化量(用自增或者自减 ++ --)
循环退出
-
continue :结束本次循环,进入下一个循环
-
break:跳出整个循环,不在执行循环
6.3.2 do while循环(了解即可)
6.3.4 for循环
for(起始条件;退出条件;变化量){ 循环语句 } for(let i = 0; i <= 10; i++){ document.write('月薪过万<br>') }
for循环和while循环的区别
当如果明确了循环的次数的时候推荐使用for循环 (遍历数组)
当不明确循环的次数的时候推荐使用while循环
循环退出
-
continue :结束本次循环,进入下一个循环
-
break:跳出整个循环,不在执行循环
循环嵌套
for循环中在嵌套一个循环
//外面执行一次,里面执行所有,外面跑一个,里面跑一圈 //外面控制行,里面控制列 for(let w = 0 ; w < 5 ; w++){ for(let n = 0; n < 5 ; n++){ document.write("*") } //每行的**打印完要换行 document.write("<br>") }
6.4 数组
数组(Array)是一种可以按顺序保存多个数据的数据类型
-
元素:数组中保存的每个数据都叫数组元素
-
下标:数组中的数据的编号
-
长度:数组中数据的个数,通过数组的length属性获得
操作数组:
数组本质数据集合,操作数据无非就是 增 删 改 查,语法:
6.4.1 查:
数组[下标]
//1.访问 查 document.write(str[0])
6.4.2 改:
数组[下标] = 新值
//2.改 str[0] = 'cba'
6.4.3 增:
1. arr.push(新增的内容):将一个或多个元素添加到数组的末尾,并返回该数组的新长度
2. arr.unshift(新增的内容):将一个或多个元素添加到数组的开头,并返回该数组的新长度
//数组.push(元素)会将元素添加到末尾,并返回数组长度 document.write(str.push('nba')) //数组.unshift(元素)会将元素添加到开头,并返回数组长度 document.write(str.unshift('nba'))
6.4.4 删:
1. arr.pop()
数组.pop()方法从数组中删除最后一个元素,并返回该元素的值
2. arr.shift()
数组. shift()方法删除数组中的第一个元素,并返回该元素的值
3. arr.splice(操作的下标,删除的个数)
//4.删 //数组.pop()删除最后一个元素,并返回该元素的值 document.write(str.pop()) //数组. shift()方法删除数组中的第一个元素,并返回该元素的值 document.write(str.shift()) // 数组.splice(操作的下标,删除的个数) 删除指定元素 str.splice(1,2)
6.5 冒泡排序
let arr = [6,4,8,2,1,9] //将数组从小到大排序 //外层循环控制趟数,一共循环几次 arr.length - 1 for(let i = 0; i< arr.length-1;i++){ //内层循环控制对比的次数,每一趟要对比几次 arr.length-i-1 for(let j =0 ;j< arr.length-i-1;j++){ //交换变量 if(arr[j]>arr[j+1]){ let temp = arr[j] arr[j] = arr[j+1] arr[j+1] = temp } } } document.write(arr)
7. 函数
7.1 函数简介
函数:function,是被设计为执行特定任务的代码块
说明:函数可以把具有相同或相似逻辑的代码"包裹"起来,通过函数调用执行这些被"包裹"的代码的逻辑,这么做的优势是有利于精简代码方便复用。
7.2 函数使用
function 函数名(){ 方法体 }
函数名命名规范:
-
和变量名基本一致
-
尽量小驼峰式命名法
-
前缀应该为动词
-
命名建议:常用动词约定
函数调用语法:
函数名() 函数一次声明可以多次调用
7.3 函数传参
-
有参函数的声明和调用
调用语法:函数名(传递的参数列表) (多个参数中间用逗号隔开)
-
形参和实参
形参:声明函数时写在函数名右边括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量,实参就是在给变量赋值,开发中尽量保持形参和实参个数一致。
7.4 函数返回值
用return返回数据
语法:return 数据
function fn(){ return 666 } document.write(fn())
注意事项:
-
return后面不接数据或者函数内不写return,函数的返回值是undefined。
-
return能立即结束当前函数,所以return后面的数据不要换行写,return之后也不要在写代码了,不会被执行。
-
return只能返回一个值,需要返回多个值时,要返回数组。
function hh(a,b){ jia = a+b jian = a-b return[jia,jian] } let ab = hh(1,2) document.write(ab)
7.5 作用域
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
全局作用域:全局有效
局部作用域:函数内有效,因为跟函数有关,所以也称作为函数作用域
块级作用域:{}内有效,比如if()}{} 、for(){}中的{}
全局变量:<script>标签内都可以用
局部变量:函数内可以用
块级变量:{}大括号内可以用
注意:1. 如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐。
2. 函数内部的形参可以看做是局部变量
7.6 匿名函数
-
就是没有名字的函数,将匿名函数赋值给一个变量,并且通过这个变量名称进行调用,我们将这个称为函数表达式
语法:
let fn = function(){ //函数体 }
调用:
fn()
-
立即执行函数(避免全局变量之间的污染)
语法:
//方式1 (function(){函数体})(); //方式2 (function(){函数体}()); //不需要调用,立即执行,function()后的小括号放形参,最后面的放实参。 //方式1 (function(){ document.write("立即执行1") })() //方式2 (function(){ document.write("立即执行2") }())
注意:多个立即执行函数之间要用; 分隔开。也就是前一个立即执行函数要以;结尾或者第二个立即执行函数以; 开头。
//方式1 (function(){ document.write("立即执行1") })(); (function(){ document.write("立即执行11") })() //方式2 (function(){ document.write("立即执行2") }()) ;(function(){ document.write("立即执行22") }())
8. 对象
8.1 对象简介
-
对象(object):JavaScript里的一种数据类型
-
可以理解为是一种无序的数据集合
-
用来详细的描述某个事物,比如人(姓名,年龄,身高...)
8.2 对象使用
-
对象声明语法
let 对象名 = {} //声明一个person的对象 let person = {}
-
对象有属性和方法组成
-
属性:信息或叫特征(名词)
-
方法:功能或叫行为(动词)
-
-
属性
let person = { uname: '张三', age: 18, sex: '男' }
-
属性都是成对出现的,包括属性名和值,他们之间使用英文:分隔
-
多个属性之间使用英文,分隔
-
属性就是依附在对象上的变量(外面是变量,对象内是属性)
-
属性名可以使用""或'',一般情况下省略,除非名称遇到特殊符号如空格,中横线等。
-
-
属性访问
声明对象,并添加了若干属性后,可以使用.或[]获得对象中属性对应的值,称之为属性访问。简单理解就是获得对象里面的属性值。
//对象.属性名 document.write(person.uname) //对象['属性名'] document.write(person['age'])
-
对象中的方法
数据行为性的信息称为方法,如跑步,唱歌等,一般是动词性的,其本质是函数。
-
方法是由方法名和函数两部分组成,他们之间使用:分隔
-
方法是依附在对象中的函数
-
方法名可以使用""或'',一般情况下省略,除非名称遇到特殊符号如空格,中横线等。
//声明人对象 let person = { uname: '张三', age: 18, sex: '男', //方法名:function(){} paoBu: function(){ document.write("跑步啦") } }
-
-
对象中方法的访问
在对象中声明方法后我们可以调用它
//调用方法:对象名.方法名() person.paoBu()
8.3 操作对象
8.3.1 查
对象.属性 或者 对象['属性']
对象.方法()
8.3.2 改
对象.属性 = 值
对象.方法 = function(){}
//改 obj.age = 16
8.3.3 增
对象名.新属性名 = 新值
//增 对象.新属性 = 值 obj.sex = '男' //会去对象里面找是否有sex这个属性,如果有则更新值,没有就添加这个属性
8.3.4 删
delete 对象名.属性名
//删 对象. 属性 delete obj.name
8.4 遍历对象
对象没有像数组一样的lebgth属性,所以一无法确定长度。对象里面是无序的键值对,没有规律,不像数组里面有规律的下标。
for in 类似于java的for each
//遍历对象 for in let it = { one: 'java', two: 'php', tree: 'python' } //for(let 变量 in 对象名){} for(let str in it){ //str现在是对象中的属性名,并没有值 console.log(str) //这两个都是去找对象中的str属性,并没有会返回undefined // console.log(it.str) // console.log(it['str']) //console.log(it['str'])[]里面的单引号去掉,得到属性值 console.log(it[str]) }
str:得到的是属性名
it[str]:得到的是属性值
8.5 内置对象
JavaScript内部提供的对象,包含各种属性和方法给开发者调用
内置对象Math
方法有:
-
random:生成0-1之间的随机数(包含0不包括1)
-
ceil:向上取整
-
floor:向下取整
-
round:就近取整
-
max:找最大数
-
min:找最小数
-
pow:幂运算
-
abs:绝对值
-
......
//圆周率 console.log(Math.PI) // 3.141592653589793 //0-1之间的随机数,不包含1 console.log(Math.random()) // 0.10872614067085173 //向上取整 console.log(Math.ceil(1.6)) // 2 //向下取整 console.log(Math.floor(1.6)) // 1 //就近取整(负数时往大取整 例如-1.5 就是-1) console.log(Math.round(1.6)) // 2 //找最大数 console.log(Math.max(1,5,3,4,6,8,94)) // 94 //找最小数 console.log(Math.min(6,5,7,788,55,4)) // 4 //幂运算 console.log(Math.pow(2,2)) // 4 //绝对值 console.log(Math.abs(-5)) // 5