JavaScript基础_2

数组对象

• 创建数组

  创建方式1:
  var arrname = [元素0,元素1,….];          // var arr=[1,2,3];
  
  创建方式2:
  var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
  

数组方法

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

• pop方法：删除最后一个成员，并作为返回值返回

  var arr = [1,2,3,4,5];
  var ret = arr.pop();
  console.log(arr); // [1, 2, 3, 4]
  console.log(ret); // 5
  

• push方法：在数组最后末尾追加一个成员

  var arr = [1,2,3,4,5];
  arr.push("a");
  

• shift方法：直接删除最后一个成员

  var arr = [1,2,3,4,5];
  arr.shift()
  

• unshift方法：将value值插入到数组的开始

  var arr = [1,2,3,4,5];
  arr.unshift("yuan")
  

• reverse方法：将数组反序

• slice方法：slice(开始下标,结束下标) 切片,开区间

  var arr = [1,2,3,4,5]
  var res = arr.slice(1,3)
  

• sort方法：排序[这是字符的排序,不是数值的排序]

  var arr = [3,4,1,2,5,10];
  console.log( arr ); 
  

• 升降序：

  // 数值升序
  var arr = [3,4,1,2,5,10];
  arr.sort(function(a,b){
      return a-b;
  });
  // 数值降序
  var arr = [3,4,1,2,5,10];
  arr.sort(function(a,b){
      return b-a;
  });
  

• splice方法：splice(操作位置的下标,删除操作的成员长度,"替换或者添加的成员1","替换或者添加的成员2") 添加/删除指定的成员 "万能函数"

  var arr1 = [1,2,3];
  arr1.splice(1,1);
  console.log(arr1); // 删除指定的1个成员  [1, 3]
  
  var arr2 = ["a","b","c","d"];
  arr2.splice(2,0,"w","x","w"); // 添加
  console.log(arr2); // ["a", "b", "w", "x", "w", "c", "d"]
  
  var arr3 = ["a","b","c"];
  arr3.splice(1,1,"w");
  console.log(arr3); // ["a", "w", "c"]
  

• concat方法：把多个数组合并

  var arr1 = [1,2,3];
  var arr2 = [4,5,7];
  var ret = arr1.concat(arr2);
  

• join方法：把数组的每一个成员按照指定的符号进行拼接成字符串

  var str = "广东-深圳-南山";
  var arr = str.split("-");
  var arr1 = ["广东", "深圳", "南山"];
  var str1 = arr1.join("-");
  

• find方法：高阶函数, 返回符合条件的第一个成员

  var arr = [4,6,5,7];
  var func = (num)=>{
      if(num%2===0){
          return num;
      }
  };
  var ret = arr.find(func);
  

• filter方法：对数组的每一个成员进行过滤,返回符合条件的结果

  var arr = [4,6,5,7];
  function func(num){  // 也可以使用匿名函数或者箭头函数
      if(num%2===0){
          return num;
      }
  }
  var ret = arr.filter(func);  // 所有的函数名都可以作为参数传递到另一个函数中被执行
  

• map方法：对数组的每一个成员进行处理,返回处理后的每一个成员

  var arr = [1,2,3,4,5];
  var ret = arr.map((num)=>{
      return num**3;
  });
  

• 其他方法

  / (14) 其它方法
  includes   查询指定数据是否在数组中存在!
  indexOf()  查询指定数据在数组中第一次出现的位置
  isArray()  判断变量的值是否是数组
  

  

object对象

object基本操作

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

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

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

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

• object可以通过. 和 []来访问。

  console.log(person["age"]);
  console.log(person.age)
  

• object可以通过for循环遍历

  for (var attr in person){
             console.log(attr,person[attr]);
        }
  

序列化和反序列化

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

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( ));//毫秒并不直接显示

获取当前时间信息

获取日期和时间
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)

练习：以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];
}

Math对象

练习：获取1-100的随机整数，包括1和100

var num=Math.random();
num=num*100;
num=Math.round(num);
console.log(num)

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代码在运行时，会分为两大部分———预编译 和 执行阶段。

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

函数参数

• 参数的基本使用

  // 位置参数
  function add(a,b){
      console.log(a);
      console.log(b);
  }
  add(1,2)
  add(1,2,3)
  add(1)
  
  // 默认参数
  function stu_info(name,gender="male"){
      console.log("姓名："+name+" 性别："+gender)
  }
  
  stu_info("ivan")
  

  

  • 函数中的arguments对象

    function add(a,b){
    
            console.log(a+b);//3
            console.log(arguments.length);//2
            console.log(arguments);//[1,2]
    
        }
    add(1,2)
    
    // arguments的应用1 
    function add2(){
        var result=0;
        for (var num in arguments){
            result+=arguments[num]
        }
        console.log(result)
    
    }
    
    add2(1,2,3,4,5)
    
    // arguments的应用2
    
    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }
    
    f(1,2,3,4,5)
    

    arguments 是一个对应于传递给函数的参数的类数组对象，arguments 是一个对象，不是一个 Array 。它类似于Array ，但除了length属性和索引元素之外没有任何Array 属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array

    

• 函数返回值

  在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值。

  function add(x,y) {
            return x+y
        }
  var ret = add(2,5);
  console.log(ret)
  

  1、在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句

  2、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。

• 匿名函数

  匿名函数，即没有变量名的函数。在实际开发中使用的频率非常高！也是学好JS的重点。

        // 匿名函数赋值变量
         var foo = function () {
             console.log("这是一个匿名函数！")
         };
  
        // 匿名函数的自执行
        (function (x,y) {
             console.log(x+y);
         })(2,3)
  
       // 匿名函数作为一个高阶函数使用
       function bar() {
          return function () {
              console.log("inner函数！")
          }
      }
  
      bar()()    
  

  使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！

  

• 函数作用域

  作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

  任何程序设计语言都有作用域的概念，简单的说，作用域就是变量可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

  // 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量
  // 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉
  

  首先熟悉下var

      var name = "yuan"; // 声明一个全局变量 name并赋值”yuan“
      name = "张三";  // 对已经存在的变量name重新赋值 ”张三“
      console.log(name);
  
      age = 18   // 之前不存在age变量，这里等同于var age = 19 即声明全局变量age并赋值为18
  
      var  gender = "male"
      var  gender = "female" // 原内存释放与新内存开辟，指针指向新开辟的内存
      console.log(gender)
  

  作用域案例：

   var num = 10; // 在函数外部声明的变量, 全局变量
      function func(){
          num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
          var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量
                    // 函数内部直接使用变量,则默认调用了全局的变量,
                    // 使用变量的时候,解释器会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量,如果没有,则一层一层往外查找最近的声明
                    // 如果最终查找不到,则直接报错! 变量名 is not define!
          console.log("函数内部num：",num)
      }
  func();
  console.log("全局num：",num);
  

  

  

预编译

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/ivanlee717/p/16273107.html

标签： javascript 技术文章 开发

你还没有登录，请先登录或注册！

• 还没有人评论，欢迎说说您的想法！

相关课程

CSS3样式设计

4786 0元 限免

Web前端入门教程

5873 9.8元

jQuery前端框架

5438 0元 限免