Javascript初识之流程控制、函数和内置对象

一、JS流程控制
1、
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

二、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);  //

sum = function (n) {
    if (1 == n) {
        return 1;
    } else {
        return n + arguments.callee(n - 1);
    }
}
sum(6);  //

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内置对象(相当于python中的内置模块)及方法

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");

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>

把当前的时间输出成 "xxxx-xx-xx xx:xx 星期x" 的格式

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"  不区分大小写

关于匹配模式：g和i的简单示例

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);  //

Math.round(5.4);  //
Math.round(5.6);  //

Math.floor(5.4);  //
Math.floor(5.6);  //

Math.max(10,5);  //
Math.min(10,5);  //

Math.pow(2,10);  //

Math.random();  // 0.656223169871724

Math.sqrt(9);  //

四、拓展：词法分析

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);  //
}
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值的语句了

拓展