js 基础之数组，函数，对象
一：变量与数据类型
1：变量的数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // int num = 10; java // var num; // 这里的num 我们是不确定属于哪种数据类型的 var num = 10; // num 属于数字型 // js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的 var str = 'pink'; // str 字符串型 // js是动态语言 变量的数据类型是可以变化的 var x = 10; // x 是数字型 x = 'pink'; // x 字符串型 </script> </head> <body> </body> </html>
2：数字类型 Number
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var num = 10; // num 数字型 var PI = 3.14 // PI 数字型 // 1. 八进制 0 ~ 7 我们程序里面数字前面加0 表示八进制 var num1 = 010; console.log(num1); // 010 八进制 转换为 10进制 就是 8 var num2 = 012; console.log(num2); // 2. 十六进制 0 ~ 9 a ~ f #ffffff 数字的前面加 0x 表示十六进制 var num3 = 0x9; console.log(num3); var num4 = 0xa; console.log(num4); //10 // 3. 数字型的最大值 console.log(Number.MAX_VALUE); //1.7976931348623157e+308 // 4. 数字型的最小值 console.log(Number.MIN_VALUE); // 5e-324 // 5. 无穷大 console.log(Number.MAX_VALUE * 2); // Infinity 无穷大 // 6. 无穷小 console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大 // 7. 非数字 console.log('pink老师' - 100); // NaN </script> </head> <body> </body> </html>
3: isNaN 判断是否是非数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true console.log(isNaN(12)); // false console.log(isNaN('pink老师')); // true </script> </head> <body> </body> </html>
4：字符串string 拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1. 检测获取字符串的长度 length var str = 'my name is andy'; console.log(str.length); // 15 // 2. 字符串的拼接 + 只要有字符串和其他类型相拼接 最终的结果是字符串类型 console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼 console.log('pink老师' + 18); // 'pink老师18' console.log('pink' + true); // pinktrue console.log(12 + 12); // 24 console.log('12' + 12); // '1212' console.log('pink老师' + 18); // pink老师18 console.log('pink老师' + 18 + '岁'); var age = 19; console.log('pink老师age岁'); // 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的 console.log('pink老师' + age + '岁'); // 变量和字符串相连的口诀： 引引加加 console.log('pink老师' + age + '岁'); </script> </head> <body> </body> </html>
5：显示年龄案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 弹出一个输入框（prompt)，让用户输入年龄（用户输入） // 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理） // 使用alert语句弹出警示框（输出结果） var age = prompt('请输入您的年龄'); var str = '您今年已经' + age + '岁了'; alert(str); </script> </head> <body> </body> </html>
6：布尔类型Boolean
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var flag = true; // flag 布尔型 var flag1 = false; // flag1 布尔型 console.log(flag + 1); // true 参与加法运算当1来看 console.log(flag1 + 1); // false 参与加法运算当 0来看 // 如果一个变量声明未赋值 就是 undefined 未定义数据类型 var str; console.log(str); var variable = undefined; console.log(variable + 'pink'); // undefinedpink console.log(variable + 1); // NaN undefined 和数字相加 最后的结果是 NaN // null 空值 var space = null; console.log(space + 'pink'); // nullpink console.log(space + 1); // 1 </script> </head> <body> </body> </html>
7: 获取变量的数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var num = 10; console.log(typeof num); // number var str = 'pink'; console.log(typeof str); // string var flag = true; console.log(typeof flag); // boolean var vari = undefined; console.log(typeof vari); // undefined var timer = null; console.log(typeof timer); // object // prompt 取过来的值是 字符型的 var age = prompt('请输入您的年龄'); console.log(age); console.log(typeof age); </script> </head> <body> </body> </html>
8：数字转换为字符型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1. 把数字型转换为字符串型 变量.toString() var num = 10; var str = num.toString(); console.log(str); console.log(typeof str); // 2. 我们利用 String(变量) console.log(String(num)); // 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换 console.log(num + ''); </script> </head> <body> </body> </html>
9：数字型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // var age = prompt('请输入您的年龄'); // 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数 // console.log(parseInt(age)); console.log(parseInt('3.14')); // 3 取整 console.log(parseInt('3.94')); // 3 取整 console.log(parseInt('120px')); // 120 会去到这个px单位 console.log(parseInt('rem120px')); // NaN // 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数 console.log(parseFloat('3.14')); // 3.14 console.log(parseFloat('120px')); // 120 会去掉这个px单位 console.log(parseFloat('rem120px')); // NaN // 3. 利用 Number(变量) var str = '123'; console.log(Number(str)); console.log(Number('12')); // 4. 利用了算数运算 - * / 隐式转换 console.log('12' - 0); // 12 console.log('123' - '120'); console.log('123' * 1); </script> </head> <body> </body> </html>
二：运算符与结构语句
1：算数运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> console.log(1 + 1); // 2 console.log(1 - 1); // 0 console.log(1 * 1); // 1 console.log(1 / 1); // 1 // 1. % 取余 （取模） console.log(4 % 2); // 0 console.log(5 % 3); // 2 console.log(3 % 5); // 3 // 2. 浮点数 算数运算里面会有问题 console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.07 * 100); // 7.000000000000001 // 3. 我们不能直接拿着浮点数来进行相比较 是否相等 var num = 0.1 + 0.2; console.log(num == 0.3); // false </script> </head> <body> </body> </html>
2：表达式和返回值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 是由数字、运算符、变量等组成的式子 我们成为表达式 1 + 1 console.log(1 + 1); // 2 就是返回值 // 1 + 1 = 2 // 在我们程序里面 2 = 1 + 1 把我们的右边表达式计算完毕把返回值给左边 var num = 1 + 1; </script> </head> <body> </body> </html>
3：前置递增运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1. 想要一个变量自己加1 num = num + 1 比较麻烦 var num = 1; num = num + 1; // ++num num = num + 1; console.log(num); // 3 // 2. 前置递增运算符 ++ 写在变量的前面 var age = 10; ++age; // 类似于 age = age + 1 console.log(age); // 3. 先加1 后返回值 var p = 10; console.log(++p + 10); </script> </head> <body> </body> </html>
4：后置递增运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var num = 10; num++; // num = num + 1 ++num; console.log(num); // 1. 前置自增和后置自增如果单独使用 效果是一样的 // 2. 后置自增 口诀：先返回原值 后自加1 var age = 10; console.log(age++ + 10); console.log(age); </script> </head> <body> </body> </html>
5：递增运算符联系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var a = 10; ++a; // ++a 11 a = 11 var b = ++a + 2; // a = 12 ++a = 12 console.log(b); // 14 var c = 10; c++; // c++ 11 c = 11 var d = c++ + 2; // c++ = 11 c = 12 console.log(d); // 13 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 2. e = 12 ++e = 12 console.log(f); // 22 // 后置自增 先表达式返回原值 后面变量再自加1 </script> </head> <body> </body> </html>
6：比较运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> console.log(3 >= 5); // false console.log(2 <= 4); // true //1. 我们程序里面的等于符号 是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以 console.log(3 == 5); // false console.log('pink老师' == '刘德华'); // flase console.log(18 == 18); // true console.log(18 == '18'); // true console.log(18 != 18); // false // 2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以 true console.log(18 === 18); console.log(18 === '18'); // false </script> </head> <body> </body> </html>
7：逻辑运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1. 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false console.log(3 > 5 && 3 > 2); // false console.log(3 < 5 && 3 > 2); // true // 2. 逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true console.log(3 > 5 || 3 > 2); // true console.log(3 > 5 || 3 < 2); // false // 3. 逻辑非 not ！ console.log(!true); // false </script> </head> <body> </body> </html>
8：逻辑运算符练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var num = 7; var str = "我爱你~中国~"; console.log(num > 5 && str.length >= num); // true console.log(num < 5 && str.length >= num); // false console.log(!(num < 10)); // false console.log(!(num < 10 || str.length == num)); // false </script> </head> <body> </body> </html>
9：短路运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1. 用我们的布尔值参与的逻辑运算 true && false == false // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？ // 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1 console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(0 && 1 + 2 && 456 * 56789); // 0 console.log('' && 1 + 2 && 456 * 56789); // '' // 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN // 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2 console.log(123 || 456); // 123 console.log(123 || 456 || 456 + 123); // 123 console.log(0 || 456 || 456 + 123); // 456 // 逻辑中断很重要 它会影响我们程序运行结果思密达 var num = 0; console.log(123 || num++); console.log(num); // 0 </script> </head> <body> </body> </html>
10：赋值运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var num = 10; // num = num + 1; num++ // num = num + 2; // num += 2; // num += 2; num += 5; console.log(num); var age = 2; age *= 3; console.log(age); </script> </head> <body> </body> </html>
三：数组简单使用和函数
1：数组的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1.数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式 // 2. 利用new 创建数组 var arr = new Array(); // 创建了一个空的数组 // 3. 利用数组字面量创建数组 [] var arr = []; // 创建了一个空的数组 var arr1 = [1, 2, 'pink老师', true]; // 4. 我们数组里面的数据一定用逗号分隔 // 5. 数组里面的数据 比如1,2， 我们称为数组元素 // 6. 获取数组元素 格式 数组名[索引号] 索引号从 0开始 console.log(arr1); console.log(arr1[2]); // pink老师 console.log(arr1[3]); // true var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫']; console.log(arr2[0]); console.log(arr2[1]); console.log(arr2[2]); console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined </script> </head> <body> </body> </html>
2：遍历数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 遍历数组：就是把数组的元素从头到尾访问一次 var arr = ['red', 'green', 'blue']; for (var i = 0; i < 3; i++) { console.log(arr[i]); } // 1. 因为我们的数组索引号从0开始 ，所以 i 必须从 0开始 i < 3 // 2. 输出的时候 arr[i] i 计数器当索引号来用 </script> </head> <body> </body> </html>
3：数组的长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 数组长度 数组名.length var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink']; for (var i = 0; i < 7; i++) { console.log(arr[i]); } console.log(arr.length); for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } // 1. 数组的长度是元素个数 不要跟索引号混淆 // 2. arr.length 动态监测数组元素的个数 </script> </head> <body> </body> </html>
4：计算数组的和及平均值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1. 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。 // (1)声明一个求和变量 sum。 // (2)遍历这个数组，把里面每个数组元素加到 sum 里面。 // (3)用求和变量 sum 除以数组的长度就可以得到数组的平均值。 var arr = [2, 6, 1, 7, 4]; var sum = 0; var average = 0; for (var i = 0; i < arr.length; i++) { sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i } average = sum / arr.length; console.log(sum, average); // 想要输出多个变量，用逗号分隔即可 </script> </head> <body> </body> </html>
5：求数组中最大值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 求数组[2,6,1,77,52,25,7]中的最大值 // 声明一个保存最大元素的变量 max。 // 默认最大值可以取数组中的第一个元素。 // 遍历这个数组，把里面每个数组元素和 max 相比较。 // 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。 // 最后输出这个 max var arr = [2, 6, 1, 77, 52, 25, 7, 99]; var max = arr[0]; for (var i = 1; i < arr.length; i++) { if (arr[i] > max) { max = arr[i]; } } console.log('该数组里面的最大值是：' + max); </script> </head> <body> </body> </html>
6：数组转换为字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割 // 1.需要一个新变量用于存放转换完的字符串 str。 // 2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。 // 3.同时在后面多加一个分隔符 var arr = ['red', 'green', 'blue', 'pink']; var str = ''; var sep = '*'; for (var i = 0; i < arr.length; i++) { str += arr[i] + sep; } console.log(str); </script> </head> <body> </body> </html>
7：筛选数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。 // 1、声明一个新的数组用于存放新数据newArr。 // 2、遍历原来的旧数组， 找出大于等于 10 的元素。 // 3、依次追加给新数组 newArr。 // 方法1 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]; var newArr = []; var j = 0; for (var i = 0; i < arr.length; i++) { if (arr[i] >= 10) { // 新数组索引号应该从0开始 依次递增 newArr[j] = arr[i]; j++; } } console.log(newArr); // 方法2 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]; var newArr = []; // 刚开始 newArr.length 就是 0 for (var i = 0; i < arr.length; i++) { if (arr[i] >= 10) { // 新数组索引号应该从0开始 依次递增 newArr[newArr.length] = arr[i]; } } console.log(newArr); </script> </head> <body> </body> </html>
8：冒泡排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 冒泡排序 // var arr = [5, 4, 3, 2, 1]; var arr = [4, 1, 2, 3, 5]; for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数 // 内部交换2个变量的值 前一个和后面一个数组元素相比较 if (arr[j] < arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr); </script> </head> <body> </body> </html>
9：argument 的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // arguments 的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments function fn() { // console.log(arguments); // 里面存储了所有传递过来的实参 arguments = [1,2,3] // console.log(arguments.length); // console.log(arguments[2]); // 我们可以按照数组的方式遍历arguments for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } fn(1, 2, 3); fn(1, 2, 3, 4, 5); // 伪数组 并不是真正意义上的数组 // 1. 具有数组的 length 属性 // 2. 按照索引的方式进行存储的 // 3. 它没有真正数组的一些方法 pop() push() 等等 </script> </head> <body> </body> </html>
10：函数的两种申明方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 函数的2中声明方式 // 1. 利用函数关键字自定义函数(命名函数) function fn() { } fn(); // 2. 函数表达式(匿名函数) // var 变量名 = function() {}; var fun = function(aru) { console.log('我是函数表达式'); console.log(aru); } fun('pink老师'); // (1) fun是变量名 不是函数名 // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数 // (3) 函数表达式也可以进行传递参数 </script> </head> <body> </body> </html>
11：作用域链
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 作用域链 ： 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则 var num = 10; function fn() { // 外部函数 var num = 20; function fun() { // 内部函数 console.log(num); } fun(); } fn(); </script> </head> <body> </body> </html>
12：作用域链案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 案例1 ： 结果是几？ // function f1() { // var num = 123; // function f2() { // var num = 0; // console.log(num); // 站在目标出发，一层一层的往外查找 // } // f2(); // } // var num = 456; // f1(); // 案例2 ：结果是几？ var a = 1; function fn1() { var a = 2; var b = '22'; fn2(); function fn2() { var a = 3; fn3(); function fn3() { var a = 4; console.log(a); //a的值 ? console.log(b); //b的值 ? } } } fn1(); </script> </head> <body> </body> </html>
13：预解析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1问 // console.log(num); // 报错 // 2问 // console.log(num); // undefined 坑 1 // var num = 10; // // 相当于执行了以下代码 // // var num; // // console.log(num); // // num = 10; // // 3问 // function fn() { // console.log(11); // } // fn(); // // 4问 // fun(); // 报错 坑2 // var fun = function() { // console.log(22); // } // 函数表达式 调用必须写在函数表达式的下面 // 相当于执行了以下代码 // var fun; // fun(); // fun = function() { // console.log(22); // } // 1. 我们js引擎运行js 分为两步： 预解析 代码执行 // (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面 // (2). 代码执行 按照代码书写的顺序从上往下执行 // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升） // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作 // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数 </script> </head> <body> </body> </html>
四：对象
1：创建对象的三种方法
1： 利用字面量创建变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1.利用对象字面量创建对象 {} // var obj = {}; // 创建了一个空的对象 var obj = { uname: '张三疯', age: 18, sex: '男', sayHi: function() { console.log('hi~'); } } // (1) 里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值 // (2) 多个属性或者方法中间用逗号隔开的 // (3) 方法冒号后面跟的是一个匿名函数 // 2. 使用对象 // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的 console.log(obj.uname); // (2). 调用属性还有一种方法 对象名['属性名'] console.log(obj['age']); // (3) 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号 obj.sayHi(); </script> </head> <body> </body> </html> 2：利用new object 创建对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 利用 new Object 创建对象 var obj = new Object(); // 创建了一个空的对象 obj.uname = '张三疯'; obj.age = 18; obj.sex = '男'; obj.sayHi = function() { console.log('hi~'); } // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法 // (2) 每个属性和方法之间用 分号结束 console.log(obj.uname); console.log(obj['sex']); obj.sayHi(); </script> </head> <body> </body> </html> 3： 利用构造函数创建对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 利用构造函数创建对象 // 我们需要创建四大天王的对象 相同的属性： 名字 年龄 性别 相同的方法： 唱歌 // 构造函数的语法格式 // function 构造函数名() { // this.属性 = 值; // this.方法 = function() {} // } // new 构造函数名(); function Star(uname, age, sex) { this.name = uname; this.age = age; this.sex = sex; this.sing = function(sang) { console.log(sang); } } var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象 // console.log(typeof ldh); console.log(ldh.name); console.log(ldh['sex']); ldh.sing('冰雨'); var zxy = new Star('张学友', 19, '男'); console.log(zxy.name); console.log(zxy.age); zxy.sing('李香兰') // 1. 构造函数名字首字母要大写 // 2. 我们构造函数不需要return 就可以返回结果 // 3. 我们调用构造函数 必须使用 new // 4. 我们只要new Star() 调用函数就创建一个对象 ldh {} // 5. 我们的属性和方法前面必须添加 this </script> </head> <body> </body> </html>
2：构造函数和对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 构造函数和对象 // 1. 构造函数 明星 泛指的某一大类 它类似于 java 语言里面的 类(class) function Star(uname, age, sex) { this.name = uname; this.age = age; this.sex = sex; this.sing = function(sang) { console.log(sang); } } // 2. 对象 特指 是一个具体的事物 刘德华 == {name: "刘德华", age: 18, sex: "男", sing: ƒ} var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象 console.log(ldh); // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化 </script> </head> <body> </body> </html>
3：new关键字的执行过程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // new关键字执行过程 // 1. new 构造函数可以在内存中创建了一个空的对象 // 2. this 就会指向刚才创建的空对象 // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法 // 4. 返回这个对象 function Star(uname, age, sex) { this.name = uname; this.age = age; this.sex = sex; this.sing = function(sang) { console.log(sang); } } var ldh = new Star('刘德华', 18, '男'); </script> </head> <body> </body> </html>
五：js 中内置函数
1：Math对象
1：最大值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可 console.log(Math.PI); // 一个属性 圆周率 console.log(Math.max(1, 99, 3)); // 99 console.log(Math.max(-1, -10)); // -1 console.log(Math.max(1, 99, 'pink老师')); // NaN console.log(Math.max()); // -Infinity </script> </head> <body> </body> </html> 2：分装自己的Math对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 利用对象封装自己的数学对象 里面有 PI 最大值和最小值 var myMath = { PI: 3.141592653, max: function() { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; }, min: function() { var min = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] < min) { min = arguments[i]; } } return min; } } console.log(myMath.PI); console.log(myMath.max(1, 5, 9)); console.log(myMath.min(1, 5, 9)); </script> </head> <body> </body> 3：Math 绝对值和是三个取值的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1.绝对值方法 console.log(Math.abs(1)); // 1 console.log(Math.abs(-1)); // 1 console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型 console.log(Math.abs('pink')); // NaN // 2.三个取整方法 // (1) Math.floor() 地板 向下取整 往最小了取值 console.log(Math.floor(1.1)); // 1 console.log(Math.floor(1.9)); // 1 // (2) Math.ceil() ceil 天花板 向上取整 往最大了取值 console.log(Math.ceil(1.1)); // 2 console.log(Math.ceil(1.9)); // 2 // (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取 console.log(Math.round(1.1)); // 1 console.log(Math.round(1.5)); // 2 console.log(Math.round(1.9)); // 2 console.log(Math.round(-1.1)); // -1 console.log(Math.round(-1.5)); // 这个结果是 -1 </script> </head> <body> </body> </html> 4：随机数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1 // 2. 这个方法里面不跟参数 // 3. 代码验证 console.log(Math.random()); // 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数 // Math.floor(Math.random() * (max - min + 1)) + min; function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandom(1, 10)); // 5. 随机点名 var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师']; // console.log(arr[0]); console.log(arr[getRandom(0, arr.length - 1)]); </script> </head> <body> </body> </html>
2：Date 日期对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象 var arr = new Array(); // 创建一个数组对象 var obj = new Object(); // 创建了一个对象实例 // 1. 使用Date 如果没有参数 返回当前系统的当前时间 var date = new Date(); console.log(date); // Wed Jul 21 2021 11:27:48 GMT+0800 (中国标准时间) // 2. 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2019-10-1 8:8:8' var date1 = new Date(2019, 10, 1); console.log(date1); // 返回的是 11月 不是 10月 Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间) var date2 = new Date('2019-10-1 8:8:8'); console.log(date2); // Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间) </script> </head> <body> </body> </html> 2：格式化年月日 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 格式化日期 年月日 var date = new Date(); console.log(date.getFullYear()); // 返回当前日期的年 2019 console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦 console.log(date.getDate()); // 返回的是 几号 console.log(date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0 // 我们写一个 2019年 5月 1日 星期三 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]); </script> </head> <body> </body> </html> 3：格式化日期时分秒 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 格式化日期 时分秒 var date = new Date(); console.log(date.getHours()); // 时 console.log(date.getMinutes()); // 分 console.log(date.getSeconds()); // 秒 // 要求封装一个函数返回当前的时分秒 格式 08:08:08 function getTimer() { var time = new Date(); var h = time.getHours(); h = h < 10 ? '0' + h : h; var m = time.getMinutes(); m = m < 10 ? '0' + m : m; var s = time.getSeconds(); s = s < 10 ? '0' + s : s; return h + ':' + m + ':' + s; } console.log(getTimer()); </script> </head> <body> </body> </html>
六：操作数据类型的方法
数组中常用的一些方法
1：创建数组的两种方法 <script> // 创建数组的两种方式 // 1. 利用数组字面量 var arr = [1, 2, 3]; console.log(arr[0]); // 2. 利用new Array() // var arr1 = new Array(); // 创建了一个空的数组 // var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素 var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3 console.log(arr1); </script> 2：检测是否是数组的方法 <script> // 翻转数组 function reverse(arr) { // if (arr instanceof Array) { if (Array.isArray(arr)) { var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } else { return 'error 这个参数要求必须是数组格式 [1,2,3]' } } console.log(reverse([1, 2, 3])); console.log(reverse(1, 2, 3)); // 检测是否为数组 // (1) instanceof 运算符 它可以用来检测是否为数组 var arr = []; var obj = {}; console.log(arr instanceof Array); console.log(obj instanceof Array); // (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持 console.log(Array.isArray(arr)); console.log(Array.isArray(obj)); </script> 3：筛选数组 <script> // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面 var arr = [1500, 1200, 2000, 2100, 1800]; var newArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i] < 2000) { // newArr[newArr.length] = arr[i]; newArr.push(arr[i]); } } console.log(newArr); </script> 4：数组排序 <script> // 数组排序 // 1. 翻转数组 var arr = ['pink', 'red', 'blue']; arr.reverse(); console.log(arr); // 2. 数组排序（冒泡排序） var arr1 = [13, 4, 77, 1, 7]; arr1.sort(function(a, b) { // return a - b; 升序的顺序排列 return b - a; // 降序的顺序排列 }); console.log(arr1); </script> 5：获取数组的索引号 <script> // 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找 // 它只返回第一个满足条件的索引号 // 它如果在该数组里面找不到元素，则返回的是 -1 // var arr = ['red', 'green', 'blue', 'pink', 'blue']; var arr = ['red', 'green', 'pink']; console.log(arr.indexOf('blue')); // 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找 var arr = ['red', 'green', 'blue', 'pink', 'blue']; console.log(arr.lastIndexOf('blue')); // 4 </script> 6：数组去重 <script> // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。 // 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。 // 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。 // 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素 // 封装一个 去重的函数 unique 独一无二的 function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); } } return newArr; } // var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']) var demo = unique(['blue', 'green', 'blue']) console.log(demo); </script> 7数组转换为字符串 <script> // 数组转换为字符串 // 1. toString() 将我们的数组转换为字符串 var arr = [1, 2, 3]; console.log(arr.toString()); // 1,2,3 // 2. join(分隔符) var arr1 = ['green', 'blue', 'pink']; console.log(arr1.join()); // green,blue,pink console.log(arr1.join('-')); // green-blue-pink console.log(arr1.join('&')); // green&blue&pink </script>
字符串中的一些方法
1：根据字符返回位置 <script> // 字符串对象 根据字符返回位置 str.indexOf('要查找的字符', [起始的位置]) var str = '改革春风吹满地，春天来了'; console.log(str.indexOf('春')); console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找 </script> 2：查找字符串中某个字符出现的次数 <script> // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数 // 核心算法：先查找第一个o出现的位置 // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找 // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找 var str = "oabcoefoxyozzopp"; var index = str.indexOf('o'); var num = 0; // console.log(index); while (index !== -1) { console.log(index); num++; index = str.indexOf('o', index + 1); } console.log('o出现的次数是: ' + num); // 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数 </script> 4：根据位置返回字符 <script> // 根据位置返回字符 // 1. charAt(index) 根据位置返回字符 var str = 'andy'; console.log(str.charAt(3)); // 遍历所有的字符 for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)); } // 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 console.log(str.charCodeAt(0)); // 97 // 3. str[index] H5 新增的 console.log(str[0]); // a </script> 5： 字符串操作方法 // 1. concat('字符串1','字符串2'....) var str = 'andy'; console.log(str.concat('red')); // 2. substr('截取的起始位置', '截取几个字符'); var str1 = '改革春风吹满地'; console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符 </script> 字 6：字符串中的其他方法 <script> // 1. 替换字符 replace('被替换的字符', '替换为的字符') 它只会替换第一个字符 var str = 'andyandy'; console.log(str.replace('a', 'b')); // 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 * var str1 = 'abcoefoxyozzopp'; while (str1.indexOf('o') !== -1) { str1 = str1.replace('o', '*'); } console.log(str1); // 2. 字符转换为数组 split('分隔符') 前面我们学过 join 把数组转换为字符串 var str2 = 'red, pink, blue'; console.log(str2.split(',')); var str3 = 'red&pink&blue'; console.log(str3.split('&')); </script>
