javascript引用类型(4)

x33g5p2x  于2021-08-23 转载在 JavaScript  
字(12.2k)|赞(0)|评价(0)|浏览(259)

五 引用类型

5.1 Object对象

创建方式一:new 操作

ar person = new Object();
person.age = 18;
alert(person.age);

创建方式二:对象字面量

var person =  {
            age : 18,
            name : "zszxz"
        }
// 18
alert(person.age)

空括号

var person = {}; //与 与 new Object() 相同

用点访问对象属性,也可以使用方括号,当属性中有关键字时就可以使用方括号

var person =  {
    age : 18,
    name : "zszxz"
}
alert(person.age);
alert(person["name"]);

5.2 Array数组

数组创建

ECMAScript 中的数组的每个位置都可以存储任何类型的对象,其长度是动态调整;

创建方式一:

var person1 = new Array();
// 长度为20
var person2 = new Array(20);
// 传递值方式
var person2 = new Array("p1", "p2");

在创建数组时也可以省略new关键字

创建方式二:字面量方式

var array = ["p1", "p2", "p3"];
// p2
alert(array[1]);

赋值与长度

var array = ["p1", "p2", "p3"];
array[1] = "p";
// p
alert(array[1]);
// 3
alert(array.length);

length 属性非只读,如果对其赋值可以改变数组长度

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors[99] = "black"; // (在位置 99 )添加一种颜色
alert(colors.length); // 100

位置 3 到位置 98 实际上都是不存在的,所以访问它们都将返回 undefined

检测数组

检测是否是数组

if (Array.isArray(value)){
//对数组执行某些操作
}

数组转化

数组转为字符串

var array = ["p1", "p2", "p3"];
// p1,p2,p3
alert(array.toString());
// p1,p2,p3
alert(array.toLocaleString());
// p1|p2|p3
alert(array.join("|"))

栈方法

  • push()推入数组末尾

  • pop()推出数组末尾值

var array = ["p1", "p2", "p3"];
array.push("p4", "p5");
// p1,p2,p3,p4,p5
alert(array.toString());
// p5
alert(array.pop())

队列方法

  • shift() 向数组首移除元素

  • push()推入数组末尾

  • unshift() 向数组首添加元素

var array = ["p1", "p2", "p3"];
array.push("p4", "p5");
// p1,p2,p3,p4,p5
alert(array.toString());
// p1
alert(array.shift())

排序方法

  • reverse() 数组反转
var array = [1, 2, 5 ,4];
// 4,5,2,1
alert(array.reverse());
  • sort() 按顺序从小到大排序
var array = [1, 2, 5 ,4];
// 1,2,4,5
alert(array.sort());
  • compare(value1, value2)

如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数

function compare(value1, value2) {
    if (value1 < value2) {
    	return -1;
    } else if (value1 > value2) {
    	return 1;
    } else {
    	return 0;
    }
}

使用方式

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15

操作方法

  • concat()函数将基于当前数组创建新的数组
var person = ["p1", "p2", "p3"]
var human = person.concat("p4", ["p5", "p6"]);
// p1,p2,p3
alert(person);
// p1,p2,p3,p4,p5,p6
alert(human);
  • slice() ,它能够基于当前数组进行切片创建一个或者多个新数组
var person = ["p1", "p2", "p3"]
// p2,p3
alert(person.slice(1));
// p2 
alert(person.slice(1,2));
// p1,p2,p3
alert(person.toString())
  • splice() 方法

splice(0,2) 会删除数组中的前两项

splice(2,0,"red","green") 会从当前数组的位置 2 开始插入字符串 "red" 和 "green"

splice (2,1,"red","green") 会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串
"red" 和 "green"

位置方法

  • indexOf()方法从数组的开头(位置 0)开始向后查找;返回位置,若未找到返回-1;

  • lastIndexOf()方法则从数组的末尾开始向前查找;返回位置,若未找到返回-1;

var person = ["p1", "p2", "p3"]
// 1
alert(person.indexOf("p2"))
// 1
alert(person.lastIndexOf("p2"))

迭代方法

  • every() :对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true
<script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];
		// 给every函数传入函数checkValue
        var result = numbers.every(checkValue)
		// false
        alert(result)
        // 检查值是否大于16
        function checkValue(value, index, array){
            return (value>16);
        }
    </script>
  • filter():对数组中的每一项运行给定函数,返回 true 的项组成的数组;
