js—数组那些事儿
数组维度升级
创建一维数组
//创建一维数组
var a=[];
var b=new Array();
var c=[1,2,'w'];
var d=[1,2,[1,2]];
创建二维数组
var c=[[1,2],[1,2]];
//创建二维7*7数组,且填充为‘[w]’
var a=new Array(7);
for(var i=0; i<7; i++){
a[i] = new Array(7).fill('[w]');
}
数组维度降级(n维变1维)
n维变1维
var a=[1,[2,3],[2,[3,4]],6];
- concat方法(普遍通用)
while(a.some(item=>Array.isArray(item))){
a=[].concat(...a);}
- 字符串方法(适应于纯数字的多维数组中)
var b=a.toString().split(',').map(i=>parseInt(i));
- es6的flat()方法chrome69才开始支持
a.flat(Infinity);
数组的浅拷贝与深拷贝
浅拷贝
- 直接赋值(浅拷贝),
- slice,concat,Array.from方法,扩展运算符(首层深拷贝),对象还有Object.assign()
var a=[1,2,[3,4]];
var b=a; // b=[1,2,[3,4]];
var c=[...a]; //c=[1,2,[3,4]];
b[0]=100; c[2][0]=101;
console.log("a",a,"\nb",b,"\nc",c); //a[100,2,[101,4]] b[100,2,[101,4]] c[1,2,[101,4]]
深拷贝
- JSON的parse和stringify方法,但是该方法又局限性,不能适用于对象中含有undefined、function、symbol,他们会在转换过程中被忽略。。。
var a=[1,2,[3,4]];
var b=JSON.parse(JSON.stringify(a));
b[2][0]=100;
console.log("a",a,"\nb",b); //a[1,2,[3,4]] b[1,2,[100,4]]
- 递归就是对每一层的数据都实现一次 创建对象->对象赋值 的操作
function deepClone(source){
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for(let keys in source){ // 遍历目标
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys]);
}else{ // 如果不是,就直接赋值
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
判断空数组arr=[]
- 法一
if(Array.isArray(arr) && arr.length===0){
console.log('是空数组');
}
数组去重(适用题型:返回不重复数组,返回不重复数组的长度,返回重复的数值组成的数组)
var a=[1,2,2,4,2,4];
- 法一 返回重复值组成的数组
function duplicates(arr) {
var a=[];
for(var i=0;i<arr.length;i++){
if(arr.indexOf(arr[i])!=arr.lastIndexOf(arr[i])&& a.indexOf(arr[i]) == -1){
a.push(arr[i]);
}
}
return a;
}
- 法二 返回重复值组成的数组
function duplicates(arr) {
return arr.filter((val,i,arr)=>arr.indexOf(val)!===i && arr.lastIndexOf(val)===i); //返回的是[2,4]
}
- 法三 返回重复值的个数
function duplicates(arr) {
return arr.sort().join('').match(/([^])\1+/g).length; //这里match匹配之后返回的是['222','44']
}
js—数组那些事儿的更多相关文章
- 小兔JS教程(四)-- 彻底攻略JS数组
在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性 在J ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- 转→js数组遍历 千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
- js数组操作大全
原文(http://www.cnblogs.com/webhotel/archive/2010/12/21/1912732.html) 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简 ...
- js数组去重的4种方法
js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.inde ...
- js 数组处理函数
本文转载自有有<js 数组处理函数> concat 将参数列表连接到原数组后面形成一个新的数组并返回,原有数组不受影响. var arr = ["a","b& ...
- js 数组赋值问题 :值传递还是引用?
转载于知乎var a = [1,2,3]; var b = a; a = [4,5,6]; alert(b); //[1,2,3] 面试时被问到这样一个问题,竟然从来没试过... 当时直接的理解,数组 ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- js数组操作
用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手,一下狠心,我学! ...
随机推荐
- flash-session
作用:更改session存储的位置 1.session默认存放在浏览器的cookie中 源码 wsgi->app.__call__->wsgi_app->push->self. ...
- 8.Java的特性和优势
简单性:可以说Java是C++语法的纯净版,没有头文件,没有指针运算,也不用分配内存. 面向对象:是一种程序设计技术,它将重点放在对象以及对象的接口上,模拟人的思维写程序,所以人去学习非常快.因此,J ...
- 分布式唯一ID自增(雪花算法)
public class IdWorker { // ==============================Fields===================================== ...
- 指定表单使用的路由 Specifying the Route Used by a Form
- SpringBoot简单实现登录功能
登陆 开发期间模板引擎页面修改以后,要实时生效 1).禁用模板引擎的缓存 # 禁用缓存 spring.thymeleaf.cache=false 2).页面修改完成以后ctrl+f9:重新编译: 登陆 ...
- JavaWeb高级编程(上)
好久没更新了,发一篇以前记录学习的笔记. 面向读者:已经具有丰富的Java语言和Java SE平台知识的软件开发者和软件工程师. 预掌握知识: Internet.TCP.HTTP协议 HTML(5) ...
- 工具之awk
转自:http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html awk是一个强大的文本分析工具,相对于grep的查找,sed的编 ...
- Linux 常用工具openssh之scp
前言 scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读read ...
- chrome浏览器无法开启同步功能 request cancel
解决办法 添加代理规则*.googleapis.com
- Vue中的计算属性
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函 ...