如何操作数组在编程语言和脚本语言中是最基础的技能,Javascript也提供了内置的的数组操作函数和方法,今天我们主要介绍前端开发中经常遇到的操作数组的常规方法以及ES6操作数组的神奇方法。
数组去重就是去掉数组中重复的项,我们使用常规的方法是定义一个新数组,遍历要去重的数组,然后一个个比对,如果数组中的值没有在新数组中出现,就将该值追加到新数组中,反之就不操作,最终得到一个去重后的新数组。
var a = [1,1,2,3,'abc',2,'ab','abc'];
function unique(x) {//去重
let res = [];
for (let i = 0; i < x.length; i++) {
if (res.indexOf(x[i]) == -1) {
res.push(x[i]);
}
}
return res;
}
console.log(unique(a)); // [1, 2, 3, "abc", "ab"]
常规数组去重方法还有很多,可以用到 indexOf , sort() , includes ,还有递归等等方法去重。
利用es6特性去重方法:
let a = [1,1,2,3,'abc',2,'ab','abc'];
let arr = Array.from(new Set(a)); // 利用es6特性去重方法
console.log(arr); // [1, 2, 3, "abc", "ab"]
当然,我们还可以利用js扩展运算符的骚操作,代码就是这么少:
let a = [1,1,2,3,'abc',2,'ab','abc'];
let arr = [...new Set(a)];
console.log(arr); // [1, 2, 3, "abc", "ab"]
我们要将两个数组合并成一个数组,也可以看作是拼接成一个数组,有很多种方法可以实现。
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); //[1,2,3,4,5,6]
console.log(arr1); //[1,2,3]
console.log(arr2); //[4,5,6]
concat方法连接arr1、arr2两个数组后,arr1、arr2两个数组的数据不变,同时会返回一个新的数组。这样当我们需要进行多次的数组合并时,会造成很大的内存浪费,所以这个方法肯定不是最好的。
for (var i in arr2) {
arr1.push(arr2[i]);
}
console.log(arr1);//[1,2,3,4,5,6]
很好理解,for循环遍历数组arr2,然后把arr2的值一个个追加到arr1中,最终完成数组合并。
apply方法有一个特性,那就是 func.apply(obj,argv) ,argv是一个数组。所以我们可以利用这一特性。
arr1.push.apply(arr1, arr2);
console.log(arr1);//[1,2,3,4,5,6]
ES6神奇的3个点点,完美替代 concat 。
let arr = [...arr1, ...arr2];
console.log(arr); //[1,2,3,4,5,6]
使用 split() 将字符串转换为数组。
var str = 'helloweba';
var res = str.split(''); //split()中的参数是分隔符,如,|,也可以是为空
console.log(res); //["h", "e", "l", "l", "o", "w", "e", "b", "a"]
使用 join() 将数组转换成字符串。
var arr = ['hello', 'web', 'a'];
var res = arr.join('');
console.log(res); //helloweba
ES6将字符串转换为数组:
let str = 'helloweba';
let arr = [...str]; //等同于Array.from(str)
console.log(arr); //["h", "e", "l", "l", "o", "w", "e", "b", "a"]
ES6将数组转换为字符串:
我们先定义一个字符串a,然后把它转化成数组b,这个时候得到的数组并不是我们想要的。
let a = "[1,3,2]"; //字符串
let b = [...a];
console.log(b); //["[", "1", ",", "3", ",", "2", "]"]
我们再对数组b进行过滤,最终得到数组c。
let c = b.reduce((arr, v)=>{
(typeof Number(v)) === 'number' && !isNaN(Number(v)) && arr.push(Number(v))
return arr
},[]);
console.log(c) // [1, 3, 2]
我们将数组排序,从小到大排序,排序后的数组中第一个和最后一个值就是我们要的最小值和最大值。
var arr = [1,2,36,42,15];
arr.sort(function (a, b) {
return a-b;
}); //[1, 2, 15, 36, 42]
var min = arr[0]; //1
var max = arr[arr.length - 1]; //42
使用 Math 对象方法。
let arr = [1,2,36,42,15];
let max = Math.max(...arr);
let min = Math.min(...arr);
console.log(max); //42
console.log(min); //1
有时我们需要将多维数组转换成一维数组,可以使用以下代码:
var b = [1, [2, 3], [4, 5, 6, [7, 8, 9]]];
function jiangwei(x) {//数组降维
let res = [];
for (let i = 0; i < x.length; i++) {
if (Array.isArray(x[i])) {
let _r = jiangwei(x[i]);
for (let j = 0; j < _r.length; j++) {
res.push(_r[j]);
}
} else {
res.push(x[i]);
}
}
return res;
}
console.log(jiangwei(b)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
使用ES6的 reduce() 高级技巧将数组降维。
let arr = [1, [2, 3], [4, 5, 6, [7, 8, 9]]];
const newArr = function(arr){
return arr.reduce((pre, cur)=>pre.concat(Array.isArray(cur) ? newArr(cur) : cur), []);
}
console.log(newArr(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
其他常用的数组操作方法:
sort() //升序
reverse() //倒序,反转
join() //将数组转为字符串
push() //添加到数组末尾
pop() //末尾移除最后一项
unshift() //添加到原数组开头
shift() //删除数组第一项
slice() //返回起始位置到结束位置之间的项[m,n) 不改变原数组
splice() //传两个参(m,n) 删除从m到n个之间的项 改变原数组; 传三个参(m,n,k)从当前m到n个前插入k
concat() //将参数添加到原数组中,不改变原数组
of() //将不是数组的转化为数组
fill() //用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作:html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
文本对齐方式(水平方向) text-align这个属性能控制标签内文本的对齐方式,还能控制子元素中行内元素和行内块级元素的对齐方式(水平方向)它有三个值:left:左对齐(默认)center:居中对齐right:右对齐
算术运算符:+ 、- 、 * 、 / 、 %、++、--赋值运算符:= 、+=、-=、 *=、/=、%=比较运算符:>、>=、<、<=、!=、==、===(全等,数据类型也会去比较)逻辑运算符:&&(与)、||(或)、! (非)
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!