Js高级程序设计学习笔记 第五章

最新推荐文章于 2023-09-20 22:30:44 发布
最新推荐文章于 2023-09-20 22:30:44 发布
阅读量222 收藏
点赞数
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40890601/article/details/106352554
版权

引用类型

Object 类型

创建方式有两种，第一种是使用new 操作符后跟Object 构造函数，另一种是使用对象字面量表示法。如下person 对象和people 对象。

var person=new Object(); //构造函数
person.name="klaus";
person.age=12;
var people= { //字面量表示法
	name:"sunday",
	age:13
	};

访问对象属性
一般来说使用的都是点表示法，不过，也可以使用方括号表示法。使用方括号语法时需要将属性以字符串的形式放在方括号里。

person.name;
person["name"]

Array 类型

ECMAScript 数组的每一项可以保存任何数据类型的数据。
创建方式：和Object 类似， 构造函数法和字面量表示法。

var fruit=new Array();//new 操作符可省略
// var fruit=new Array(20); //指定数量 length会变成 20
//var fruit=new Array("apple","banana","strawberry"); //直接传入包含的项
//字面量
var colors=["red","yellow","blue"];
//var colors=[];//空数组

读取和设置
要用方括号并提供相应值的基于0的数字索引（从0开始）。
访问上面的colors 数组的第一项如下：

alert(colors[0]);//red
colors[0]="lightblue";
alert(colors[0]); //lightblue

length 移除项和添加项

var colors=["red","yellow","blue"];
alert(colors[2]); //blue
colors.length=2; //会删掉之后的数据 最后一个项的索引是length-1 所以下列添加新项的索引就是length
alert(colors[2]);//undefined
colors[2]="pink";
alert(colors[2]); //pink

检测数组 isArray()

上一章说过使用instanceof操作符，
value instanceof Array。
ECMAScript 5 新增了Array.isArray()方法也可以检测, 但不兼容IE9以下的浏览器。

转换方法 join()

toLocalString() 、toString()、valueof()
toString() 返回的是数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串；
valueOf() 返回的还是数组。
默认情况下都是以逗号分隔，而join()方法可以使用不同的分隔符来构建字符串。如果不传入分隔符，就会默认使用逗号分隔。

var colors=["red","yellow","blue"];
console.log(colors.join("|")); //  red|yellow|blue
console.log(colors.join("//"));//  red//yellow//blue

栈方法 push() pop()

栈是一种FILO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在栈的顶部。ECMAScript 为数组专门提供了 push() 和pop()方法，以便实现类似栈的行为。

var colors=["red","yellow","blue"];
colors.push("pink");//推入
console.log(colors.length); //4
console.log(colors[colors.length-1]);// 最后一项是pink
var item=colors.pop();
console.log(item);//"pink" 被移除的项

队列 shift() unshift()

队列数据结构的访问规则是FIFO（First-In-First-Out，先进先出），队列在列表的末端添加项，从列表的前端移除项。用的方法是push() 和 shift()，前者可以向数组末端添加项，后者在前端取得项。
push()：往数据末端添加项；
shift()：移除数组的第一个项并返回该项；
unshift()：在数组前端添加任意个项并返回新数组的长度；

var colors=["red","yellow","blue"];
colors.push("pink");//往列表末端添加项
console.log(colors.length); //4
console.log(colors[colors.length-1]);//red
var item=colors.shift(); //移除第一项
console.log(item);//"red"

unshfit()的用法：

var colors=["red","yellow","blue"];
var count=colors.unshift("black");
console.log(count);//数组长度为4
console.log(colors[0]);//第一个项变成  "black"

重排序方法 reverse() sort()

reverse()： 反转数组项的顺序
sort()：按升序排列列表项

var values=["1","3","2","9"];
alert(values.sort()); //1,2,3,9
alert(values.reverse());//9,3,2,1

如果需要降序，只需要使用sort() 之后再使用reverse() 方法即可。

操作方法 concat() slice() splice()

ECMAScript 为操作已经包含在数组中的项提供了很多方法。
concat()：基于当前数组中的所有项创建一个新数组，具体来说，这个方法会先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。如果没有给定参数，那相当于只是复制当前数组。如果参数是一个或多个数组，那么该方法会把数组里的每一项都添加到结果数组的末尾。

var values=["1","3","2","9"];
var value1=values.concat("h3","h4",["hello","am"],"hola");
alert(value1); //1,3,2,9,h3,h4,hello,am,hola

slice()：能够基于当前数组中的一或多个项创建新数组，可以接受一或两个参数，即要返回项的起始和结束位置。
一个参数表示从开始项开始一直到最后一个项结束；
两个参数不能相同，从开始项开始（包括开始项）到结束项结束（不包含结束项）。如果传入负数，要将数值加上数组长度来确定相应的位置。

