Javascript中引用数据类型

白桃与猫

已于 2022-11-11 11:22:55 修改

阅读量327

点赞数

分类专栏： Js 和 Ts 文章标签： javascript 前端开发语言

于 2022-11-09 09:24:05 首次发布

本文链接：https://blog.csdn.net/qq_52395343/article/details/127528257

版权

Js 和 Ts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本篇笔记是在看了《Javascript高级程序设计》后，进行得出的一些总结

一.Object

大多数引用类型值都是 Object 类型的实例，会继承Object中的一些方法，比如toString。

1.1 创建对象的两种简单方式：

（1）new 操作符后跟 Object 构造函数

  let person = new Object(); 
  person.name = "Nicholas"; 
  person.age = 29;

（2）对象字面量 (更常用，因为简单)

let person = { 
	 name : "Nicholas", 
	 age : 29 
};

1.2 获取对象属性的两种方式

（1）点表示法：最常用
（2）使用方括号：属性以字符串的形式放在方括号中
区别：
使用方括号: 可以用变量来访问属性；支持属性名有空格；如果属性名不存在则会重新创建。

二. Array

2.1 JavaScript数组与其他语言不同的地方

数组的每一项可以保存任何类型的数据
数组的大小是可以动态调整的
length属性可以修改

2.2 检测数组的几种方法

instanceof
Array.isArray()
Object.prototype.toString.call()
Array.prototype.isPrototypeOf(arr): 判断当前传入的数组是否为数组的原型

2.3 与数据结构结合

模拟栈：push(), pop()
模拟队列：push,shift()/ unshift, pop

2.4 数组的常见方法

1. 数组反转：reverse()

2. 数组排序：sort()

注🔔：sort()默认是升序排列，它会调用每个数组项的 toString()，所以比较的是字符串

      let arrs= [0, 1, 5, 10, 15]; 
      arrs.sort()
      console.log(arrs);// [0, 1, 10, 15, 5]

比较数字:

     let arrs= [0, 1, 5, 10, 15]; 
     arrs.sort((a,b) =>a-b)
     console.log(arrs);//[0, 1, 5, 10, 15]

3.合并两个或多个数组：concat()

不改变原数组，不传参数是复制数组

 	    var colors = ["red", "green", "blue"];
        var colors2 = colors.concat("yellow", ["black", "brown"]);
        console.log(colors2);// ['red', 'green', 'blue', 'yellow', 'black', 'brown']

4. 截取数组：slice(start, [end])

一个参数：从开始位置截取到末尾
二个参数：开始位置截取到结束位置（不包含结束位置）
注🔔：不改变原数组！

 	   var colors = ["red", "green", "blue", "yellow", "purple"];
        var colors2 = colors.slice(2);
        var colors3 = colors.slice(1,4);
        console.log(colors2);//['blue', 'yellow', 'purple']
        console.log(colors3);//['green', 'blue', 'yellow']

5. 删除/ 插入/ 替换：splice(start,[delCount],[item1,itemN])💛

会改变原数组，原数组是删除后的项，splice返回值是截取的数组
添加时第二个参数是0
删除元素：

  	    var colors = ["red", "green", "blue", "yellow", "purple"];
        var colors1 = colors.splice(1, 3)//从索引1的位置删除三项
        console.log(colors1);//['green', 'blue', 'yellow']
        console.log(colors);//['red', 'purple']

添加元素：

 	   var colors = ["red", "green", "blue"];
        var colors1 = colors.splice(1, 0,"apple","kiwi")
        console.log(colors);// ['red', 'apple', 'kiwi', 'green', 'blue']

替换元素：

		var colors = ["red", "green", "blue"];
        var colors1 = colors.splice(1, 1, "apple", "kiwi")
        console.log(colors);// ['red', 'apple', 'kiwi', 'blue']

6. 位置查找：indexOf() 、lastIndexOf()

第一个参数是要查找的字符，第二个参数是查找起点的索引。
返回查找字符的位置，找不到返回-1
indexOf()：从前向后查找
lastIndexOf(): 从后向前查找

	var numbers = [1,2,3,4,5,4,3,2,1]; 
	alert(numbers.indexOf(4)); //3
	alert(numbers.lastIndexOf(4)); //5
	alert(numbers.indexOf(4, 4)); //5 
	alert(numbers.lastIndexOf(4, 4)); //3

7. 数组迭代：

都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象this(可选)
forEach(): 遍历数组的每一项，没有返回值

      var numbers = [1, 2, 3, 4, 5];
      numbers.forEach(item =>console.log(item))//依次打印 1 2 3 4 5

map(): 遍历数组并对每一项做一些操作

      var numbers = [1, 2, 3, 4, 5];
      var res = numbers.map(item => item * 2)
      console.log(res);// [2, 4, 6, 8, 10]

filter()：过滤数组, 返回符合条件的

      var numbers = [1, 2, 3, 4, 5];
      var res = numbers.filter(item => item > 2)
      console.log(res);// [3, 4, 5]

8. every()

对每一项都返回 true，则返回 true

var numbers = [1, 2, 3, 4, 5];
        var res = numbers.every(item => item > 2)
        console.log(res);//false

9. some()

对任一项返回 true，则返回 true

        var numbers = [1, 2, 3, 4, 5];
        var res = numbers.some(item => item > 2)
        console.log(res);//true

10. 归并数组：reduce()、reduceRight()

传入在每一项上调用的函数，函数的参数有四个：前一个值、当前值、索引、数组。
这个函数返回值会作为第一个参数自动传给下一项。
reduceRight()：从数组的最后一项开始，向前遍历到第一项，其他和reduce()相同。

           var numbers = [1, 2, 3, 4, 5];
           var res = numbers.reduce((prev, cur, index, arr) => {
        	    return prev + cur
        })
           console.log(res);//15

