使用 tsp 工具，基于 TypeScript 的代码，记录 ECMAScript 不同版本中的 Array 属性和方法，以及其使用。

使用 tsp 生成项目：

tsp g arrayMs arrayMsClass ES中的数组测试

项目生成后，使用 Gulp 打包并 watch 这个项目：

tsp w arrayMs

另开一个 CLI，执行：

tsp s arrayMs 6666

让这个 tsp 项目运行在 6666 端口。

文件 /src/main.ts :

let arr1 = [3,2,6,4,1,5];
let arr2 = [3,4,5,6,7,8];
let str1:string = 'abcde';

console.log('arr1\n',arr1);

console.log('arr2\n',arr2);

/*=============ES3以及更早版本 ================*/

/*

Array.length
Array.prototype


 */

console.log('字符串 str1:\n', str1);

let arr3 = str1.split('');
/*
 ["a", "b", "c", "d", "e"]
 */
console.log('字符串 str1 转换为数组 arr3:\n', arr3);

let arr4 = arr1.reverse();
/*
 [5, 1, 4, 6, 2, 3]
 */
console.log('arr1 颠倒后的 arr4:\n', arr4);

/*
arr5 等于排序后的 arr1;
 */
let arr5 = arr1.sort((x,y)=>{

 return y-x;

});


console.log('arr1 排序后:\n', arr1);

let arr6: Array<any> = [[11,22],[33,44]];
let arr7: Array<any> = arr1.concat(arr2, arr6 );
/*
[6, 5, 4, 3, 2, 1, 3, 4, 5, 6, 7, 8, [11,22],[33,44]]
 */
console.log('arr1,arr2,arr6合并后:\n', arr7);
/*
不带参数，就发复制了 arr7 的值;
带一个参数,
 */
let arr8 = arr7.slice(2);
/*
[4, 3, 2, 1, 3, 4, 5, 6, 7, 8, Array[2], Array[2]]
 */
console.log(arr8);

let arr9 = arr7.slice(3,-2);
/*
[3, 2, 1, 3, 4, 5, 6, 7, 8]
 */
console.log('arr9 \n',arr9);


let arr10 = arr9.splice(4,1);

/*
[3, 2, 1, 3, 5, 6, 7, 8]
 */
console.log('arr9 splice(4，1)之后\n', arr9);
/*
[4]
 */
console.log('arr10');
console.log(arr10);

let arr11 = arr9.splice(2,0,333,444);
/*

[3, 2, 333, 444, 1, 3, 5, 6, 7, 8]
 */
console.log('在数组 arr9 的索引以及后面的位置上插入333,444后')
console.log(arr9);


/*
pop()
push()
shift()
unshift()

toString()
toLocaleString()
不做演示
 */


/*============= ES5 ================*/

/*
map()
filter()
every()
some()
reduce()
reduceRight()

lastIndexOf()

 */


let arr12 = arr9.map(x=>{ return x*x});


console.log('arr9 每个元素的平方 arr12\n',arr12);

let arr13 = arr12.filter(x=>{return x%2==0});


console.log('arr12 中的偶数 arr13\n',arr13);

console.log('arr13 中是否有3的倍数\n',arr13.some(x=>{ return x%3===0;}));



console.log('arr12 中是否每个数都是偶数\n',arr12.every(x=>{ return x%2===0;}));


console.log('arr13 中是否每个数都是偶数\n',arr13.every(x=>{ return x%2===0;}));


console.log('arr13 各个元素的和\n',arr13.reduce((x,y)=>{ return x+y;}));






/*============= ES5.1 ================*/

/*
indexOf()
Array.isArray(maybeArr)
forEach(func(currentValue, index, array){})

Array[Symbol.species]

 */

/*
[1, 2, 3, [11,22]]
 */




/*============= ES6 ================*/

/*
Array.from()
Array.of()
copyWithin()
find()
findIndex()
fill()

entries()
keys()
values()

for…of 

 */


/*
[1, 2, 3, Array[3]]
 */
let arr14:any[] = Array.of(1,2,3,[11,22,33]);


console.log('arr14\n', arr14 );

arr14 = Array.from('1234567'); 

/*
 ["1", "2", "3", "4", "5", "6", "7"]
 */
console.log('arr14\n', arr14 );
let arr15 = arr14.map(x=>{ return parseInt(x,10) });
/*
 [1, 2, 3, 4, 5, 6, 7]
 */
console.log('arr14 各个元素转换为数值得到 arr15\n', arr15 );
/*
6
 */
