2. 引用类型

1.Array

1.1数组的length属性

数组的length属性很有特点——它不是只读的,因此通过这个属性,我们可以在数组的末尾移除项或者添加项.

1.2 检测类型

instanceof

语法: arr instanceof Array // true
但是，instanceof存在问题，加入页面当中有多个框架，那么就会产生多个array，当两个环境不一致的时候，检测就会出错

Array.isArray()

语法： Array.isArray(value) //true
这个方法是判断这个值是不是数组，而不去管它是在哪个执行环境

1.3 类型转换

toString、toLocaleString、valueOf 每个对象身上都有的方法，在对数组进行类型转换的时候，数组的每一项都会默认调用toString() 这个方法。

1.4 数组的方法

1.41 栈方法

arr.push()
语法： arr.push(value);
作用： 在数组的最后插入项，并返回插入项之后数组的长度。

arr.pop()
语法： arr.pop();
作用： 将数组的最后一项删除，返回被删除的项。

1.42 队列方法

arr.unshift()
语法： arr.unshift(value);
作用: 在数组的最前面插入项,并返回插入项之后数组的长度.

arr.shift()
语法: arr.shift()
作用: 删除数组的第一项,并返回被删除的项.

1.43 重排序方法

arr.reverse()
语法: arr.reverse(value);
作用: 逆转数组.

arr.sort()
语法: arr.sort()
作用: 重排序, 如果不传比较函数的话,sort()会调用数组每一项的toString()方法,然后比较得到的字符串,但是,sort()还是很强大的,里面可以传入一个比较的函数.

function compare(value1, value2) {
    return value1-value2;
}
arr.sort(compare);

1.44 操作方法

arr.concat()
语法: arr.concat(value);
作用: 拷贝一个数组的副本,但是不改变原数组,value的值可以是字符串,也可以是数组,任何类型都可以.

arr.slice()
语法: arr.slice(起始位置, 结束位置);
作用: 截取数组,从起始位置开始,到结束位置结束,但是不包含结束位置.然后返回一个新的数组,不会改变原数组.

arr.splice()
语法: arr.splice(起始位置, 操作的项数, 新的项);
作用; 拼接数组,向数组当中插入项,有多种用法.

var arr = [1, 2, 3, 4]
arr.splice(0, 1) // 删除操作,从第一项开始,删除一项,返回删除的项组成的数组 [1];
console.log(arr) // [2, 3, 4]  
 arr.splice(0, 0, 5, 6)    //插入操作, 从第一项开始,删除0项,然后在开始的位置加上5, 6两项, 返回的是一个空数组.
console.log(arr) // [5,6,1,2,3,4]      
arr.splice(0,1, 5) //替换操作,从第一项开始,删除一项,然后将5插入, 返回被删除的项组成的数组 [1];
console.log(arr) // [5,2,3,4]

1.45 位置方法

arr.indexOf()
语法: arr.indexOf(value)
作用: 查询数组当中是否有某个值,如果有的话返回索引,如果没有返回-1;

arr.lastIndexOf()
语法: arr.lastIndexOf(value);
作用: 查询数组当中是否包含某个值,从右往左的顺序,如果有的话返回索引,如果没有的话返回-1;

1.46 迭代方法

foreach()、map()、filter()、some()、every()、reduce()、reduceRight()这几个方法已经记录过了。

2. Data类型

Data类型使用的时间是自1970年1月1日起经过的毫秒数.

Data常用方法

getFullYear(): 返回年份,四位;

getMonth(): 返回月份, 其中0表示一月,11表示12月,在操作的时候要注意.

getDate(): 返回日期月份当中的天数(1到31)

getDay(): 返回日期当中的星期几,其中0代表的是星期日, 6代表星期六;

getHours(): 返回小时数,从0到23;

getMinutes(): 返回日期中的分钟数,从0到59;

getSeconds(): 返回日期当中的秒数,从0到59;

3.Function类型

函数实际上是对象,也有属性和方法,这样来说的话,函数是引用类型,函数名其实是指向函数对象的一个指针,不会与函数方法绑定.

3.1 函数没有重载

个人理解:由于函数名是函数对象的指针,并不是函数方法,所以定义相同名字的函数,相当于是给变量绑定了一个新的对象.