<script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];

        var result = numbers.filter(checkValue)
        // 64,32
        alert(result)

        function checkValue(value, index, array){
            return (value>16);
        }

    </script>
  • forEach() :对数组中的每一项运行给定函数。没有返回值。
<script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];

        var result = numbers.forEach(checkValue)
        

        function checkValue(value, index, array){
            // 64, 2, 8, 16, 32
            alert(value)
        }

    </script>
  • map() :对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
    <script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];

        var result = numbers.map(checkValue)
        // 63,1,7,15,31
        alert(result)

        function checkValue(value, index, array){
            return (value-1);
        }

    </script>
  • some():对数组中的每一项运行给定函数,如果任一项返回 true ,则返回 true ;
    <script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];

        var result = numbers.some(checkValue)
        // true
        alert(result)

        function checkValue(value, index, array){
            return (value>32);
        }

    </script>

归并方法

  • reduce() 方法从数组的第一项开始,逐个遍历到最后;传入函数参数为前一个值、当前值、项的索引和数组对象
   <script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];

        var result = numbers.reduce(checkValue)
        // 122
        alert(result)
        // 前一项+后一项
        function checkValue(pre, cur, index, array){
           return pre + cur;
        }

    </script>
  • reduceRight() 则从数组的最后一项开始,向前遍历到第一项;传入函数参数为前一个值、当前值、项的索引和数组对象
<script type="text/javascript">

        var numbers = [64, 2, 8, 16, 32];

        var result = numbers.reduceRight(checkValue)
        // 122
        alert(result)
		// 后一项 + 前一项
        function checkValue(pre, cur, index, array){
           return pre + cur;
        }

    </script>

5.3日期

日期创建方式

简单创建日期对象

 var now = new Date();
 // Mon Apr 20 2020 10:18:20 GMT+0800 (中国标准时间)
 alert(now)

有 4 种方法创建新的日期对象:

  • new Date()
  • new Date(year, month, day, hours, minutes, seconds, milliseconds)
  • new Date(milliseconds)
  • new Date(date string)

示例一

   var now = new Date(2020,4,20,10,30,45);
   // Wed May 20 2020 10:30:45 GMT+0800 (中国标准时间)
   alert(now)

示例二

var now = Date.now()
// 1587350538565
alert(now)

示例三

var now = new Date("2020-02-19");
// Wed Feb 19 2020 08:00:00 GMT+0800 (中国标准时间)
alert(now)

浏览器通常支持下列5种格式

  • “月/日/年”,如 6/13/2004;
  • “英文月名 日,年”,如 January 12,2004;
  • “英文星期几 英文月名 日 年 时:分:秒 时区”,如 Tue May 25 2004 00:00:00 GMT-0700。
  • ISO 8601 扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)

日期其支持 Date.parse()

   var now = new Date(Date.parse("may 20, 2020"));
   // Wed May 20 2020 00:00:00 GMT+0800 (中国标准时间)
   alert(now)

日期 Date.UTC() 方法;参数为年份,月份(从0代表为1月份开始),月中的天,小时,分,秒,毫秒;

var now = new Date(Date.UTC(2020,4,20,10,30,45));
// Wed May 20 2020 18:30:45 GMT+0800 (中国标准时间)
alert(now)

继承方法

toString 和 toLocaleString 不同的浏览器中返回的日期和时间格式不一样

  var now = new Date(2020,5,20)
  // Sat Jun 20 2020 00:00:00 GMT+0800 (中国标准时间)
  alert(now.toString())
  // 2020/6/20 上午12:00:00
  alert(now.toLocaleString())

valueOf() 方法返回毫秒值

var start = new Date(2020,5,20)
var end = new Date(2020,5,10)
// false
alert(end > start)

格式化方法

  • toDateString() ——以特定于实现的格式显示星期几、月、日和年;
  • toTimeString() ——以特定于实现的格式显示时、分、秒和时区;
  • toLocaleDateString() ——以特定于地区的格式显示星期几、月、日和年;
  • toLocaleTimeString() ——以特定于实现的格式显示时、分、秒;
  • toUTCString() ——以特定于实现的格式完整的 UTC 日期。
var now = new Date("2020-02-19T12:00:00");
// Wed Feb 19 2020 12:00:00 GMT+0800 (中国标准时间)
alert(now)
// 2020/2/19
alert(now.toLocaleDateString())
// 下午12:00:00
alert(now.toLocaleTimeString())

时间组件

