目录
#计算机基础
编程语言
编程语言:有固定的格式和词汇。分为汇编语言和高级语言两种形式
编程语言和标记语言的区别
编程语言有很强的逻辑和行为能力,是主动的
标记语言不用向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的是被动的。
计算机基础
数据存储单位
bit < byte < kb < GB < TB <...
位(bit) 1bit可以保存一个0或者1(最小的存储单位)
字节(bit) 1B = 8b
千字节(KB) 1KB = 1024B......
程序运行
打开某个程序时,先从硬盘中把程序的代码加载到内存中;CPU执行内存中的代码
之所以要内存的一个原因是因为CPU运行太快了,如果只从硬盘中读取数据会浪费cpu性能,所以才使用读取速度更快的内存来保证运行时的数据(内存是电,硬盘是机械)
#初识JavaSript
初识JS
JS是运行在客户端的脚本语言
JS是轻量级编程语言
JS作用:表单动态校验;网页特效;服务器开发(Node.js);桌面程序(Electron);App;控制硬件-物联网;游戏开发
浏览器执行JS简介
浏览器分为两部分:渲染引擎和JS引擎
渲染引擎:用来解析HTML与CSS,俗称内核
JS引擎:也称为JS解释器,用来读取网页中JS代码,处理后运行
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言中会逐行解释执行。
JS组成
ECMAScript:JS语法
DOM:页面文档对象模型
BOM:浏览器对象模型
JS三种表现形式
行内式JS
可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)
注意单双号引用:在HTML中推荐双引号,JS中推荐单引号
多层引号嵌套匹配时要注意
内嵌JS
<script>
</script>
外部JS文件
<script src="my.js"></script>
标签中间不可以写代码
JS注释
单行注释 //
多行注释 /**/
JS输入输出语句
alert() :浏览器弹出警示框
console.log() :浏览器控制台打印输出信息,程序员测试用
prompt() :浏览器弹出输入框,用户可以输入
#变量
变量概述
本质:变量是程序在内存中申请的一块用来存放数据的空间
变量的使用
声明变量:var age;
赋值
变量初始化:var age = 10;
变量语法扩展
更新变量:一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
声明多个变量:多个变量名之间用英文逗号隔开
声明变量的特殊情况:
只声明不赋值:undefined
不声明不赋值:会报错
不声明直接赋值:可以使用,但不提倡
变量命名规范
由字母、数字、下划线、美元符号($)组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
变量名必须有意义
遵守驼峰命名法:首字母小写,后边单词首字母大写
#数据类型
数据类型简介
在计算机中,不同数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,定义了不同的数据类型。
JS的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的。
JS是动态语言,变量的数据类型是可以变化的。
简单数据类型
Number 数字型
数字型进制
八进制:数字前边加0表示八进制。 var num1 = 010;
十六进制:数字前边加0x。
数字型范围
alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE); //最大值最小值写法是固定的
数字型三个特殊值
Infinity:代表无穷大,大于任何值
-Infinity:代表无穷小
NaN:Not a number,代表一个非数值
isNaN() :这个方法用来判断非数字,并且返回一个值。是数字返回false。
String字符串型
推荐使用单引号
引号嵌套:外双内单,外单内双
字符串转义符
字符串长度:使用length属性获取字符串长度
字符串拼接:+ 只要有字符串和其他类型相拼接,最终的结果是字符串类型 -- 数值相加,字符相连
Boolean
Undefined
若创建一个变量声明未赋值,就是undefined,未定义数据类型
console.log(undefined + 'pink'); // undefinedpink
console.log(undefined + 1 ); // NaN
Null
给一个声明变量Null值,里边存的值为空
console.log( Null + 'pink' ); // Nullpink
console.log( Null + 1 ); // 1
获取变量数据类型
typeof
console.log(typeof null); // object
prompt 取过来的值是字符型的
字面量:字面量是在源代码中一个固定值的表示法,表示如何表达这个值
数字字面量:8,9,10
字符串字面量:‘前端’
布尔字面量:true、false
数据类型转换
通常会用到三种:转换为字符串类型、转换为数字型、转换为布尔型
转换为字符串
加号拼接字符串(隐式转换):alert(num + '');
转换为数字型(重点)
parseInt 是取整(不是四舍五入),还会去掉单位
转换为布尔型
- 代表空的、否定的值都会被转换为false,如''、0、NaN、null、undefined
- 其余值都会被转换为true
#拓展
解释型语言和编译型语言
标识符、关键字、保留字
标识符:开发人员为变量、属性、函数、参数取的名字,不能使关键字或保留字
关键字:JS本身已经使用的字
保留字:预留的“关键字”
#操作符
算数运算符
避免直接用小数运算
console.log(0.1 + 0.2); //0.3000000000004
浮点数值的最高精度是17位小数,但是进行算数计算时其精确度远远不如整数
不要直接判断两个浮点数是否相等(计算机将其转化为二进制,比较时精度会有误差)
递增和递减运算符
在JavaScript中,递增(++ )和递减( --)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
++a,先加1后返回值;a++,后加1先返回值
// 后置自增 先表达式返回原值 后面变量再自加1
比较运算符
==(会转型) :==默认转换数据类型,会把字符串型的数据转换为数字型
=赋值、==判断、===全等
逻辑运算符
短路运算(逻辑中断)
当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
逻辑与&& :如果表达式1为真,则返回表达式2;如果表达式1为假,则返回表达式1
逻辑或|| :如果表达式1为真,则返回表达式1;如果表达式1为假,则返回表达式2
赋值运算符
运算符优先级
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
#流程控制—分支
三元表达式
语法结构: 条件表达式?表达式1 : 表达式2
分支流程控制switch语句
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
1.开发里表达式经常写成变量
2.表达式的值与case值匹配的时候是全等 ===
3.如果当前case里没有break则不会退出switch,继续执行下一个case
switch语句和if elseif语句区别
1.一般情况下,它们两个语句可以相互替换
2.switch...case语句通常处理case为比较确定值的情况,而if...else...语句更加灵活,常用于范围判断(大于、等于某个范围)
3.switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if..else语句有几种条件,就得判断多少次。
4.当分支比较少时,if...else语句的执行效率比switch语句高。
5.当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。
#循环
学会打断点
浏览器中按F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
continue break
break:退出整个循环
continue:跳过本次循环体中余下尚未执行的语句,立即进行下一次循环条件判定。也可以理解为仅结束本次循环
#JS命名规范
标识符命名规范
变量、函数的命名必须有意义
变量名称一般用名词;函数命名一般用动词
#数组
数组的概念
数组是指一组数据的集合,其中每个数据被称为元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式
创建数组
利用new创建数组
var arr = new Array();
利用数组字面量创建数组
var 数组名 = [];
数组长度
数组名.length
arr.length动态监测数组元素的个数
#函数
函数的使用
function 函数名() { //函数体 }
函数名一般是动词
函数的封装:是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
函数的参数
形参是接收实参的
函数形参和实参的匹配问题
如果实参的个数多于形参的个数,会取到形参的个数
如果实参的个数小于形参的个数,多的形参定义为undefined(相当于实量+undefined会返回NaN)
函数的返回值
return终止函数:return之后的代码不会被执行
return只能返回一个值(若有多个值,则返回最后一个)
函数没有return,返回undefined
break、continue、return的区别
break:结束当前的循环体(如for、while)
continue:跳出本次循环,继续执行下次循环(如for、while)
return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码
arguments的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中, arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
function fn() {
console.log(arguments)
}
fn(1,2,3);
//返回值为Arguments(3)[1,2,3]
可以按照数组的方式遍历arguments
arguments展示形式是一个伪数组。
伪数组特点:具有length属性;按索引方式存储数据;不具有数组的push,pop方法
只有函数才有arguments对象,而且每个函数都内置好了
函数的两种声明方式
1.利用函数关键字自定义函数(命名函数)
function fn() {
}
//声明
fn();//调用
2.函数表达式(匿名函数)
var 变量名 = function(){}
var fun = function(){
console.log('123')
}
//调用
fun();
fun是变量名不是函数名
函数表达式声明方式跟声明变量差不多,只不过变量里存的是值,函数表达式存的是函数
函数表达式也可以传递参数
#作用域
作用域
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高少程序透辑的局部性,增强了程序的可靠性,减少了名字冲突。
JS作用域:代码名字(变量)在某个范围内起作用和效果
JS作用域(es6)之前:全局作用域 局部作用域
全局作用域
整个script标签或者一个单独的js文件
局部作用域(函数作用域)
在函数内部就是局部作用域
变量的作用域
全局变量
在全局作用域下的变量;在函数内部没有声明直接赋值的变量
局部变量
在局部作用域下的变量;函数形参也可以看成局部变量
从执行效率来看全局变量和局部变量
(1)全局变量只有浏览器关闭的时候才会销毁,比较占内存资源
(2)局部变量当我们程序执行完毕就会销毁,比较节约内存资源
现阶段JS没有块级作用域
JS是在es6的时候新增的块级作用域
块级作用域{ }
作用域链
- 只要是代码就有一个作用域
- 写在函数内部的就是局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链(就近原则)
#预解析
预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。
预解析:JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面
代码执行:按照代码书写的顺序从上往下执行
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
(1)变量提升就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
(2)函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数
变量预解析和函数预解析
#对象
对象
对象是一个具体的事物
JS中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象。例如字符串、数值、数组、函数等。
创建对象的三种方式及使用
利用字面量{}创建对象
var obj={};
//创建了一个空的对象
var obj = {
uname:'sun',
age: 18,
sex: 'man',
sayhi: function() {
console.log('hi');
}
}
- 里边的属性或者方法采取键值对的形式 属性名 : 属性值
- 多个属性或者方法中间用逗号隔开
- 方法冒号后边跟的是一个匿名函数
使用对象
1.调用对象的属性
对象名.属性名
对象名[ '属性名' ]
2.调用对象的方法
对象名.方法名() //别忘了括号
利用new Object创建对象
var obj = new Object();
//创建了一个空的对象
obj.uname = 'sun';
obj.age = 18;
obj.sex = 'man';
obj.sayHi = Function() {
console.log('hi');
}
- 等号赋值的方法添加对象的属性和方法
- 每个属性和方法之间用分号结束
利用构造函数创建对象
使用构造函数原因:前面两种创建对象的方式一次只能创建一个对象
构造函数∶是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
function 构造函数名() {
this.属性 = 值;
this.方法 = function(){}
}
调用对象:new.构造函数名();
- 构造函数名字首字母大写
- 构造函数不需要return就可以返回结果
- 调用构造函数必须使用new
- 只要new Star() 调用函数就创建一个对象
- 属性和方法前面必须添加this
利用构造函数创建对象的过程我们也称为对象的实例化
new关键字
1. new 构造函数可以在内存中创建了一个空的对象
2. this 就会指向刚才创建的空对象
3.执行构造函数里的代码 给这个空对象添加属性和方法
4.返回这个对象(所以构造函数里不需要return)
遍历对象属性
for...in 语句用于对数组或者对象的属性进行循环操作
for(变量 in 对象)
//for(变量 in 对象)
for(var k in obj) {
console.log(k); // k变量输出得到的是属性名
console.lob(obj[k]); // obj[k] 得到是属性值
}
我们使用for in里面的变量我们喜欢写k或者key
#内置对象
内置对象
JS中对象分为3种:自定义对象、内置对象、浏览器对象(JS独有)
内置对象:JS语言自带的一些对象,供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
Math对象
不是一个构造函数,不用new调用,直接使用即可
random()方法
返回一个随机的小数(浮点数),伪随机数范围 [0,1)
方法里不跟参数
得到一个两数之间的随机整数,包括两数在内
function getRandomIntInclusive(min,max){
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
日期(Date)对象
Date是一个构造函数,必须使用new来调用创建我们的日期对象
var date = new Date();
参数常用写法:数字型 2019,10,01 或者是 字符串型 ‘2019-10-1 8:8:8’
(数字型的返回值会比输入的大一个月)
如果括号里面有时间,就返回参数里面的时间。
例如日期格式字符串为‘2019-5-1’,可以写成new Date(2019-5-1)或者new Date(2019/5/1)
记得月份+1
获得Date总的毫秒数(时间戳)
Date对象是基于1970年1月1日(世界标准时间)起的毫秒数
1.通过valueOf() getTime()方法
2.简单的写法(最常用的写法)
var date1 = +new Date();
//返回的就是总的毫秒数
3.H5新增方法
console.log(Date.now());
数组对象
创建数组的两种方式
1.利用字面量
var arr = [1,2,3];
2.利用new Array()
var arr1 = new Array();
var arr1 = new Array(2); //这个2表示数组的长度为2 里边有2个空的数组元素
console.log(arr1);
var arr1 = new Array(2,3); //等价于[2,3] 这样写表示里面有2个数组元素是2和3
检测是否为数组
1. instanceof 运算符 可以用来检测是否为数组
var arr = [];
console.log(arr instanceof Array); //true
2. Array.isArray(参数) H5新增方法
此方法优先于1
添加删除数组元素的方法
1. push() 在数组末尾添加一个或者多个数组元素
var arr = [1,2,3];
arr.push(4); //参数直接写数组元素即可
console.log(arr); //1,2,3,4
push()参数直接写数组元素即可;push完毕之后返回的结果( console.log(arr.push()) )是新数组的长度;原数组也会发生变化
2. unshift() 在数组的开头添加一个或者多个数组元素
unshift()返回的结果也是数组的长度
3. pop() 删除数组的最后一个元素
返回值是删除的元素
4. shift() 删除数组的第一个元素
返回值是删除的元素
数组排序
1.翻转数组 reverse()
var arr = [1,2,3];
arr.reverse();
console.log(arr); //
2.数组排序(冒泡排序)
var arr = [13,4,77,1,7];
arr.sort(function(a,b)){
//return a-b; 升序排序
return b-a; //降序排序
}
若直接使用sort函数 则返回值为[1,13,4,7,77]
数组索引
1. indexOf(数组元素)
var arr = [1,2,3];
console.log(arr.indexOf(1));
它只返回第一个满足条件的索引号;若无满足条件的则返回-1.
2.lastIndexOf(数组元素)
从最后开始查找
数组去重
function unique(arr) {
var newArr = [];
for(var i = 0;i<arr.length;i++){
if(newArr.indexOf(arr[i]) === -1)
newArr.push(arr[i]);
}
return newArr;
}
var demo = unique([1,3,5,7,1,3,5,8,9]);
console.log(demo);
数组转换为字符串
1. toString()
var arr = [1,2,3];
console.log(arr.toString()); // 1,2,3
2. join('分隔符')
其他
字符串对象
基本包装类型
把简单数据类型包装成复杂数据类型,使基本数据类型有了属性和方法
var str = 'andy';
console.log(str.length);
对象才有属性和方法 复杂数据类型才有属性和方法
(1)把简单数据类型包装秤复杂数据类型
var remp = new String('andy');
(2)把临时变量的值给str
str = temp;
(3)销毁这个临时变量
temp = null;
字符串的不可变
看上去是变了实际上是在内存中新开辟了一块地方
因为字符串不可变所以不要大量拼接字符串
根据字符返回位置
字符串的所有方法都不会修改字符串本身(字符串是不可变的),操作完成会返回有一个新的字符串
根据位置返回字符
字符串操作方法
字符串替换
1.替换字符 replace(‘被替换的字符’,‘替换为的字符’)
只会替换第一个字符
var str1 = 'odsnofsoosvd'
while(str1.indexOf('o') !== -1){
str1 = str1.replace('o','*');
}
2.字符转换为数组 split(‘分隔符’) //join() 把数组转换为字符
#简单数据类型与复杂数据类型
简单类型与复杂类型
简单类型又叫基本数据类型或值类型
复杂类型又叫做引用类型
值类型:在存储时变量存储的是值本身
特殊:简单数据类型null 返回的是一个空的对象(object)
所以如果有个变量我们以后打算存储为对象,暂时没想好放什么,这个时候就给null
引用类型:在存储时变量中存储的仅仅是地址(引用)
通过new关键字创建的对象(系统对象、自定义对象)
堆和栈
简单数据类型放在栈,栈里直接存放值。
复杂数据类型放在堆,首先在栈里存放地址,用十六进制表示,这个地址指向堆里面的数据
在JS里没有堆栈的感念
简单类型传参
函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
运行结果为11 10
复杂类型传参
函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。
995/2885