3.2 函数声明和函数表达式

函数声明有函数声明提升,函数表达式没有,除了这一点两者没有任何区别

3.3 作为值的函数

由于函数名本来就是变量名,所以函数也就相当于赋值给变量的值,可以当做值来使用. 也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回,这就是高级函数与闭包

<script>
        function demo(arg1, arg2) {
            return arg1(arg2);
        }
        function add(num) {
            num += 10;
            return num;
        }
        var a = demo(add, 20);
        console.log(a); // 30
    </script>

3.4 函数的内部属性

函数的内部有两个特殊的对象——arguments和this. 其中,arguments就是传参列表,你变我也变,我变你也要变. 另一个特殊对象this,就是函数执行时的环境对象的引用,在全局作用域中执行,this就指向window

3.5 函数的属性和方法

3.51 函数的属性

因为函数是对象,所以函数也有属性和方法,每个函数都包含两个属性——length和prototype。其中，length表示的是函数希望接收的实参的个数。prototype属性，后面原型会深入研究，它是一个指向原型对象的指针

3.52 函数的方法

每个函数都有两个非继承而来的方法:apply()和call().这两个方法的用途都是在特定的作用域当中调用函数,实际上等于设置函数体内this对象的值,(因为this指向的是函数运行时所在的作用域对象，所以将特定的作用域对象传进来，就改变了this对象的值)

apply()
语法: fn.apply(context, [arg1, arg2, arg3...])
作用: 改变this指向,注意传的参数要是个数组;

call()
语法: fn.call(context, arg1, arg2, arg3...)
作用: 改变this指向, 注意传的参数,是一个一个传的,而不是数组.

bind()
语法: fn.bind(context, arg1, arg2....)
作用: 改变this指向, 返回一个新的函数,该函数的this指向的是context;

<script>
        var color = 'red';
        var obj = {
            color: 'blue'
        }
        function getColor() {
            console.log(this.color);
        }
        var getNewColor = getColor.bind(obj);
        getNewColor() //blue;
        getColor() // red;
    </script>

4. 基本包装类型

为了便于操作基本类型,ECMAScript还提供了3个特殊的引用类型:Boolean、Number和String,这些类型与其他的引用类型相似，但同时又有各自基本类型对应的特殊行为。实际上每当读取一个特殊类型的值的时候，后台就会创建一个对应的基本的包装类型的对象，从而让我们能够调用一些方法来操作这些数据。

例：

var s1 = 'hello world';
var s2 = s1.substring(2);

摘抄
这个例子中的s1包含一个字符串，字符串当然是基本类型的值。而下一行调用了s1的substring()方法，并将返回的结果保存在了s2当中。我们知道基本类型不是对象，因而从逻辑上讲它们不应该有方法才对。其实为了让我们实现这种直观的操作，后台已经自动完成了一系列的处理。当第二行代码访问s1的时候，访问过程处于一种读取模式，也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时，后台都会自动完成下列操作

1.创建String类型的一个实例；

2.在实例上调用指定的方法；

3.销毁这个实例；
可以将上面的三步想象成这个代码：

var s1 = new String("hello world");

var s2 = s1.substring(2);

s1 = null;

4.1 String包装类型

Boolean类型和 Number类型的包装类很少用，也没有什么方法，不讨论，String类型的包装类定义了很多的方法。

1.字符方法

charAt()
语法： str.charAt(index);
作用： 返回索引位置上的单个字符；

charCodeAt()
语法： str.charCodeAt(index);
作用： 返回索引位置的字符编码；

2. 字符串操作方法

concat()
语法： str.concat(str2， str3);
作用： 拼接字符串，并返回拼接好的字符串，原字符串不变，但一般不用都用+号；

slice()
语法： str.slice(index1, index2);
作用： 截取字符串，从index1的位置开始，到index2的位置结束，但是不包括index2，然后返回截取的字符串，对原字符串没有影响。

substring()
语法： str.substring(index1, index2);
作用： 截取字符串，从index1的位置开始，到index2的位置结束，但是不包括index2，然后返回截取的字符串，对原字符串没有影响。

substr()
语法： str.substr(index1, length);
作用： 截取字符串，并返回截取的字符串，从index1的位置开始，第二个参数length代表的是截取的长度，对原字符串没有影响。

