前言
写这篇的目的是为什么，因为发现自己有时候会忘记某个JS数组的操作方法，因此对其进行总结，也方便自己时常回顾。
ES5: JS数组
join & split
// example：
var colors = 'green, red, black';
var colorsArr = colors.split(',');
console.log(colorsArr,'colorsArr'); // [ 'green', ' red', ' black' ]
var colorsStr = colorsArr.join(',');
console.log(colorsStr,'colorsStr'); // green, red, black
push & pop
-
push() 向数组末尾添加一个或者多个元素，并返回新的长度。
-
pop() 删除数组的最后一个元素，把数组的长度减 1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回 undefine 值
var colors = [];
colors.push('green', 'red');
console.log(colors,'colors'); // ['green', 'red']
var item = colors.pop();
console.log(item, 'item'); // red
console.log(colors,'colors11'); // ['green']
shift & unshift
var colors = ['green', 'red'];
var item = colors.shift();
console.log(item, 'item'); // 'green'
console.log(colors, 'shift'); // ['red']
colors.unshift('blue', 'grey');
console.log(colors, 'unshift'); // ['blue', 'grey', 'red']
reverse & sort
const values = [1, 3, 44, 43, 654, 0];
values.reverse();
console.log(values, 'reverse'); // [0, 654, 43, 44, 3, 1]
values.sort();
console.log(values, 'sort'); // [0, 1, 3, 43, 44, 654] 首字母开始比较
values.sort((val1, val2) => val2 - val1);
console.log(values); // [ 654, 44, 43, 3, 1, 0 ]
concat & slice
// concat()
var arr = [];
var arr2 = ['aaa', 'bbb', 'ccc']
arr = arr.concat(arr2);
console.log(arr); // ["aaa", "bbb", "ccc"]
// slice()
var arr = ['aaa', 'bbb', 'ccc', 'ddd']
var arr2=arr.slice(0,3); // 取arr数组下标 0~3 的数据赋值给arr2
console.log(arr) // ["aaa", "bbb", "ccc", "ddd"] 原数组未被改变
console.log(arr2) // ["aaa", "bbb", "ccc"]
splice
- splice()
- 参数说明：
index必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。howmany可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。item1, ..., itemX可选。要添加到数组的新元素
/**
* 1. 删除:
* 可以删除任意数量的项，只要指定两个参数：要删除的第一项的位置和删除的项数。
* 例如：splice(0,2)会删除数组中的前两项。
*/
var colors=["red","green","blue","black","white"];
colors.splice(0,2);
console.log(colors); // ["blue", "black", "white"]
/**
* 2. 插入：
* 可以向指定的位置插入任意数量的项，需要3哥参数：起始位置、0（要删除的项数）和要插入的项。；
* 例如：splice(2,0,"red","green")
*/
var colors=["red","green","blue","black","white"];
colors.splice(1,0,"orange");
console.log(colors); // ["red", "orange", "green", "blue", "black", "white"]
/**
* 3.替换：
* 可以向指定位置插入任意数量的项，且同时删除任意数量的项。需要3哥参数：起始位置、要删除的项数和要插入的项。；
* 例如：splice(2,1,"red","green")
*/
var colors=["red","green","blue","black","white"];
colors.splice(1,1,"orange");
console.log(colors); // ["red", "orange", "blue", "black", "white"]
indexOf & lastIndexOf
- 数组类型有两个位置方法:
- indexOf() 从数组开头（位置0）开始向后查找,不存在返回 -1
- lastIndexOf() 从最后面的key值判断是否存在元素，不存在返回 -1
var colors = new Array("red", "blue", "green", "black", "blue","purple");
console.log(colors.indexOf("blue")) // 1
console.log(colors.indexOf("blue", 2)) // 4
console.log(colors.lastIndexOf("blue")) // 4
console.log(colors.indexOf("yellow")) // -1
// 比较时全等
var str1 = new String("blue");
var str2 = "blue";
console.log(typeof(str1)) // object
console.log(typeof(str2)) // string
console.log(colors.indexOf(str1)) // -1
console.log(colors.indexOf(str2)) // 1
every & some
every()与some()方法都是JS中数组的迭代方法。
var values = [1, 3, 4, 6, 7, 4, 3, 1];
var everyResult = values.every((item, index, array) => {
return item > 2;
});
console.log(everyResult); // false
var someResult = values.some((item, index, array) => {
return item > 2;
});
console.log(someResult); // true
filter
- filter() 用于把数组的某些元素过滤掉，然后返回剩下的元素。
- 参数说明：
currentValue必须。当前元素的值index可选。当前元素的索引值array可选。当前元素属于的数组对象
在一个Array中，删掉偶数，只保留奇数，可以这么写
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
console.log(r); // [1, 5, 9, 15]
> 把一个Array中的空字符串删掉，可以这么写：
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
// trim()函数去掉字符串首尾空白字符
});
console.llg(arr); // ['A', 'B', 'C']
-
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map()按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
var values = [1, 3, 4, 6, 7, 4, 3, 1];
var mapResult = values.map((item, index, array) => {
return item * 2;
});
console.log(mapResult); // [ 2, 6, 8, 12, 14, 8, 6, 2 ]
var obj = [ { num: 3 }, { num: 4 }, { num: 1 },{ num: 5 },{ num: 0 }, { num: 4 }];
var mapObjResult = obj.map((item, index, array) => {
return item.num;
});
console.log(mapObjResult); // [ 3, 4, 1, 5, 0, 4 ]
ES5: JS字符串
ES6:
拓展运算符 ...
扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
const colors = ['green', 'red', 'pink'];
const colors1 = ['white', 'grey'];
const colors2 = [...colors, ...colors1];
console.log(colors2); // [ 'green', 'red', 'pink', 'white', 'grey' ]
用于替换es5中的
Array.prototype.slice.call(arguments)写法。
filter
创建一个数组，判断数组中是否存在某个值
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num===2 ))
// [{num: 2m val: "ceshi2", flag: "aa2"}]
去掉空数组空字符串、undefined、null
// 去掉undefined
var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr) // ["1", "2", "3.jpg"]
// 去掉null
var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr) // ["1", "2", "3.jpg"]
// 空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr) // ["1", "2", "3.jpg"]
去掉数组中不符合项
var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40)
console.log(newArr) // [50, 96, 50]
过滤不符合项
var arr = ['10','12','23','44','42']
var newArr = arr.filter(item => item.indexOf('2')<0)
console.log(newArr) // ["10", "44"]
数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
未完...
参考资料
- JavaScript | MDN
- 阮一峰 ECMAScript 6 入门
- 《JavaScript高级程序设计（第三版》