var values=["1","3","2","9"];
var value1=values.slice(1);//3,2,9
var value2=values.slice(2,3);//2
alert(value1);
alert(value2);

splice()：这个方法很强大，主要用途是向数组的中部插入项，但使用这种方法的方式有以下三种：
删除：可以删除任意数量的项，只需指定2个参数，要删除的第一项和要删除的项数，例如，splice(0,2)会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五甚至更多的参数，例如：

var values=["1","3","2","9"];
values.splice(values.length,0,"4","8");//1,3,2,9,4,8
alert(values);

替换：可以向指定位置插入任意数量的项，并且同时删除任意数量的项。

var values=["1","3","2","9"];
values.splice(3,3,"4");//删除9 并替换为4  
alert(values);//1,3,2,4

**splice() 方法始终都会返回一个数组，如果没有删除任何项就会返回一个空数组。**不管有没有插入数据，只要没有删除任何项都会返回一个空数组。

alert(values.splice(0,0));//空数组

总结：splice() 方法的参数可以综合为三个，第一个是起始位置，第二个是要删除的项，第三及之后的是替换项。其中第三个之后都可以省略，前两个参数不可省略。
splice() 这个方法是会改变原数组的。

位置方法 indexOf() lastIndexOf()

indexOf() ：从数组的开头开始往后查找。
lastIndexOf()：从数组的末尾开始向前查找。
这两个都接收两个参数，要查找的项和查找起点的索引。返回要查找的项在数组中的位置，在没找到的情况下返回-1。比较时使用的是全等操作符（数据类型也必须相等）。

var values=["1","3","2","9"];
alert(values.indexOf("2",1));//2

迭代方法 forEach() every() filter()等

（遍历所有项）
ECMAScript 5 为数组定义了 5 个迭代方法。每个迭代方法接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象-影响this的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。

  • every()：对数组中的每一项运行给定函数，如果每一项都返回true，则返回 true。
  • filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
  • forEach()：对数组中的每一项运行给定函数。没有返回值。
  • map()：对数组中的每一项运行给定函数。返回每次函数调用的结果组成的数组。
  • some()：对数组中的每一项运行给定函数。如果任意一项返回true，则返回true。

例如：

var values=[1,3,2,9];
var bool=values.every(function(item,index,array){//每一项都必须是true 才会返回true
	return (item>0)
})
// alert(bool);//true
var filter=values.filter(function(item,index,array){ //返回满足条件的项
	return(item>=2)
})
// alert(filter);//3,2,9
values.forEach(function(item,index,array){ //没有返回值 可以直接操作原数组
	item=item*2;
	array[index]=item;//直接在原数组上操作 其他三个对原数组没有影响
})
// alert(values);//2,6,4,18
var map=values.map(function(item,index,array){ //返回对每一项操作的结果
	return item/2;
})
// alert(map);//1,3,2,9 
var some=map.some(function(item,index,array){//some() 只需要有一项是true就会返回true
	return item>=9;
})
alert(some);//true

缩小方法 reduce() reduceRight()

（上一项和下一项的操作）
reduce() 和 reduceRight() 的函数接收4个参数，前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一代，第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。
使用reduce() 方法可以求数组中所有项之和、相减、相乘等的结果。例如：

var values=[1,3,2,9]; 
var chen=values.reduce(function(prev,cur,index,array){
	return prev*cur;
});
alert(chen); //54

reduceRight() 与 reduce() 差不多，只不过方向不同。

var values=[1,3,2,9]; 
var chen=values.reduceRight(function(prev,cur,index,array){
	return prev-cur;
});
alert(chen); //3

Date 类型

定义： var date=new Date();如果想要根据特定是时间创建日期对象，必须要传入该日期的毫秒数。

Date.Parse() 接收一个日期字符串参数，返回毫秒数。该日期字符的格式：

  • “月/日/年”，如"6/13/2009" 注意是字符串；
  • “英文月名 日，年”，如"January 12,2009"；
  • ”英文星期几 英文月名 日 年 时：分：秒 时区“，"Tue May 25 2004 00:00:00 GMT-0700"；
  • ISO 8601扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ（例如："2004-05-25T00:00:00"），只有兼容ECMAScript 5 的实现支持这种格式。
var someDate=new Date(Date.parse("6/13/2005"));//创建2005年6月13日的一个日期对象
//var someDate=new Date("6/13/2005"); //结果一样
console.log(someDate); //Mon Jun 13 2005 00:00:00 GMT+0800 (中国标准时间)

实际上直接将日期字符串直接传入Date() 构造函数，也会在后台调用 Date.parse()。
ECMAScript 5 添加了 Date.now() 方法，获取当前时间的毫秒数。

