JS基础
一. js基础-01-day1. 计算机语言1.1 编程语言
2. 计算机基础2.1 计算机组成2.2 计算机存储单位
3. JavaScript 介绍3.1 JavaScript 三大组成3.2 JS 的三种写法3.3 JS的注释
4. 输入输出语句5. 变量5.1 变量的使用5.1.2 变量声明的同时赋值(初始化)5.1.3取出变量数据5.1.4 是否加引号
5.2 变量声明与赋值的一些细节5.3 变量的命名规则和规范
6. 数据类型6.1 数字类型 Number6.1.1 数字型进制6.1.2数值型范围:6.1.3 数字型三个特殊值6.1.4 isNaN()
6.2字符串 String(加引号)6.2.1 字符串写法6.2.2 字符串嵌套6.2.2 转义符:6.2.3 字符串长度和拼接
6.3 布尔类型6.4 undefined6.5 null6.6 获取变量数据类型6.7 变量值的交换
7. 数据类型之间的转换7.1 转换成字符串类型7.2 转换成数字类型parseInt和parseFloatNumber 和 隐式转换
7.3 Boolean转换成布尔类型7.4 控制台打印数据的颜色来判断类型
二. js基础-02-day1. 运算符分类1.1 算术运算符1.2 自增运算符1.3 比较运算符1.4 逻辑运算符逻辑运算符中的短路和运算结果
1.5 赋值运算符1.6 运算符的优先级
2. 分支结构2.1 if语句2.1.1 分支之if语句2.1.2 if elase 双分支结构2.1.3 if else if 多分支语句
2.2 三元表达式2.3 switch语句
3.字符串比较大小
三. js基础-03-day1. for循环1.1 for循环语法1.2 for循环的案例
2. 双重for循环2.1 双重for循环语法双重for循环的案例
3. while循环4. do-while循环6. for / while / do while的区别5. continue和break
四. js基础-04-day1. 数组1.1 声明数组1.2 访问数组元素(获取数组中的元素)1.3 遍历数组1.4 数组元素拼接成字符串1.5 数组扩容(数组中新增元素)
2. 函数2.1 函数的概念2.2 函数的使用2.2.1 声明函数两种方式(函数的名字用动词,因为他是为了实现功能)2.1.2 调用函数
2.3 函数的参数2.3.1 函数参数语法2.3.2 函数形参和实参数量不匹配时
2.4 函数的返回值2.4.1 return 语句2.4.2 break ,continue ,return 的区别
2.5. arugments2.6. 函数内也可以调用函数
五. js基础-05-day1. 作用域1.1全局作用域1.2 局部作用域
2. 全局变量和局部变量3. 作用域链4.预解析4.1 变量预解析4.2 函数预解析4.3 函数表达式(匿名函数)的预解析
5. 对象创建对象的三种方法5.1 字面量创建对象{}5.1.1 对象的创建5.1.2 对象的使用5.1.3 变量、属性、函数、方法的区别
5.2 利用 new Object 创建对象5.3 利用构造函数创建对象5.3.1 构造函数语法5.3.2 new 关键字做的事
六. js基础-06-day1. 遍历对象
一. 内置对象2. Math 对象2.1 属性:2.2 方法:
3. 日期对象2.1 使用,new一个对象2.2 方法:2.3获得毫秒数(时间戳)
4. 数组对象4.1 检测是不是数组4.2 添加数组元素4.3 数组删除元素4.4 数组的排序方法4.5 数组根据元素查找下标4.6 转换成字符串
5. 字符串5.1 基本包装类型5.2 字符串的不可变5.3 根据字符返回位置(下标)5.4 根据位置找到字符5.5 concat:连接字符串,5.6 substr:截取字符串5.7 replace: 替换字符5.8 split:切割成数组
二. 值类型和引用类型
一. js基础-01-day
1. 计算机语言
机器语言:0和1的组合
1.1 编程语言
汇编语言:加入了一些英文单词符号 add jump等高级语言:更像人类的语言,JavaScript
2. 计算机基础
2.1 计算机组成
计算机所有软件都称之为数据,数据本质是0和1的二进制计算机有硬件和软件
硬件:CPU、内存、硬盘软件:电脑打开能用的东西
2.2 计算机存储单位
计算机最小存储单位是:位(bit)1Byte(字节) 等于 8bit1Kb(千字节) = 1024byte1Mb(兆字节) = 1024kb1Gb(吉字节) = 1024mb1Tb(太字节) = 1024gb…
3. JavaScript 介绍
html、css是标记语言
由渲染引擎来解析,标记没有逻辑,写什么就是什么,它不会思考, JS是脚本语言
有逻辑,能独立思考 JS的执行:逐行解释(一行一行往下执行),由js引擎来解析
3.1 JavaScript 三大组成
ECMAScript
简称ESJS的语法规范,由ES定义了JS里有什么数据类型、怎么运算、哪些关键字ES也是有版本的,ES5、ES6、ES7 DOM
文档对象模型控制html元素的 BOM
名字:浏览器对象模型控制浏览器的
3.2 JS 的三种写法
行内式:现在只要了解有这种写法就可以了
内嵌式:
<script>
</script>
外联式:
<script src="js文件的路径"></script>
以.js结尾的文件,再把JS代码写在文件里
页面要用必须引入
script标签里面不要再写JS代码了(写了代码也没用)
3.3 JS的注释
单行注释
多行注释
默认快捷键: ctrl + shift +a
可以修改
4. 输入输出语句
prompt:
给用户输入的
prompt('提示语')
alert:
弹出警示框
alert('提示语')
console.log:
给程序员看的,输出在控制台,页面是看不到的
console
.log('输出的内容')
5. 变量
变量作用:用来存储数据的变量的本质:
内存可以存数据变量其实就是在内存里申请一块空间用来放数据怎么找到空间?给空间起一个名字,这个名字就叫变量名
5.1 变量的使用
变量的声明(变量名用名词)
var 变量名
变量的赋值 变量名
= 数据
例:
var age
;
age
= 18;
5.1.2 变量声明的同时赋值(初始化)
var 变量名
= 数据
例:
var age
= 18;
5.1.3取出变量数据
直接写变量名,就可以取出来
alert(变量名
)
var age
= 16
alert(age
)
5.1.4 是否加引号
注意: ① 如果是数字直接写; ② 其他的除了true/false/undefined/null;必须全部加引号,否则js里没有这种语法,会报错
5.2 变量声明与赋值的一些细节
变量可以重新赋值,赋值后,以最后一次的为准
可以同时声明多个变量,用英文逗号隔开
var 变量名
1,变量名
2,....;
var myname
,age
;
只声明,不赋值 如果变量只声明,不赋值,变量也有值,只不过值是undefined
不声明,不赋值 变量不声明不赋值不能用,会报错
不声明,只赋值 变量不声明,直接赋值,可以用(不推荐)
5.3 变量的命名规则和规范
规则: 必须要遵守,不遵守就会报错规范: 建议你遵守,但是不遵守也不会报错规则有: – 不能用关键字:在JS里有特殊含义的字符,例如var – 只能用字母、数字、下划线、$,并且数字不能开头规范有: –起名要有意义 – 遵守驼峰命名法:如果多个单词第一个单词的首字母小写,后面每个单词的首字母大写变量名区分大小写
6. 数据类型
基本类型:number、string、boolean、null、undefined
类型特点
number(数字)直接写数字就是number,例如10、20、20.32string(字符串)只要是被单引号或者双引号包起来的都是字符串,例如:‘abc’、‘10’boolean(布尔型)只有两个:true、false,不用加引号,直接写undefined只有一个值就是undefinednull只有一个值就是null 复杂类型:Object(后面才学)
6.1 数字类型 Number
6.1.1 数字型进制
二进制:0b开头八进制:0开头十六进制:0x开头十进制:正常写数字
6.1.2数值型范围:
最大范围 Number.MAX_VALUE最小范围 Number.MIN_VALUE
6.1.3 数字型三个特殊值
无穷大: Infinity无穷小:-InfinityNaN(Not a number): 代表不是一个数字
6.1.4 isNaN()
作用:它是判断一个数据是不是 非数字所以如果传的是 数字 得到是 false所以如果传的不是 数字 得到是 true
6.2字符串 String(加引号)
6.2.1 字符串写法
加引号:要用 单引号 或者 双引号 包起来就叫字符串 ,推荐用 单引号
6.2.2 字符串嵌套
字符串引号嵌套:外单内双、外双内单
6.2.2 转义符:
注意: ① 都以\开头; ② 转义符必须要加在字符串的引号里面。
转义符解释说明
\n换行符,n 是 newline 的意思\ \斜杠 \’’ 单引号"”双引号\ttab 缩进(水平制表符)\b空格 ,b 是 blank 的意思
6.2.3 字符串长度和拼接
字符串.length 来取
var str
= 'hello'
console
.log(str
.length
)
字符串拼接用 +
+ 两边只要有一个是字符串,那么得到的结果也一定是字符串(结果就是把内容拼接)
+ 号两边只要有一个是字符串,那么都是拼接
undefined + ‘pink’ 也是在拼接
6.3 布尔类型
布尔类型(Boolean):只有两个值,用来代表对立的两个状态例:对和错、真和假、开和关布尔类型的值:true 和 falsetrue也可以当数字1,false当数字0
6.4 undefined
undefined:代表未定义(系统也不知道是什么类型)
undefined + 10 得到 NaN
一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时,注意结果)
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
//和数值相加得到非数值
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
6.5 null
null: 代表空
null + 10 得到 10
一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)
```js
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
6.6 获取变量数据类型
typeof
var num = 18;
console.log(typeof num) // 结果 number
6.7 变量值的交换
apple 1 的值和apple 2的值交换
7. 数据类型之间的转换
7.1 转换成字符串类型
1.变量.toString()
要打括号 2.String(变量名)3.利用 + 空字符串
数据 + ''‘’ + 数据
7.2 转换成数字类型
parseInt和parseFloat
parseInt(数据)
能把数据转成数字类型(只是整数)如果第一个字符不是数字,得到NaN到非数字的地方就把数据切断,得到结果 parseFloat(数据)
跟上面是一样的,只不过遇到小数也能转成小数
Number 和 隐式转换
用法 :Number(数据)
内容必须是纯数字,如果带有非数字,都会得到NaN(所以不经常使用) 例: Number(‘10px’) 也会得到NaN
隐式转换:通过参与数学运算隐式转换成数字
-: 数据 - 0*: 数据 * 1/ :数据 / 1注意:+绝对不可以转成数字,因为+遇到字符串得到的也是字符串(是做拼接),但是字符串前面加上+变成数字
7.3 Boolean转换成布尔类型
用法: Boolean(数据)只有0、空字符串(’’)、NaN、undefined、null 会转成false,其他的都是true
7.4 控制台打印数据的颜色来判断类型
如果打印黑色,是字符串类型如果是蓝色就是数字类型(布尔类型也是蓝色)
二. js基础-02-day
1. 运算符分类
运算符:用来做运算的符号;表达式:由运算符组成的式子;返回值:表达式右边的结果。这个值返回给左边
1.1 算术运算符
+ - * / 余%
注意: ① 余数: 可以判断是否能整除(余数为0就代表整除) ② 除了 + 以外的算术运算符,都会把数据隐式转换成数字类型 ③ 优先级:先乘除、后加减、有括号的先算括号里面的(同级从左往右依次计算)
1.2 自增运算符
符号: ++(自增) 、 --(自减)
++:让自身+1
–: 让自身-1
前置和后置的异同:
① 相同点:不管前还是后,最终都会让自己+1或者-1 ② 不同点:
前置是先自增或自减再返回后置是用原值返回再自增或自减
var num1
= 10
var sum
= num1
++ + 10
console
.log(num1
)
console
.log(sum
)
var num1
= 10
var sum
= ++num1
+ 10
console
.log(num1
)
console
.log(sum
)
1.3 比较运算符
> 使用: 判断左边是否大于右边,如果大于得到true,否则得到false 例: 10 > 10 得到false< 使用:判断左边是否小于右边,如果小于得到true,否则得到false>= 使用:判断左边是否大于或者等于右边,如果大于或者等于得到true,否则得到false 例: 10 >= 10 得到true<= 使用: 判断左边是否小于或者等于右边,如果小于或者等于得到true,否则得到false== 使用:判断两边是否值相等 注意:只判断值,不管类型!=
判断两边的值是否不等 ===
读作全等判断两边的值与类型是否都相等,只要有一个不等就会得到false注意:既判断值又判断类型 细节:
null == undefined 为true但是 null === undefined 为falseNaN 不等于任何值,包括它自身,所以 NaN == NaN 得到false那么如何判断一个数据是不是NaN呢?
isNaN(数据)
1.4 逻辑运算符
&&:
逻辑与,也可以读作并且 10 > 3 && 10 < 50
两边都要为真,结果才为真,只要有一个为假,结果就是假口诀:一假则假 ||:
逻辑或,也可以读作或者 10 > 5 || 10 < 3两边都要为假,结果才是假,只要一个为真,结果就是真口诀:一真则真 !:
逻辑非,也可以读作取反真变假,假变真
逻辑运算符中的短路和运算结果
短路:右边的式子不执行什么时候触发短路?
通过左边能确定整个式子的结果,就没必要看右边了,所以就短路。如果不能取右边,逻辑运算符的结果,要么是左边要么是右边。 &&:一假则假
所以如果左边为假,就短路 ||: 一真则真
所以如果左边为真,就短路
var num1
= 10;
var sum
= num1
> 2 && num1
+ 10
console
.log(sum
)
var num1
= 10;
var sum
= num1
> 20 && num1
++
console
.log(num1
)
console
.log(sum
)
var num1
= 10;
var sum
= num1
++ && 10 * 3
console
.log(num1
)
console
.log(sum
)
var num1
= 1;
var sum
= num1
-- && 10 * 3
console
.log(num1
)
console
.log(sum
)
var num1
= 1;
var sum
= --num1
&& 10 * 3
console
.log(num1
)
console
.log(sum
)
1.5 赋值运算符
= : 给某个变量赋值
+=:在自己本身值的基础上再加一个值
var num
= 10
num
+= 5
-=:在自己本身值的基础上再减一个值
*=:在自己本身值的基础上再乘以一个值
/=:: 在自己本身值的基础上再除以一个值
var num
= 10
num
/= 5
%=: 在自己本身值的基础上再求一个余数
var num
= 10
num
%= 3
1.6 运算符的优先级
2. 分支结构
流程控制 程序的结构:
顺序结构:按顺序,一行一行执行下来;分支结构:程序有选择的执行或者不执行某段代码;循环结构:重复执行某段代码。
2.1 if语句
2.1.1 分支之if语句
第一种使用:
if(条件表达式
) {
代码
}
2.1.2 if elase 双分支结构
语法
if (条件表达式
) {
代码
1
} else {
代码
2
}
解析:条件表达式如果为 true 执行代码1,如果为 false 执行代码2
if (true) {
alert (123)
} else {
alert (456)
}
if (false) {
alert (123)
} else {
alert (456)
}
2.1.3 if else if 多分支语句
```js
if (条件1) {
代码1
} else if (条件2) {
代码2
} else if (条件3) {
代码3
}else {
}
// 从上往下依次判断,满足哪个条件就进入哪个大括号里执行代码,后面条件的都不执行
```
2.2 三元表达式
条件表达式
? 表达式
1 : 表达式
2
例
var num
= 10 > 5 ? 88 : 12
(相当于if else双分支结构)
条件表达式结果为true,执行表达式1,否则执行表达式2
2.3 switch语句
switch (表达式
) {
case 值
1:
代码
1
break;
case 值
2:
代码
2
break;
.....
default:
代码n
break;
}
细节:
switch里的判断是全等判断,所以一定要注意类型要相等
break:跳出它所在的switch语句
break可以防止穿透
穿透:从一个case穿到下一个case
也可以合理利用穿透
case后面加:
3.字符串比较大小
原理:字符串比较本质上是比较他们所对应的ASCII码(每个字符串对呀一个数值)数字字符串比较 ① 字符串比较,先比较第一位;
console.log('8' > '24') //true
② 如果第一位一样比较第二位,再一次类推。
console.log('2' < '24') //true
字母字符串的比较 ① 后面的字母比前面的字母大
console.log('a' > 'd') //false
console.log('A' > 'D') //false
② 小写大于大写
console.log('a' > 'Z') //true
三. js基础-03-day
循环语句:循环体及循环的 终止条件组成的语句,被称之为 循环语句
1. for循环
1.1 for循环语法
for ( 声明计数变量
; 循环条件
; 操作计数变量
) {
循环体
}
声明计数变量:就是声明一个变量,一般从0开始或者从1开始,初始化操作在整个 for 循环只会执行一次。循环条件:控制循环的次数,例如: 变量 <= 9 代表9次(要从1开始),如果为true,则执行循环体语句,否则退出循环,循环结束。操作计数变量:变量++,更新计数器循环体:就是要重复执行的代码
for (var i
= 1; i
<= 9; i
++) {
console
.log('hello')
}
1.2 for循环的案例
① 由用户输入循环次数,然后再打印你怎么这么好看
var num = prompt('请您输入数字');
for (var i = 1; i <= num; i++) {
console.log('我怎么这么好看');
}
② 计算1-100的和
// 声明一个总和的变量
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i
}
console.log('sum');
③ 计算1-100的奇数和以及偶数和
// 求1-100之间所有偶数和奇数的和;even(偶数) odd(奇数)
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
even += i;
} else {
odd = odd + i;
}
}
console.log('1-100之间所有偶数的和是:' + even);
console.log('1-100之间所有奇数的和是:' + odd);
④ 计算1-100的除了3的倍数以外的总和
// 求1-100之间所有能被3整除的数字的和
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
result += i;
}
}
console.log('1-100之间所有能被3整除的数字的和:' + result);
⑤ 让用户输入班级人数,然后依次输入每个人的成绩,计算出总成绩和平均成绩
// 1. 先输入班级总人数
var count = prompt('请输入班级总人数');
// 声明一个总分变量
var sum = 0;
// 声明一个平均分变量
var average = 0;
// 2. 依次输入每个人的成绩,重复代码,用for
for (var i = 1; i <= count; i++) {
// 输入每个人的成绩,并且保存下来
var score = +prompt('请输入第' + i + '个同学的成绩');
sum += score;
}
average = sum / count;
alert('总分是' + sum);
alert('平均分是' + average);
⑦ 一行打印5颗星星
var str = '';
for (var i = 1; i <= 5; i++) {
// 用字符串拼接
str = str + '★';
}
console.log(str);
2. 双重for循环
2.1 双重for循环语法
for(var i
= 1; i
<= 次数
; i
++) {
for(var j
= 1; j
<= 次数
; j
++) {
}
}
也叫for循环的嵌套外层控制大循环,内层控制每层的小循环对于我们今天的学的案例而言,外层控制行,内层控制列
双重for循环的案例
打印5行5列的星星(由用户输入行和列)
var str = ''
for (var j = 1; j <= 5; j++) { //外层写五行星星
for (var i = 1; i <= 5; i++) { // 里层写一行五颗星星
str = str + '★';
}
// 每行后换行
str = str + '\n'
}
打印倒三角
var str = '';
for (var i = 1; i <= 10; i++) { //循环行
// 每一行从他的行数开始计数
for (var j = i ; j <= 10; j++) { //循环列
str += '★';
}
str += '\n'
}
console.log(str);
打印正三角
var str = '';
for (var i = 1; i <= 10; i++) { //行循环10次
// 列数和行数相等,因此给j <= i
for (var j = 1; j <= i; j++) { //
str += '★';
}
str += '\n'
}
console.log(str);
打印九九乘法表
// 一共有9行,但是每行的个数不一样,因此需要用到双重 for 循环
// 外层的 for 循环控制行数 i,循环9次,可以打印9行
// 内层的 for 循环控制每行公式 j
// 核心算法:每一行公式的个数正好和行数一致,j <= i;
// 每行打印完毕,都需要重新换一行
var str = '';
for (var i = 1; i <= 9; i++) { //外层循环控制行数,循环9次
for (var j = 1; j <= i; j++) { // 内层循环控制列数(即每一行的个数),每行,行数=列数
str += j + 'x' + i + '=' + i * j + '\t';
}
str += '\n'
}
console.log(str);
</script>
以表格形式
<style>
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #000;
text-align: center;
}
</style>
<script>
document.write('<table>')
// 不用声明变量
// var str = '';
for (var i = 1; i <= 9; i++) { //外层 for 循环控制行数,循环9次
document.write('<tr>')
for (var j = 1; j <= i; j++) { // 内层 for 循环控制列数,每行,行数=列数
document.write('<td>')
document.write(j + 'x' + i + '=' + i * j);
document.write('</td>')
}
// str += '\n'
document.write('<tr>')
}
document.write('</table>')
</script>
3. while循环
语法: 当条件为true执行循环体,直到条件为false,跳出循环
while (条件
) {
循环体
}
例:
var i
= 1
while (i
<= 3) {
console
.log(i
)
i
++
}
while循环主要用在不确定次数的循环,for循环主要用在确定次数的循环(区别)
例:
var answer
= prompt('你爱我吗')
while (answer
!= '我爱你') {
answer
= prompt('你爱我吗')
}
1加到100案例
var i = 1;
var sum = 0;
// 2.条件表达式为真,就一直执行,
while (i <= 100) {
sum = sum + i;
// 3. 不加操作表达式,让计数器变量自增,会进入死循环(所以要加)
i++;
}
console.log(sum);
4. do-while循环
语法:
do {
循环体
}while(判断条件
)
如果某个循环体至少需要执行一次,可以用do-while循环
do {
var answer
= prompt('你爱我吗')
} (answer
!= '我爱你')
输入密码案例
do {
var user = prompt('请输入用户名');
var password = prompt('请输入密码');
} while (user != 'hhha' && password != '123456');
6. for / while / do while的区别
for:用于具体的次数;while 和 do while:用于不确定次数的循环;while:先判断,在执行,可能一次都不执行;do while:先执行,在判断,一定会执行一次。
5. continue和break
continue:结束本次循环,继续下次循环 例子:吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('这个包子有虫子,扔掉');
continue; // 跳出本次循环,跳出的是第3次循环 (continue 以下的代码一定不会被执行,执行下一个循环)
}
console.log('我正在吃第' + i + '个包子呢');
}
运行结果
break:立即跳出所在的循环 例子:吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个for 循环,跳到整个for下面的语句
}
console.log('我正在吃第' + i + '个包子呢');
}
运行结果
四. js基础-04-day
1. 数组
数组是一种数据类型,它是一种可以存放一组数据的数据类型可以存放任意类型的数据数组元素:数组中存放的,数据的名字
1.1 声明数组
var 数组名
= new Array()
var 数组名
= []
var 数组名
= new Array(10, 'abc', true)
var 数组名
= [10, 'abc', true]
数组的初始化:声明数组并赋值称为
1.2 访问数组元素(获取数组中的元素)
通过 索引(下标)来访问什么是下标?
数组中每个数据的编号,从0开始
数组名
[下标
]
特殊例子:访问不存在的下标
var arrr
= [1,2,3];
console
.log(arr
[3]);
1.3 遍历数组
数组的长度
数组.length // 获取的是数组元素的个数
var age
=[1,2,3];
console
.log(age
.length
);
什么叫遍历数组?就是把数组中每个元素访问
for (var i
= 0; i
< 数组
.length
; i
++){
数组
[i
]
}
数组最大下标 = 数组.length - 1
1.4 数组元素拼接成字符串
var names
= ['刘德华', '张学友', '郭富城', '周彦祖']
var str
= ''
for (var i
= 0; i
< names
.length
; i
++) {
if (i
== names
.length
- 1) {
str
+= names
[i
]
} else {
str
+= names
[i
] + '-'
}
}
console
.log(str
)
1.5 数组扩容(数组中新增元素)
通过直接修改length可以改变数组长度
① length增加了则是增加数组长度(用empty补齐)
② length减少了则是减少数组长度(会从最后面的数组删起)
var nums
= [10, 20,30, 40]
nums
.length
--
console
.log(nums
)
也可以通过下标增加元素,例:
var nums
= [10,20,30,40]
nums
[4] = 50
console
.log (nums
);
2. 函数
2.1 函数的概念
语义化:就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用。
2.2 函数的使用
2.2.1 声明函数两种方式(函数的名字用动词,因为他是为了实现功能)
自定义函数方式(命名函数) ① 语法(这样子叫,是因为他给函数命名了)
function fn() {...}
fn();
函数表达式(匿名函数) ② 语法(没有命名的)
var 变量名 = function() {...}
注意: ① function是声明函数的关键字,必须小写
② 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum
2.1.2 调用函数
函数名();
注意: ① 一定要加(); ② 函数不调用,自己不执行
2.3 函数的参数
2.3.1 函数参数语法
形参:函数定义时设置接收调用时传入, 注意:在JavaScript中,形参的默认值是undefined。
实参:函数调用时传入小括号内的真实数据
函数参数的运用:
function 函数名(形参
1, 形参
2 , 形参
3...) {
}
函数名(实参
1, 实参
2, 实参
3...);
调用的时候实参值是传递给形参的形参简单理解为:不用声明的变量实参和形参的多个参数之间用逗号(,)分隔
2.3.2 函数形参和实参数量不匹配时
总结: ① 参数可加可不加; ② 形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要匹配。
2.4 函数的返回值
2.4.1 return 语句
返回值:函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回 。
function 函数名()
{
...
return 需要返回的值;
}
函数名();
return后面的代码不会被执行return 只能返回一个值,如果有多个值,返回最后一个值return想返回多个数据,用数组在使用 return 语句时,函数会停止执行,并返回指定的值如果函数没有 return ,返回的值是 undefined
2.4.2 break ,continue ,return 的区别
break :结束当前的循环体(如 for、while)continue :跳出本次循环,继续执行下次循环(如 for、while)return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
2.5. arugments
使用是因为有些时候不知道会传递多少个实参过来
是一个伪数组
伪数组:有长度、下标,但是没有数组的那些方法
注意:只能用在函数内
它里面保存的是调用函数时传递过来的所有实参(实参用数据,切莫用数组)
2.6. 函数内也可以调用函数
函数内也可以调用函数不要来回调,容易死循环
五. js基础-05-day
1. 作用域
语义化:一段程序代码中所用到的名字(变量名)并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域
1.1全局作用域
整个( script 标签内部 ) 或者一个独立的 js 文件。
1.2 局部作用域
函数里面,因为跟函数有关系,所以也称为函数作用域。
2. 全局变量和局部变量
全局变量:声明在全局作用域里的变量就是全局变量
所有地方都可以使用,访问,浏览器关闭才销毁;特殊值:不声明,直接赋值的变量是全局变量。 例子: age
= 18;
局部变量:声明在函数内的变量
只在所在的函数内可以使用,函数调用完毕就销毁形参相当于局部变量
3. 作用域链
作用域链:
默认就是0级作用域声明一个函数可以开辟作用域(只有函数可以开辟)0级作用域里声明的函数是1级作用域,1级里面声明的函数开辟的是2级作用域,以此类推如果在2级作用域里访问一个变量,先找自己,自己没有,再找1级,1级没有再找0级,0级没有就报错了统称为:就近原则
4.预解析
语义化: JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
4.1 变量预解析
变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。注意:变量的声明一直在函数的声明的上面
console
.log(num
);
var num
= 10;
var num
;
console
.log(num
);
num
= 10;
4.2 函数预解析
函数的声明会被提升到当前作用域的最上面,但是不会调用函数。
fn();
function fn() {
console
.log('打印');
}
function fn() {
console
.log('打印');
}
fn();
4.3 函数表达式(匿名函数)的预解析
fn();
var fn = function() {
console
.log('打印');
}
var fn
;
fn();
fn = function() {
console
.log('打印');
}
5. 对象
语义化:对象是一组无序的相关属性和方法的集合,就是JS里的一种数据类型。
为什么需要变量: 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。
如果要保存一个人的完整信息呢?要用到对象
相同点不同点
对象都是把一堆数据保存在一起比数组取值清晰,放属性和方法数组只放属性
例:保存一个人的姓名、年龄、身高
var arr
= ['蔡徐坤', 22, '183']
arr
[0]
arr
[1]
arr
[2]
var p
= {
name
:'蔡徐坤',
age
: 22,
height
:183 ,
doSkill
: function() {
console
.log('唱歌');
}
}
p
.name
;
p
.age
;
p
.height
;
p
.doSkill
;
对象的属性
对象中存储具体数据的 "键值对"中的 "键"称为对象的属性,即对象中存储具体数据的项
对象的方法
对象中存储函数的 "键值对"中的 "键"称为对象的方法,即对象中存储函数的项
创建对象的三种方法
5.1 字面量创建对象{}
5.1.1 对象的创建
怎么创建:{ } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键值对的形式表示 ;代码
var star
= {
name
: 'pink',
age
: 18,
sex
: '男',
sayHi
: function(){
alert('大家好啊~');
}
};
特点: ① 里面的属性我们采取键值对的方式,键:属性,值:属性值;有点像css代码 ② 不同的是,每个属性之间用,隔开 ③ 冒号后面跟的是一个匿名函数
5.1.2 对象的使用
调用对象的属性(对象名加属性)
console.log(star.name) // 调用名字属性,用`.`代表的
console.log(star['name']) // 调用名字属性
调用对象的方法(对象名.方法())
star.sayHi(); // 调用 sayHi 方法,注意,一定不要忘记带后面的括号
5.1.3 变量、属性、函数、方法的区别
变量和函数,就比较独立,直接声明,也是直接调用
属性和方法,更有归属感,它们属于某个对象,所以要使用先得先找到这个对象,再点属性或者点方法
var dog
= {
name
: '可可',
age
: 5,
type
:'阿拉斯加',
bark
: function () {
console
.log('one one one')
}
}
dog
.name
dog
.age
dog
.type
dog
.bark()
5.2 利用 new Object 创建对象
1.创建空对象
var andy
= new Object();
2.给空对象添加属性和方法
var andy
= new Object();
andy
.name
= 'pink';
andy
.age
= 18;
andy
.sex
= '男';
andy
.sayHi = function(){
alert('大家好啊~');
}
5.3 利用构造函数创建对象
5.3.1 构造函数语法
语义化:我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面
构造函数的封装格式:
function 构造函数名(形参
1,形参
2,形参
3) {
this.属性名
1 = 参数
1;
this.属性名
2 = 参数
2;
this.属性名
3 = 参数
3;
this.方法名
= 函数体
;
}
构造函数的调用格式
var obj = new 构造函数名(实参1,实参2,实参3) (一定要用new调用格式)
以上代码中,obj即接收到构造函数创建出来的对象。
例:
function Person (name
, age
, sex
) {
this.name
= name
this.age
= age
this.sex
= sex
this.sing = function (song
){
console
.log('唱歌:' + song
)
}
}
var ldh
= new Person('刘德华',16,'男')
ldh
.sing('冰雨')
5.3.2 new 关键字做的事
1.创建了一个新的空对象2.提供this关键字找到这个对象(让this指向这个对象)3.在函数最后返回这个对象(所以构造函数对象中不用加return)
function f1 () {
}
var res1
= f1()
var res2
= new f1()
六. js基础-06-day
1. 遍历对象
for…in语法
for (var key
in 对象名
) {
console
.log(key
);
console
.log(对象名
[key
])
}
数组也可以用,数组的key 代表索引号,值代表索引号对应的值
一. 内置对象
js中的对象:自定义对象 、内置对象、 浏览器对象作用:帮助我们快速开发查阅文档:MDN
2. Math 对象
Math 对象提供了方便做数学运算的一些功能
2.1 属性:
Math.PI: 获得圆周率
2.2 方法:
Math.abs(): 得到绝对值Math.max(): 找出一堆数字中的最大值Math.min(): 找出一堆数字中的最小值 取整Math.ceil(): 向上取整,也就是取整后的结果比原来的值要大Math.floor():向下取整,也就是取整后的结果比原来的值要小Math.round():四舍五入取整,如果小数点是.5那么往大了取,其他其他都是四舍五入 随机数Math.random(): 随机数,获得0-1之间不包括1的随机数 [0,1)
如果要得到任意范围的随机数算法:
Math.floor( Math.random() * ( max - min + 1 ) ) + min
3. 日期对象
2.1 使用,new一个对象
Date构造函数
所以如果要拿到日期对象,需要 new 出一个对象来
var now
= new Date()
var time
= new Date(2020,10,11)
var time
= new Date('2020-10-11')
2.2 方法:
日期对象.getFullYear() : 获取年日期对象.getMonth(): 获取月,这是获得从0开始的月,要转成现实中用的月份,记得要 + 1日期对象.getDate() : 获取日日期对象.getDay(): 获取星期几,星期一到星期六就是获取1-6,只有星期天获取0日期对象.getHours(): 获取时日期对象.getMinutes(): 获取分日期对象.getSeconds(): 获取秒
2.3获得毫秒数(时间戳)
获得1970年1月1日0点到现在已经过了多少的毫秒数
如何获取?
var now
= new Date();
console
.log(date
.valueOf())
console
.log(date
.getTime())
var now
= + new Date();
var now
= Date
.now();
课堂案例1:拿到当前时间,输出: 今年是:XXX年XX月XX日 星期几
课堂案例2:拿到当前时间,输出 时:分:秒 (不足10的要在前面补齐0)
var date
= new Date();
console
.log(date
.getHours());
console
.log(date
.getMinutes());
console
.log(date
.getSeconds());
function getTimer() {
var time
= new Date();
var h
= time
.getHours();
h
= h
< 10 ? '0' + h
: h
;
var m
= time
.getMinutes();
m
= m
< 10 ? '0' + m
: m
;
var s
= time
.getSeconds();
s
= s
< 10 ? '0' + s
: s
;
return h
+ ':' + m
+ ':' + s
;
}
console
.log(getTimer());
4. 数组对象
4.1 检测是不是数组
数据 instanceof Array
如果是得到true,否则得到false console
.log(10 instanceof Array)
console
.log([10] instanceof Array)
Array.isArray()
如果是得到true,否则得到false console
.log(Array
.isArray(10))
console
.log(Array
.isArray([10]))
4.2 添加数组元素
数组.push()
传入要添加的元素,如果有多个元素,用逗号隔开
var arr
= [10,20,30]
arr
.push(40)
arr
.push(50,60)
它是往数组最后添加
返回值是添加后的数组新长度
数组.unshift()
传入要添加的元素,如果有多个元素,用逗号隔开
var arr
= [10,20,30]
arr
.unshift(100)
arr
.unshift(1000,2000)
console
.log(arr
.unshift(1000,2000))
console
.log(arr
)
它是往数组最前面添加
返回值是添加后的数组新长度
案例 筛选数组
var arr
= [1500, 1200, 2000, 2100, 1800];
var newArr
= [];
for (var i
= 0; i
< arr
.length
; i
++) {
if (arr
[i
] < 2000) {
newArr
.push(arr
[i
]);
}
}
console
.log(newArr
);
4.3 数组删除元素
数组.pop()
删除数组的最后一个元素返回值是被删除的元素注意:不要加参数 数组.shift()
删除数组第一个元素返回值是被删除的元素注意:不要加参数
4.4 数组的排序方法
数组.reverse()
反转数组
var arr
= ['pink', 'red', 'blue'];
arr
.reverse();
console
.log(arr
);
数组.sort()(冒泡排序)
排序数组,按从小到大排列
默认情况下,它比较的不是数字大小,而是先比较第一位,小的放前面,如果一样就比较第二位,小的放前面,还一样就比较第三位,以此类推
如果希望按照数字大小从小到大排列
数组
.sort( function (a
, b
) {
return b
- a
} )
4.5 数组根据元素查找下标
数组.indexOf(元素)
从前往后找,找到第一个匹配的元素的下标如果找不到返回-1 数组.lastIndexOf()
从后往前找,找到从后往前第一个匹配的元素的下标如果找不到返回-1 案例:数组去重
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(['blue', 'green', 'blue'])
console
.log(demo
);
4.6 转换成字符串
数组.toString()
可以把数组每个元素用逗号连接,转成字符串
例:
var arr
= ['red','blue','green']
var str
= arr
.toString()
console
.log(str
)
数组.join()
可以把数组每个元素用你传入的符号连接,转成字符串
如果不传符号就是逗号连接
例:
var arr
= ['red','blue','green']
var str
= arr
.join('-')
console
.log(str
)
5. 字符串
5.1 基本包装类型
原理:基本包装类型就是把简单数据类型(Number,String,Boolean)包装成为复杂数据类型,这样基本数据类型就有了属性和方法js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
var temp
= new String('andy');
str
= temp
;
temp
= null;
5.2 字符串的不可变
字符串不可改 (给他改值,相当于在内存中创建了一个新的空间,因此,一定赋值,才有用)
var str
= 'andy';
str
[0] = 'b'
console
.log(str
[0]);
console
.log(str
);
大量拼接字符串耗性能
5.3 根据字符返回位置(下标)
indexOf('查找的字符',开始的位置) ① 开始的位置:就是下标; ② 如果没有这个字符,返回-1; ③ 只返回,从开始的位置到找到的第一个相匹配的字符的下标
案例:求某个字符出现的位置和次数
var str
= "oabcoefoxyozzopp";
var index
= str
.indexOf('o');
var num
= 0;
while (index
!== -1) {
console
.log(index
);
num
++;
index
= str
.indexOf('o', index
+ 1);
}
console
.log('o出现的次数是: ' + num
);
5.4 根据位置找到字符
str[i]
var str
= 'andy';
str
[index
]
console
.log(str
[0]);
案例:统计一个字符串中出现次数最多的字符
var o
= {
age
: 18
}
if (o
['sex']) {
console
.log('里面有该属性');
} else {
console
.log('没有该属性');
}
var str
= 'abcoefoxyozzopp';
var o
= {};
for (var i
= 0; i
< str
.length
; i
++) {
var chars
= str
.charAt(i
);
if (o
[chars
]) {
o
[chars
]++;
} else {
o
[chars
] = 1;
}
}
console
.log(o
);
var max
= 0;
var ch
= '';
for (var k
in o
) {
if (o
[k
] > max
) {
max
= o
[k
];
ch
= k
;
}
}
console
.log(max
);
console
.log('最多的字符是' + ch
);
</script
>
5.5 concat:连接字符串,
concat(str1,str2...)
将多个字符串相连相当于+,+更常用
5.6 substr:截取字符串
字符串.substr(start,length) - 参数1:从哪个下标开始截 - 参数2:截取多少个长度
5.7 replace: 替换字符
作用:replace() 方法用于在字符串中用一些字符替换另一些字符,语法:replace(被替换的字符串, 要替换为的字符串)
参数1:要被替换的内容参数2:替换成什么内容默认只能替换到第一个 l案例:如何全部替换
var str
= 'andyandy';
console
.log(str
.replace('a', 'b'));
var str1
= 'abcoefoxyozzopp';
while (str1
.indexOf('o') !== -1) {
str1
= str1
.replace('o', '*');
}
console
.log(str1
);
5.8 split:切割成数组
var str2
= 'red, pink, blue';
console
.log(str2
.split(','));
var str3
= 'red&pink&blue';
console
.log(str3
.split('&'));
- 切割成数组
- 根据你传入的符号来切割成数组
二. 值类型和引用类型
所有的基本数据类型都是值类型所有的复杂数据类型都是引用类型值类型:
传递数据时,传递的就是值 引用类型:
传递数据时,传递的是地址 只要遇到 new Array() 或者 [] 都会在堆里开辟新空间只要遇到 new Object() 或者 {} 都会在