一.计算机基础知识
1.编程语言
机器语言: 0 1
汇编语言: %##&&
高级语言: Java python c c++ c# go php javascript,node andriod objective-c swift
注意点: html css 不是编程语言 标记语言
2.计算机组成
硬件:显示器,… 硬盘 内存
硬盘:可以永久存储数据
内存: 数据计算空间(容器)
软件: 操作系统(windows macOS Linux andriod ios)-> 应用软件(qq,云音乐…)
存储单位: 1G = 1024M 1m= 1024K 1k= 1024B
二.javascript入门
1.概念
javascript是一门运行在’客户端‘,面向对象的 ,事件驱动的,单线程的 编程语言。
2.js的作用
-
表单动态校验(密码强度检测) ( JS 产生最初的目的 )
-
网页特效(webAPI)
-
服务端开发(Node.js)
-
桌面程序(Electron)
-
App(flutter)
-
控制硬件-物联网(Ruff)
-
游戏开发(cocos2d-js)
网站开发:vue.js 微信小程序 react.js
3.js代码是怎么执行
浏览器内核分为两部分:渲染引擎 解析引擎
渲染引擎:解析html css
解析引擎: 解析javascript
4.js的组成
分为三部分:ECMAScript 与 DOM,BOM
1.ECMAScript(欧州机算机标准协会): 制定js的语法规范
2.DOM与BOM: 可以做浏览器上网页特效(webAPI)
了解一下原生javasript有哪些: js基础语法,webAPI, js高级,ajax
5.js代码的书写位置
1.行内式(一般不会写行内式的js,了解即可)
<div onclick="alert(123)">点我</div> //当点击时触发点击事件
2.内嵌式
<script>
这里写js代码
</script>
3.外联式
<script src='xxx.js'>不要在这里写js代码</script>
6.js中的注释
1.内行注释 ctrl + /
2.多行注释
7.js的常见的输入方式
alert(‘xxx’) 警式框
console.log(‘xxxx’) 控制台语句
prompt(‘请输入你的信息’) 输入框
confirm(‘你确定要删除码’) 确定选择框
三.js基础
编程的三要素:数据 流程控制 函数
“xiaosa” 18
1.数据
1.1变量
作用
是一个存放数据的空间 , 这个空间只能存放一个数据
变量的使用
// 变量分为两个部分: 变量名 变量值
// 1.声明变量名 var === variable
var age;
// 2.赋值
age = 18;
// 重点:一般连起来写
var age = 18
变量的语法注意点
//1.变量是可以更新的
var myname = "jack"
myname = "rose"
console.log(myname) //rose
//2.一次可以声明多个变量
var myname='tom',age=4,gender="公";
console.log(myname,age,gender)
//3.变量只声明不赋值 结果为undefined
var gender
console.log(gender) //undefined
//4.变量不声明直接打印会报错,除了name和一些特殊的名字
console.log(tel) //报错 age is not defined
变量名的定义规范
规则 |
---|
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name |
严格区分大小写。var app; 和 var App; 是两个变量 |
不能 以数字开头。 18age 是错误的 |
不能 是关键字、保留字。例如:var、for、while |
变量名必须有意义。 MMD BBD nl → age |
重点案例练习:两个变量交换数据
// 两个变量相互交换数据
var a = 10;
var b = 100;
var temp;
temp = a;
a = b
b = temp;
console.log(a,b); // 100 10
1.2 数据类型–重点
在javascript中数据分为两大类,8小类
1.基本数据类型(值类型): 数值型Number 字符串型String 布尔型Boolean 未定义型undefined 空型Null
2.复杂数据类型(引用类型): 对象型Object 数组Array(但是数组也是对象) 函数型 function(){}
变量的数据类型是由变量的值决定的,它是可变的
数值型Number
var a = 100
var b = 99.8;
var c = -10;
进制问题:二进制 八进制 十进制 十六进制
八进制 :数字以0开头
十六进制:数字以0x开头
最大值:Number.MAX_VALUE
最小值:Number.MIN_VALUE
无穷大:Infinity
无穷小:-Infinity
(重点)非数字:NaN (not a number) 不是一个数字 (当一个数据向数值类型转换时,转换不过去,就是NaN)
isNaN函数
//isNaN() 判断 是否 不是一个数字
console.log(isNaN(100)) //false
consolo.log(isNaN('jack')) //true
字符串型String
概述:用单引号或双引号包裹起来的数据就是字符串类型,es6还可以用反引号``来包裹
var str = "我是一个字符串"
var str = '123'
var str = `abc` //反引号可以写变量${变量名}
字符串嵌套
var str = '我是一个"字符串"'
var str = "我是一个\"字符串\""
转义字符:
转义符 | 解释说明 |
---|---|
\n | 换行符,n 是 newline 的意思 |
\ \ | 斜杠 \ |
’ | ’ 单引号 |
" | ”双引号 |
\t | tab 缩进 |
\b | 空格 ,b 是 blank 的意思 |
字符串的长度length (重点)
var str = "我是武汉传智播客的老师"
console.log(str.length) //11
字符串的拼接 ”+“
口决:数值相加,字符相连
var str = "我是"+"老师" //”我是老师"
var str = "pink" + 10 //"pink10"
//左右两边只要有一个字符串就是拼接
字符串拼接加强
建议大家用 反引号+${变量} 这种写法
var age = 18
var str = "我今年"+age+"岁" //"我今年18岁" 不要用这种写法
var str = `我今年${age}岁` //"我今年18岁" 用这种写法
布尔型Boolean
只有两个值 true false
var flag = true
var flag = false
未定义型undefined
var un = undefined // 这个变量有值 但是不知道数据类型
空型Null
var nl = null //这个变量的值是空的
数据类型检测 typeof 或 typeof()
console.log(typeof 10); //number
console.log(typeof(10)); //number
console.log(typeof 'abc'); //string
console.log(typeof(abc)); //string
console.log(typeof true); //boolean
console.log(typeof(false));//boolean
console.log(typeof undefined) //undefined
console.log(typeof null) //object
字面量:
概念:从表面就可以看出这个数据是什么类型
8, "string" true [] {} function(){}
1.3数据类型之间的相互转换
a.基它类型转换为字符串型
1.toString()
var num=10
console.log(num.toString()) //'10'
var flag = true
console.log(flag.toString()) //'true'
2.String()
var num=10
console.log(String(num)) //'10'
var flag = true
console.log(String(flag)) //'true'
3.加上空字符串 + ‘’
var num=10
console.log(num+'') //'10'
var flag = true
console.log(flag+'') //'true'
b.其它类型转换为数值型
parseInt (parse integer)
var str = "520肖战"
console.log(parseInt(str)) //520
var str = "宋祖儿5201314"
console.log(parseInt(str)) //NaN
parseFloat(parse float)
var str = "520.1314肖战"
console.log(parseFloat(str)) //520.1314
var str = "宋祖儿520.1314"
console.log(parseFloat(str)) //NaN
Number
var str = '100'
console.log(Number(str)) //100
隐式转换 - * /
console.log('123' - 0) //123
console.log('123' * 1) //123
console.log('123' / 1) //123
c.其它类型转换为布尔型
Boolean()这个函数转换为布尔型,但是我们一般不用写,因为有隐式转换
哪此值代表false呢?
'',0,NaN,undefined,null 这些值在隐匿转换中都表示假false
1.4运算符
a.算术运算符
加+ 减- 乘* 除/ 取余% 自增 ++ 自减 –
//自增运算符 自身值加1
// 注意点:变量++ var num=10 num++
var num=10
num++ // 11
或
++num // 11
//总结:前置自增与后置自增 单独是一行,没有区别,都是自身变量+1
//1.前置自增:先自增,再返回,
++num
//2.后置自增 : 先返回,再自增
num++
b.比较运算符
大于: >
小于:<
大于等于: >=
小于等于: <=
等于:== (值相等,数据类型有可能不一致)
console.log(10=='10') //true
不等于: !=
全等于:=== (值相等,数据类型也要一致)
console.log(10==='10') //false
不全等于: !== (只要是值不相等或类型不相等,结果为真true)
console.log(10 !== 11); //true
console.log(10 !== '10'); //true
console.log(10 != '10'); //false
c.逻辑运算符
非:! 取反
console.log(!true) //false
console.log(!false) //true
与:&& 两边都为真,结果为真
或:|| 只要有一个为真,结果为真
重点:短路运算 逻辑中断
逻辑与中断 只要是碰到假,就会中断
consoloe.log(123 && 0 && 456) //0
逻辑或中断 只是是碰到真,就会中断
consoloe.log(123 || 0 || 456) //123
案例:
var num = 10;
console.log(123&&''&&num++) //''
console.log(num) //10
d.赋值运算符
赋值:= += -= *= /= %=
var a = 10;
a += "10" //a = a+"10"
a++
console.log(a); // '1010'
e.三元运算符(三目运算符)
语法:
结果 = 条件表达式 ? 表达式1 : 表达式2
当条件表达式为真时,结果是表达式1的值。当条件表达式为假时,结果是表达式2的值
//案例: 求两个数的最大值
var a = 3
var b = 10
var res = a > b ? a : b
//经典面试题:用一行代码实现求三个数的最大值
var a = 100
var b = 30
var c = 10
var res = a > b ? (a > c ? a : c) : (b > c ? b : c)
二.流程控制
数据+流程控制 = 算法
分类:顺序 分支 循环
1.顺序 不用学
2.分支:
2.1单分支
//语法
if(条件表达式 => boolean){
...业务逻辑代码
}
// 当单分支的业务逻辑代码只有一行时,{}可以省略
//案例
var year = 3
if(year >= 1){
console.log("有年终奖")
}
console.log("加油,好好干")
2.2双分支
//语法
if(条件表达式 => boolean){
如果为真:...执行业务逻辑代码1
}else {
如果为假:...执行业务逻辑代码2
}
//案例:判断是否是闰年
//算法: 年份能被4整除但不能被100整除 或 年份能被400整除
var year = prompt('请输入年份')
if(year%4==0 && year %100 !=0 || year % 400 ==0){
console.log("闰年")
}else {
console.log('平年')
}
2.3多分支
//语法
if(条件表达式 => boolean){
如果为真:...执行业务逻辑代码1
}else if(条件表达式) {
如果为假:...执行业务逻辑代码2
}else if(条件表达式){
...
}...else {
...
}
2.4switch case
语法:
switch(条件表达式){
case value1:
表达式1;
break
case value2:
表达式2;
break
…
default:
表达式
break
}
注意事项:1.case后面的break不能丢,除了default外 2.条件表达式的值与case后的value必须 全等
//用switch case方式打印学生的成绩 大于90 优秀 大于80 良好 大于70 一般 大于60及格 小于60 不及格
var score = prompt('请输入学生成绩');
var data = parseInt(score / 10)
switch(data){
case 10:
console.log("棒棒哒");
break
case 9:
console.log("优秀");
break
case 8:
console.log("良好");
break
case 7:
console.log("一般");
break
case 6:
console.log("及格");
break;
default:
console.log("不及格");
}
总结:多分支一般用来处理 “范围” 的业务逻辑,switch case处理 “定值” 的业务逻辑
3.循环
作用:重复的执行代码
3.1 for 一般跟 计数 相关
语法:
for(初始化变量;条件表达式;操作表达式){
…循环业务代码
}
执行顺序:
初始化->条件表达式->循环体->操作表达式
条件表达式(真)->循环体->操作表达式
条件表达式(假)->循环结束
//案例
for (var i = 1; i <= 3; i++) {
console.log(i); //1 2 3
}
console.log(i);// 4 全局变量
//案例 求1~3的和
var sum = 0
for(var i = 1;i<=3;i++){
sum = sum +i
}
console.log(sum)
//求1~100之间所有数的平均值
var sum = 0;
var average = 0;
for(var i = 1; i<=100; i++){
sum += i;
}
average = sum / 100;
console.log(average)
//求1~100之间偶数与奇数的和
var even = 0;
var odd = 0;
for(var i = 1; i <= 100; i++){
if(i % 2 == 0){
even += i
}else {
odd += i
}
}
console.log(`偶数和为${even}`)
console.log(`奇数和为${odd}`)
//求1~100之间能被3整除的和
var res = 0;
for(var i = 1; i <= 100; i++){
if(i % 3 == 0){
res += i
}
}
console.log(res)
//循环字符串拼接
var str = '';
for(var i = 1; i <= 5; i++){
str += '☆'
}
console.log(str)
双重for循环
语法:
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
// 执行语句;
}
}
//案例:
//打印五行五列的小星星
var str = ""
for(var i=1; i<=5; i++){ //行
for(var j = 1; j<=5; j++){ //列
str = str + "☆"
}
str += '\n'
}
console.log(str);
//打印10行的倒三角形
// 算法1:
var str = ""
for (var i = 1; i <= 10; i++) {
for (var j = 1; j <= 10 - i + 1; j++) {
str += "☆"
}
str += "\n"
}
console.log(str);
// 算法2:
var str = ""
for (var i = 10; i >= 1; i--) {
for (var j = 1; j <= i; j++) {
str += "☆"
}
str += "\n"
}
console.log(str);
//打印 九九乘法表
var str =""
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++){
str += `${j}×${i}=${j*i}\t`
}
str += '\n'
}
console.log(str);
3.2 while
语法:
while(条件表达式){
循环体
}
注意点:在循环体中要有修改条件表达式的操作,否则就可以成为死循环了
//案例 求1~100所有整数的和
var sum = 0
var j=1;
while(j <= 100){
sum += j
j++
}
console.log(sum)
//案例:弹出一个提示框,你爱我吗?如果输入我爱你,就提示结束,否则一直弹
var message = prompt('你爱我吗')
while( message !== '我爱你' ){
message = prompt('你爱我吗')
}
alert("我也爱你")
3.3 do…while
语法:
do {
循环体
} while(条件表达式)
注意点:在循环体中要有修改条件表达式的操作,否则就可以成为死循环了。do至少会执行一次
//案例
do {
var message = prompt('你爱我吗')
} while( message !== '我爱你')
alert('我也爱你')
3.4.循环中的两个关键词 break 与continue
break: 中断所有循环
continue:中断本次循环,跳到下一个循环
//案例:吃包子出现虫子
for (var i = 1; i <= 5; i++) {
if (i == 2) { // 第二个出现虫子,扔掉第二个,接着吃
continue;
}
if (i == 4) { // 第四个出现虫子,扔掉,不再吃包子了
break;
}
console.log(`我正在吃第${i}个包子`);
}
循环ATM机作业题
var money = 100;
do {
var operation = prompt("请输入您要的操作\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出");
if (operation === '1') {
var m = prompt("请输入你要存的钱数")
money += parseInt(m)
alert('你的余额为:' + money)
} else if (operation === '2') {
var m = prompt("请输入你要取的钱数")
money -= parseInt(m)
alert('你的余额为:' + money)
} else if (operation === '3') {
alert('你的余额为:' + money)
} else if (operation === '4') {
var flag = confirm('你确定要退出吗')
if(!flag){
operation = null
}
} else {
alert('请输入正确的操作数字')
}
} while (operation !== '4')
三.数组
1.概念
数据的有序集合,可以用来存储多个数据
2.创建的两种方式
1.构造函数方式:var arr = new Array()
var arr = new Array(); //创建了一个空的数组
console.log(arr); // []
2.字面量
var arr = [1,'string',true,undefined,null,[],{},function(){}]
//数组中的成员(元素)可以是任意的数据类型
数组的索引(下标):从 0 开始
数组的的元素的访问:
var arr = ['胖虎','静香','大雄']
console.log(arr[2]) //'大雄'
3.数组长度
arr.length
4.遍历
var arr = ['胖虎','静香','大雄']
for(var i=0; i< arr.length; i++){
console.log(arr[i])
}
// 扩展
arr.forEach(function(value,index){
console.log(value,index);
})
5.案例
//1.求数组中的最大值
var arr = [1,2,3,9,5,7]
var max = arr[0];
for(var i=1; i<arr.length; i++){
if(arr[i] > max){
max = arr[i]
}
}
console.log(max)
//数组中存放10个整数(1~10)
var arr = []
for(var i = 1; i <= 10; i++){
arr[i-1] = i
}
console.log(arr)
//数组筛选 将大于5的值筛选出来
//方案1
var arr = [1,2,5,3,4,6,9]
var newArr = []
var j = 0 //j的作用相当于一个计数器
for(var i = 0; i<arr.length; i++){
if(arr[i] >= 5){
newArr[j] = arr[i]
j++
}
}
console.log(newArr)
//方案2
var arr = [1,2,5,3,4,6,9]
var newArr = []
//利用了newArr.length的长度是动态的特性
for(var i = 0; i<arr.length; i++){
if(arr[i] >= 5){
newArr[newArr.length] = arr[i]
}
}
console.log(newArr)
// 求数组中出现次数最多的元素及它的次数
var arr = [1,2,3,'a',"b",2,"c","a","d","a"]
//数组的反转
//方案1
var arr = ['胖虎','静香','大雄','小夫']
var newArr = [];
for (var i = 0; i < arr.length; i++) {
newArr[arr.length - i - 1] = arr[i]
}
console.log(newArr);
//方案2
var arr = ['胖虎','静香','大雄','小夫']
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
console.log(newArr);
//数组的冒泡排序从小到大
var arr = [9, 2, 17, 8, 5, 3] // =>[2,3,5,8,9,17]
for (var j = 0; j < arr.length - 1; j++) { //外层控制是趟数 行
for (var i = 0; i < arr.length - 1-j; i++) {
if (arr[i] > arr[i + 1]) {
var temp = arr[i]
arr[i] = arr[i + 1]
arr[i + 1] = temp
}
}
}
四.函数
1.概念
将相同的业务逻辑封装起来,重复使用
2.语法
从现实中理解函数的使用:函数声明相当于是 ’做榨汁机‘,函数调用相当于是 ’使用榨法机‘。
分为两部分: 函数的声明 函数的调用
函数声明:
function 函数名 ([形参列表]) {
函数体
[return 返回值]
}
函数调用
函数名 ([实参列表])
//案例
function getSum(){ //函数声明
var sum = 0
for(var i=1; i<=100; i++){
sum += i
}
console.log(sum)
}
getSum() //函数调用
3.形参与实参
function getSum(a,b){ //a,b是形参
console.log(a+b)
}
getSum(1,2) // 1,2是实参
//形参与实参的个数不匹配的情况
function getSum(a,b){
console.log(a+b)
}
getSum(1,2) //形参与实参个数一至
getSum(1,2,3) //把3传给函数,但是在函数中没有形参来接收,就不接收
getSum(4) //相当于b接收是undefined
4.返回值
函数可以有返回值,也可以没有返回值,根据业务逻辑
function foo(name){
return name+",大傻逼" // return 返回值
}
var res = foo("傻逼")
console.log(res)
注意事项:
1.return 可以终止函数的执行,return后面可以不跟 数据
2.如果函数没有return 默认返回就是undefined
5.函数小案例
//利用函数求两个数的最大值
function getMax(a, b) {
// if(a>b){
// return a;
// }else {
// return b
// }
return a > b ? a : b;
}
var res = getMax(4, 6)
console.log(res);
//利用函数求三个数的最大值
function getMax(a, b, c) {
// if(a>b){
// //a大于b
// if(a>c){
// return a
// }else {
// return c
// }
// }else {
// //b大于a
// if(b>c){
// return b
// }else {
// return c
// }
// }
return a > b ? (a > c ? a : c) : (b > c ? b : c)
}
var res = getMax(19, 10, 3)
console.log(res);
6.arguments的使用
1.在任意函数内部都有一个看不见的arguments,除了箭头函数外
2.arguments是一个长的像数组的伪数组,可以对它进行遍历
3.函数调用的实参变成了arguments的元素
function getSum(){
var sum = 0
// arguments = [[1,2,3]] [[2,3,9,4,5]]
for(var i = 0; i< arguments.length; i++){
sum += arguments[i]
}
return sum
}
var res1 = getSum(1,2,3)
console.log(res1); //6
var res2 = getSum(2,3,9,4,5)
console.log(res2); //23
7.函数声明的两种形式
a.声明式
function fn(){
console.log("我是声明式的函数")
}
fn()
b.表达式式(匿名式) 函数也是一种数据类型
var fn = function(){
console.log("我是表达式式的函数")
}
fn()
8.作用域
概念:代码(变量)起作用效果的区间范围
分类:全局作用域 局部作用域
重点:es6之前只有函数的{}才有限定作用域
<script>
var a = 10; //全局
function fn(){
var b = 20 //局部
}
if(true){
var c = 30 //全局
}
while(true){
var d = 40 //全局的
}
</script>
9.全局变量与局部变量
全局变量:变量声明在全局作用域下
局部变量:变量声明在函数内部
注意点:在函数内部变量没有声明,直接赋值,就是全局变量(这句话在一定的条件下有问题)
10.变量的生命周期
变量的生命周期指的是变量从什么时候开始创建,么时候销毁。
全局变量的生命周期:
生:代码开始运行
死:关闭浏览器当前的窗口
局部变量的生命周期:
生:函数开始调用时
死:调用函数完毕时 (将来学习闭包时这句话又要注意)
11.作用域链
函数内部是可以套函数的,因此函数内部形成了作用域链
重点:函数内部的变量如果没有找到,就向上一层查找,上一层出没有,再向上一层查找,因为形成了一条查找的链条。
做题时的原则:就近原则
function fn1(){ // 0级链 有函数 fn1
var a = 1
function fn2(){ // 1级链 有a=1 与函数 fn2
var b = 2
function fn3(){ //2级链 有b=2 与函数 fn3
var c = 3
console.log(c) //3级链 有c = 3
}
fn3()
}
fn2()
}
fn1()
五.对象
1.概念
现实生活:对象就是东西,是一个具体的事物。万物皆对象
程序角度: 对象是一组无序的数据的集合。包含属性与方法
2.对象的创建
方式1:字面量
var person = {
name:"jack",
age:18,
sex:'男',
showFilm:function(){
console.log("I can showFilm");
},
liaoMei:function(){
return "I can liaoMei"
}
}
//属性输入打印
console.log(person.name); //jack
//关联数组的写法
console.log(person['age']); //18
//如果属性不加引号就是变量名
var gender = 'sex'
console.log(person[gender]); //男
//方法调用
person.showFilm()
//方法调用关联数组写法
var res = person['liaoMei']()
console.log(res)
方式2: new Object()
var obj = new Object() //相当于创建了一个空的对象 var obj = {}
//对象的动态特性
obj.name = "项**";
obj.age = 21;
obj.type = "女海王"
obj.dance = function(){
console.log("I can dance")
}
// 属性输入
console.log(obj.name)
console.log(obj['type'])
// 方法调用
obj.dance()
obj['dance']()
方式3: 构造函数
以上的两种方式都只能创建一个对象,如何多次创建对象呢?批量的生产对象
工厂函数:
function person(name,age,gender){
var obj = {};
obj.name = name;
obj.age = age;
obj.gender = gender;
return obj
}
var p1 = person('jack',18,"男")
console.log(p1);
var p2 = person('rose',21,"女")
console.log(p2);
构造函数:
function Mario(name,color,height){ //模板 模具 类class
this.name = name
this.color = color
this.height = height
this.smallJump = function(){
console.log("smallJupm");
}
this.bigJump = function(){
console.log("bigJupm");
}
this.attack = function(){
console.log("attack");
}
}
var m1 = new Mario("redMario",'red',"100cm") // new构造函数的过程也叫 实例化
console.log(m1);
var m2 = new Mario("greenMario",'green',"100cm")
console.log(m2);
//m1,m2可以称为实例
构造函数的注意事项:
1.构造函数的函数首字母一般建议大写
2.构造函数的返回值如果没有写return 默认返回this
3.构造函数调用时前面要用关键词 new
new关键词执行的过程
1.在内存中开辟了一个空间
2.this变量指向了这个空间
3.进入函数体执行代码
4.有一个看不见的return this
3.对象的遍历 for…in
var obj = {
name: "jack",
age: 18,
gender: "male",
fn:function(){}
}
for(var k in obj){
console.log(k)
console.log(obj[k])
console.log(k,obj[key]);
}
六.内置对象
学习内置对象: Math 数学 Date 日期 String字符串 Array 数组
怎么学:多写,多记方法名,后期多练
Math 数学
属性:Math.PI
方法:
//1.最大值
Math.max(1,2,4,9) //9
//Math.max() 不能求数组的最大值
Math.max([3,65,76,2,9]) //NaN
//求数组的最大值解决方案,后期学
Math.max.apply(null,[3,65,76,2,9]) //76
Math.max(...[3,65,76,2,9]) //76
//2.求绝对值
Math.abs(-1) //1
Math.abs(1) //1
//3.向下取整
Math.floor(1.3) //1
Math.floor(1.9) //1
//4.向上取整
Math.ceil(1.2) //2
Math.ceil(1.9) //2
//5.四舍五入
Math.round(1.1) //1
Math.round(1.8) //2
Math.round(-1.1) //1
Math.round(-1.5) //1 负数时, .5往大了取整
//6.取随机数 [0,1) 从0到1,包括0,不包括1
Math.random()
//获取两个数之间的整数,包括两个整数的算法
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
Date 日期
var date = new Date() //获取当天时间对象
var date = new Date('2021-4-17') //取参数时间对象
//date不好用
date.getFullYear() //年
date.getMonth()+1 //月份 注意date.getMonth()要加1才能得到正确的月份
date.getDate() //日期
date.getDay() //星期几 注意date.getDay()得到的值是[0-6] 星期日是0
date.getHours() //时
date.getMinutes() //分
date.getSeconds() //秒
时间戳:
解释:从1970年1月1日 到 一个时间点 经过了多少毫秒
//方式1:valueOf getTime
var date = new Date() //从1970年1月1日 到 现在 经过了多少毫秒
cosole.log(date.valueOf())
console.log(date.getTime())
//方式2: +new Date
var date = +new Date('2000-01-01') //从1970年1月1日 到 '2000-01-01' 经过了多少毫秒
console.log(date)
//方式3: Date.now() //从1970年1月1日 到 现在 经过了多少毫秒
var date = Date.now()
console.log(date)
//案例:计算从你出生到现在活了多少天?
var nowTime = Date.now()
var birthTime = +new Date('2001-3-20')
var time = Math.ceil((nowTime-birthTime)/1000/60/60/24)
console.log(time);
//案例:倒计时效果
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入未来时间的总毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); // 天
var h = parseInt(times / 60 / 60 % 24); //时
var m = parseInt(times / 60 % 60); // 分
var s = parseInt(times % 60); // 当前的秒
return d + '天' + h + '时' + m + '分' + s + '秒';
}
Array数组
1.数组类型检测
var arr = [1,2,3]
console.log(typeof arr); //object
//arr 是否是 Array的实例
var arr = new Array()
console.log(arr instanceof Array); //true
console.log(Array.isArray(arr)); //true
2.数组元素的添加与删除
//push 在数组的后面添加元素
1.修改了原数组
2.参数:追加的元素
2.返回值:是追加后数组的长度
var arr= [1,2,3]
arr.push(4,5) //返回值是5 原数组变成了[1,2,3,4,5]
arr.push([4,5]) //返回值是4 原数组变成了[1,2,3,[4,5]]
//unshift 在数组的前面追加元素
1.修改了原数组
2.参数:追加的元素
2.返回值:是追加后数组的长度
var arr= [1,2,3]
arr.unshift(4,5) //返回值是5 原数组变成了[4,5,1,2,3]
//pop 删除数组的最后一个元素
1.修改了原数组
2.参数:无
2.返回值:删除的那个元素
var arr= [1,2,3]
arr.pop() //返回值是3 原数组变成了[1,2]
//shift 删除数组的第一个元素
1.修改了原数组
2.参数:无
2.返回值:删除的那个元素
var arr= [1,2,3]
arr.shift() //返回值是1 原数组变成了[2,3]
3.数组的反转
//数组.reverse() 反转数组
var arr = [1,2,3,4]
arr.reverse()
console.log(arr) //[4,3,2,1]
4.数组的排序
//数组.sort() 数组排序
var arr = [4,2,8,12,9]
arr.sort(function(a,b){
return a - b //数组升序
})
console.log(arr) //[2,4,8,9,12]
arr.sort(function(a,b){
return a -b //数组降序
})
console.log(arr) //[12,9,8,4,2]
5.数组的索引
//根据元素找下标 indexOf() lastIndexOf()
//indexOf() 从数组的左边向右边找,找到一个就马上返回下标 没有找到返回-1
//lastIndexOf() 从数组的右边向左边找,找到一个就马上返回下标 没有找到返回-1
var arr = [1,2,3,4,5,3]
console.log(arr.indexOf(3)) //2
console.log(arr.indexOf(8)) //-1
console.log(arr.lastIndexOf(3)) //5
console.log(arr.indexOf(7)) //-1
//案例 数组去重
//方案1
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = []
for(var i=0; i<arr.length; i++){
if(newArr.indexOf(arr[i])===-1){
newArr.push(arr[i])
}
}
console.log(newArr)
//方案2 暂时了解 可以关注数组的includes方法
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = []
for(var i=0; i<arr.length; i++){
if(!newArr.includes(arr[i])){
newArr.push(arr[i])
}
}
console.log(newArr)
//方案3 暂时了解 可以关注数组的reduce方法
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = arr.reduce(function(acc,value,index){
if(!acc.includes(value)){
acc.push(value)
}
return acc
},[])
console.log(newArr)
6.数组转换为字符串
//数组.join()
var arr =[1,2,3]
var str = arr.join()
console.log(str) //1,2,3
var str = arr.join("&")
console.log(str) //1&2&3
7.数组合并
//数组.concat()
var arr = [1,2,3];
var newArr = arr.concat([4,5,6]);
console.log(arr); //没有修改原数组
console.log(newArr); //[1,2,3,4,5,6]
8.数组的截取
//数组.slice(start,end)
var arr = ['red','blue','yellow','pink','purple'];
var newArr = arr.slice(1,3);
console.log(newArr); //['blue','yellow']
console.log(arr); //没有修改原数组
//数组.splice(start,count)
var arr = ['red','blue','yellow','pink','purple'];
var newArr = arr.splice(1,3);
console.log(newArr); //['blue','yellow','pink']
console.log(arr); //原数组修改了,截取后剩下的元素
//面试题
var arr = ["小泷",'小天',"小苍","小泽","xiaosa"]; //=> [["小泷",'小天',"小苍"],["小泽","xiaosa"]]
var newArr = []
while (true) {
if (arr.length === 0) {
break
}
newArr.push(arr.splice(0, 3))
}
console.log(newArr);
String字符串
1.根据字符找索引
//str.indexOf() 从左向右根据字符找索引,如果没有找到就返回-1
//str.lastIndexOf() 从右向左根据字符找索引,如果没有找到就返回-1
2.根据索引找字符
//str.charAt(索引)
//求字符串'abcaba'出现次数最多的字符及次数
// 'abcaba' => (a 3)
// 第一步:'abcaba' => {a:3,b:2,c:1}
// 第二步:{a:3,b:2,c:1} => a 3
var str = "abcaba"
var obj = {}
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) in obj) {
obj[str.charAt(i)]++ //obj.a++ num++
} else {
obj[str.charAt(i)] = 1 //{a:1,b:1,c:1}
}
}
// console.log(obj);
var char = null
var max = 0
for (var k in obj) { //{a:3,b:2,c:1}
if (obj[k] > max) {
max = obj[k]
char = k;
}
}
console.log(`出现次数最多的字符是${char},次数是${max}`);
3.截取
// 字符串.substr(start,length)
var str = "傻逼,你在哪里?"
var str1 = str.substr(0,2)
console.log(str1); //傻子
//字符串.substring(start,end)
var str = "傻逼,你在哪里?"
var str2 = str.substring(0,3)
console.log(str2); //傻子,
4.替换
//字符串.replace(原字符,要替换的字符)
var str = "我爱武汉傻子和傻子们";
var str1 = str.replace("傻子","小可爱")
var str2 = str.replace(/傻子/g,"小可爱") //正则表达式可以实现全部替换
console.log(str1); //我爱武汉小可爱和小太妹们
console.log(str2); //我爱武汉小可爱和小可爱们
5.分割
// 字符串.split(要分割的字符)
var str = "小苍×刘虎×小泽"
var arr = str.split("×")
console.log(arr); //["小苍", "刘虎", "小泽"]
6.大小写转换
//字符串.toUpperCase()
var str = "Hello World"
var upper = str.toUpperCase()
console.log(upper); //HELLO WORLD
//字符串.toUpperCase()
var str = "Hello World"
var lower = str.toLowerCase()
console.log(lower); //hello world
七.数据类型为什么分为值类型和引用类型
值类型:变量中存的是值本身
引用类型:变量中存的是地址
//练习
console.log(123===123) //true
console.log({}==={}) //false
console.log([]===[]) //false
console.log(function(){} ===function(){}) //false
//基本数据类型赋值操作 传的值
//修改了其中的一个,另一个不变
var a = 100
var b = a
a=1000;
console.log(b) // 100
//复杂数据类型赋值操作 传的地址
//修改了其中的一个,另一个也会变
var arr1 = [1,2,3]
var arr2 = arr1
arr1[1]=20;
console.log(b) //[1,20,3]
//案例
var c;
var changStuff = function (a,b,c){
a = a*10;
b.item = "changed";
c = {item:"changed"};
}
var num = 10;
var obj1 = {item:"unchanged"};
var obj2 = {item:"unchanged"};
changStuff(num,obj1,obj2);
console.log(num); //10
console.log(obj1.item); //changed
console.log(obj2.item); //unchanged
console.log(c); //undefined
八.预解析
预解析:代码执行分为两个步骤:预解析阶段 和 执行阶段
预解析相当于是对代码的扫描
关注两个关键词: var 与 function (这个function不是匿名函数的function,而是声明式的function)
1.var 变量名
判断当前内存作用域中是否存在变量
a.如果不存在,在内存中开辟空间 变量名指向该空间,这个空间此时的值是undefined
b.如果存在,忽略,不再在内存中开辟空间了。
2.function 函数名
判断当前内存作用域中是否存在函数名
a.如果不存在,在内存中开辟空间 函数名指向该空间,并且这个空间保存的是函数体的地址
b.如果存在,在内存中不开辟空间 但是这个空间也会指向函数体的地址
3.函数调用时,进入函数体内也会在函数内作用域进行预解析