继承的方法

Date 类型也重写了toLocaleString()、toString()和valueOf()方法。
toLocaleString()会按照浏览器设置的地区相适应的格式返回日期和时间，大致意味着会包含AM 或 PM， 但不会包含时区信息（因浏览器而异）。
toString() 通常返回带有时区信息的日期和时间。

var someDate=new Date(Date.now());
console.log(someDate.toString()); // Tue May 26 2020 16:40:02 GMT+0800 (中国标准时间)
console.log(someDate.toLocaleString());// 2020/5/26 下午4:40:02
日期格式化方法

查红宝书。

var date=new Date();
console.log(date.toDateString());//Tue May 26 2020 星期几、月、日、年
console.log(date.toTimeString());// 16:52:11 GMT+0800 (中国标准时间) 时、分、秒、时区
console.log(date.toLocaleDateString());//2020/5/26   
console.log(date.toLocaleTimeString());//下午4:52:11
console.log(date.toUTCString());//Tue, 26 May 2020 08:52:11 GMT
console.log(date.toLocaleString());// 2020/5/26 下午4:52:11
日期/时间组件方法

查红宝书。内容太多。

//月份setMonth 天数setDate 以此类推  Day星期 小时Hours  
//分钟Minutes 秒Seconds 毫秒Milliseconds 它们和年FullYear操作一样
var date=new Date();
console.log(date.getTime());//获取毫秒数
console.log(date.getFullYear());//获取四位数的年份 2020
date.setFullYear("2019");//设置日期的年份 
console.log(date.getFullYear());//2019

RegExp 类型

这是我觉得最容易忘记的部分。
ECMAScript 通过RegExp 类型来支持正则表达式，使用类似下面的Perl语法，就可以创建一个正则表达式。

var expression=/pattern/flags;

pattern 是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。每个正则表达式都可带有一或多个标志（flags），用以标明正则表达式的行为。正则表达式的匹配模式支持下列三个标志。

  • g：表示全局（global）模式，即模式将应用于所有字符串，而非在发现第一个匹配项时立即停止；
  • i：表示不区分大小写；
  • m：多行模式，即在到达一行文本末尾还继续往下查找。