console.log('arr15 中第一个大于5的元素\n', arr15.find(x=>{ return x>5} ) );
console.log('arr15 中第一个大于5的元素的索引\n', arr15.findIndex(x=>{ return x>5} ) );


let ptr1 = arr15.entries()
console.log('arr15 的entries的一个元素\n', ptr1.next() );
console.log('arr15 的entries的一个元素\n', ptr1.next() );
console.log('arr15 的entries的一个元素\n', ptr1.next() );

let ptr2 = arr15.keys();

console.log('arr15 的keys的一个元素\n', ptr2.next() );
console.log('arr15 的keys的一个元素\n', ptr2.next() );
console.log('arr15 的keys的一个元素\n', ptr2.next() );
console.log('arr15 的keys的一个元素\n', ptr2.next() );

for(let k of ptr2){

 console.log('ptr2 的剩余元素值之一:',k);
}


arr15.fill(0,1,3);

console.log('使用 0 填充 arr5 的 [1,3) 个元素',arr15);

arr15.fill(2,3);

console.log('使用 2 填充 arr5 的 [3,-1] 个元素',arr15);

arr15.fill(0);

console.log('使用 0 填充 arr5 的各个元素',arr15);


/*============= ES2016 ================*/
/*
includes()

 */
let arr16 = [11,22,33,44,55,66];

console.log('arr16\n', arr16);

console.log('arr16 是否包含 22 \n', arr16.includes(22));
console.log('arr16 是否包含 99 \n', arr16.includes(99));





/*============= 数组去重 ================*/
/*============= TypeScript 不识别原型链 ================*/
/*
Array.prototype.removeDulEls_v1 = function(): any[] {

 let temp:any[] = [];

 for (let i = 0; i < this.length; i++) {
 if(this[i] !in temp){
 temp.push(this[i]);
 }
 }

 return temp;

};

Array.prototype.removeDulEls_v2 = function (): any[] {
 let temp:any[] = [];
 label:for(let i=0;i<this.length;i++){
 for(let j=0; j<temp.length;j++ ){
 if(temp[j]==this[i])
 continue label; 
 }
 temp[temp.length] = this[i];
 }
 return temp;
}

Array.prototype.removeDuplicates_v1 = function (): any[]{
 let temp:any[] = [];
 this.sort();
 for(let i=0;i<this.length;i++){
 if(this[i]==this[i+1]) {continue}
 temp[temp.length]=this[i];
 }
 return temp;
} */

function removeDulElForArr_V0(a:any[]): any[] {

 return a.filter((it, i, ar) => ar.indexOf(it) === i);
}
function removeDulElForArr_V1(a:any[]):any[] {
 let seen:any = {};
 return a.filter(function(item) {
 return seen.hasOwnProperty(item) ? false : (seen[item] = true);
 });
}

function removeDulElForArr_V2(a:any[]):any[] {

 let prims:any = {"boolean":{}, "number":{}, "string":{}}; 
 let objs:any[] = [];

 return a.filter(function(item) {
 let type = typeof item;
 if(type in prims){
 return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
 }else{
 return objs.indexOf(item) >= 0 ? false : objs.push(item);
 }
 });
}

function removeDulElForArr_V3(a:Array<any>):Array<any> {
 let seen:any = {};
 let out = [];
 let len = a.length;
 let j = 0;
 let item:any;
 for(let i = 0; i < len; i++) {
 item = a[i];
 if(seen[item] !== 1) {
 seen[item] = 1;
 out[j++] = item;
 }
 }
 return out;
}

/*
受 
http://locutus.io/php/array/array_unique/
的启发。
 */
function array_unique (inputArr:Array<any>):Array<any> {

 let tmpArr:any = []
 tmpArr = inputArr.filter((x)=>{return tmpArr.indexOf(x) === -1;})
 return tmpArr;

}

/*
TypeScript 不识别原型链
 */

/*arr101 = arr9.removeDulEls_v1();
console.log(arr101);*/


let arr101 = removeDulElForArr_V1(arr9);

console.log('arr9 去重后的 arr11');
console.log(arr101);


arr101 = removeDulElForArr_V2(arr9);
console.log(arr101);

arr101 = removeDulElForArr_V3(arr9);
console.log(arr101);




arr101 = array_unique(arr9);

console.log('受PHP\'s array_unique in JavaScript 启发的实现\n',arr101);


arr101 = [...new Set(arr9)];
console.log(arr101);

arr101 = Array.from(new Set(arr9));
console.log(arr101);

结论是： tsp 工具需要增加 watch 到 文件更改后自动刷新浏览器，有时间了再改进吧。


本文首发酷威普和51CTO，转载请注明。