Javascript初识之流程控制、函数和内置对象
一、JS流程控制
1、if else语句 1.if else var age = 19; if (age > 18){ console.log("成年了"); }else { console.log("小孩子"); } 2.if else if else var age = 19; if (age > 18){ console.log("成年了"); }else if (age < 18) { console.log("小孩子"); }else { console.log("刚刚成年"); } 2、for 1.for循环数组： var num = [1,2,3,4,5] for (var i=0;i<5;i++) { console.log(num[i]); } var num = [1,2,3,4,5] for (var i in num) { console.log(num[i]); // JS中i in 数组或者字典，i是索引或者key } 2.for循环自定义数据类型(字典)： info = {name:'xiaoming',age:18} for (var i in info){ console.log(i); // i是key，若想输出values则：info[i] } 3、while var i = 1; while (i <= 10) { console.log(i); i++; } 4、switch(开关) var day = 1; switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; default: console.log("other day") } 5、三元运算 var x = 10; var y = 20; var z = x > y ? x : y //中文讲解：x大于y吗？ 是 选择x，否则 选择y 6、Python中的三元运算 x = 1 y = 2 z = x if x > y else y # x大于y吗？ 是 选择x，否则 选择y
二、JS函数
1、函数的注意事项 1. 参数：传多、传少、不传都不会报错，没有传值的相当于传了undefined 2. 返回值：如果返回多个值，默认只返回最后一个，如果要返回多个值，只能将其放在数组或对象中返回。 2、创建函数 1,普通函数定义 function func() { console.log("Hello boy!"); } 2,带参数的函数 function func2(x, y) { console.log(arguments); // 内置的arguments对象 console.log(arguments.length); //实参的个数 console.log(x, y); } 3，带返回值的函数 function sum(x, y){ return x + y; } sum(1, 2); // 调用函数 4,匿名函数方式(不写函数名的函数，不同于python的是，它的函数体可以写任意多的代码，用一个变量接收) var sum = function(a, b){ a += 1; b += 1; return a + b; } sum(1, 2); 5，立即执行函数：两个小括号()()，第一个括号内写函数(匿名函数也可以)，第二个括号内写实参，创建完毕立即执行 (function sum(x, y){ return x + y; })(10, 20); 6，ES6中的箭头函数 6-1、 ES6中允许使用“箭头”(=>)定义函数 var f = a => a; 相当于 var f = function( a ) { return a; } 6-2、无参数的箭头函数 var f = () => 10; 相当于 var f = function() { return 10; } 6-3、有参数的箭头函数 var sum = (a, b) => a + b; 相当于 var sum = function(a, b) { return a +b; } 3、arguments对象 arguments这个对象不能显式创建，只有函数开始时才可用，可直接使用 Javascrip中每个函数都会有一个Arguments对象实例arguments，它储存着函数的实参 可以用数组下标的方式"[]"引用arguments的元素(实参)，arguments[0],arguments[1]... arguments.length为函数实参个数，arguments.callee引用函数自身(递归) function f(){ return arguments[0]+arguments[1]; } f(1,2); // 3 sum = function (n) { if (1 == n) { return 1; } else { return n + arguments.callee(n - 1); } } sum(6); // 21 4、函数的全局变量和局部变量 1.局部变量 在JavaScript函数内部声明的变量就是局部变量，局部变量只能在函数内部访问它，随着函数运行的结束自动删除。 2.全局变量 在函数外声明的变量就是全局变量，因为在JS中是没有模块的概念， 那么两个JS文件中的全局变量就可以互相使用，比如a.js文件可以访问b.js文件的全局变量，b.js文件也可以访问a.js文件的全局变量 要使变量只能在本JS文件中使用，则把变量放在函数中，多通过立即执行函数实现变量的私有化 3.变量生存周期 JavaScript变量的生命期从它们被声明的时间开始 局部变量会在函数运行结束后被删除 全局变量会在页面关闭后被删除 5、作用域
说明：嵌套的函数中，内层函数可以引用外层函数的变量；但如果是非嵌套的两个函数，内部变量是不通用的。 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层 1.例1 var city = "广州"; function f() { var city = "南京"; function inner(){ var city = "珠海"; console.log(city); } inner(); } f(); // 珠海 2.例2 var city = "广州"; function f1() { console.log(city); } function f2() { var city = "珠海"; return f1; } var ret = f2(); ret(); // 广州 3.例3(闭包)：内层函数对外层函数变量的引用 var city = "广州"; function f(){ var city = "珠海"; function inner(){ console.log(city); } return inner; } var ret = f(); ret(); //珠海
三、JS内置对象及方法
1、介绍 JavaScript中的所有事物都是对象：字符串、数字、数组、日期等。在JavaScript中，对象是拥有属性和方法的数据。 2、字符串三种定义方式 var name = 'xiaoming'; name; // "xiaoming" typeof name; / "string" var name2 = String('xiaoming'); name2; // "xiaoming" typeof name2; // "string" var name3 = new String('xiaoming'); name3; //String {"xiaoming"} typeof name3; //"object" 3、自定义对象 JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。 1.普通创建 var a = {"name": "xiaoming", "age": 18}; console.log(a.name); console.log(a["age"]); 遍历对象中的内容： var a = {"name": "xiaoming", "age": 18}; for (var i in a){ console.log(i, a[i]); } 2.使用new创建对象 var person=new Object(); // 创建一个person对象 person.name="xiaoming"; // person对象的name属性 person.age=18; // person对象的age属性 person; // {name: "xiaoming", age: 18} 4、map对象 ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。 也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现 var myMap=new Map(); myMap.set(1,"a"); // 增 myMap.set(2,"b"); myMap.set(3,"c");
myMap.set(1,"aaa") // 改
console.log("size="+myMap.size); // size=3 console.log(myMap.get(1)); // a console.log(myMap.get(2)); // b console.log(myMap.get(3)); // c console.log(myMap.has(1)); // true console.log(myMap.delete(1)); // true console.log(myMap.has(1)); // false 拓展：JavaScript面向对象之继承 // 父类构造函数 var Car = function (loc) { this.loc = loc; }; // 父类方法 Car.prototype.move = function () { this.loc ++; }; // 子类构造函数 var Van = function (loc) { Car.call(this, loc); }; // 继承父类的方法 Van.prototype = Object.create(Car.prototype); // 修复 constructor Van.prototype.constructor = Van; // 扩展方法 Van.prototype.grab = function () { /* ... */ }; 5、JS中的面向对象 // 面向对象,ES5中没有类的概念 // 函数首字母大写代表类 function Person(name) { this.name = name //属性 } // 添加方法用关键字prototype Person.prototype.dream = function () { console.log(this.name + '梦想是：有大把妞！'); }; // 使用new关键字进行实例化 var p1 = new Person('小明'); console.log(p1.name); p1.dream(); 6、Date对象 1.创建对象 //方法1：不指定参数，默认获取当前时间 var d1 = new Date(); console.log(d1.toLocaleString()); // toLocaleString()格式化输出时间 //方法2：参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); // 2004/3/20 上午11:12:00 console.log(d2.toLocaleDateString()) // 2004/3/20 console.log(d2.toLocaleTimeString()) // 上午11:12:00 var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); // 2020/4/3 上午11:12:00 //方法3：参数为毫秒数，时间戳 var d3 = new Date(5000); console.log(d3.toLocaleString()); // 1970/1/1 上午8:00:05 console.log(d3.toUTCString()); // Thu, 01 Jan 1970 00:00:05 GMT //方法4：参数为年月日小时分钟秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); // 2004/3/20 上午11:12:00 毫秒并不直接显示 2.Date对象的方法 var d = new Date(); getFullYear () 获取完整年份 getMonth () 获取月（0-11） getDate() 获取日(每个月的第几天) getDay () 获取星期(星期天是第0天) getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)(时间戳) 3.例子
<!DOCTYPE html> <html lang='zh-CN'> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function mytime(){ var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; //月份是0~11 var day = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); var week_day = now.getDay(); //周日是0 var weekMap = { 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六', 0: '星期日', }; // 字符串拼接 var msg = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + weekMap[week_day] // ES6 模板字符串 var msg1 = `${year}-${month}-${day} ${hour}:${minute} ${weekMap[week_day]}`; console.log(msg); console.log(msg1); } mytime(); </script> </head> <body> </body> </html>
7、JSON对象 var obj1 = {"name": "xiaoming", "age": 18}; var str1 = '{"name": "xiaoming", "age": 18}'; // 对象转换成JSON字符串 var str = JSON.stringify(obj1); // JSON字符串转换成对象 var obj = JSON.parse(str1); 8、正则表达式：RegExp对象 1. 两种创建方法 1. new RegExp(正则表达式) 手机号码： var reg = new RegExp("^1[3-9][0-9]{9}$"); 使用test测试表达式： reg.test(13223322560); // true 2. /正则表达式/ var reg1 = /^1[3-9][0-9]{9}$/; reg1.test(13223322560); //true 2. 三个坑 1. /^[a-zA-Z][a-zA-Z0-9]$/.test() 不传值，相当于传了undeined,内部当成字符串'undeinfed'处理 2. JS中正则表达式中间不能出现空格 3. 两种匹配模式g和i 1. g:全局匹配;找到所有匹配，而不是在第一个匹配后停止 2. i: 忽略大小写 var s1 = "name:Aming age:18"; s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Aming age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Aming 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈ming 哈哈哈ge:18" 不区分大小写 9、Math对象 abs(x) 返回数的绝对值。 round(x) 把数四舍五入为最接近的整数。 floor(x) 对数进行下舍入(取小的值)。 max(x,y) 返回 x 和 y 中的最大值。 min(x,y) 返回 x 和 y 中的最小值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 sqrt(x) 返回数的平方根。 exp(x) 返回 e 的指数。 log(x) 返回数的自然对数（底为e）。 sin(x) 返回数的正弦。 tan(x) 返回角的正切。 例子： Math.abs(-1); // 1 Math.round(5.4); // 5 Math.round(5.6); // 6 Math.floor(5.4); // 5 Math.floor(5.6); // 5 Math.max(10,5,6,3,7,9); // 10 Math.min(10,5,6,3,7,9); // 3 Math.pow(2,10); // 1024 Math.random(); // 0.656223169871724 Math.sqrt(9); // 3
判断数组的最大值和最小值
// 使用apply判断数组的最大值和最小值 var arr = [10,5,6,3,7,9]; Math.max.apply(null, arr); // 10 Math.min.apply(null, arr); // 3 // 结合prototype，快速判断js中数组的最大值和最小值 var arr2 = [20,15,1,188,37,29]; Array.prototype.max = function(){ return Math.max.apply(null,this) } Array.prototype.min = function(){ return Math.min.apply(null,this) } arr2.max() // 188 arr2.min() // 1
四、毫秒转为日期：天时分秒
// 毫秒转为日期：天时分秒 function getDuration(millisecond) { var time = ""; var days = millisecond / 1000 / 60 / 60 / 24; var daysRound = Math.floor(days); var hours = millisecond / 1000 / 60 / 60 - 24 * daysRound; var hoursRound = Math.floor(hours); var minutes = millisecond / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound; var minutesRound = Math.floor(minutes); var seconds = millisecond / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound; if (daysRound) { time = daysRound + "天"+ hoursRound + "小时"+minutesRound + "分钟"; } else if (!daysRound && hoursRound) { time = hoursRound + "小时"+minutesRound + "分钟"; } else if (!daysRound && !hoursRound && minutesRound) { time = minutesRound + "分钟"; } else if (!daysRound && !hoursRound && !minutesRound && seconds) { time = seconds + "秒"; } return time; }
五、拓展：词法分析
JavaScript中在调用函数的那一瞬间，会先进行词法分析 词法分析的过程： 当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面： 1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。 2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。 3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。 函数内部无论是使用参数还是使用局部变量都到AO上找。 看两个例子： var age = 18; function foo(){ console.log(age); //undefined var age = 22; console.log(age); // 22 } foo(); 第二题： var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); function age(){ console.log("呵呵"); } console.log(age); } foo(); 答案解析： 词法分析过程： 1、分析参数，没有参数，不做任何操作； 2、分析变量声明，有一个 var age, AO上没有同名的值，则将此变量赋值给AO，并且值为undefined。 3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...}; 最终，AO上的属性只有一个age，并且值为一个函数声明 执行过程： 注意：执行过程中所有的值都是从AO对象上去寻找 1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数 2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2 3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
