目录
一、引用数据类型--数组
数组是一种特殊变量,它能够实现一个名存多个数据值(可以是不同类型)
[]是数组字面量
数组里面的每个值都有一个对应的下标 下标的排序方法是:从左往右按顺序编号由0开始 作用是用于对数组里面其中一个值进行操作 在js中,数组可以存放任意数据类型的数据:可以混存
1.数组的创建
语法:let 数组名 = []
let arr = []
2.数组的初始化
语法:let 数组名 = [值1,值2,·····]
let arr = [1,2,3,3.3,"大大"]
3.查询数组内的元素
语法: 数组名[下标]
let animal = ['虎','猫',10,10.2]
console.log(animal[1])
4.修改数组内元素
语法:数组名[下标] = 值
let animal = ['虎','猫',10,10.2]
animal[1]='狗'
console.log(animal)
5.增加数组内元素
语法:数组名.push(值)
温馨提示:push属性方法是在数组最后面开始添加,并且会返回该数组的新长度(常用)
语法: 数组名.unshift(值)
温馨提示:unshift()属性方法是在数组最开头添加,并且会返回该数组的新长度(不常用、基本不用)
let animal = ['虎','猫',10,10.2]
animal.push(10)
animal.unshift('猪')
console.log(animal)
6.删除数组内的元素
语法:数组名.pop()
温馨提示:该属性方法可以删除数组最后面的一个值,并返回删除元素的值
语法:数组名.shift()
温馨提示:该属性方法可以删除数组第一个值,并返回删除元素的值
语法:数组名.splice(起始下标,删除个数)
温馨提示:该属性方法可以删除从起始下标开始删除对应个元素
let animal = ['虎','猫',10,10.2]
animal.pop()
animal.shift()
animal.splice(1,1)
7.获取数组的长度
语法:数组名.length
let animal = ['虎','猫',10,10.2]
console.log(animal.length)
二、函数
函数是被设计执行特定任务的代码块
为什么需要函数?
帮助我们快速开发,提高代码的复用性
前面的alert() 、 prompt() 、 console.log()这些是js已经封装好的函数,可以直接使用
1.函数的定义
语法:
function 函数名 (形式参数列表) {
函数体
}
温馨提示:
-
在js中形参的变量不需要用声明关键字
-
用标识符规则来给函数命名
function getSum(a = 0, b = 0){
let sum
sum = a + b
}
2.函数的调用
函数只定义不调用是不能执行的,因此函数需要调用
语法:函数名(实际参数列表)
//定义
function getSum(a = 0, b = 0){
let sum
sum = a + b
}
//调用
get(1, 2) //3
get() // 若不给a和b默认值则undifined+undifined=NaN
3.函数的默认参数
若不给有参数的函数附加参数,java中会报错,但是在js中形参会被定为undifined ,在开发中,我们通常给形参加默认值0,这样使得程序更加严谨
//定义
function getSum(a, b){
let sum
sum = a + b
}
//调用
get() // 若不给a和b默认值则undifined+undifined=NaN
get(0,0) //给默认值0使程序严谨
4,函数的返回值
当函数需要返回数据出去到调用者时,用return关键字
通常需要声明一个变量或者数组来存储函数的返回值,以接着使用这个返回值
温馨提示:在开发中很多情况需要用到带有返回值的函数,函数中执行return后,后面的代码不执行,函数直接结束
function sum (a,b) {
let c
c = a + b
return c
}
result = sum(1,2)
console.log(result)
5.温馨提示:函数注意事项:相同名字的函数,则调用后面的那个
案例练习
获取学生成绩中的最高分
// 1.封装一个求最大值函数
// 2.传递数组参数
// 3.函数内部进行求数组最大值
let arr1 = [25,25,64,77,99]
function getSum(_arr1){
let max = _arr1[0]
for(let i = 1; i < _arr1.length; i++){
if(max < _arr1[i]){
max = _arr1[i]
}
}
return max
console.log(max) //函数已经结束了,不执行了
}
let _max = getSum(arr1)
console.log(max)
//这个案例告诉了我们,在js中数组作为形式参数不需要数组字面量来表示,它通过所传递的实际参数来判断是数组还是变量
//在js中不需要声明返回值类型,js自动识别返回
三、函数表达式
1.具名函数表达式
可以先调用函数,再定义函数或先定义函数再调用函数
也就是调用函数可以在定义前也可以在定义后
语法:
function 函数名(参数列表){ 函数体 }
fn1()
function fn1() {
console.log('具名函数表达式')
}
2.匿名函数表达式
只能先定义函数,再调用函数
也就是调用函数只能在定义后
语法: let 函数名 = function (参数列表){ 函数体 }
let fn2 = function () {
console.log('匿名函数表达式')
}
fn2()
3.立即执行函数表达式
立即声明立即调用 定义完紧跟着调用
立即执行必须以分号结尾;
作用:防止全局变量污染
语法:
(function (参数列表){ 函数体 })(参数列表)
(function () { console.log('立即执行函数') })()
案例练习
用户输入秒数,自动转换为时分秒
//1.用户输入总秒数(注意默认值)
//2.计算时分秒(封装函数)里面包含数字补0
//3.打印输出 //计算公式 h 总秒数/60/60%24 m 总秒数/60%60 s 总秒数%60
let sss = +prompt('请输入秒数')
let js = function (_s){
let h = parseInt(_s / 60 / 60 % 24)
let m = parseInt(_s / 60 % 60)
let s = parseInt(_s % 60)
/*
if(h < 10){
h='0'+h
}
if(m < 10){
m='0'+m 这样写不美观还繁琐,对于这种我们应用三元表达式
}
if(s < 10){
s='0'+s
}
*/
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
document.write(`${sss}秒对应的时间是${h}时${m}分${s}秒`)
}
js(sss)
四、作用域
作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突
1.全局作用域
作用整个代码:全局有效
2.局部作用域
作用于局部代码:部分有效 例如:循环范围内,函数范围内
温馨提示:
-
按变量来分,可分为全局变量和局部变量
-
不同作用域相同名字的变量不冲突,但执行按照-----就近原则 例如:函数外num和函数内num 现在num=10,则改变的是函数内的num
let t =10 //t为整个js的全局变量
function test(b = 0) {
let x = 20 //x为函数内的局部变量
for(let i = 0; i < 1; i++){
let e = 10// i和e为for循环内的局部变量
console.log(e)
}
console.log(b)//b为函数内局部变量
}
test(1)
五、引用数据类型--object
对象是一种无序(无下标)的数据集合,数组是有序(有下标)的数据集合,可以详细描述某个事物
{}是对象的字面量
对象由 属性(静)和 方法(动)构成
1.对象的声明
语法:let 对象名 = { }
2.对象的属性
属性由基本数据类型的变量组成
温馨提示:但由于是在对象里面,因此他们都变成了引用数据类型
语法:
属性名:值
不同的属性之间用 , 隔开
对象内的属性,只能对象自己使用,对象外无法使用(局部作用域)
3.对象的初始化
语法:let 对象名 = { 属性:值, ······· }
let obj = { name: '大哥', age: 16}
console.log(typeof obj) //object
//console.log(age) age不存在,无法使用
console.log(dx.age) //通过对象自己使用
4.对象的查询
语法:
第一种:对象名.属性名
第二种:对象名['属性名']
-
当属性名为字符串的时候 'new-name'必须使用这个方法去查 当然这个方法也适用于正常的命名
let dx ={
name: '大哥',
age: 12,
address: '江西',
'birth': 2001
}
console.log(dx.name)
console.log(dx['birth'])
5.对象的更新
语法:
第一种:对象名.属性名 = 值
第二种:对象名['属性名'] = 值
let dx ={
name: '大哥',
age: 12,
address: '江西',
'birth': 2001
}
dx.name = '小弟'
console.log(dx.name)
dx['birth'] = 2002
console.log(dx['birth'])
6.添加对象
语法:
第一种:对象名.新属性名 = 新值
第二种:对象名['新属性名'] = 新值
let dx = {
name:'大哥',
age:12,
address:'江西',
'birth':2001
}
dx.phone = 'iphone'
console.log(dx.phone)
dx[’fruit‘] = '香蕉'
console.log(dx['fruit'])
7.对象的删除(少用)
语法:
第一种:delete 对象名.属性名
第二种:delete 对象名['属性名']
let dx ={
name: '大哥',
age: 12,
address: '江西',
'birth': 2001
}
delete dx.name
delete dx['birth']
console.log(dx)
8.对象内方法
方法由匿名函数构成
不同的方法用 , 隔开
语法:
方法名:function(形式参数列表){
方法体
}
9.对象内方法的使用
对象内的方法,只能对象自己使用,对象外无法使用(局部作用域 -对象方法的调用
语法:
对象名.方法名(实际参数列表)
let dx = {
name:'大哥',
age:12,
address:'江西'
'birth':2001,
sum:function(x = 0, y = 0){
return x+y
}
}
dx.sum(1,3) //调用对象内方法
六、采用for in 遍历对象属性的重要思想
由于对象是无序的,无法采用正常的for和while循环来进行遍历,因此引入了一个for in的循环来遍历对象属性
1.整体打印对象属性
语法:对象名
2.分步打印对象属性
语法:for(let 变量名 in 对象名){ //开发中通常用key和k来当这个变量名
console.log(变量名) //得到带字符串的属性名!!!
console.log(对象名[变量名]) //由于得到的是字符串的属性名所以使用[]来查
}
let obj = {
name:'大哥',
age:19,
sex:'男'
}
for(let key in obj){
console.log(key)
console.log(obj['key'])
}
案例练习
打印数组中的对象和对象的属性
知识补充:数组对象
我们把对象存储在数组里面叫做数组对象
let student = [
{name:'小明',age:12},
{name:'小华',age:23},
{name:'小天',age:22},
{'name':'大哥',age:25,}
]
for(let i = 0; i < student.length; i++){
console.log( student[i])
console.log( student[i].name )
}
七、内置对象--Math
js内部提供的对象,里面包含了各种属性和方法供开发者调用
例如:
document.write() ----document
console.log()----console
1.获取π的值
语法:Math.PI
console.log(Math.PI) //3.14....
2.向上取整
语法:Math.ceil(值)
console.log(Math.ceil(1.1)) //2
3.向下取整
语法:Math.floor(值)
console.log(Math.floor(1.1)) //1
4.四舍五入
语法:Math.round(值)
console.log(Math.round(1.5)) //2
console.log(Math.round(1.4)) //1
5.取绝对值
语法:Math.abs(值)
console.log(Math.abs(-1)) //1
6.取最大值和最小值
最大值语法:Math.max(值)
最小值语法:Math.min(值)
温馨提示 : 不能取数组内的最大值和最小值
7.取随机数
语法:Math.random()
-
获取左闭右开[0,1)区间内的一个随机 小数
console.log(Math.random())
//延伸范围
console.log( Math.random()*10 ) //[0,10)
console.log( Math.random()+10 ) // [10,20)
//搭配使用
console.log( parseInt(Math.random())) //将随机小数变成随机整数
console.log( Math.floor(Math.random())) //将随机小数向下取整
//指定范围 [N,M)
//console.log( Math.random() * ())
等等还有很多方法,可以参考文档查看
案例练习
随机获取数组内元素
let str = '#'
let ar2 = ['a', 'b', 'c', 'd', 'e', 'f']
let rg = function (flag) {
if (flag == false) {
let r = parseInt(Math.random() * 256)
let g = parseInt(Math.random() * 256)
let b = parseInt(Math.random() * 256)
return `rgb(${r},${g},${b})`
} else {
for (let i = 0; i < 4; i++) {
str += ar2[parseInt(Math.random() * ar2.length)]
}
return str
}
}
rg(false)
rg(true)
案例练习
输入一个布尔值,返回随机的rgb颜色
//1.定义一个函数完成
//2.传入的参数为true和不传参则不返回rgb颜色,则返回ar2数组随机4个字符串,开头加上#
//3.传入参数为false则返回一个随机rgb颜色
let str = '#'
let ar2 = ['a', 'b', 'c', 'd', 'e', 'f']
let rg = function (flag) {
if (flag == false) {
let r = parseInt(Math.random() * 256)
let g = parseInt(Math.random() * 256)
let b = parseInt(Math.random() * 256)
return `rgb(${r},${g},${b})`
} else {
for (let i = 0; i < 4; i++) {
str += ar2[parseInt(Math.random() * ar2.length)]
}
return str
}
}
rg(false)
rg(true)
八、逻辑中断
由于某些逻辑判断可以提前得到结果,因此当提前判断得到结果时它就不会判断后面的
发生逻辑中断的运算符 && 和 ||
例如:A && B ,当A为false时,其实已经得到了这个判断结果了,此时不会再对B进行判断,则我们称之发生了逻辑中断
1.逻辑运算符结果赋值问题
执行到哪个,就是哪个值
2.逻辑中断的优点
提高代码运行效率
3.Boolean类型的转换 进行逻辑运算符判断的时候,两边会转换成 Boolean类型
'' 、 0 、undifined 、null 、false 、NaN 这些转换为布尔型都是false
正常其他的都为true
//逻辑中断也用来给形式参数加默认值
function mrz(x, y, z) {
x = x || 0
y = y || 0
//当x,y有值时,则x=x y=y
//当x,y无值时,则x=0 y=y
let zz
zz = zz && 0
//执行到z判断后已经知道整个逻辑判断的答案了为false
//因此不再对0判断
}
let j = 11
j = j < 10 && j > 2 //j<10这里是比较运算符,得到的结果为布尔型,也就是false
//此时发生逻辑中断,j所得到的值,就是false
console.log(j)
九、数据存储机制
1.基本数据类型存储
存储在栈内存中 从栈内存找到值,然后返回值
2.引用数据类型存储
存储在堆内存中 从栈内存找到地址,然后指向堆内存找到值,然后返回值 对象、数组\ Data等