0、数组的方法大合集
含义 | 方法 | 返回值 | 改变原数组 |
---|---|---|---|
删除 | pop() | 删除项 | yes |
删除 | shift() | 删除项 | yes |
截取 | slice() | 删除项 | no |
删除 | splice() | 新数组 | yes |
删除 | length | / | yes |
添加 | push() | length | yes |
添加 | unshift() | length | yes |
添加 | concat() | 新数组 | no |
添加 | splice() | 删除项 | yes |
添加 | [...array,...array1] | 新数组 | no |
添加 | Array.prototype.push.apply(arr1,arr2) | length | yes |
改 | splice() | 新数组 | yes |
排序 | sort() | 新数组 | yes |
反向 | reverse() | 新数组 | yes |
递归 | reduce() | 计算的值 | no |
递归 | reduceRight() | 计算的值 | no |
查位置 | indexof() | 位置 | no |
反向查位置 | lastIndexOf() | 位置 | no |
找到第一个符合的成员 | find() | 成员 | no |
找到第一个符合的位置 | findIndex() | 位置 | no |
包含值否 | includes() | boolean | no |
计算 | map() | 计算后 | no |
过滤 | filter() | 满足条件的 | no |
判断都 | every() | boolean | no |
判断有 | some() | boolean | no |
遍历 | forEach() | return的值 | no |
string->arry | split() | array | no |
arry->string | join() | string | no |
arry->string | toString() | string | no |
arry->string | toLocalString() | string | no |
obj-->arry | for ..in 循环赋值法 | / | / |
obj-->arry | Array.from() | 新数组 | / |
number-->arry | Array.of() | 新数组 | / |
填充/替换 | fill(值,start,end) | 新数组 | yes |
键值对 | entries() | 键值对 | no |
建值 | keys() | 建值 | no |
建名 | values() | 建名 | no |
指定位置的成员复制到其他位置 | copyWithin(target,start,end) | 新数组 | yes |
一、对数组的增 删 改 查:
数组的增加
array.push() 向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变
array.unshift() 向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变
array.splice(n,m,x) 从索引n开始删除m个元素,然后插入元素x,把删除的内容当做新数组返回,原有数组改变。作添加使用,将m设置为0 即可。
array.concat(),拼接数组。返回拼接之后的数组,原数组不改变。
[...arr1, ...arr2, ...arr3] 解构数组,数组与数组的合并,返回合并的数组,原数组不改变。
Array.prototype.push.apply(arr1,arr2);----将arr2追加到arr1中,返回数组的长度,改变原数组。
数组的删除
array.pop() 删除数组的最后一项,返回的是删除的那一项,原有数组改变
array.shift() 删除数组的的第一项,返回的是删除的那一项,原有数组改变
splice(n,m,x) 从索引n开始删除m个元素,然后插入元素x,把删除的内容当做新数组返回,原有数组改变。作删除使用,x不传入数据既可。
slice(n,m) 从索引n开始删除m个元素,返回删除项,原数组不变
length 减小数组的长度,实际是从数组尾部删除元素,改变原数组。
改
其实只有一种 splice(),但delete方法,我个人感觉算修改不属于删除,详情请见实例
查
indeOf()
lastIndexOf()
find()
findIndex()
includes()
[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 4, -5, 10].findIndex((n) => n < 0) // 2
[1, 2, 3].includes(2) // true
二、数组深浅拷贝
对象和数组的拷贝有两种
浅拷贝即 拷贝了指针指向,当一个对象的值改变会影响另一个对象的值。
深拷贝, 拷贝的是真正的值。2者相互独立,互不干扰。
浅拷贝的方法4种方法
slice() concat() 赋值法 遍历
注:concat 和 slice 对一维数组 能算是深拷贝;2维的 是浅拷贝
var a= [1,2,3,4]
b= a.concat();
c=a.concat();
b[0] = 5;
c[0] = 6;
a // [1,2,3,4]
b // [5,2,3,4]
c // [6,2,3,4]
var aa= [[1,1],[2,2],3,4]
bb= aa.concat();
cc=aa.concat();
bb[1][0] = 5;
cc[0] = 6;
aa // [[1,1],[5,2],3,4]
b // [[1,1],[5,2],3,4]
c // [6,[5,2],3,4]
var shallowCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
深拷贝的方法5种方法:
一维数组和对象的concat slice法 JSON.parse(JSON.stringify(arr)) 和遍历法 解构赋值法
示例:(前3种毕竟简单,这里也不表述)
解构赋值法:const a1 = [1, 2]; const a2 = [...a1];或者const [...a2] = a1;
var deepCopy = function(obj) {
if (typeof obj !== 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}
三、数组与字符串 对象的转换
3.1字符串转数组
**es5 split(',');
es6 扩展运算符**
let hh = 'fh,fed,fd';
hh.split(','); // [fh,fed,fd]
[...'hello']
// [ "h", "e", "l", "l", "o" ]
3.2数组转字符串
2.1 toString();
2.2 toLocaleString();
2.3 join(',')
2.4 遍历,然后拼接法
![这里写图片描述](http://img.blog.csdn.net/20180201154816999?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2F0YXJhMTEwOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3.3 类似数组对象转数组
- es5 Array.prototype.slice.call(obj) / [].slice.call(obj)
- es6 Array.from(obj)
一组值转为数组
es6 Array.of(2,3,4); // [2,3,4]
四、数组去重
五、 数组的5个迭代方法----在数组的每一项上运行函数
filter();---返回true项的数组
map();-----返回运算后的组成的新数组
every();--每一项都是true,则返回true
forEach();-----无返回值
some();----有一项返回true,则返回true
六、并归方法
reduce();
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
reduceRight();反向并归
七 判断数组
2-3种方法
`
var ss=[];
typeof ss; // object
ss instanceof Array; // true
Array.isArray(ss); // true;
`
八 将nodeList转换成数组
(2方法)
var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // Now the NodeList is an array var arrayElements = Array.from(elements); // This is another way of converting
九 数组元素的洗牌
var list = [1,2,3];
list.sort(function() { return Math.random() - 0.5 })); // [2,1,3]
上述的是 投机取巧的方式
真正的数组乱序,请见
function shuffle(a) {
var length = a.length;
var shuffled = Array(length);
for (var index = 0, rand; index < length; index++) {
rand = ~~(Math.random() * (index + 1));
if (rand !== index)
shuffled[index] = shuffled[rand];
shuffled[rand] = a[index];
}
return shuffled;
}
function shuffle(a) {
var b = [];
while (a.length) {
var index = ~~(Math.random() * a.length);
b.push(a[index]);
a.splice(index, 1);
}
return b;
}
10.考题
1.
Array.isArray( Array.prototype )
// true ;because:Array.prototype is an Array
2.
var a = [0];
if ([0]) {
console.log(a == true);
} else {
console.log("wut");
}
// false ;
// because:[0] as a boolean is considered true. Alas, when using it in the comparisons it gets converted in a different way and all goes to hell.
3.
[]==[]
// false;because: == is the spawn of satan.
4.
var ary = Array(3);
ary[0]=2
ary.map(function(elem) { return '1'; });
// [1,empty*2]
5.
[1 < 2 < 3, 3 < 2 < 1]
// [true] // true <3 => 1<3 false < 1 => 0<1
6.
var a = [1, 2, 3],
b = [1, 2, 3],
c = [1, 2, 4]
a == b
a === b
a > c
a < c
// false false false true ;
// because:字面量相等的数组也不相等. 数组在比较大小的时候按照字典序比较