JavaScript【ECMA:基础三】

目录

一、引用数据类型--数组

二、函数

案例练习

三、函数表达式

案例练习

四、作用域

五、引用数据类型--object

六、采用for in 遍历对象属性的重要思想

案例练习

七、内置对象--Math

案例练习

案例练习

八、逻辑中断

九、数据存储机制


一、引用数据类型--数组

数组是一种特殊变量,它能够实现一个名存多个数据值(可以是不同类型)

[]是数组字面量

数组里面的每个值都有一个对应的下标 下标的排序方法是:从左往右按顺序编号由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 函数名 (形式参数列表) {

函数体

}

温馨提示:

  1. 在js中形参的变量不需要用声明关键字

  2. 用标识符规则来给函数命名

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.局部作用域

作用于局部代码:部分有效 ​ 例如:循环范围内,函数范围内

温馨提示:

  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等

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值