JavaScript基础_2

发布时间：2022-08-13 文章分类：编程知识 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

数组对象

数组方法
var arr = ["A","B","C","D"];
// 内置属性
console.log( arr.length );
// 获取指定下标的成员
// console.log( arr[3] ); // D
console.log( arr[arr.length-1] ); // 最后一个成员

JavaScript基础_2

JavaScript基础_2

JavaScript基础_2

object对象

object基本操作

Object 的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们确实是非常理想的选择。 创建 Object 实例的方式有两种。

var person = new Object();
person.name = "ivan";
person.age = 18;

另一种方式是使用对象字面量表示法。对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。下面这个例子就使用了对象字面量语法定义了与前面那个例子中相同的person 对象：

var person = {
                name : "ivan",
                age : 18
             };

JavaScript基础_2

序列化和反序列化

json[JavaScript Object Notation]:对象表示法，是一种轻量级的数据交换格式。[本质上它是一种字符串]

# json是一种数据格式, 语法一般是{}或者[]包含起来
# 内部成员以英文逗号隔开,最后一个成员不能使用逗号!
# 可以是键值对,也可以是列表成员
# json中的成员如果是键值对,则键名必须是字符串.而json中的字符串必须使用双引号圈起来
# json数据也可以保存到文件中,一般以".json"结尾.
# 前端项目中,一般使用json作为配置文件.
{
   "name": "xiaoming",
	 "age":12
}
[1,2,3,4]
{
   "name": "xiaoming",
	 "age":22,
   "sex": true,
   "son": {
      "name":"xiaohuihui",
      "age": 2
   },
   "lve": ["篮球","唱","跳"]
}

在python中，可以通过json.dumps和json,loads函数进行字典和json格式的转换

import json
dic = {
    "name":"ivanlee",
    "Age":18
}
----------------------------------------------------
| dic_to_json = json.dumps(dic)                     |
| print(dic_to_json,type(dic_to_json))              |
| >>> {"name": "ivanlee", "Age": 18} <class 'str'>  |
----------------------------------------------------
| json_to_dic = json.loads(dic_to_json)             |
| print(json_to_dic,type(json_to_dic))              |
| >>> {'name': 'ivanlee', 'Age': 18} <class 'dict'> |
----------------------------------------------------

js中也支持序列化和反序列化的方法：JSON.stringify和JSON.parse

