JavaScript数组原理：梳理数组API

JavaScript数组原理：梳理数组API

数组对于JavaScript的重要性：没有数组就不足以写好JavaScript
在力扣的刷题题库中1800道题中有三百道都是与数组相关的，也是种类中最多的。
本文章将会通过会改变自身值的和不会改变自身值的，遍历方法这三种类型来分开讲解，这样可以把知识更加的结构化。
第一：Array构造器通常我们推荐使用对象字面量的方式创建一个数组
总有字面量无法表述的时候例如我想创建一个长度为6的空数组用对象字面量的方式是无法创建的因此只能写成如下代码的样子：

//使用Array构造器,可以自定义长度
vara=Array(6);// [undefined ×6]
//使用对象字面量
var b=[];
b.length = 6;//[undefined ×6]

array的构造器根据传入参数的不同有两种不同的处理方式
第一种：new Array(arg1, arg2,…)参数长度为0或长度大于等于2时,传入的参数将按照顺序依次成为新数组的第0至第N项(参数长度为0时,返回空数组)
第二种：new Array(len)当len不是数值时，处理同上，返回一个只包含len元素一项的数组;当len为数值时，len最大不能超过32位无符号整型，即需要小于2的32次方(len最大为Math.pow(2,32)),否则将抛出RangeError
在es6中数组构造器array新增了两个方法：array.of、array.from其中array.of用的比较少但是array.from具有灵活性在开发中使用比较多，下面详细解释一下两者的用法：
array.of 用于将参数依次转化为数组中的一项然后返回这个新数组，而不管这个参数是数字还是其他与构造器的方法几乎一致，不一样的就在于对待参数的不同，下面用代码理解一下

Array.of(8.0); //[8]
Array(8.0);//[empty × 8]
Array.of(8.0, 5);//[8,5]
Array(8.0, 5);//[8,5]
Array.of('8');//["8"]
Array('8');//["8"]

我们发现在在参数是两个的时候返回的结果是一致的，当参数是一个是，array.of会吧参数变成数组中的一项，构造器就会生成一个和第一个参数长度相同的空数组，
array.from的设计初衷是快速便捷的基于其他对象创建新数组准确的来说就是从一个类似数组的可迭代对象中创建一个新的数组实例，array.from有三个参数1.类似数组的对象，必选 2.加工函数，新生成的数组会经过该函数的加工再返回 3.this作用域，表示加工函数执行时this的值，演示代码如下：

