JS标准库(一)

发表于 | 更新于

介绍一些数组相关知识。

一、Array

1、生成Array

1
2
3
4
var arr1 = Array(3);        //输出一个长度为3的数组，其中arr[0]、arr[1]、arr[2]的值都为undefined
var arr2 = Array(3,3);      //输出一个长度为2的数组，其中arr[0]为3，arr[1]为3
var arr3 = Array(1,2,3,4,5);//输出一个长度为5的数组
arr1.__proto__ == Array.prototype   //  true

以上，使用new Array(3)、new Array(3,3)、new Array(1,2,3,4,5)生成数组的效果两者一致。

对于可生成构造函数的JS数据类型，我们可以分为以下两种情况进行讨论：

1）基本类型

由于null、undefined无构造函数，所以此处不讨论这两者。
数组
如上图所示，基本类型的构造函数是否加new是有区别的。拿Number来举例，Number()生成的仍旧是基本类型数据，但是new Number()生成的则是对象

2）复杂类型

复杂类型为Object，有两种特殊的Object即Array和function。这两个对象的构造函数是否加new效果都一样，生成的都是Object。请看上述生成数组代码。

3)介绍function构造函数方法
1
2
3
4
5
6
//方法一
var a1 = function(a,b){
  return a + b;       //  求和函数
}

var a2 = new Function('a','b','return a + b');      //同时求和函数，效果同上，使用构造函数方法

a2是Function构造函数创建一个新的Function对象。在Javascript中，每个函数实际上都是一个Function对象。语法为：

1
new Function([arg1[,arg2[,...argN]],]functionBody)

其中functionBody是一个包含有包括函数定义的Javascript语句的字符串。参数选填，并且参数个数不限。
这是一个对象，所以是否使用new无区别。

1、什么是数组

数组是按次序排列的一组值，每个值都有编号并且编号从0开始。JS中用Array构造出来的对象就是数组。以下是数组、字符串原型链结构示意图。
数组对象

1
2
3
4
5
6
7
let a = [1,2,3];
let b = {
  0:1,
  1:2,
  2:3,
  length:3
}

就以上变量a和变量b而言，因为它们的公用属性不一样，即a.proto为数组公用属性，b.proto为Objtct.prototype。所以这两个变量不一样。
Array是拥有特殊原型链的对象。看如下例子：

1
2
3
4
5
6
7
8
9
let a = [1,2,3];
a.xxx = 'xxx';
a.yyy = 'yyy';
for(let i = 0;i<a.length;i++){  //  方法一
  console.log(arr[i]);        //输出1，2，3
}
for(var key in a){            //方法二
  console.log(a[key]);           //  输出1,2,3,xxx,yyy
}

以上两种方法都是遍历变量a，不同的是方法一只会去遍历key值是0,1,2的值，但是a[‘xxx’]和a[‘yyy’]的值都存在。所以，数组是拥有特殊原型链的对象。如果对象的key值是从0开始逐渐升序的，那么对象的遍历方式也可使用数组的遍历方式。

2、伪数组

原型链中没有Array.prototype的就是伪数组。举例来说：

1
2
3
4
5
6
let obj = {
  0:1,
  1:2,
  2:3,
  length:4
}

以上就是一个伪数组。常见的伪数组是函数传参：

1
2
3
4
function f(){
  console.log(arguments);
}
f(1,2,3);

arguments为函数传参，传了多少个参数会以数组形式打印出来，但是arguments.proto == Object.prototype，伪数组没有数组的常用方法如：push()、pop()、shift()等等。

3、数组API

1)forEach()
1
2
3
4
5
let a = ['a','b','c'];
a.forEach(function(val,key){      //    其中第一个参数为value第二个参数为key值
  console.log('value:'+val);
  console.log('key:'+key);
});
2）sort()

数组排序。为快排，nlog(n);

1
2
3
4
5
6
7
8
let a = [1,4,5,6,3,9,7];
a.sort();       //[1,3,4,5,6,7,9]
a.sort(function(x,y){
  return x - y;
});             //[1,3,4,5,6,7,9]
a.sort(function(x,y){
return y - x;
})              //[9,7,6,5,4,3,1]

sort()中传递的方法是作为排序的依据。

3）join()

数组转字符串：

1
2
3
let a = [1,2,3];
a.join('summer');     //  返回"1summer2summer3"
a + '';               //  返回字符串"123"

4)concat()

连接数组：

1
2
3
4
5
let a = [1,2,3];
let b = [4,5,6];
a.concat(b);  //返回[1,2,3,4,5,6]，同时数组a、b不变
a+b;        //返回字符串"1，2，34，5，6"
let c = a.concat([]);     //  此种方法用于复制数组，注意此时c === a 为false，如果是let c = a;那么c === a为true

5)map()

map()的功能和forEach()差不多，区别在于forEach()无返回值，但是map()除了遍历数组，还会将对数组的操作后生成的值返回出来，如：

1
2
3
4
5
6
7
let a = [1,2,3];
a.forEach(function(val,key){
  console.log(val,key);
});                       //  不返回任何数据,即返回undefined
a.map(function(val,key){
  return a*2;            
})                      //  执行完会返回数组[2,4,6]，但是a的值并未有任何变化

6） filter()

数组过滤，跟map()方法很像，会返回一个数组，如：

1
2
3
4
let a = [1,2,3,4,5,6,7,8];
a.filter(function(val,key){
  return key % 2 == 1 ;   //输出[1,3,5,7]
});

7)reduce()

遍历这个数组，每一次取一个结果，将这个结果放到下一项的身上。举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [1,2,3];
let sum1 = 0;
for(let i = 0;i<arr.length;i++){
  sum1+=arr[i]
}                             //普通的数组求和
arr.reduce(function(sum,n){
  return sum+m;
},0);                         //reduce方法数组求和，其中0是初始值，sum是上一次操作的结果，n表示当前项
=======使用reduce()实现map()功能======
let b = [1,2,3];
b.reduce(function(arr,n){
  arr.push(n*2);
  return arr;           //  输出[2,4,6]
},[]);

二、其他

1、function和Function区别

function是关键字，类似于var、let、for，function用于声明一个函数。
Function是一个全局对象，即window.Function

2、声明一个函数的方法

1）具名函数
1
2
3
function f(){
  return undefined;
}
2)匿名函数
1
2
function (){
}
3）构造函数Function
1
new Function('x','y','return x +y');

这种方法不建议使用。

原创，转载请注明出处。