3.字符串位置方法

indexOf()
语法： str.indexOf(str1);
作用： 从一个字符串中查找给定的字符串有没有，如果有返回index索引位置，如果没有返回-1，顺序是从左往右查找。

lastIndexOf()
语法： str.lastIndexOf(str1);
作用： 从一个字符串中查找给定的字符串有没有，如果有返回index索引位置，如果没有返回-1，顺序是从右往左查找。

4.trim()方法

trim()
语法： str.trim()
作用： 删除字符串前面和后面的空格；

5.字符串大小写转换方法

toLowerCase()
语法： str.toLowerCase();
作用： 将字符串转换为小写；

toUpperCase()
语法： str.toUpperCase();
作用： 将字符串转换为大写；

5.字符串模式匹配的方法

match()
语法： str.match(正则表达式或者RegExp对象)；
作用： 匹配字符串，返回的是一个数组。

search()
语法： str.search(正则表达式或者RegExp对象);
作用： 该方法返回字符串当中第一个匹配项的索引，如果没有找到返回-1，始终是从开头向结尾查找；

replace()
语法： str.replace(字符串或正则，字符串或回调函数)
作用： 替换字符串。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有的字符串，第一个参数要使用正则匹配。如果第二个参数是字符串，那么还可以使用一些特殊的字符序列（下图列出），将正则表达式匹配到的值插入到结果字符串当中。第二个参数也可以是个函数，在只有一个匹配项的情况下，会向这个函数传递三个参数：模式的匹配项，模式匹配项在字符串中的位置、原始字符串，如果定义的正则表达式有多个捕获组的话，那么第二个参数是第一个捕获组的匹配项，依次类推

image.png

两个参数都是字符串

<script>
     var fruits = 'apple banana orange apple';
     var str = fruits.replace('apple', 'orange');
     console.log(str); // 'orange banana orange apple'
</script>

第一个参数是正则，第二个参数是字符串

<script>
        var fruits = 'apple banana orange apple';
        var str = fruits.replace(/apple/g, 'orange');
        console.log(str);//'orange banana orange orange'
    </script>

第一个参数是正则，第二个参数是字符串且应用字符序列

<script>
        var fruits = 'apple banana orange apple';
        var str = fruits.replace(/(apple)/g, 'big($1)');
        console.log(str); //'big(apple) banana orange big(apple)'
    </script>

第一个参数是正则，第二个参数是函数

<script>
        var fruits = '2019-03-08 2017-04-12';
        var match = /(\d{4})-(\d{2})-(\d{2})/g;
        function demo(match, one,two,three) {
            return one+'/'+two+'/'+three;
        }
        var str = fruits.replace(match, demo);
        console.log(str); // '2019/03/08 2017/04/12'
    </script>

查看replace当中的函数参数是什么？

var str = '2012-12-11';
        function test() {
           var arr = [...arguments];
           arr.forEach(function(ele,index) {
               console.log(ele);
           })
        }
        var match = /(\d{4})-(\d{2})-(\d{2})/g;
        str.replace(match, test);

image.png

split()
语法：str.split(分割符，数组长度)；
作用：基于指定的分隔符将一个字符串分割成多个子字符串，并将这些子字符串放在一个数组中返回。

5.单体内置对象

所谓的单体内置对象就是不必显示的实例化对象，因为ECMAScript已经给实例化好了，ECMA-262 定义了两个内置对象——Global和Math。

5.1 Global对象

在web浏览器当中的Global对象都是作为Window对象的一部分来实现的，可以理解为Global就是Window，所有定义在全局的属性和方法都会添加到Window对象的身上。

5.2 Math对象

Math对象的属性

image.png

Math对象的常用方法

Math.min()
语法： var num = Math.min(1,2,3);
作用： 返回一组数中的最小值；

Math.max()
语法： var max = Math.max(1,2,3);
作用： 返回一组数中的最大值；

Math.ceil()
语法： Math.ceil(4.5) // 5
作用： 向上取整；

Math.floor()
语法： Math.floor(4.5) // 4
作用： 向下取整；

Math.round()
语法： Math.round(4.5) // 5
作用： 四舍五入；

Math.random()
语法： Math.random();
作用： 返回一个0到1之间的随机数；

image.png