方法含义
getDate()以数值返回天(1-31)
getDay()以数值获取周名(0-6)
getFullYear()获取四位的年(yyyy)
getHours()获取小时(0-23)
getMilliseconds()获取毫秒(0-999)
getMinutes()获取分(0-59)
getMonth()获取月(0-11)
getSeconds()获取秒(0-59)
getTime()获取时间(从 1970 年 1 月 1 日至今)

示例

   var now = new Date("2020-02-19T12:00:00");
   // 2020
   alert(now.getFullYear())
   // 1 
   alert(now.getMonth())
   // 19
   alert(now.getDate())

5.4 RegExp 类型

在线测试地址: https://tool.oschina.net/regex/

语法:

表达式如下,其中 pattern 为正则表达式;flags为标志位,g全局模式,i大小写不敏感,m多行;

var expression = / pattern / flags ;

示例

// 匹配第一个"bat"或"cat",不区分大小写
var pattern1 = /[bc]at/i;

示例

var str = "ajhgkd"
var re = new RegExp("jh","g")
// true
alert(re.test(str))

RegExp 实例属性

  • global :布尔值,表示是否设置了 g 标志。
  • ignoreCase :布尔值,表示是否设置了 i 标志。
  • lastIndex :整数,表示开始搜索下一个匹配项的字符位置,从 0 算起。
  • multiline :布尔值,表示是否设置了 m 标志。
  • source :正则表达式的字符串表示

示例:

<script type="text/javascript">
    var str = /[abc]oo/
    //
    alert(str.global)// false
</script>

RegExp 实例 方法

exec 方法 ;

  • 数组中的第一项是匹配的整个字符串;
  • 第二项包含与第一个捕获组匹配的内容;
  • 第三项包含与第二个捕获组匹配的内容
		var text = "abc ggg"
        var pattern = /.ggg/
        var matcher = pattern.exec(text)
        alert(matcher.index)// 3
        alert(matcher[0])// ggg
        alert(pattern.lastIndex)//0	

test方法:

  • 它接受一个字符串参数。
  • 在模式与该参数匹配的情况下返回true ;否则,返回 false
	 	var text = "abc ggg"
        var pattern = /.ggg/
        var matcher = pattern.test(text)
        alert(matcher)// true

示例

获取 字符串中的省份

let str = "{mts:'1317007',province:'安徽',catName:'中国联通'}"
let pattern = new RegExp("province:(.*?),","g")
let matchers = pattern.exec(str)
// '安徽'
console.log(matchers[1] )

let pattern = new RegExp("province:(.?),","g") 等同于 let pattern = /province:(.?)/g

5.5 Function类型

每个函数都是 Function 类型的实例,而且都与其他引用类型一样具有属性和方法;函数是对象,实际上也是一个指向函数对象的指针;

构造函数的3种方式

方式一:函数声明

  function sum (a,b) {
            return a + b;
        }
  alert( sum(1,2))// 3

方式二:函数表达式(匿名函数)

 var sum = function (a,b) {
            return a + b;
        }
 alert( sum(1,2))// 3

方式三:function构造函数,不推荐使用

var sum = new Function ("a","b", "return a + b");
alert( sum(1,2))// 3

函数没有重载,后面的函数会覆盖前面的同名函数;

解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问)

alert(sum(10,10));
function sum(num1, num2){
return num1 + num2;
}

函数名本身就是变量,所以函数也可以作为值来使用

 function sum(a, b){
	 return a + b;
 }
 function add(someFun, c){
 	return someFun + c;
 }
 alert( add(sum(1,2),3))// 6

函数内部对象

  • arguments 用途是保存函数参数,有一个 callee 的属性是一个指针,指向拥有这个 arguments 对象的函数
  • 函数内部的另一个对象是 this ,其行为与 Java 和 C#中的 this 大致类似
window.color = "red";
var o = { color: "blue" };
function sayColor(){
	alert(this.color);
}
sayColor(); //"red"
o.sayColor = sayColor 赋予给对象o,此时o就有;// 将 sayColor 赋予给对象o,此时o就有sayColor方法
o.sayColor(); //"blue"

函数属性和方法

  • length 属性表示接收的命名参数的个数;
  • prototype 属性保存所有实例方法,不可枚举 无法迭代;
  • apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组;
function sum(num1, num2){
	return num1 + num2;
}
function callSum1(num1, num2){
	return sum.apply(this, arguments); // this代表window对象,  arguments 参数数组对象
}
alert(callSum1(5,5))// 10
  • call() 方法与 apply() 方法的作用相同,它们的区别仅在于接收参数的方式不同;第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数
