05|引用类型

04|引用类型

其中本文主要是讲解引用类型!

其中对Object 和 Array没有讲太多便进入到了比较关键的 数组检测的情境下来了:

有两种方法检测对应的对象是否是数组:

if(value instanceof Array){
    //TODO
}

但是问题是,以上代码只考虑到只有一个全局执行环境,如果说网页中包含多个框架的话,不同的全局执行环境下,存在不同的Array构造函数!

ES5中提供了一个方法用爱确定最终某个值是否是数组,不管是在那个执行环境中创建的,代码如下所示:

if(Array.isArray(value)){
    //TODO
}

01|转换方法

对应的所有的对象都有三个方法分别为:

1. toLocalString
2. toString
3. valueOf

const colors = ["a","b","c"];
console.log(colors.toString());//a,b,c
console.log(colors.valueOf());//["a", "b", "c"]
console.log(colors);//["a", "b", "c"]

toString的方法会返回一个每个值的字符串形式拼接成字符串!

其实对应的toLocalString和toString是有区别的,与toString和valueOf不同的是,为了取得每一项的值,调用每一项的toLocaleString的方法,而不是toString方法!

let Person01 = {
    toLocaleString(){return "ProbeDream";}
    toString(){return "ProbeDream";}
}
let Person02 = {
    toLocaleString(){return "1";}
    toString(){return "2";}
}   
const people = [Person01,Person02];
console.log(people.toLocaleString());//ProbeDream 1
console.log(people.toString());//ProbeDream 2

对应的join方法可以帮助我们将数组转换为字符串类型并且以一定格式的形式间隔开来!

["A","B","C"].join("||"); // "A||B||C"
console.log(typeof ["A","B","C"].join("||"));//string

02|栈方法

1. push 添加内容到数组最后一项 改变原数组** 返回数组长度

2. pop 删除数组最后一项 改变原数组 返回数组长度

3. shift 删除第一项 改变原数组 返回数组长度

4. unshift 插入第一项 改变原数组 返回数组长度

对应的栈方法为1,2 特性为后进先出! 像油桶

对应的队列方法为3,4特性为先进先出! 像油管

03|重排序方法

1. sort: 按照字典排序 先调用toString方法之后 比较字符串确定如何排序!
   1. 对应的比较函数传入两个参数,
   2. 如果第一个应改为与第二个之前返回负数
   3. 如果两个相等返回0
   4. 如果第一个改为第二个之后返回正数!
   5. 如果说比较结果为正数倒序排列,否则升序排列如果为0则不变!
2. reverse: 反转数组顺序排列

04|操作方法

• concat: 基于当前数组所有项创建新的数组!
• slice(start,end):第二个参数缺省,能够基于当前数组中的一个或者多个创建新的数组! 如果只传入一个参数那么对应的从开始索引到数组末尾! 第二个参数则是截止的索引但是不包括索引本身!

console.log([1,2,3,4,5,6].slice(1,3)); //2,3

对应的splice是数组中最强大的方法了:

splice()提供了三个参数,返回被操作之后的项:

• 起始位置:索引
• 项数:要删除多少项 为0的话就是替换的意思
• 插入的项:可以插入任意数量的项!

[1,2,3,4,5].splice(0,1);
[1,2,3,4,5].splice(0,2);

05|位置方法

寻找未知的方法:

• indexOf:
• lastIndexOf:

分别都是穿两个参数,第二个是可选的,第一个是需要查找的项!

06|迭代方法

其中对应的迭代方法在ES5中有5个,每个方法都接受两个参数,每一项运行的方法和运行该函数的作用域对象!(可选 影响this的指向)

• every:对数组中的每一项运行给定的函数,如果说该函数对每一项都返回true则返回true
• filter:对数组中的每一项运行指定的函数,返回函数为true的数组
• forEach:对数组中的每一项运行指定的函数,该函数没有返回值!
• map:对数组中的每一项运行指定的函数,返回每次函数调用的结果组成的数组!
• some:对数组中的每一项运行指定的函数,如果该函数对任一项返回true,则返回true

07|归并方法

两个归并数组的方法,reduce和reduceRight,两个方法都会迭代所有项,并且构建一个最终返回的值!

对应的接收两个参数:

• 每一项上调用的函数(previous,,current,index,item)
• 归并基础的初始值(可选)

08|Date

之后便对Data类型进行了介绍,对应的一些事件相关的API!

09|RegExp

这里讲解的主要是常常被前端忽略的正则表达式,但是是非常有用的一部分!

10|Function

函数定义的常见方式:函数声明和函数表达式

1. 函数声明

function sum(num01,num02){
    return num01 + num02;
}

2. 函数表达式

let sum = function(num01,num02){
    return num01,num02;
}
//其实这种方式等价于下面这样
let sum = new Function("num01","num02","return num01+num02");

Function构造器中可以传入任意数量的参数,最后的参数被看成是函数的函数体!

• 到底推荐哪种方试进行函数的定义呢?

推荐使用第一种,第二种会有两次解析 第一次是常规解析JS代码,第二次是解析传入构造函数中的字符串! 对应的性能会受一定的影响. 函数是对象,函数名是指针 这句话我们应该很好理解!

• 执行方式是否相同?

• 函数声明

  • 解析器会率先读取,函数声明,并使其在执行任何代码之前可用!

• 函数表达式

  • 解析器执行到所在代码行才能正确被解释执行!

于是我们可以这么理解:

console.log(sum(1,2)); //函数声明提升
function sum(num01,num02){
    return num01 + num02;
}

console.log(sum(1,2)); //Cannot access 'sum' before initialization
let  sum =function (num01,num02){
    return num01 + num02;
}

对应的函数表达式的提前使用会出现对应的问题,不能在sum初始化之前访问!

11|包装类型

对应的包装类型的出现,主要是因为普通的String,Number和Boolean类型的值或者变量是不能够直接调用方法的,那么我们常常使用到的字符串为什么能够调用这些所谓的方法!

其实就是所谓的包装类型来做的!

最主要的是快速熟悉对应的String中的方法!

其中还介绍到了对应的全局对象,对应的就是作为一个终极的兜底儿对象定义的,不属于任何其他对象的属性和方法,最终都是它的属性和方法,例如说 isNaN,isFinite,parseInt,parseFloat 对应的还有一些方法值得我们学习的:

• URI编码方法

1. encodeURI

有效的URI不能够包含某些字符,例如说空格,而这两个URI编码方法就可以对URI进行编码,用特殊的UTF-8编码替换所有无效的字符.从而让浏览器能够接受和理解!

encodeURI作用于整个URI! 不会对本身属于URI的特殊字符进行编码!

encodeURIComponent对应的作用于URI中的某一段进行编码! 会对非标准的字符进行编码

12|Math

其中主要是包含对应的科学技术的一些API!