三.Date

3.1 获取当前时间日期

获取当前时间日期
new Date()

  	 let date = new Date()
  	 console.log(date);//Tue Nov 08 2022 10:33:06 GMT+0800 (中国标准时间)

3.2 获取当前时间戳

Date.parse(new Date()
毫秒数回改成了000显示

  let timestamp = Date.parse(new Date())
  console.log(timestamp);//1667876261000

Date.parse(new Date()

  let timestamp = Date.parse(new Date())
  console.log(timestamp);//1667876261000

new Date().getTime()

  let timestamp = new Date().getTime()
  console.log(timestamp);//1667876486105

3.3 常见API

 let myDate = new Date();  
 myDate.getYear();  //获取当前年份  

 myDate.getFullYear(); //获取完整的年份(4位,1970-????)  

 myDate.getMonth(); //获取当前月份(0-11,0代表1月)     
 // 所以获取当前月份是 myDate.getMonth()+1;   

 myDate.getDate(); //获取当前日(1-31)  

 myDate.getDay(); //获取当前星期X(0-6,0代表星期天)  

 myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)  

 myDate.getHours(); //获取当前小时数(0-23)  

 myDate.getMinutes(); //获取当前分钟数(0-59)  

 myDate.getSeconds(); //获取当前秒数(0-59)  

 myDate.getMilliseconds(); //获取当前毫秒数(0-999)  

 myDate.toLocaleDateString(); //获取当前日期 (如：2021/4/13)
 
 myDate.toLocaleTimeString(); //获取当前时间  (如：下午2:42:45)   

 myDate.toLocaleString( ); //获取日期与时间   （如：2021/4/13下午2:43:23）

四. RegExp

可匹配的字符串的长度不是固定的，譬如{m,n}，表示连续出现最少m次，最多n次。
匹配字符时，不是具体某一个，譬如[abc]，表示该字符是可以字符“a”、“b”、“c”中的任何一个。[^abc]，表示是一个除"a"、“b”、"c"之外的任意一个字符

4.1 标志符

i 匹配忽视大小写
m 多行匹配
g 全局匹配

var pattern1 = /[bc]at/i; //匹配第一个"bat"或"cat"，不区分大小写
var pattern2 = /\[bc\]at/i; // 匹配第一个" [bc]at"，不区分大小写
var pattern3 = /.at/gi; // 匹配所有以"at"结尾的 3 个字符的组合，不区分大小

var expression = / pattern / flags ;
一个正则表达式就是一个模式与上述 3 个标志的组合体

注🔔：模式中使用的所有元字符都必须使用\转义。
元字符：( [ { \ ^ $ | ) ? * + .]}

4.2 RegExp构造函数

var pattern1 = /[bc]at/i; 
var pattern2 = new RegExp("[bc]at", "i");
//与 pattern1 相同，只不过是使用构造函数创建的

传递给 RegExp 构造函数的两个参数都是字符串。
所有元字符都必须双重转义，例如\n（字符\在字符串中通常被转义为\）
在这里插入图片描述

4.3 RegExp实例属性

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

var pattern1 = /\[bc\]at/i; 
alert(pattern1.global); //false 
alert(pattern1.ignoreCase); //true 
alert(pattern1.multiline); //false 
alert(pattern1.lastIndex); //0 
alert(pattern1.source); //"\[bc\]at"

这些实例属性通常不常用，因为这些信息全都包含在模式声明中了。

4.4 字符类含义

. :匹配除换行符\n和回车符之外的任何单个字符，等效于[^\n\r]
\d: 匹配一个数字字符，等效于[0-9]
\D: [^0-9]
\w: 匹配包括下划线的任何单个字符，包括AZ，az，0~9和下划线，等效于[a-zA-Z0-9]
\W: [^a-zA-Z0-9_]
\s: 匹配任何Unicode空白字符，包括空格、制表符、换页符等，等效于
\S:不能出现空白符

^符号的使用
1 反义字符
2 边界符 (以…开始)
$符号
边界符 (以…结束)
字符匹配出现次数

4.5 RegExp实例方法

4.4.1 exec()

接收一个字符串参数
包含两个额外的属性
index：表示匹配文本的第一个字符的位置
input：表示存放的为被检索的字符串string。

返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回 null。

var pattern1 = /.at/; 
var matches = pattern1.exec(text); 
alert(matches.index); //0 
alert(matches[0]); //cat 
alert(pattern1.lastIndex); //0

4.4.2 test()

判断传入的字符串是否符合该正则表达式，返回一个布尔值。

var str = 'hello world hello';
var reg = /hello/;//匹配hello
console.log(reg.test(str))//返回true

4.6 分组

定义分组：（）
捕获分组：RegExp.$

var reg = /(\d{4})-(\d{2})-(\d{2})/
var date = '2021-08-29'

// 捕获之前要先test/exec
reg.test(date)
console.log(RegExp.$1); //2021
console.log(RegExp.$2); //08
console.log(RegExp.$3); //29

五.Function

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

函数是对象，函数名是指针

function sum(num1, num2){ 
 return num1 + num2; 
} 
alert(sum(10,10)); //20 
var anotherSum = sum; 
alert(anotherSum(10,10)); //20 
sum = null; 
alert(anotherSum(10,10)); //20

访问的是函数指针，所以将anotherSum 和 sum 都指向了同一个函数，anotherSum 和 sum 都指向了同一个函数。

没有重载

var addSomeNumber = function (num){ 
 return num + 100; 
}; 
addSomeNumber = function (num) { 
 return num + 200; 
}; 
var result = addSomeNumber(100); //300