010 *【JS】 JS复杂变量：函数、对象、数组、字符串、数字、时间、定时器
目录
1：函数
2：对象
3：数组
4：字符串
5：数字
6：日期
7：定时器
正文
1：函数
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函数</title> <script> /* 1：函数定义 2：函数调用 3：函数在调用上的区别 4：函数的参数 5：函数的返回值 6：预解析 7：作用域 8：变量的使用规则 */ // 1：函数定义 // （1）声明式 function test1() { var test1_a = "可乐" console.log("我是test1套餐", test1_a) } // (2）赋值式 var test2 = function () { console.log("我是test2套餐") } // 2.调用函数 test1() test2() // 3：函数在调用上的区别 /* 区别： （1）声明式 先调用再定义,也可以先定义后调用 （2）先定义再调用 */ test1() test2() // console.log(test1_a) // 4: 形参、实参 // 定义了两个形参 function test(a, b) { var yinliao = a === 1 ? '可乐' : '雪碧' var xiaoshi = b === 2 ? '薯条' : '鸡米花' var zhushi = "鸡腿堡" console.log("我是套餐A", yinliao, xiaoshi, zhushi) } test(1) // 少于形参个数的实参 test(1, 2) // 等于形参个数的实参 test(1, 2, 3) // 多于形参个数的实参 /* 1. 实参 vs 形参 2. 可以不传参，可以不传参 3. 形参只能再函数内部去使用 */ // 5：函数的返回值 // return 返回的意思，其实就是给函数一个 返回值 和 终断函数 function add(x, y, z) { var result = x + y + z return result } var res = add(1, 2, 3) console.log(res) // 6：预解析 /* 预解析（预解释） 需要解释的内容有两个 1:声明式函数 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数 2:var 关键字 在内存中先声明有一个变量名 */ console.log(myname) var myname = "kerwin" console.log(myname) //赋值函数 myFunc() function myFunc() { console.log("myFunc") } myFunc() </script> <script> /* 7：作用域 1.使用var声明变量，在方法内部是局部变量，在方法外部是全局变量 2.没有使用var声明的变量，在方法内部或外部都是全局变量， 但如果是在方法内部声明，在方法外部使用之前需要先调用方法， 告知系统声明了全局变量后方可在方法外部使用。 */ console.log("--->>>:作用域") var myname = "kerwin" function test() { // 全局变量 nickname = "xiaoming" console.log(nickname, myname) } test() console.log(nickname) </script> <script> test() console.log(myname) </script> </head> <body> </body> </html>
详解
2：对象-键值对-字典
代码
<script> /* 二：对象，键值对 1:创建对象方式 1.1：字面量的方式创建一个对象 1.2：内置构造函数 */ // 1:创建对象方式 // 1.1：字面量的方式创建一个对象 // var nickName,age,gender,location,intro, var obj0 = {} console.log(obj0) var obj = { "name": "kerwin", "age": 100, location: "大连", "a+b": "11111111", "a-b": "11111111" } console.log(obj) // 1.2：内置构造函数 var obj2 = new Object() console.log(obj2) obj2.name = "xiaoming" obj2.age = 18 console.log(obj2) // 2:对象的基本操作 增删改查 var obj22 = {} console.log(obj22) // 增 obj22.name = "kerwin" obj22.age = 100 obj22.location = "dalian" console.log(obj22) //删 // obj.name = "" delete obj22.name console.log(obj22) //改 obj22.age = 200 console.log(obj22) //查 document.write("姓名是" + JSON.stringify(obj22)); // 3:对象的遍历 for (var i in obj22) { //获取key console.log(i) //获取value console.log(obj[i]) } // 不通数据的存储 基本数据类型在栈内存， 对象在堆内存 </script>
详解
3：数组
代码
<script> /* 三：数组 1:数组的创建方法 字面量 内置构造函数 2：数组的基本操作 length 索引 遍历 3：数组的排序 冒泡 选择 4：数组的常用方法 5：数组的3大迭代函数 */ // 1:数组的创建方法 // 字面量 console.log("--->>>:三：数组"); var ageArr = [12, 14, 15, 16] console.log(ageArr) // 内置构造函数 var arr1 = new Array(12, 14, 15, 16) console.log(arr1) // 2：数组的基本操作 length 索引 遍历 //2.1: length 可读可写 var arr20 = [1, 2, 3, 4, 8] console.log(arr20.length) //清空数组。 arr20.length = 3 console.log(arr20) arr20.length = 0 console.log(arr20) // 2.2: 索引 0,1,2,3 var arr21 = ["kerwin", "xiaoming", "tiechui"] console.log(arr21[0], arr21[1], arr21[2]) arr21[0] = "kervin11" console.log(arr21) // 2.3:遍历 var arr3 = [3, 4, 5, 6, 7, 8] for (var i = 0; i < arr3.length; i++) { console.log(arr3[i]) } // 3：数组的排序 冒泡 选择 /* 冒泡排序原理： 最大的在最后边 先遍历数组，让挨着的两个进行比较，如果前一个比后一个大，那么就把两个换个位置 数组遍历一遍以后，那么最后一个数字就是最大的那个了 然后进行第二遍的遍历，还是按照之前的规则，第二大的数字就会跑到倒数第二的位置 以此类推，最后就会按照顺序把数组排好了 */ var arr30 = [44, 3, 2, 1, 11, 33] for (var m = 0; m < arr30.length - 1; m++) { for (var i = 0; i < arr30.length - 1 - m; i++) { if (arr30[i] > arr30[i + 1]) { var temp = arr30[i] arr30[i] = arr30[i + 1] arr30[i + 1] = temp } } } console.log(arr30) /* 选择排序原理：（每次找到最小的值放到前面） 先假定数组中的第 0 个就是最小的数字的索引 然后遍历数组，只要有一个数字比我小，那么就替换之前记录的索引 直到数组遍历结束后，就能找到最小的那个索引，然后让最小的索引换到第 0 个的位置 再来第二趟遍历，假定第 1 个是最小的数字的索引 在遍历一次数组，找到比我小的那个数字的索引 遍历结束后换个位置 依次类推，也可以把数组排序好 */ var arr31 = [44, 3, 2, 1, 11, 33] for (var m = 0; m < arr31.length - 1; m++) { var minIndex = m for (var i = m + 1; i < arr31.length; i++) { if (arr31[i] < arr31[minIndex]) { minIndex = i } } if (minIndex !== m) { var temp = arr31[m] arr31[m] = arr31[minIndex] arr31[minIndex] = temp } } console.log(arr31) // 4：数组的常用方法 console.log("--->>>:4：数组的常用方法"); var arr40 = [1, 2, 3] // 4.1:push 后面追加元素， //返回值 长度 var res40 = arr40.push("kerwin") console.log(arr40) console.log("返回值", res40) // 4.2:pop 后面删除元素 //返回值删除的元素 var respop40 = arr40.pop() console.log(arr40) console.log("返回值", respop40) // 4.3:unshift 前面追加元素 //返回值 长度 var resunshift40 = arr40.unshift("tiechui") console.log(arr40) console.log("返回值", resunshift40) // 4.4：shift 前面删除元素 // 返回值 删除的这个元素 var resshift40 = arr40.shift() console.log(arr40) console.log("返回值", resshift40) // 4.5：splice 删除 splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写） var arr41 = ["kerwin", "xiaoming", "tiechui"] var ressplice41 = arr41.splice(1, 4) console.log(arr41) console.log("返回值", ressplice41) // splice 增加 // arr42.splice(1, 0, "gangdaner", "zhugeshanzhen") 表示从索引 1 开始截取 0 个内容 然后用第三个参数把截取完空出来的位置填充 var arr42 = ["kerwin", "xiaoming", "tiechui"] var ressplice42 = arr42.splice(1, 0, "gangdaner", "zhugeshanzhen") console.log(arr42) console.log("返回值", ressplice42) // 开头添加 arr42.splice(0, 0, "aaaaaa") console.log(arr42) // 尾部追加 arr42.splice(8, 0, "bbbbbbb") console.log(arr42) // 4.6：resver 倒序 var arr43 = [2, 1, 3, 4] arr43.reverse() console.log(arr43) // 4.7：sort 排序 var arr44 = [11, 21, 56, 7, 3] console.log(arr44) // 按照首字母排序 arr44.sort() console.log(arr44) arr44.sort(function (x, y) { return x - y }) console.log(arr44) // 4.8：concat 拼接 // 不影响原数组的方法 var arr51 = [1, 2, 3] var arr52 = [4, 5, 6] var arr53 = arr51.concat(arr52, 7, [8, 9]) console.log(arr51, arr52, arr53) var arr54 = arr51.concat() // 复制方式， arr54.pop() console.log(arr51, arr54) // 4.9: join 数组=>字符串 var arr55 = [1, 2, 3, 4, 5] console.log(arr55.join("|")) // 4.10: slice 截取 (开始索引，结束索引) var arr56 = ["aaa", "bbbb", "ccc", "ddd", "eeee"] var arr2 = arr56.slice(0, 2) console.log("--->>>:slice:", arr2); var arr2 = arr56.slice(2) console.log("--->>>:slice:", arr2); var arr2 = arr56.slice() console.log("--->>>:slice:", arr2); arr2.pop() console.log("--->>>:slice:", arr2); // 4.11 indexof -1 找不到 var arr57 = ["aaa", "bbb", "ccc", "ddd", "eee", "aaa"] console.log("--->>>:", arr57.indexOf("fkdlasjf")); // 找到第一个值是aaa的索引 console.log("--->>>:", arr57.indexOf("aaa")); // 4.12 数组去重 var arr58 = [1, 2, 3, 4, 3, 5, 6, 2, 1] var arr59 = [] // 方法1： for (var i = 0; i < arr58.length; i++) { if (arr59.indexOf(arr58[i]) === -1) { arr59.push(arr58[i]) } } console.log(arr58, arr59) // 方法2 var set1 = new Set(arr58) console.log(set1) var arr60 = Array.from(set1) console.log(arr60) // 4.13: 迭代函数 // 1 sort函数 var arr101 = [13, 25, 2, 75] arr101.sort(function (x, y) { return x - y }) console.log("--->>>:sort:", arr101) // 2 foreach 遍历 var arr102 = ["ccc", "aaa", "bbb", "ddd"] //回调函数 arr102.forEach(function (item, index) { console.log(item, index) }) console.log("--->>>:foreach:", arr102) // 3 map 映射 var arr103 = [1, 2, 3, 4, 5] for (var i = 0; i < arr103.length; i++) { arr103[i] = arr103[i] * arr103[i] } console.log(arr103) var arr = ["xiaoming", "kerwin", "tiechui"] var arr2 = arr.map(function (item) { return "<li>" + item + "</li>" }) console.log(arr, arr2) document.write(arr2.join("")) // 4 filter 过滤 var arr104 = [ { name: "aaa", price: 100 }, { name: "bbb", price: 200 }, { name: "ccc", price: 300 } ] var arr105 = arr104.filter(function (item) { return item.price < 300 }) console.log(arr105) // 5 every 每一个都满足条件是 true var arr106 = [90, 90, 2, 94] var isAll = arr106.every(function (item) { return item >= 90 }) console.log(isAll) // 6 some 只要一个满足条件 就是true var arr107 = [9, 92, 2, 4] var isSome = arr107.some(function (item) { return item >= 90 }) console.log(isSome) // 7: find: 查找一个元素 var arr108 = [ { name: "语文", grade: 100 }, { name: "数学", grade: 95 }, { name: "体育", grade: 100 } ] // 过滤所有的 var arr109 = arr108.filter(function (item) { return item.grade === 100 }) // 找到一个 var obj1 = arr108.find(function (item) { return item.grade === 100 }) console.log(arr109) console.log(obj1) // 8 reduce 叠加 var arr = [1, 2, 3, 4, 5] // 字符串拼接 var arr2 = arr.reduce(function (prev, item) { return prev + item }, "") console.log(arr2) // var arr2 = arr.reduce(function (prev, item) { return prev + item }) console.log(arr2) </script>
详解
冒泡排序
选择
4：字符串
代码
<script> /* 五：字符串 1: 字符串的创建 2: 字符串常用方法： length 索引 chatAt(索引) */ // 1: 字符串的创建,字符串只读 // 字面量 console.log("--->>>:五：字符串") var str1 = "hello" console.log(str1 + " world") // 构造函数 var str2 = new String("hello") console.log(str2 + " world") // 2：字符串重用方法 // 2.1：length只读属性, 赋值不起作用 str1.length = 0 console.log(str1) // 2.2：索引/下标 只读 console.log(str1[1]) str1[1] = "a" console.log(str1) // 统计字符串中字符出现的次数 var str = "abcabcab" var obj = {}; for (var i = 0; i < str.length; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } console.log(obj); // 2.3：chartAt(索引) 返回索引对应的字符 var str = "kerwin" var str1 = str.charAt(1) console.log(str, str1) // 2.4：charCodeAt(索引) 返回索引对应的字符 var str1 = str.charCodeAt(0) console.log(str1) // 2.5：fromCharCode var arr = [] for (var i = 65; i < 91; i++) { // console.log(String.fromCharCode(i)) arr.push(String.fromCharCode(i)) } console.log(arr) // 2.6:toUpperCase() toLowerCase() var str = "heLlo我" console.log(str.toUpperCase()) console.log(str.toLowerCase()) // 2.7：截取 substr(开始索引，长度) substring(开始索引，结束索引) slice(开始索引，结束索引) var str = "kerwin" var str1 = str.substr(1, 2) var str2 = str.substring(1, 2) var str3 = str.substring(1) var str4 = str.slice(1, 2) var str5 = str.slice(1) var str6 = str.slice(1, -1) // 从后面开始 console.log(str1, str2, str3, str4, str5, str6) console.log(str.substring(0, 1).toUpperCase() + str.substring(1)) // 2.8：replace 替换 - 正则表达式 替换第一个 var str = "abdwadwa" var str1 = str.replace("a", "*") console.log(str1) // 2.9：split 分割 join var str = "a|b|c|d" console.log(str.split("|")) // 2.10: indexOf lastIndexOf 返回指定字符第一次出现的字符串内的索引，以指定的索引开始搜索。 var str = "abdabadac" console.log(str.indexOf("a")) console.log(str.indexOf("a", 3)) // 从索引为3开始搜索 console.log(str.lastIndexOf("a", 8)) // 从索引为8开始搜索，先前搜索 // 2.11：concat 连接字符串 + var str = "abcd" // var str1 = str.concat("ef") var str1 = str + "ef" console.log(str1) //2.12：trim 去掉首尾空格 //trimStart() trimLeft()去掉首空格 //trimEnd() trimRight()去掉尾空格 var str = " hello world " console.log("|" + str + "|") console.log("|" + str.trimRight() + "|") // 2.13: json字符串转 对象 var str = '{"name":"kerwin","age":100}' console.log(str) var obj = JSON.parse(str) console.log(obj) // 2.14：对象转 json字符串 var obj1 = {name:"tiechui"} var str1 = JSON.stringify(obj1) console.log(obj1,str1) // 2.15:字符串模板 var arr =["xiaoming","kerwin","tiechui"] var arr2 = arr.map(function(item){ return `<li>${item}</li>` }) console.log(arr2) document.write(arr2.join("")) </script>
详解
5：数字
代码
<script> /* 五：数字 Math */ // Number toFixed() 返回是字符串 console.log("--->>>:五：数字 Math") var price = 123.45678 // var price = 123.4 var sum = price.toFixed(2)-0+100 console.log(sum.toFixed(2)) //Math对象 //random //0-1- 随机整数 console.log(Math.random()) //round四舍五入取整 console.log(Math.round(4.46)) // ceil向上 floor向下 console.log(Math.floor(4.96)) //abs绝对值 console.log(Math.abs(-10.2)) //sqrt 平方根 9 console.log(Math.sqrt(8)) //pow(底数，指数) console.log(Math.pow(3,3)) //max (多个参数) console.log(Math.max(10,50,20,34)) //min (多个参数) console.log(Math.min(10,50,20,34)) //PI console.log(Math.PI) </script>
详解
6：日期
代码
<script> /* 六：日期 */ console.log("--->>>:六：日期") //自动转为字符串 var date = new Date() console.log(date) //自动转为字符串 //new Date传参 //1个传参 毫秒数 var date1 = new Date(10000) console.log(date1) // 1970 1 1 0:0:1 // 2个参数 3个参 年月日时分秒 var date2 = new Date(2023, 0, 3, 10, 10, 10) console.log(date2) //字符串 // var date3= new Date("2023-10-10 10:10:10") var date3 = new Date("2023/10/10 10:10:10") console.log(date3) var date = new Date() //getFullYear() console.log(date.getFullYear()) //getMonth() 0-11===>1-12 console.log(date.getMonth()) //getDate() console.log(date.getDate()) //getDay() 周日0 周一-周六 1-6 console.log(date.getDay()) //getHours console.log(date.getHours()) console.log(date.getMinutes()) console.log(date.getSeconds()) console.log(date.getMilliseconds()) //getTime() 时间戳 console.log(date.getTime()) // console.log(new Date(1653280060490)) // 设置 set 和 get console.log(date) date.setFullYear(2025) console.log(date) date.setMonth(5) console.log(date) date.setDate(25) console.log(date) date.setHours(13) console.log(date) date.setMinutes(50) console.log(date) date.setSeconds(59) console.log(date) date.setTime(1653280060490) console.log(date) </script>
详解
7：定时器
<body> <button id="btn1">清除定时器-延时</button> <button id="btn2">清除定时器-间隔</button> <script> //倒计时,定时器延迟 var time1 = setTimeout(function () { console.log("kerwin") }, 2000) //注册定时器 //setInterval，定时器间隔 var time2 = setInterval(function () { console.log(new Date()) }, 1000) //注册间隔定时器 console.log(time1, time2) // clearTimeout(time1) // clearInterval(time2) console.log(btn1, btn2) //直接通过id，拿到按钮对象 btn1.onclick = function () { console.log("btn1 click") clearTimeout(time1) } btn2.onclick = function () { console.log("btn2 click") clearInterval(time2) } </script> </body>
详解
引用
浙公网安备 33010602011771号