[js专题2]-----数组array

本文全面介绍了JavaScript中数组的各种操作方法,包括增删改查、深浅拷贝、数组与字符串的转换、去重技巧及常见面试题解析。通过具体实例帮助读者深入理解数组的运用。

0、数组的方法大合集

含义方法返回值改变原数组
删除pop()删除项yes
删除shift()删除项yes
截取slice()删除项no
删除splice()新数组yes
删除length/yes
添加push()lengthyes
添加unshift()lengthyes
添加concat()新数组no
添加splice()删除项yes
添加[...array,...array1]新数组no
添加Array.prototype.push.apply(arr1,arr2)lengthyes
splice()新数组yes
排序sort()新数组yes
反向reverse()新数组yes
递归reduce()计算的值no
递归reduceRight()计算的值no
查位置indexof()位置no
反向查位置lastIndexOf()位置no
找到第一个符合的成员find()成员no
找到第一个符合的位置findIndex()位置no
包含值否includes()booleanno
计算map()计算后no
过滤filter()满足条件的no
判断都every()booleanno
判断有some()booleanno
遍历forEach()return的值no
string->arrysplit()arrayno
arry->stringjoin()stringno
arry->stringtoString()stringno
arry->stringtoLocalString()stringno
obj-->arryfor ..in 循环赋值法//
obj-->arryArray.from()新数组/
number-->arryArray.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中,返回数组的长度,改变原数组。

clipboard.png

数组的删除

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 遍历,然后拼接法
![这里写图片描述](https://img-blog.youkuaiyun.com/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]

四、数组去重

[...new Set(arr1)]
这里写图片描述

五、 数组的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:字面量相等的数组也不相等.  数组在比较大小的时候按照字典序比较



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值