小k铁柱
关注
专栏目录
第四章(js高级程序设计学习笔记)----2
03-17
在本节中，我们将深入探讨JavaScript的高级程序设计，特别是关注"第四章(js高级程序设计学习笔记)----2"的主题。这一章很可能涵盖了JavaScript的核心概念，包括原型链(Prototype Chaining)。通过阅读名为...
JavaScript高级程序设计（第3版）学习笔记 概述
12-07
JavaScript，作为一种广泛应用于网页和网络应用的...通过学习《JavaScript高级程序设计（第3版）》这样的专业书籍，不仅可以系统地梳理JavaScript的基础，还能了解到一些高级用法和最佳实践，对提升编程技能大有裨益。
javascript 正则表达式学习
weixin_30566063的博客
03-06 125
语法 /正则表达式主体/修饰符（可选） 修饰符有3中/i, /g, /m /i 代表 执行对大小写不敏感的匹配。 /g 代表执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 /m 代表执行多行匹配。 转载于:https://www.cnblogs.com/tangwangming/p/8515724.html...
JavaScript中String对象的属性与方法整理
a15940835457的博客
08-21 620
const string = 'string'; // anchor方法的目的：在对象中的指定文本两端放置一个有 NAME 属性的 HTML 锚点。 console.log(string.anchor(arg)); // <a name='arg'></a> // at() 方法可返回指定位置的字符。与charAt()方法类似 console.log(string.at(5)); // g // 给字符串外层加上<big>标签 console.log(stri...
JavaScript：对象
Carson的博客
02-17 393
简介 对象只是一种特殊的数据。对象拥有属性和方法。JavaScript中所有事物都是对象。 创建对象 定义并创建对象的实例 var person = new Object(); person.name = "Carson"; person.age = 18; 使用构造器定义对象，然后创建新的对象实例 function student(name, age) { ...
CSS基本单位
hizyk的博客
11-21 680
CSS中的常见单位 尺寸单位 1.px：相对单位，页面按精确像素展示。 2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。 3.rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性。 4.vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 5.vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 6.vmin：vw和vh中较小的那个。 7
RegExp对象属性
vfjcgg的博客
03-27 216
属性 描述 global RegExp对象是否具有标志 g ignoreCase RegExp是否具有标志 i lastIndex 一个整数，标示开始下一次匹配的字符位置 multiline RegExp对象是否具有标志 m source 正则表达式的源文本 ...
String.prototype.match到底怎么用
weixin_33753003的博客
11-25 294
今天在一本书《Javascript for impatient programmers》上看到写的是这样用 match(regExp: string | RegExp): RegExpMatchArray | null 复制代码上面用的是类Typescript的写法来说明，个人觉得挺好的 意思是match方法接受传递一个参数regExp，这个regExp可以字符串或者正则表达式。返回的正则匹配后的...
TypeScript 核心
最新发布
2301_77456141的博客
09-20 533
使用js字面量作为变量类型，这种类型就是字面量类型。18'yellow'['a']{age: 10}等等。// : 'jack' 是字面量类型// : 18 是字面量类型// 报错：不能将类型“19”分配给类型“18”age = 19;//str1 类型是 string//str2 类型是 Hello TS原因： str2是const声明的，值只能是Hello TS，所以类型只能是Hello TS。
js正则表达式语法
热门推荐
zaifendou的专栏
07-19 34万+
1. 正则表达式规则1.1 普通字符    字母、数字、汉字、下划线、以及后边章节中没有特殊定义的标点符号，都是"普通字符"。表达式中的普通字符，在匹配一个字符串的时候，匹配与之相同的一个字符。    举例1：表达式 "c"，在匹配字符串 "abcde" 时，匹配结果是：成功；匹配到的内容是："c"；匹配到的位置是：开始于2，结束于3。（注：下标从0开始还是从1开始，因当前编程语言的不同而可能不同）    举例2：表达式 "bcd"，在匹配字符串 "abcde" 时，匹配结果是：成功；匹配到的内容是："bc
RegExp -- 常见四种正则方法
aina0674的博客
06-01 688
一、正则表达式 1、match()方法 调用 let str = "梦的翅膀受伤了!" let res = str.match('翅膀') match() 方法可在字符串内检索指定的值，这个校验方法有点类似于数组/字符串的indexOf()和lastIndexOf()方法，只不过这两个方法返回的是指定值首次出现的下标索引，而match()返回两种结果： 1.正常的校验指定字符，返回的则是...
IDEA 常用操作
蚩尤后裔-汪茂雄
04-19 673
1、同时只会有一个All类型的断点生效，且在这个断点结束前，其它线程遇到的任何断点均不生效。2、All类型断点和Thread类型断点可同时生效（只能在先遇到Thread类型断点，再遇到All类型断点），且各自保持独立诊断3、Thread类型断点可同时生效，不论先后，且相互独立。
JavaScript—— Function，Array，Date，Math，RegExp(正则表达式），Global
运算符重载之String
04-24 438
javaScript基础1. JS特殊语法：2. 基本对象：1. Function：函数(方法)对象1. 创建：2. Array:数组对象1. 创建：2. 方法3. 属性4. 特点：3. Boolean4. Date：日期对象5. Math：数学对象6. Number7. String8. RegExp：正则表达式对象9. Global 1. JS特殊语法： 1. 语句以;结尾，如果一行只有...
第4章 第4节 RegExp类型
szmtjs10的博客
10-18 1821
丨字面量 var reg=/\d+/g; 丨构造函数 var reg2=new RegExp("\d+",“g”); console.log(reg2.test(“1234444456”));//true console.log(reg2.test(“asdsa”));//false 修饰符 i： 表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串...
typescript: 类型“NodeListOf＜xxx＞”必须具有返回迭代器的 “[Symbol.iterator]()“ 方法)
Byebye_W0rld的博客
07-05 681
typescript: 类型“NodeListOf＜xxx＞”必须具有返回迭代器的 “[Symbol.iterator]()“ 方法)
正则系列之RegExp使用正则表达式
老__L的博客
09-18 2855
RegExp[@@species] 访问器属性返回RegExp 的构造器。lastIndex 是正则表达式的一个可读可写的整型属性，用来指定下一次匹配的起始索引。dotAll 属性表明是否在正则表达式中一起使用"s"修饰符（引入/s 修饰符，使得。可以匹配任意单个字符）。dotAll 是一个只读的属性，属于单个正则表达式实例。flags属性返回一个字符串，由当前正则表达式对象的标志组成。global 属性表明正则表达式是否使用了 “g” 标志。global 是一个正则表达式实例的只读属性。
类型 “RegExp“ 到类型 “Demo“ 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 “unknown“。 类型“RegExp”缺少类型“Demo”的以下
qq_39840183的博客
12-09 1093
类型 "RegExp" 到类型 "Demo" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。
JavaScript高级程序设计（第3版）学习笔记与术语解析
"这篇学习笔记主要基于《JavaScript高级程序设计（第3版）》一书，旨在系统梳理JavaScript的基础知识，记录作者在学习和工作中遇到的精彩用法，分享给需要帮助的人。笔记涵盖JavaScript的起源、相关术语，如ECMA、TC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值