资讯专栏INFORMATION COLUMN

JavaScript高级程序设计 - CH5

bang590 / 1628人阅读

摘要:在使用字面量表示法的时候,并不会调用对象的构造函数种常用方法同一样可通过和字面量两种方法来创建。直接调用基本包装类型的构造函数,返回实例都属于这个构造函数是会根据参数返回相应的基本包装类型的实例。

第五章、引用类型

一共七种引用类型:

Object: 可通过new和字面量两种方法来创建。在使用字面量表示法的时候,并不会调用对象的构造函数

Array: 17种常用方法; 同object一样可通过new和字面量两种方法来创建。

Date:

RegExp:

Function: 函数名指针,this指针,prototype原型链,apply()、call()

基本包装类型(Boolean, Number, String):

单体内置对象(Global, Math):

1.Object类型

两种访问对象属性的方法:

person["name"];

person.name;

通常建议使用点表示法
方括号表示方法主要优点: 通过变量来访问属性

2.Array类型

·[].length属性不是只读的,可以读取,修改,扩大/新增,缩小/删除。

Array对象方法简介 (17 = 2+2+2+2+2+5+2)

栈方法(LIFO): push(), pop()

队列方法(FIFO): push(), shift()
另外还有unshift()

重排序方法: reverse(), sort()
调用的是toString类型,所以比较的是ascii码

操作方法: concat(), slice()

位置方法: indexOf(), lastIndexOf();
使用的是全等号

迭代方法: every(), filter(), some(), forEach(), map()

归并方法: reduce(), reduceRight()

经典问题: 检测对象是否是数组 arr instanceof Array?

本质依赖于构造函数,受到执行环境影响。所以,ES5当中是新增了Array.isArray(arr)方法。

经典问题: 类型判别?

typeof

null是对象空指针,适合判断基本类型变量,不适合判断引用类型(都返回object),比如自定义的对象类型

instanceof

如果有多个框架,那就存在两个以上不同的全局执行环境,那就会有两个不同版本的Array的构造函数。
而且返回的是true/false

constructor

高效但是危险Null or Undefined

Object.prototype.toString.call() 建议使用

Array对象方法详解

方法前面带*表示不修改原来数组

*join() 所有元素拼接成一个字符串,返回字符串

["Fire", "Air", "Water"].join("-")); //"Fire-Air-Water"

逆方法: String.prototype.split()

*slice()切片:从已有的数组中返回选定的元素

var animals = ["ant", "bison", "camel", "duck", "elephant"];
animals.slice(2);// Array ["camel", "duck", "elephant"]
animals.slice(2, 4);//Array ["camel", "duck"]
animals.slice(-2, -1) <==> animals.slice(3, 4) //前提条件:长度为5

*concat()连接两个或多个数组,返回新数组

arr1.concat(arr2)

splice()从数组中添加/删除项目,返回被删除的元素

months.splice(1, 0, "Feb");  // inserts at index 1
months.splice(4, 1, "May");  // replaces 1 element at index 4

pop() 删除数组最后一个元素,返回被删除的元素。如果数组为空,则不改变数组,返回undefined

shift()把数组的第一个元素删除,返回第一个元素的值。若空数组,不进行任何操作,返回undefined

push()向数组末尾添加一个或多个元素返回新数组的长度

unshift()向数组的开头添加一个或多个元素,返回新数组的长度

reverse()颠倒元素顺序,返回该数组

sort()根据ascii进行排序,返回该数组

[0,1,5,10,15].sort(); //[0,1,10,15,5]
[0,1,5,10,15].sort( (v1,v2) => { return (v1<=v2)? -1:1; }); //[0,1,5,10,15]

*toString() 返回数组的字符串形式

toLocalString()

Date类型
var start = Date.now();
// do something
var end = Date.now();
costTime = stop -start;
RegExp类型
var pattern = /[bc]at/gi <==> new RegExp("[bc]at","gi"); //大小写不敏感,全局匹配bat或者cat
var matches = pattern.exec("bat is not a cat");
Function类型

函数名仅仅是指向函数的指针,不会与某个函数绑定(即变量法的函数引用是可以被覆盖的)
注意函数声明提升(function declaratioin hoisting)和变量提升是有区别的。

//unexpected identifier
alert(sum(1,1));
var sum = function(v1, v2){
    return v1 + v2;
}
//ok
alert(sum1(1,1));
function sum1(v1, v2){
    return v1 + v2;
}
内部对象,this指针和类数组对象arguments

类数组对象arguments

严格模式下arguments.callee和arguments.caller无效

this指针

注意作用域

window.color = "red";
var o = { color : "blue"};
function sayColor(){
    alert(this.color);
}
sayColor(); //red
o.sayColor() = sayColor();
o.sayColor(); //blue
Function的prototype属性、内部方法

fn.length属性表示fn希望接收的参数的个数
prototype属性
保存所有实例方法的真正所在,换言之甚至toString(),valueOf()等方法都在prototype之下。
在创建自定义引用类型以及实现继承时,prototype极为重要。并且它是不可枚举的,因此for-in无法发现。
内部方法
每个fn都包含apply()和call(),apply()固定接收两个参数,作用域和arguments, call()接收多个参数,第一个是作用域。
这两个函数可以用来传参数,但是真正的作用是扩充作用域:如此对象和方法不需要有任何的耦合关系

window.color = "red";
var o = { color : "blue"};
function sayColor(){
    alert(this.color);
}
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
基本包装类型(Boolean, Number, String)