var obj={0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){
console.log(value, index, this, arguments.length);
return value.repeat(3);//必须指定返回值，否则返回undefined}, obj);

控制台输出结果如下：

下面讲解array的判断：
array.isarray用来判断一个变量是否是一个数组类型
下面是是判断类型的一些方法

var a=;
//1.基于instanceof
a instanceof Array;//2.基于constructor
a.constructor ===Array;//3.基于Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);//4.基于getPrototypeOf
Object.getPrototypeOf(a) ===Array.prototype;//5.基于Object.prototype.toString
Object. prototype.toString.apply(a)=== '[object Array]';

下面来讲述可以改变自身的方法：
pop、push、reverse、shift、sort、splice、unshift
以及两个ES6新增的方法 copyWithin和 fill
下面的代码可以帮助理解：

l/ pop方法
var array =["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array);//["cat", "dog", "cow" , "chicken"]
console.log(item); // mouse
l/ push方法
var array =["football", "basketball", "badminton"];vari = array.push("golfball");
console.log(array);
l/ ["football", "basketball", "badminton ", "golfball""]console.log(i);// 4
reverse方法
var array =[1,2,3,4,5];
var array2 = array.reverse();console.log(array); //[5,4,3,2,1]
console.log(array2===array); // true
l/ shift方法
var array= [1,2,3,4,5];var item = array.shift();
console.log(array);//[2,3,4,5]
console.log(item); // 1
// unshift方法
var array = ["red", "green", "blue"];
// sort方法
var array = ["apple""Boy","Cat""dog"];
var array2 = array.sort();
console.log(array);//["Boy", "Cat", "apple", "dog"]
console.log(array2 ==array); // true
l/ splice方法
var array = [ "apple""boy"];
var splices= array.splice(1,1);
console.log(array);//["apple"]
console.log(splices);//["boy"]
l/ copyWithin方法var array = [1,2,3,4,5];
var array2 = array.copyWithin(0,3);
console.log(array=-=array2,array2);// true [4,5,3,4,5]
//fill方法
var array =[1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array=-=array2,array2);
//l/l true [10,10, 10,4,5],可见数组区间[0,3]的元素全部替换为10

下面是介绍不改变自身的方法：
concat、join、slice、toString、
toLocateString、indexOf、lastlndexOf、未形成标准的toSource
以及ES7新增的方法includes
下面是代码实现：

// concat方法
var array =[1,2,3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); //[1,2,3,4,5,6,7,8,9]
console.log(array); //[1,2,3],可见原数组并未被修改
// join方法
var array =['We', 'are', 'Chinese'];
console.log(array.join());// "We,are,Chinese"
console.log(array.join('+'));// "We+are+Chinese"
// slice方法
var array = ["one", "two", "three"" four", "five"];
console.log(array.slice()); //["one", "two", "three","four", "five"]
console.log(array.slice(2,3));//["three"]
// toString方法
var array = ['Jan, 'Feb', 'Mar', 'Apr'];var str = array.toString();
console.log(str); / / Jan,Feb,Mar,Apr
// tolocalString方法
var array=[{name:'zz'},123, "abc", new Date()];
var str = array.toLocaleString();
console.log(str); //[object Object],123,abc,2016/1/5下午1:06.:23
// indexOf方法
var array = ['abc', 'def", 'ghi,123'];
console.log(array.indexOf('def')); // 1
// includes方法
var array =[-0,1,2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // truevar array = [NaN];
console.log(array.includes(NaN)); // true

PS:slice不改变自身，而splice会改变自身
lastindexof和indexof基本功能差不多， lastindexof是从后面寻找元素下标，tosource方法还未形成标准

数组遍历的方法：
forEach、every、some、filter、map.reduce、reduceRight,以及 ES6新增的方法entries、find、findIndex、keys、values
下面是代码实现：

// forEach方法
var array = [1,3, 5];
var obj={name:'cc'l;
var sReturn = array.forEach(function(value, index, array){array[index] =value;
console.log(this.name); // cc被打印了三次, this指向obj},obj);
console.log(array);//[1,3,5]
console.log(sReturn); // undefined,可见返回值为undefined
// every方法
var o ={0:10,1:8,2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){return value >= 8},o);
console.log(bool); // true
// some方法
var array =[18,9,10,35,80];
var isExist = array.some(function(value, index, array){return value > 20;
});
console.log(isExist); / / true
// map方法
var array =[18,9,10,35,80];
array.map(item => item +1);
console.log(array);//[19,10,11, 36,81]
// filter方法
var array =[18,9,10,35,80];
var array2 = array.filter(function(value, index, array){return value > 20;
});
console.log(array2); // [35,80]
// reduce方法
var array =[1,2,3,4];
vars= array.reduce(function(previousValue, value, index, arrayreturn previousValue * value;},1);
console.log(s);// 24//ES6写法更加简洁
array.reduce((p, v)=→>p* v);// 24
// reduceRight方法(和reduce的区别就是从后往前累计)
var array = [1,2,3,4];
array.reduceRight((p, v) =→>p*v);// 24
// entries方法
var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value);// [0, "a"]
console.log(iterator.next().value); //[1, "b"]
console.log(iterator.next().value); // [2,"c""]
console.log(iterator.next().value); // undefined,迭代器处于数组末尾时再迭代就会返回undefined
// find & findIndex方法
var array =[1,3,5,7,8,9,10];function f(value, index, array){return value%2==0;//返回偶数}
function f2(value, index, array){
return value > 20;/返回大于20的的数
console.log(array.find(f));// 8
console.log(array.find (f2)); // undefined
console.log(array.findIndex(f));// 4
console.log(array.findIndex(f2));// -1
// keys方法
[...Array(10).keys()l;// [0,1,2,3,4,5,6,7,8,9][...new Array(10).keys()l;//[0,1,2,3,4,5,6,7,8,9]
// values方法
var array =["abc", "xyz"];var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz
// reduce方法
var array = [1,2,3,4];
var s = array. reduce(function(previousValue, value, index, array){return previousValue * value;
},1);
console.log(s);// 24

总结：

上述文章如果有问题或者想问问题或者想交流技术或者想和作者闲聊可以+QQ：2029788643