function sum(num1, num2){
	return num1 + num2;
}
function callSum1(num1, num2){
	return sum.call(this, num1,num2); // 传入 arguments 对象
}
alert(callSum1(5,5))// 10
  • bind(),创建一个函数的实例,其 this 值会被绑定到传给 bind() 函数的值

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数,内部函数能够访问外部函数的变量;

		function outer(){
            var name = "憨憨";
            function inner(){
                console.log(name);
            }
            inner(); 
        }

        outer();

闭包只能取得包含函数中任何变量的最后一个值。闭包保存的是整个变量对象,而不是某个特殊的变量

匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window; 需要将this 变量赋值给另一个变量,闭包就可以访问该变量。

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        var that = this;// this赋值
        return function(){
        return that.name;
    	};
	}
};
alert(object.getNameFunc()()); //"My Object"

块级作用域

使用括号将函数声明转为函数表达式

(function(){
//这里是块级作用域
})();

错误示例

function outputNumbers(count){
(function () {
    for (var i=0; i < count; i++){
    alert(i);
    }
})();
alert(i); //导致一个错误!
}

私有变量

任何在函数中定义的变量都可以认为是私有变量,因为不能在函数的外部访问这些变量;可以通过闭包修改或者获取私有变量;

构造函数模式

function Person(name){
    this.getName = function(){
    	return name;
    };
    this.setName = function (value) {
    	name = value;
    };
}
var person = new Person("憨憨");
alert(person.getName()); //"憨憨"
person.setName("jack");
alert(person.getName()); //"jack"

静态私有变量模式

初始化未经声明的变量,总是会创建一个全局变量;

私有变量和函数是由实例共享

(function(){
    var name = "";
        Person = function(value){
        name = value;
    };
    Person.prototype.getName = function(){
    	return name;
    };
    Person.prototype.setName = function (value){
    	name = value;
    };
})();
var person1 = new Person("憨憨");
alert(person1.getName()); //"憨憨"
person1.setName("JACK");
alert(person1.getName()); //"JACK"
var person2 = new Person("lusy");
alert(person1.getName()); //"lusy"
alert(person2.getName()); //"lusy"

5.6 基本包装类型

Boolean 、 Number 和 String 是 基本包装类型;

引用类型与基本包装类型的主要区别就是对象的生存期。

使用 new 操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。

而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

Number 的 toFixed() 方法会按照指定的小数位返回数值的字符串表示

var num = 10;
alert(num.toFixed(2)); //"10.00"

Number 的 toExponential() ,该方法返回以指数表示法(也称 e 表示法)

var num = 10;
alert(num.toExponential(1)); //"1.0e+1"

Number 的 toPrecision() 方法可能会返回固定大小(fixed)格式,也可能返回指数(exponential)格式

var num = 99;
alert(num.toPrecision(1)); //"1e+2"
alert(num.toPrecision(2)); //"99"
charAt()返回指定索引位置的字符
charCodeAt()返回指定索引位置字符的 Unicode 值
concat()连接两个或多个字符串,返回连接后的字符串
fromCharCode()将 Unicode 转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值
slice()提取字符串的片断,并在新的字符串中返回被提取的部分
split()把字符串分割为子字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值

5.7 globle对象

  • encodeURI() 编码后只有空格被替换成了%20 。
  • encodeURIComponent() 编码会替换所有非字母数字字符。
  • decodeURI() 只能对使用 encodeURI() 替换的字符进行解码;
  • decodeURIComponent() 可以解码任何特殊字符的编码;
  • eval() 方法接受一个字符串参数,相当于ECMAScript 解析器;
  • 在全局作用域中声明的所有变量和函数,就都成为了 window对象的属性
		var color = "pink";
        function callColor(){
            alert(window.color);
        }
        window.callColor(); //"pink"

5.8 Math对象

  • Math.ceil() 执行向上舍入
  • Math.floor() 执行向下舍入
  • Math.round() 执行标准舍入
  • Math.random() 方法返回大于等于 0 小于 1 的一个随机数
  • min() 和 max() 方法用于确定一组数值中的最小值和最大值

Math.E 自然对数的底数,即常量 e 的值

Math.LN10 :10的自然对数
Math.LN2 :2的自然对数
Math.LOG2E :以2为底 e 的对数
Math.LOG10E : 以10为底 e 的对数
Math.PI : π的值
Math.SQRT1_2 : 1/2的平方根(即2的平方根的倒数)
Math.SQRT2 : 2的平方根

相关文章