计算机基础
计算机
- 硬件
- 输入/输出设备,CPU,硬盘,内存
- 软件
- 系统软件
- Windows, Linux, macOS
- 应用软件
- 浏览器,QQ,VSCode
- 系统软件
程序运行
硬盘(很慢)->内存条->CPU(很快)
初识JS
js是一门脚本语言
(1) 不需要编译,运行过程由js引擎逐行来进行解释并执行
(2)nodejs做服务端
浏览器执行JS
-
浏览器分成两部分 1.渲染引擎 用来解析HTML和CSS,俗称内核 2.JS引擎 JS解释器,用来读取网页中的JS代码,对其处理后运行,比如chrome浏览器的V8 浏览器通过内置JS执行JS代码,逐行解释每一句源码,然后计算机去执行。
JS组成
(1)ECMAScript
(2)DOM(Document Object Model)
通过DOM提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等)
(3)BOM(Browser Object Model)
通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
JS书写位置
(1)行内
(2)内嵌
(3)外部
<head>
<!--2.内嵌-->
<script>
alert('熊阳阳')
</script>
<!--3.外部-->
<script src="my.js"></script>
</head>
<body>
<!--1.行内-->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')"/>
</body>
JS注释
1. 单行注释 // ctrl+/
2. 多行注释 /**/ shift+alt+a
JS输入输出语句
1.alert(msg) 浏览器弹出警示框
2.console.log(msg) 浏览器控制台打印输出信息---给程序员测试用的
3.prompt(info) 浏览器弹出输入框,用户可以输入
变量
数据类型
简单数据类型
-
Number, Null, Boolean, String, Undefined,Symbol
1. Number 1.1整数 1.1.1八进制 var num = 010; 1.1.2十六进制 var num = 0xa; 1.1.3数值的最大值 Number.MAX_VALUE; 数值的最小值 Number.MIN_VALUE; 1.1.4数字型的三个特殊值 Infinity,代表无穷大,大于任何值 -Infinity NaN 1.1.5 isNaN()判断是否是数字,返回false,true 1.2浮点数 2. String 2.1 可单引号可双引号 --JS推荐单引号 2.2 字符串转义字符,以\开始,写在引号里面 'I am \n Xiong' 2.3 检测获取字符串的长度,age.length 2.4 字符串拼接 字符串+任何类型=拼接之后的字符串 2.4.1 (任何类型)会被转换为字符串,再进行拼接
复杂数据类型
数据类型转换
转字符串
1. num.toString()
2. String(num)
3. num+'我是字符串' --和字符串拼接的结果都是字符串
转数字型
1. parseInt('78')
2. parseFloat('78.21')
3. Number('12.3')=>12.3
4. js隐式转换(-,*,/) ‘12’-0
转布尔型
1. Boolean()函数
代表空、否定的值会被转换为false,如‘’,0,NaN, null, undefined, 其余会被转换为true
流程控制
1.顺序结构
2.分支结构(if, switch)
2.1 if
2.2 if-else
2.3 if-else if-else
3.循环结构
3.1 for
分支流程控制switch语句
//值和value匹配的时候是全等匹配,===,值和数据类型完全匹配
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
do-while
//do-while一定会循环一次
do{
// 循环体
}while(条件表达式)
continue和break
- continue,退出本次循环,继续执行剩余次数的循环
- break, 立即跳出整个循环(循环结束)
数组
创建数组的方式
1. 利用new创建数组
var arr = new Array();
2. 利用数组字面量创建数组
var arr = [];
访问数组元素,arr[0]; //索引值从0开始
若没有该数组元素,输出结果为undefined
var arr1 = new Array(2);//创建一个长度为2的空数组
var arr2 = new Array(2,3);//等价于[2,3]
冒泡排序
// 冒泡排序
var temp = 0;
var arr1 = [1, 3, 2, 5, 6, 2];
for (var i = 0; i <= arr1.length - 1; i++) {
for (var j = 0; j <= arr1.length - 1 - i; j++) {
if (arr1[j] < arr1[j + 1]) {
temp = arr1[j + 1]
arr1[j + 1] = arr1[j];
arr1[j] = temp;
}
}
}
console.log(arr1);
检测是否为数组的两种方式
- instanceof
- Array.isArray(参数)——H5新增的 ie9以上版本支持
数组的API
- reverse()
- sort()——如果是单位数,可以正常排序;如果是双位数,会先按第一位排
console.log([11, 2, 4, 13].sort());//[11,13,2.4]
var arr = [11, 2, 4, 13];
arr.sort(function(a,b){
return a-b;
});
console.log(arr);
-
indexOf()和lastIndexOf()
-
数组转字符串
4.1 arr.toString(), String(arr)
4.2 arr.join(‘|’)
函数
函数形参和实参匹配问题
1. 如果实参的个数多于形参的个数,会取到形参的个数(也就是说,多的实参派不上用场)
2. 如果实参的个数小于形参的个数,(形参相当于不用声明的变量,此时又没有给它赋值,就变成undefined了,参与运算)
函数返回值的问题
1. 函数内部不应该有输出语句的,所以需要把结果return出去
2. return语句之后的代码不被执行
3. return只能返回一个值,如果用逗号隔开多个值,以最后一个为准
4. 所以有多个返回值的时候,可以放在一个数组里,return数组就可以啦
5. 函数如果有return,返回的是return后面的值;如果没有return,返回undefined
6. return max; (带个分号)
break, continue, return的区别
- break:结束当前的循环体(for, while)
- continue: 跳出本次循环,继续执行下次循环(for, while)
- return: 不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码
arguments的使用
- 所有函数都内置了一个arguments对象(只有函数才有arguments),arguments对象中存储了传递的所有实参;当不知道传入的实参的个数(实参个数会变,或者不清楚具体几个),就可以不设置形参,在函数体内部直接用arguments去获得传入的实参
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有一下特点:
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push,pop等方法(没有真正的数组的方法)
function f1() {
console.log(arguments)
}
f1(1, 2, 3, 4);
函数的两种声明方式
//1. 利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
//2. 函数表达式(匿名函数)
// var 变量名 = function(){};
var fun = function(){};
fun();
var fun = function(aru){};
fun('pink老师');
//(1) fun是变量名不是函数名
//(2) 函数表达式和声明变量差不多,只不过变量里面存放的是函数
//(3) 函数表达式也可以传递参数的
JS作用域
js的作用域(es6)之前:全局作用域,局部作用域
- 全局作用域:整个script标签,或者是一个单独的js文件
- 局部作用域:在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和作用
es6之前没有块级作用域,es6新增的块级作用域
- 块级作用域:{} if{} for{}
全局变量与局部变量
- 全局变量
在全局作用域下的变量,在全局下都可以使用
注意:
在函数内部,没有声明(没用var),直接赋值的变量也属于全局变量 - 局部变量
在局部作用域下的变量,后者在函数内部的变量就是局部变量
局部变量只能在函数内部使用
注意
函数的形参也可以看作是局部变量 - 从执行效率来看全局变量和局部变量
(1)全局变量只有在浏览器关闭时才会销毁,比较占内存资源
(2)局部变量 当我们程序执行完毕就会销毁,比较节约内存资源
作用域链
作用域链
定义:内部函数访问外部函数的变量,采取的时链式查找的方式来决定取哪个值,这种结构我们称为作用域链。(就近原则)
JS预解析
其中:3问,是直接函数声明的方式
fn()
function fn(){
console.log(11);
}
经过函数提升后,就变成了
function fn(){
console.log(11);
}
fn()
//所以,fn()调用放在哪里都是可以的,但是如果是函数表达式那种方式,相当于是把function赋值给变量名xxx
//被提升也是变量声明提升,所以会报错
解析器运行js分为哪两步(预解析)
1. js引擎运行js分为两步:预解析,代码执行
(1)预解析:js引擎会把js里面所有的var还有function提升到当前作用域的最前面
(2)代码执行:按照代码书写的顺序从上往下执行
2. 预解析分为:变量预解析(变量提升)和函数预解析(函数提升)
(1)变量提升:把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
(2)函数提升:把所有的函数声明提升到当前作用域的最前面,不调用函数
变量,函数提升后,相当于以下情况,注意,b和c前面没有var,不同于集体声明
对象
- 在js中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象
- 对象是由属性和方法组成的
变量、属性、函数和方法的区别
- 变量和属性都是用来存储数据的
1.1 变量 单独声明并赋值,使用的时候直接写变量名,单独存在
1.2 属性 在对象里面的不需要声明的,使用的时候必须是 对象.属性 - 函数和方法都是实现某种功能,做某件事
2.1 函数是单独声明,并且调用的函数名()单独存在的
2.2 方法,在对象里面,调用的时候,对象.方法()
创建对象的三种方式
利用字面量创建对象
对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法
var obj = {
uname:'熊阳阳',
age:24,
sex:'女',
sayHi:function(){
console.log('hi~')
}
}
//1.调用对象的属性
console.log(obj.uname);
//1.调用对象的属性第二种方法,
console.log(obj['uname']);
//2.调用对象的方法 sayHi ,不要忘记()
obj.sayHi();
利用new Object创建对象
var obj = new Object();//创建了一个空的对象
obj.name = '熊阳阳';
obj.sayHi = function(){
}
//分号结尾
利用构造函数创建对象
由于前面两种创建对象的方式,一次只能创建一个对象,所以想要把创建对象中相同的部分封装成函数,多次调用,创建多个对象
function Person(uname,age,content){
this.uname = uname;
this.age = age;
this.sayHi = function(content){
console.log(content)
}
}
var xyy = new Person('熊阳阳',24,heihei);
console.log(xyy.name);
xyy.sayHi();
//1.构造函数名字首字母大写
//2.构造函数不需要return就可以返回结果
构造函数和对象的区别
- 构造函数是一大类(比如明星),对象是某个具体的(佐佐木希,石原里美)
- 利用构造函数创建对象的过程也称为对象的实例化
new关键字执行过程
new里面执行了返回这个return,所以不需要再添加return了。
for-in遍历对象
var obj = {
name:'pink',
age:18
}
for(var k in obj){
console.log(k);//得到的是属性名
console.log(obj[k]);//得到的是属性值
}
//for in 一般用key 或k
内置对象
JS中的对象分3种:自定义对象、内置对象、浏览器对象
自定义对象——就是我们前面自己创建的啦
浏览器对象——是JS特有的
内置对象——JS种自带的对象,提供了一些常用的最基本的属性和方法(Math,Date,Array,String等)-MDN查
自己封装数学对象
var myMath = {
PI: 3.1415926535,
Max: function () {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i]
}
}
return max;
}
}
console.log(myMath.PI);
console.log(myMath.Max(1, 3, 5, 2, 6));
Math
- Math.abs(‘-1’)—1 //隐式转换
- Math.abs(‘pink’)—NaN
注意,round四舍五入,.5是往大了取,对于-1.5来说,-1大一些,所以是-1 - Math.round(1.5)— 2
- Math.round(-1.5)— -1
- Math.round(-1.1)— -1
Date
Date是一个构造函数,必须要用new,和Math是不一样的
倒计时
基本包装类型(String,Number,Boolean)
var str = 'andy';
console.log(str.length);
//对象才有属性和方法,即复杂数据类型才有 属性和方法
//简单数据类型为什么会有length属性呢?
//基本包装类型:就是把简单数据类型 包装成为了 复杂数据类型
//上述两行代码,相当于
var temp = new String('andy');//把简单数据类型包装为复杂数据类型
str = temp;//把临时变量的值 给str
temp = null;//销毁这个临时变量
//js中提供了三个特殊的引用类型,String, Number, Boolean
字符串的不可变
- 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间
- 所以不要大量的给字符串重新赋值
String的API
//统计出现次数最多的字符
var str = 'abcoefoxyozzopp';
var obj = {};
for (var i = 0; i < str.length; i++) {
if (!obj[str[i]]) {
obj[str[i]] = 1
} else {
obj[str[i]]++
}
}
var key;
var value = 0;
for (var k in obj) {
if (obj[k] > value) {
value = obj[k];
key = k;
}
}
console.log(key, value)
强啊o( ̄▽ ̄)ブ
简单类型和复杂类型的区别
- 如果有个变量以后打算存储为对象,暂时没想好放什么,这个时候就给null
值复制和赋址的区别
简单类型传参不会互相有影响
备注
- HTML中推荐使用双引号,JS中推荐使用单引号。
- 外部引入js,
<script src="my.js"></script>
,中间不能写其他内容<script src="my.js">123</script>
,不能这样。 console.log(12+'12')
和console.log('12'+12)
出来的都是‘1212’,只要是字符串和其他类型拼接,一定是变成字符串。- 逻辑与或有逻辑中断的准则,&&的优先级大于||
- 能被4整除且不能整除100的为闰年,或者能被400整除的就是闰年
- == 与===,!=与!==,后面的是严格不等于
- js中换行符’\n’, 空白符’\u0020‘,或者用’\t‘,相当于给每个输出一个tab缩进
- 不同的对象在底层都表示为二进制,在js中二进制前三位都为0的话会被判断为object类型,null的二进制表示全是0,自然前三位也是0,所以执行typeof时返回"object"
- 冒泡排序,5个数字,需要交换4趟,第一趟需要交换四次,第二趟3次,第三趟2次,第四趟1次
- 任何一个数+undefined=NaN。
- return num1>num2? num1:num2 (注意return的位置)