目录
1.作用域
<!--
作用域：
全局作用域：
作用于整个script标签内或者js文件中的所有代码
局部作用域：
作用于函数内的代码，
-->
<script>
// var age = 18 //全局作用域
// function fn() {
// var age = 20 //局部作用
// }
// fn()
// 变量作用域： 全局作用域和局部作用域下的变量可以定义相同的变量名，不会出现变量覆盖的情况
// 全局变量：在全局作用域下的变量
// 特点：代码在任何位置都可以使用
// var声明的变量是全局作用域（在全局作用域下）
// 局部变量 ：在局部作用域下的变量
/*
特点：局部变量只能在该函数内使用
var在局部作用域下定义的变量是局部变量
局部作用域下只会在局部作用域查找需要的变量，如果局部作用域没有这个变量，就会朝全局作用域查找
*/
// 函数中的形参是局部变量
// 全局变量只有在浏览器关闭的时候才会销毁，局部变量在函数运行结束后就会销毁
var num = 20 //全局变量
// console.log(a)
function fn(a) {
console.log(num)
// var num = 30 //局部变量
// console.log(num)
}
fn(1)
// console.log(num)
</script>
2.作用域链
<!-- 作用域链： 函数之间的链条，也就是说一个函数可以访问另一个函数内的变量(内部函数可以访问外部函数的变量，外部函数没办法访问内部函数的变量)
每个函数都输独立的作用域，但是内部函数属于外部函数
采取的是就近原则
如果函数内套函数时，两个函数都需要调用，否则不调用的函数不会执行
-->
<script>
function fn() {
// var num = 20
console.log(num)
function fn1() {
var num = 30
// console.log(age)
// console.log(num)
}
fn1()
// console.log(age)
}
fn()
// function fn(){
// console.log(num)
// function fn1(){
// var num;
// }
// }
</script>
3.作用域案例
<script>
// 1
var num = 1
function fn() {
var num = 20
console.log(num) //20
function fn1() {
console.log(num) //
}
}
fn()
// // 2
function fn2() {
var age = 18
function fn3() {
console.log(age)
function fn4() {
console.log(age)
}
fn4()
}
}
fn2()
// 3
// var num2 = 30
// function fn5() {
// console.log(num2) // 30
// }
// fn5()
// 4
var a = 8;
function fn6() {
var a = 20;
var b = '4';
fn7();
function fn7() {
var a = 3;
fn8();
function fn8() {
var a = 4;
console.log(a); // 4
console.log(b); // 4
var b = 1
}
}
}
fn6();
</script>
4.预解析
<script>
// 预解析 ：js代码由浏览器中的js解析器进行执行的，
// js代码执行分两步： 1 预解析 2 执行代码
// 代码执行是从上到下执行的
// 预解析:在当前作用域下,js代码执行之前，浏览器会默认吧带有var 以及function 声明的变量在内存中提前声明
// 声明在整个作用域最前面
// var num;
// console.log(num) //undefined
// num = 20
// function fn() {
// console.log(12121212)
// }
// fn()
var fn;
fn = function () {
console.log(111111)
}
fn()
</script>
</body>
5.预解析案例
<script>
// 1
// console.log(num) //undefined
// var num = 1
// console.log(num) //1
// var num = 2
// // 执行：
// var num;
// console.log(num)
// num=1
// console.log(num)
// num=2
// 2
// fn()
// function fn() {
// var a = 2
// console.log(a) //2
// console.log(b) //undefined
// var b = 3
// }
// function fn() {
// var a;
// a = 2
// var b;
// console.log(a)
// console.log(b)
// b = 3
// }
// 3
// fun()
// var fun = function () {
// var c = 5
// console.log(c) //报错
// var c = 4
// }
// var fun;
// fun()
// fun = function () {
// var c;
// c = 5
// console.log(c)
// c = 4
// }
// 4
// var d = 10
// function fn() {
// var a, b, c, d = 2
// console.log(d) // 2
// var d = 12
// }
// fn()
// var d;
// d = 10
// function fn() {
// var a, b, c, d;
// a, b, c, d = 2
// console.log(d)
// d = 12
// }
</script>
6.对象
<script>
// 对象：万物皆对象 ,对象里面可以储存任意的东西
// 创建对象：
//1 new关键字
// var obj = new Object()
// console.log(obj)
// 2 字面量
// var obj = {}
// console.log(obj)
// 为什么需要对象：它是可以保存一个人的完整信息，
// 给对象里面存东西时 是 对象名.属性名=属性值
// 对象里面是 属性名：属性值 存在
var uname = '张三'
var age = 18
var sex = '男'
var obj = {}
obj.uname = '张三'
obj.age = 18
obj.sex = '男'
obj.getStudy = function () {
console.log('我要学习')
}
console.log(obj)
obj.getStudy()
</script>
7.基本数据类型和引用类型
<script>
// 基本数据类型： number string boolean undefined null
// 引用数据类型：object
/*
基本数据类型值是存在栈里，引用数据类型的值是存在堆里，
栈里直接通过url地址指向堆里的值，
所以在改变引用数据类型时，赋值给其他引用数据类型的值也会随之改变
*/
var a = 1
var b = a
a = 2
console.log(a) //2
console.log(b)// 1
var obj = {
name: '张三'
}
var obj1 = obj
obj.name = '王多磊'
console.log(obj.name) // 王多磊
console.log(obj1.name) // 张三
</scrip
8.对象特点
<script>
/*
对象：把相关的属性和方法放在一起的集合，
对象需要属性名和属性值（键值对，键：name,值:'张三'）
对象的属性名没有特殊要求
通过属性名.属性值给对象添加数据时，属性名不能是数字，否则会报错
可以通过对象名['属性名']来给对象添加数据
如果通过对象名['属性名']的方式添加了数字型的属性名时，
需要用对象名['属性名']来去获取属性值
*/
var obj = {
name: '张三',
111: 12323
}
// obj.111 = 'zhangsan'
obj[111] = '你好'
var arr = ['张三', '18', '男']
console.log(obj[111])
console.log('name' in obj)
</script>
9.判断对象的属性
<script>
// 三种创建方式：
// 一 字面量
var obj = {
name: '张三',
age: 18,
getStudy: function () {
console.log('学习使我快乐')
},
son: {
name: '王五',
age: 13
}
}
// in 判断对象里是否有某个属性名 '属性名' in 对象名 返回值是true和false true代表有此属性名，false代表没有此属性名
// 属性名一定要用引号
// console.log('sex' in obj) //true
// for... in...
var arr = [1, 2, 3, 4]
for (k in obj) {
console.log(k)
// console.log(arr[k])
}
</script>
10.三种创建对象方式
<script>
// 三种创建方式：
// 一 字面量
// var obj = {
// name: '张三',
// age: 18,
// getStudy: function () {
// console.log('学习使我快乐')
// }
// }
// var obj1 = {
// name: '李四',
// age: 18,
// getStudy: function () {
// console.log('学习使我快乐')
// }
// }
// var obj1 = {
// name: '王五',
// age: 18,
// getStudy: function () {
// console.log('学习使我快乐')
// }
// }
// obj.name
// // 二 new关键字
// var obj = new Object()
// obj.name = '张三'
// obj.age = 18
// obj.getStudy = function () {
// console.log('学习使我快乐')
// }
// obj.getStudy()
// 构造函数 ：函数名首字母一定要大写 需要new 构造函数名()调用
function Get(uname, age) {
this.uname = uname
this.age = age
}
var obj = new Get('张三', 18)
console.log(obj)
var obj1 = new Get('李四', 18)
console.log(obj1)
</script>
11.遍历对象
<script>
// 遍历对象 for ...in 也可以遍历数组 k代表属性名
// 对象由属性名属性值组成 或键值对 或key value
// var obj = {
// name: '张三',
// age: 18,
// sex: '男'
// }
// for (k in obj) {
// // console.log(k)
// console.log(obj[k])
// }
// for in 遍历数组时，k代表数组的索引
var arr = [1, 2, 3, 4, 5]
for (a in arr) {
// console.log(a)
console.log(arr[a])
}
</script>
12.对象的练习
// 1
// console.log(a) // undefined
// var a = 10
// console.log(a) //10
/*
var a;
console.log(a)
a=10
console.log(a)
*/
// 2
// console.log(fun1()) //打印函数fun1
// // console.log(fun2()) // undefined
// function fun1() {
// console.log('函数fun1')
// }
// var fun2 = function () {
// console.log('函数fun2')
// }
// console.log(fun1()) //打印函数fun1
// console.log(fun2()) //打印函数fun1
// function fun1(num) {
// var num = 1
// console.log('函数fun1')
// console.log(num)
// }
// console.log(fun1(1))
// fun1()
// // 3
// var a = 10
// console.log(a) //10
// function fun2() {
// var a
// alert(a) //undefined
// a = 20
// alert(a) //20
// }
// fun2()
// // 4
// var a = 1
// function fn1() {
// alert(a) //undefined
// var a = 2
// }
// fn1()
// alert(a) // 1
// // 5
// var a = 1
// function fn1(a) {
// alert(a) // undefined
// a = 2
// }
// fn1()
// alert(a) //1
// 6
var a = 1
function fn1(a) {
alert(a) //1
a = 2
}
fn1(a)
alert(a) //1
alert(a) //1
var a = 1
alert(a) //1
function a() {
alert(2) //
}
alert(a) //1
var a = 3
alert(a) //3
function a() {
alert(4) //4
}
alert(a) //3
alert(typeof a) //number
a()
</script>
13.内置对象
<!-- 内置对象： js自带的对象，Math,Array、String、Date
-->
14. Math最大最小值
<!--
Math是数学相关的运算，max min,底层原理就是for循环
Math是直接拿来就可以用的 ,
如果数值里有非数字的值，取大小时会直接打印NaN
-->
<script>
console.log(Math.max(1, 2, 5, 56, 45))
console.log(Math.min(-2, 6, -23, 644))
console.log(Math.min(-2, 6, -23, 'dfdf'))
</script>
15.Math取整
<script>
// 取整：
// floor 向下（地板）取整，无论小数多小都朝下取整,如果是负数时，取整后值会变小
// ceil 向上（天花板）取整，无论小数多小都朝上取整，如果负数时，取整后是变大
// round 四舍五入取整方式 负数一样四舍五入取整
// abs 取绝对值
console.log(Math.abs(7))
// console.log(Math.round(1.2)) //1
// console.log(Math.round(1.5)) //2
// console.log(Math.round(2.3)) //2
// console.log(Math.round(1.51)) //2
// console.log(Math.round(1.8)) //2
// console.log(Math.round(-1.2)) //1
// console.log(Math.round(-1.5)) //-1
// console.log(Math.round(-2.3)) //2
// console.log(Math.round(-1.51)) //2
// console.log(Math.round(-1.8)) //2
// console.log(Math.ceil(1.3))
// console.log(Math.ceil(1.1))
// console.log(Math.ceil(1.5))
// console.log(Math.ceil(1.51))
// console.log(Math.ceil(1.7))
// console.log(Math.floor(1.3))
// console.log(Math.floor(1.1))
// console.log(Math.floor(1.5))
// console.log(Math.floor(1.51))
// console.log(Math.floor(1.7))
// console.log(Math.ceil(-1.3)) //-1
// console.log(Math.ceil(-2.1)) //-2
// console.log(Math.ceil(-2.5)) //-2
// console.log(Math.ceil(-3.51)) //-3
// console.log(Math.ceil(-1.7)) //-1
// console.log(Math.floor(-1.3)) //-2
// console.log(Math.floor(-2.1)) //-3
// console.log(Math.floor(-3.5)) //-4
// console.log(Math.floor(-2.51)) //-3
// console.log(Math.floor(-1.7)) //-2
</script>
16.随机数
<script>
// random 是0-1之间的随机数
console.log(Math.random())
// 获取指定范围的随机整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
console.log(getRandom(11, 20))
</script>
17.随机数练习
<script>
// 输入1-50之间的数字
// 获取指定范围的随机整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
var random = getRandom(1, 10)
var num = prompt('请输入1-50之间的数字') - 0
if (random == num) {
alert('恭喜你中奖')
} else {
alert('很遗憾，再接再厉')
}
</script>
18.Dater日期对象
<script>
// Date日期对象 是一个构造函数，展示的是从1970年1月1日到目前为止的毫秒数
// 1
console.log(new Date()) //Tue May 30 2023 13:33:59 GMT+0800 (中国标准时间)
// console.log(new Date('2023/5/30'))
// 2
console.log(+new Date()) //1685425003501 毫秒数
// 3
console.log(Date.now()) //1685425052759
</script>
19.格式化时间
<script>
// 格式化时间
var date = new Date()
// console.log(date)
var year = date.getFullYear()
var month = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1) //返回的月份会比实际月份小1 所以需要加1
var day = date.getDate()
// 2023-05-30
// month = month > 10 ? month : '0' + month
// console.log('今天是' + year + '年' + month + '月' + day + '日')
// console.log(year + '-' + month + '-' + day)
// console.log(date.getDay()) //0代表星期天 1代表星期一 6代表星期六
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
</script>
20.封装时间函数
<script>
// 封装时间函数
function getTime() {
var t = new Date()
var y = t.getFullYear() //年
var m = t.getMonth() + 1 < 10 ? '0' + (t.getMonth() + 1) : t.getMonth() + 1 //月
var d = t.getDate() < 10 ? '0' + t.getDate() : t.getDate() //日
var h = t.getHours() < 10 ? '0' + t.getHours() : t.getHours() //时
var mt = t.getMinutes() < 10 ? '0' + t.getMinutes() : t.getMinutes() //分
var s = t.getSeconds() < 10 ? '0' + t.getSeconds() : t.getSeconds() //秒
return y + '-' + m + '-' + d + ' ' + h + ':' + mt + ':' + s
}
console.log(getTime())
</script>
21.倒计时案例
<script>
var nowTime = +new Date() //现在的时间
var oldTime = +new Date('2023-6-18 20:00:00') //目标时间
var time = (oldTime - nowTime) / 1000 //把毫秒数变成秒数
var d = parseInt(time / 60 / 60 / 24) //天数
var h = parseInt(time / 60 / 60 % 24) //小时
var m = parseInt(time / 60 % 60) //分钟
var s = parseInt(time % 60) //秒
console.log(d + '天' + h + '时' + m + '分' + s + '秒')
</script>
22.数组
<script>
// 数组创建方式
/*
1 字面量
var arr=[]
2 new关键字
var arr= new Array()
*/
// 判断是否为数组 Array.isArray() 返回值 true代表是数组 false代表不是数组
var arr = [1, 2, 3, 4]
console.log(Array.isArray(arr))
</script>
23.数组方法
<script>
var arr = [1, 2, 3, 4]
// arr[4] = 5
// console.log(arr)
// push 推 在数组的末尾添加一个或者多个数组的元素,添加后会改变数组的length长度
// arr.push(5, 6, '你好')
// console.log(arr)
// console.log(arr.length)
// unshift 在数组的头部添加一个或者多个数组的元素，添加之后原来的数组元素的索引也会随之改变，length长度也会改变
// arr.unshift(6, 3, 67, 4)
// console.log(arr[0])
// pop 删除数组中的最后一个元素,不需要写任何参数，一次只能删一个，返回值是删除的那个元素
// console.log(arr.pop())
// console.log(arr.pop())
// console.log(arr)
// shift 删除数组中的第一个元素，不需要写任何参数，每次只能删除一个，返回值是删除的那个元素
console.log(arr.shift())
arr.shift()
console.log(arr)
</script>
24.数组案例
<script>
var arr = [1, 2, 3, 4]
// arr[4] = 5
// console.log(arr)
// push 推 在数组的末尾添加一个或者多个数组的元素,添加后会改变数组的length长度
// arr.push(5, 6, '你好')
// console.log(arr)
// console.log(arr.length)
// unshift 在数组的头部添加一个或者多个数组的元素，添加之后原来的数组元素的索引也会随之改变，length长度也会改变
// arr.unshift(6, 3, 67, 4)
// console.log(arr[0])
// pop 删除数组中的最后一个元素
console.log(arr.pop())
console.log(arr)
</script>
25.筛选数组
<script>
// 把[23,45,4,3,6,8,3]大于10的元素筛选出来放在新的数组里
var arr = [23, 45, 4, 3, 6, 8, 3]
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
// newArr[newArr.length] = arr[i]
newArr.push(arr[i]) //newArr.push(23) newArr.push(45)
}
}
console.log(newArr)
</script>
26.翻转数组
<script>
// var arr = [23, 45, 4, 3, 6, 8, 3]
// reverse 翻转数组元素，不需要写任何参数
var arr = [1, 2, 3]
// var newArr = []
// for (var i = arr.length - 1; i >= 0; i--) {
// // newArr[newArr.length] = arr[i]
// newArr.push(arr[i])
// }
// console.log(newArr)
arr.reverse()
console.log(arr)
</script>
27.数组排序
<script>
var arr = [23, 45, 4, 12, 6, 8, 3]
// sort
arr.sort(function (a, b) {
return a - b //从小到大排序
// return b - a //从大到小排序
})
console.log(arr)
</script>
28.查找数组索引
<script>
var arr = [23, 45, 4, 12, 6, 8, 3, 4]
// indexOf(元素) 通过元素查找索引，返回值是元素的索引值,如果查找的元素不存在时，返回值为-1
// 如果数组内有两个相同的元素时只能返回第一个元素的索引
// console.log(arr.indexOf(12)) //3
// console.log(arr.indexOf(3)) //6
// console.log(arr.indexOf(5)) //-1
// console.log(arr.indexOf(7)) //-1
// console.log(arr.indexOf(4)) //2
// lastIndexOf() 是从后朝前查找元素，并返回元素所在的索引值
// 如果查找的元素不存在时，返回值为-1
console.log(arr.lastIndexOf(6)) //4
console.log(arr.lastIndexOf(4)) //7
console.log(arr.lastIndexOf(18)) //4
</script>
29.数组去重
<script>
// 删除[23, 45, 4, 12, 6, 8, 3, 4, 12, 4, 65, 7, 3, 8]中重复的元素然后把不重复的元素存放在新的数组中
var arr = [23, 45, 4, 12, 6, 8, 3, 4, 12, 4, 65, 7, 3, 8]
var newArr = []
console.log(newArr.indexOf(2))
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
console.log(newArr)
</script>、
30.数组转字符串
<script>
var arr = [1, 2, 3]
// join(分隔符) 数组转字符串 如果不写分隔符时，默认以逗号分隔
// join('-')就会以-分割转成字符串
console.log(arr.join())
// console.log(arr.join('-'))
</script>
31.字符串转数组
<script>
var arr = [1, 2, 3]
// join()
var str = 'helloword'
// split(分隔符) 把字符串转为数组 通过分隔符进行分割成数组
console.log(str.split(','))
// var str1 = 'hello&word'
var str = '1,2,3,5'
var arr1 = str.split(',')
console.log(arr1)
</script>
32.字符串相关属性
<script>
var str = 'hello'
// charAt(index) 根据位置返回字符
// console.log(str.charAt(3))
// console.log(str.indexOf('o'))
// console.log(str.indexOf('l'))
// concat（需要拼接的字符） 字符串的拼接
// console.log(str.concat('word'))
// substr(截取的起始位置，截取几个字符) 返回值时截取的字符
// console.log(str.substr(2, 3))
// replace(被替换的字符，替换为的字符) 替换字符
str = str.replace('he', 'k')
console.log(str)
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