我们知道,基本类型值不是对象,因此逻辑上应该是没有方法的。但是实际当中Boolean, Number, String这三种在访问/读取的时候,会进入一种“读取模式”:创建实例 =》实例上调用方法 =》销毁实例
这种读取模式是隐性的,并且不建议显示调用。因为会让人分不清是在处理基本类型还是引用类型。

直接调用基本包装类型的构造函数,返回实例都属于object

var value = Number("25");
alert(typeof value);// number
var value2 = new Number("25");
alert(typeof value2);// object

new Object()这个构造函数是会根据参数返回相应的基本包装类型的实例。说白了就是工厂模式呗

var obj = new Object("test");
alert(obj instanceof String) //true

Boolean基本包装对象

很烂很烂很烂,不要去用

Number基本包装对象
num.toFixed(2); //精确两位小数
num.toExponential(2) //科学计数法保留两位小数
num.toPrecision(2) //看哪种格式方便,自动返回fixed还是指数形式
String基本包装对象

字符方法:str.charAt(2); str[2]

操作方法:str.concat(); str.slice(), str.substring, str.substr()
后面三个都是返回一个新串串。都可以接受两个参数,slice()和substring()是[start,end],而substr是[start,length]

位置方法:str.indexOf(); str.lastIndexOf()
如果接受第二个参数,表示从第几位开始查起

trim方法: 去除开头结尾的空格

大小写转换方法: toUpperCase(); toLowerCase()
少数语言(比如土耳其语)会为Unicode来应用特殊的转换规则,所以最好用toLocalUpperCase()

模式匹配方法: str.match(pattern); str.replace(), str.split(),str.includes()

var mathces = pattern.exec(str) <==> str.match(pattern);
var str = "cat,bat,fat"; //pattern一定要用全局模式g
alert( str.replace(/(.at)/g, "word ($1)") ); //word (cat), word (bat), word (fat)

padding方法: str.padStart(), str.padEnd();

const fullNumber = "2034399002125581";
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, "*"); //"************5581"

单体内置对象(Global, Math)

由ECMAScript实现提供的、不依赖于宿主环境的对象。

Global对象

URI编码方法: encodeURI(), encodeURIComponent()

//http://www.w3school.com.cn/My%20first/
encodeURI("http://www.w3school.com.cn/My first/")
// http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
encodeURIComponent("http://www.w3school.com.cn/My first/"

eval()方法,执行字符串代码

var msg = "hello world";
eval("alert(msg)");

window对象
web浏览器都是把Global对象作为window对象的一部分来实现的。因此,在全局作用域中声明的所有变量和函数,都成为了window对象的属性

Math对象

Math对象的属性

Math.E常量e,Math.PI常量圆周率

min(), max()接受多参数

// 这个技巧的关键是把Math对象作为第一个参数,从而正确地设置this指针,然后吧values数组作为参数
var values = [1,2,3,4,5];
var max = Math.max.apply(Math, values);

舍入方法

Math.ceil(); // 向上取整
Math.floor(); // 向下取整
Math.round(); // 四舍五入整数

随机数random()

本质是返回(0,1)的一个随机数
值 = Math.floor( Math.random() * 可能值的总数 + 第一个可能的值 );

其他方法

Math.abs(num);
Math.pow(num,power); //num^power
三角函数、反三角函数等

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106863.html

相关文章

  • Java基础:Java核心技术提示的易忽略点 Ch5

    摘要:而并不是父类对象的引用,而只是给编译器的一个提示性质的标志。或者自定义的提示在编译的时候使用当前子类的父类定义的构造器去初始化当前对象。所以,总结起来,的用法归为两种一是可以调用父类构造器,二是可以调用父类方法。 开篇Java是一门不那么简单也不那么复杂的语言,Java里面有很多问题和特性是容易被使用者忽视的,这些问题也许会难住新手,同时也许会是老手不小心跌入的无故之坑,只有精于对基础...

    weapon 评论0 收藏0
  • JavaScript进阶之路

    摘要:前端入门的门槛相对较低,学习曲线是越来越陡峭,由浅入深,可以分为四个阶段。第二阶段高级程序设计有的书是用来成为经典的,比如犀牛书还有些书是用来超越经典的,显然这本书就是。接下来可以看看教程,看看源代码,尝试着写一写这些效果。 前端入门的门槛相对较低,学习曲线是越来越陡峭,由浅入深,可以分为四个阶段。 第一阶段:《JavaScript DOM编程艺术》    看这本书之前,请先确认你对J...

    Lowky 评论0 收藏0
  • JavaScript高级程序设计》22章 JavaScript高级用法

    摘要:和的定义是指多少时间之后将回调函数加入到的执行队列之中回调函数是否立即执行取决于当前的执行队列是否空闲。比较好的例子如下回调函数执行其他操作假如内部的执行时间为那么的回调函数至少要等待才执行。 1、惰性加载函数 (判断各个浏览器中是否支持某个属性) function addEvent(elem, type, handler){ if(elem.addEventListener...

    wanglu1209 评论0 收藏0
  • 如何正确学习JavaScript

    摘要:然而,虽然先生对无所不知,被誉为世界的爱因斯坦,但他的语言精粹并不适合初学者学习。即便如此,在后面我还是会建议把当做补充的学习资源。但目前为止,依然是学习编程的好帮手。周正则表达式,对象,事件,阅读权威指南第,,,章。 既然你找到这篇文章来,说明你是真心想学好JavaScript的。你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript。而面对泛...

    canger 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<