// 把json对象转换成json字符串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"ivanlee","age":22}
    // 把json字符串转换成json对象
    var str = `{"name":"ivanlee","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret);

JavaScript基础_2

Date对象

创建Date对象
//方法1：不指定参数
var nowd1=new Date();
console.log(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var d2=new Date("2004/3/20 11:12");
console.log(d2.toLocaleString( ));
var d3=new Date("04/03/20 11:12");
console.log(d3.toLocaleString( ));
//方法3：参数为毫秒数
var d4=new Date(5000);
console.log(d4.toLocaleString( ));
console.log(d4.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d5=new Date(2004,2,20,11,12,0,300);
console.log(d5.toLocaleString( ));//毫秒并不直接显示

JavaScript基础_2

获取当前时间信息
获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)
日期和时间转换
日期和时间的转换:
// 返回国际标准时间字符串
toUTCString()
// 返回本地格式时间字符串
toLocalString()
// 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间)
Date.UTC(x)

JavaScript基础_2

练习：以2021年03月2日 14:1:43 星期二格式化输出当前时间
function getCurrentDate(){
    //1. 创建Date对象
    var date = new Date(); //没有填入任何参数那么就是当前时间
    //2. 获得当前年份
    var year = date.getFullYear();
    //3. 获得当前月份 js中月份是从0到11.
    var month = date.getMonth()+1;
    //4. 获得当前日
    var day = date.getDate();
    //5. 获得当前小时
    var hour = date.getHours();
    //6. 获得当前分钟
    var min = date.getMinutes();
    //7. 获得当前秒
    var sec = date.getSeconds();
    //8. 获得当前星期
    var week = date.getDay(); //没有getWeek
    return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
}
function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }
}
//将数字 0~6 转换成 星期日到星期六
function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

JavaScript基础_2

Math对象

函数名 用法
abs 返回数值的绝对值
var num = -10;
console.log( Math.abs(num) ); // 10
ceil 向上取整
var num = 10.3;
console.log( Math.ceil(num) ); // 11
toFixed 保留小数位
var num = 100.3;
var ret = num.toFixed(2);
console.log(num); // 100.3
console.log(ret); // 100.30
floor 向下取整
var num = 10.3;
console.log( Math.floor(num) ); // 10
max 取最大
min 取最小
pow 指数函数
console.log(Math.pow(3, 2)); // 相等于 3**2
console.log( 3**2 ); // 使用这个,上面废弃
random 生成0-1随机数
console.log( Math.random() );
生成0-10之间的数值
console.log( Math.random() * 10 );
round 四舍五入
生成0-10之间的整数
console.log( Math.round( Math.random() * 10 ) );
练习：获取1-100的随机整数，包括1和100
var num=Math.random();
num=num*100;
num=Math.round(num);
console.log(num)

JavaScript基础_2

Function对象

函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性,也能让代码变得更加灵活强大

声明函数
/ 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}
功能说明：
    可以使用变量、常量或表达式作为函数调用的参数
    函数由关键字function定义
    函数名的定义规则与标识符一致，大小写是敏感的
    返回值必须使用return
//  函数的定义方式2
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");
虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。
函数的调用
//f(); --->OK
    function f(){
        console.log("hello")
    }
    f() //----->OK

不同于python，js代码在运行时，会分为两大部分———预编译 和 执行阶段。

  • 预编译：会先检测代码的语法错误，进行变量、函数的声明。
  • 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。
函数参数

预编译??

js运行三个阶段：

  1. 语法分析
  2. 预编译
  3. 解释执行

语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行就是执行你的代码。最重要最需要理解的就是第二个环节预编译，简单理解就是在内存中开辟一些空间，存放一些变量与函数 。

预编译可分为全局预编译和局部预编译。

  1. 在js脚本加载之后，会先通篇检查是否存在低级错误；
  2. 在语法检测完之后，便进行全局预编译；
  3. 在全局预编译之后，就解释一行，执行一行；
  4. 当执行到函数调用那一行前一刻，会先进行函数预编译，再往下执行。

全局预编译的3个步骤：

  1. 创建GO对象（Global Object）全局对象，即window对象。
  2. 找变量声明，将变量名作为GO属性名，值为undefined
  3. 查找函数声明，作为GO属性，值赋予函数体

局部预编译的4个步骤：

  1. 创建AO对象（Activation Object）执行期上下文。
  2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
  3. 将实参值和形参统一。
  4. 在函数体里面找函数声明，值赋予函数体。

GO对象是全局预编译，所以它优先于AO对象所创建和执行

案例分析：
<script>
        var a = 10;
        console.log(a);
        function foo(a) {
          console.log(a);
          var a = 100;
          console.log(a);
          function a() {}
          console.log(a);
          var b = function(){};
          console.log(b);
          function d() {}
        }
        var c = function (){
        console.log("匿名函数C");
        };
        console.log(c);
        foo(20);
  </script>

全局编译

 GO/window = {
        a: undefined,    变量声明，所以是undefined
        c: undefined,    匿名函数，并不是函数声明，所以也是undefined
        foo: function(a) {  函数声明，把函数体赋值
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}
        }
    }

执行代码（直到foo函数前）

GO/window = {
        a: 10,
        c: function (){
            console.log("I at C function");
        }
        test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}
        }
    }

调用foo函数前发生函数的局部编译

// 局部预编译前两步：
AO = {
        a:undefined,
        b:undefined,
    }
// 局部预编译第三步：
AO = {
            a:20,
            b:undefined,
        }
// 局部预编译第四步：
AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }

预编译总结：

  1. 函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
  2. 变量 声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

JavaScript基础_2

红框部分是因为在局部编译时，将a视作函数体，所以在调用时会显示a是一个函数体，再通过var赋值，a才是100

那如果想要将20传到函数里面，需要把函数注释掉

JavaScript基础_2

面试题：
var num3 = 10;
function func3(){
    console.log(num3); 
    var num3 = 20;       
}
func3();
console.log(num3); 
全局编译：
GO{
  numm3: undefined,
	function func3(){
    console.log(num3); 
    var num3 = 20;       
	}
}
全局执行：
var num3 = 10;
GO{
  num3:10,
    func3: function (){
      console.log(num3);
      var num3 = 20;
    }
局部编译：
func3.AO{
           num3:undefined,
        }
 局部执行
 func3.AO{
   num3:20,
 }
全局执行
  GO.num3 = 10
}

JavaScript基础_2

标签 , , , ,