函数:
function sayHi() {
console.log('hello,function!')
}
sayHi()
定义函数:
function 函数名(){
函数体
}
调用函数
函数名()
函数必须进行调用,才会执行
函数形参,实参:
function getSum(a,b) {
console.log(a + b)}
getSum(2,3)
函数返回值:
function getSum(a,b) {
return a + b——函数要有返回值,一定要添加return关键字,否则返回值为undefi
} let a=getSum(2,9)
console.log(a)
关键字传参法
function getSum(a,b) {
return a + b}
let en=getSum(b = 2,a = 1)
console.log(en)
arguments 接收所有实参,并保存到arguements数组里
function getSum(a,b) {
console.log(arguments)}
let e=getSum(2,34,5,6)
调用:
1,声明函数时的形参没有数量限制,当有多个形参时使用“,”分隔
2,调用函数传递的实参与形参的顺序一致
匿名函数——没有名字的函数
setInterval(function () {console.log('你真傻') }, 1000)——
1000ms,每1隔1s打印一次
伪数组:实参数不确定,用arguements接收,如果参数固定写形参,不固定用arguments
有些地方不能用arguments
函数表达式
let a = function getSum() {——给函数赋予了变量名
console.log('jiangjia')
}
a()
立即执行函数
无需调用,立即执行,其实本质已经调用了
多个立即执行函数之间用分号隔开
(function () { console.log('liqingyu') })()
(function () { console.log('jiangjia') }())
值传递,引用传递
值传递:
let a = 10
let b = 20
function change(x, y) {
x = 30;
y = 50;
}
change(a, b);
alert(a + "--" + b)
——传的是值而非地址,不能改变
引用传递:
let arr = [1, 3, 4, 5]
function change2(a) {
a.push(1000)
}
change2(arr)
alert(arr)
——传地址,发生改变
默认值参数
function getCir(r, PI = 3.14) {
return PI * r * r
}
let a = getCir(3)
console.log(a)
——写在形参的尾部,大写区分,传递形参时不用传
箭头函数
setInterval(function () {
console.log('i love you')
}, 1000)
等价于--->
setInterval(() => {console.log('i hate you')}, 1000)
递归
递归式函数的条件:
1,基线条件
问题分解为最小问题时
2,递归条件
将问题继续分解
function jiecheng(n) {
if (n === 1) {
return 1
} else {
return n * jiecheng(n - 1)
}
}
let a = jiecheng(3)
——n的阶乘
练习(1加到100)
function xiangjia(n){
if(n===0)return 1
return n+xiangjia(n-1)
}
let sum=xiangjia(100)
alert(sum)
闭包函数
·可以在函数的外部访问到函数内部的局部变量
·让这些变量始终保存在内存中,不会随着函数的结束而自动销毁
function outer(){
var a='变量1'
var inner=function(){
console.info(a)
}
}——//inner就是一个闭包函数,因为他能够访问到outer函数的作用域
数组遍历
let arr = ['a', 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
——arr.length测出数组的长度
字符串的常见方法
1,
let str = '你是who'
console.log(str.split(' '))
——用空格拆分元素,并把其转换成数组
2,
console.log(str.substring(2, 4))
——从第二个截取到第四个(左闭右开)
3,
let str = '你是who'
console.log(str.startsWith('你'))
——判断字符串是以什么开始
4,
let str = '你是who'
console.log(str.endsWith('你'))
——判断字符串是以什么结束的
5,
let str = '你是who'
console.log(str.includes('w'))
——判断里面是否存在这个字符串
对象:
对象——保存用户信息,无序的数据集合,数组是有序的数据集合——描述某个事物
声明:
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
查找对象元素
console.log(obj.uname)
console.log(obj['age'])——中括号里面是字符串
let obj2 = {
uname: '刘德华',
age: 60,
sing: function () {
console.log('我要唱歌了')
}
}
obj2.sing()
改: obj.uname = 'GGBond'
对象.属性名
增:
obj.sing = function () {
console.log('sing~')
}
对象.新属性名
删:
delete obj.gender
console.log(obj)
delete 对象.属性名
查找数组对象
let arr0bj=[
{
unanme:'a',
age:12
},
{
unanme:'b',
age:11
},
{
unanme:'c',
age:10
}
]
console.log(arr0bj)
alert(arr0bj[1].unanme)
arr0bj[1]['uname']
for(let i=0;i<arr0bj.length;i++)
for(let k in arr0bj[i]){
console.log(arr0bj[i][k])
}——数组对象遍历
math内置对象
console.log(Math.E) ——e的自然数
console.log(Math.PI)——Π的自然数
console.log(Math.ceil(3.1415))——向上取整
console.log(Math.floor(3.1415))——向下取整
console.log(Math.abs(-3.12))——取绝对值
console.log(Math.pow(3.12, 10))——pow
console.log(Math.sqrt(9))——开平方根
随机数:math.random()——左闭右开
console.log(Math.floor(Math.random() * 11))
——取0-11的整数向下取整
Math.floor(Math.random() * (M-N+1))+N
——取N-M的整数
日期内置对象
let date = new Date()
——获取现在时间
let year = date.getFullYear()——获取年
let month = date.getMonth() + 1——获取月从0开始需要加1
let day = date.getDate()——获取日
let hh = date.getHours()——获取小时
let mm = date.getMinutes()——获取分钟
let ss = date.getSeconds()——获取秒
let gg = date.getDay()——获取星期
document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)
——打印
let a = 3.234364
alert(a.toFixed(4))——保留几位小数点
获取元素
<div>盒子</div>
<ul>
<li>1</li>
<li class="two">2</li>
<li>3</li>
<li id="four">4</li>
</ul>
1、通过css选择器获取——(‘字符串’)推荐
const li2 = document.querySelector('.two')
const li = document.querySelector('li')
document.querySelectorAll将所有匹配的元素全部获取到,并存放到伪数组
const lis = document.querySelectorAll('li')
调用其中的元素需要用遍历:
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
const li3 = document.querySelector('ul li:nth-child(3)')
2,其他
console.log(document.getElementsByTagName('div'))
console.log(document.getElementById('four'))
console.log(document.getElementsByClassName('two'))
修改元素内容
<div class="one">我是一个即将被更改的盒子</div>
<div class="two">我是一个即将被更改的盒子</div>
<script>
// 1、获取元素
const box1 = document.querySelector('.one')
const box2 = document.querySelector('.two')
console.log(box1)
console.log(box2)
// 2、操作
box1.innerText = `<h1>jiangjia</h1>`——innerText不能识别标签
box2.innerHTML = `<h1>chensongjie</h1>`——可以识别标签
</script>
随机点名案例:
<div>jiangjia</div>
<script>
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 1、获取元素
const box = document.querySelector('div')
// 2、获取随机数 n-0 m---arr.length-1 ( Math.floor(Math.random() * (M-N+1))+N)
let random = Math.floor(Math.random() * arr.length)
// 3、改内容
box.innerHTML = `${arr[random]}`
</script>
修改元素属性
<img src="../images/1.webp" alt="刘德华" title="刘德华">
<input type="text" placeholder="wedjed" readonly>
<button disabled>同意该协议</button>
<script>
// 1、获取元素
const img = document.querySelector('img')
const ipt = document.querySelector('input')
const btn = document.querySelector('button')
// 改元素属性 对象.属性=值
img.src = "../images/2.webp"
img.title = "我是个大帅哥"
ipt.type = "password"
ipt.placeholder = "请输入用户名"
ipt.readOnly = false
btn.disabled = false
</script>
修改元素样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: rgb(207, 39, 67);
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1">1111</div>
<div class="box2 box1"></div>
<script>
// 1、获取元素
const box2 = document.querySelector('.box2')
const div = document.querySelector('.box1')
// 2、通过style修改样式
div.style.width = '500px'
div.style.fontSize = '16px'
div.style.backgroundColor = 'pink'
// 3、通过添加类名 calssName会将原来的类名删除掉,不建议使用
// box2.className = 'box1'
// classlist.add('类名')追加
box2.classList.add('box1')
// box2.classList.remove('box1') 移除
box2.classList.toggle('box1') //切换:有则删除,没有则添加
</script>
</body>
</html>
——通过style修改样式
div.style.width = '500px'
div.style.fontSize = '16px'——此处原本的font-size要先成fontSize
box2.className = 'box1'
——通过添加类名 className会将原来的类名删除掉,不建议使用
box2.classList.add('box1')追加
box2.classList.remove('box1') 移除
box2.classList.toggle('box1') //切换:有则删除,没有则添加
定时器:
setTimeout\setInterval 定时器
setTimeout :某段代码或者函数在多久后执行——代码必须以字符串形式传入
格式:setTimeout(code||function,time(ms))——要莫是代码要莫是函数
返回值是一个整数,代表定时器编码,一般存在多个定时器
代码:
let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)
console.log(timer)
函数:
let timer3 = setTimeout(
fn, 3000)——注意传的是函数名,不是函数调用
function fn() {
console.log('6666666')
setTimeout(函数或一段代码,延迟时间,实参……)——实参为传入函数的实参
let timer4 = setTimeout(function (a, b) {
console.log(a + b)
}, 2000, 1, 4)
let obj = {
uname: 'gouxin',
a: 3,
b: 4,
sum: function () {
console.log(this)
console.log(this.a)}
}
obj.sum()
setTimeout(obj.sum, 1000)
定时器的第一个参数如果是对象方法,this不再指向对象,指向全局环境
解决方法:
1,通过改变为函数调用
setTimeout(function () { obj.sum() }, 1000)
2,将this定在obj上
let a = setTimeout(obj.sum.bind(obj), 1000)
setInterval—— 间隔一段时间,将代码或者函数执行一次
let timer = setInterval(' console.log(\'6666666\')', 1000)——/为转义字符
clearInterval(timer)——清楚定时器