美文网首页
array操作

array操作

作者: 回忆不死我们不散 | 来源:发表于2020-05-13 19:08 被阅读0次

首先可以给js的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为:

Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};

然后使用通过得到这个元素的索引,使用js数组自己固有的函数去删除这个元素

Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};

var emp = ['abs','dsf','sdf','fd']
假如我们要删除其中的 'fd' ,就可以使用:
emp.remove('fd');

删除的数组的某一项

splice(index,len,[item]) 注释:该方法会改变原始数组。

splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值

index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空

如:arr = ['a','b','c','d']

//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr);  
//['a','c','d']; 

//删除起始下标为1,长度为2的一个值(len设置2)
var arr2 = ['a','b','c','d']
arr2.splice(1,2);
console.log(arr2); 
//['a','d']

//替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);        
//['a','ttt','c','d'] 

var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2);       
//['a','ttt','d'] 替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1


添加 ----  len设置为0,item为添加的值
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);        
//['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'

delete删除掉数组中的元素后,会把该下标出的值置为undefined,数组的长度不会变
var arr = ['a','b','c','d'];
delete arr[1];
arr;  
//["a", undefined × 1, "c", "d"] 中间出现两个逗号,数组长度不变,有一项为undefined
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

// 移除数组中的第二项
array.remove(1);
// 移除数组中的倒数第二项
array.remove(-2);
// 移除数组中的第二项和第三项(从第二项开始,删除2个元素)
array.remove(1,2);
// 移除数组中的最后一项和倒数第二项(数组中的最后两项)
array.remove(-2,-1);


pop() 删除掉数组的最后一个元素

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish);
// ["angel", "clown", "mandarin"]

console.log(popped);
// surgeon

JavaScript删除数组第一个元素的几种方法(不改变原数组,返回新数组)

1、slice() 浅克隆去复制 arr 元素从第二个开始到最后一个
var arr = [1, 2, 3, 4, 5];
var newArr = arr.slice(1);
console.log(newArr);
2、splice()的删除功能

var arr = [1, 2, 3, 4, 5];
var newArr = arr.slice(0);
newArr.splice(0, 1);
console.log(newArr);

3、filter() 过滤下标,返回满足不等0的下标的元素

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter((val, index, arr) => {
    return index !== 0;
})
console.log(newArr);

4、shift() 删除数组的首个元素

var arr = [1, 2, 3, 4, 5];
var newArr = arr.slice(0);
newArr.shift();
console.log(newArr);

5、join() 字符串连接后,用split()进行分离为新数组

var arr = [1, 2, 3, 4, 5];
var newArr = arr.join().split(',').map(Number); // arr.map(Number):字符串元素转为数字元素
newArr.shift();
console.log(newArr);

6、apply() 数组参数化后放入[]数组

var arr = [1, 2, 3, 4, 5];
var newArr = [];
[].push.apply(newArr, arr);
newArr.shift();
console.log(newArr);

7、concat() 数组链接出新数组

var arr = [1, 2, 3, 4, 5];
var newArr = arr.concat();
newArr.shift();
console.log(newArr);

[JS数组添加元素的三种方式]

1、push() 结尾添加
2、unshift() 头部添加
3、splice() 方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。

js 数组过滤空值(undefined、null、""、0、false、NaN)

const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean);
// arr => [1, 2]
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s&& s.trim(); 
});
console.log(r)  // ["A", "B", "C"]

1.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

2 .js的判断条件中,0,‘’,undefined , null,NaN都视为false
所以,当 s&& s.trim() 为false时,当前数组的元素会被过滤掉。

3.trim() 方法用于删除字符串的头尾空格。
trim() 方法不会改变原始字符串。

IE9以下不支持trim()方法,需要使用正则表达式来实现:

function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}
 
function myFunction() {
  var str = myTrim("        Hello       ");
  alert(str);  //Hello
}

array去重

引用:https://blog.csdn.net/weixin_42412046/article/details/81459294

Methods 1: 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。

function unique(arr) {
            let newArr = [arr[0]];
            for (let i = 1; i < arr.length; i++) {
                let repeat = false;
                for (let j = 0; j < newArr.length; j++) {
                    if (arr[i] === newArr[j]) {
                        repeat = true;
                        break;
                    }else{
                        
                    }
                }
                if (!repeat) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
 
        console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 2: 思路:先将原数组排序,在与相邻的进行比较,如果不同则存入新数组。

 function unique2(arr) {
            var formArr = arr.sort()
            var newArr=[formArr[0]]
            for (let i = 1; i < formArr.length; i++) {
                if (formArr[i]!==formArr[i-1]) {
                    newArr.push(formArr[i])
                }
            }
            return newArr
        }
        console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3,  4,5, 6, 7]

Methods 3: 利用对象属性存在的特性,如果没有该属性则存入新数组。

function unique3(arr) {
            var obj={}
            var newArr=[]
            for (let i = 0; i < arr.length; i++) {
                if (!obj[arr[i]]) {
                    obj[arr[i]] = 1
                    newArr.push(arr[i])
                }   
            }
            return newArr
        }
        console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 4: 利用数组的indexOf下标属性来查询。

function unique4(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i])===-1) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 5: 利用数组原型对象上的includes方法。

function unique5(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (!newArr.includes(arr[i])) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 6: 利用数组原型对象上的 filter 和 includes方法。

function unique6(arr) {
            var newArr = []
            newArr = arr.filter(function (item) {
                return newArr.includes(item) ? '' : newArr.push(item)
            })
            return newArr
        }
        console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 7: 利用数组原型对象上的 forEach 和 includes方法。

function unique7(arr) {
            var newArr = []
            array.forEach(item => {
                return newArr.includes(item) ? '' : newArr.push(item)
            });
            return newArr
        }
        console.log(unique7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 8: 利用数组原型对象上的 splice 方法。

function unique8(arr) {
            var i,j,len = arr.length;
            for (i = 0; i < len; i++) {
                for (j = i + 1; j < len; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j--;
                    }
                }
            }
            return arr;
        }
        console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

Methods 9: 利用数组原型对象上的 lastIndexOf 方法。

function unique9(arr) {
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
            }
            return res;
        }
        console.log(unique9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

Methods 10: 利用 ES6的set 方法。

function unique10(arr) {
            //Set数据结构,它类似于数组,其成员的值都是唯一的
            return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
        }
        console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

JS中的深拷贝和浅拷贝

相关知识点
1.javascript变量包含两种不同数据类型的值:基本类型和引用类型。

基本类型值指的是简单的数据段,包括es6里面新增的一共是有6种,具体如下:number、string、boolean、null、undefined、symbol。

引用类型值指那些可能由多个值构成的对象,只有一种如下:object。
在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。

2.javascript的变量的存储方式:栈(stack)和堆(heap)。

栈:自动分配内存空间,系统自动释放,里面存放的是基本类型的值和引用类型的地址

堆:动态分配的内存,大小不定,也不会自动释放。里面存放引用类型的值。


image.png

基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。
引用类型的值是保存在内存中的对象。JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。 在操作对象时, 实际上是在操作对象的引用而不是实际的对象。

基本类型与引用类型最大的区别实际就是 传值与传址 的区别

值传递:基本类型采用的是值传递。
地址传递:引用类型则是地址传递,将存放在栈内存中的地址赋值给接收的变量。

浅拷贝

浅拷贝
被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。即对象的浅拷贝会对“主”对象进行拷贝,但不会复制主对象里面的对象。”里面的对象“会在原来的对象和它的副本之间共享。

基本数据类型Number(赋值操作)

let a=1;
let b=a;
b           //1
b=2;
b          //2
a          //1

数组

let arr1 = [1,2,3];
let arr2 = arr1;
arr2         //[1,2,3]
arr2.push(4);
arr2         //[1,2,3,4]
arr1         //[1,2,3,4]
image.png

首先栈内存arr1会指向堆内存里的数组,栈内存的arr1保存的是数组的引用,也就相当于内存地址,arr2=arr1,会把arr1的引用赋给arr2,所以arr2也有了数组的引用,此时arr1和arr2指向的是同一个数组,因此一个数组的改变会影响另一个数组的值。

对象

let obj1={count:1,name:'grace',age:1};
let obj2 = obj1;
obj2        //{count:1,name:'grace',age:1}
obj2.count=2;
obj1        //{count:2,name:'grace',age:1}
obj2        //{count:2,name:'grace',age:1}

综上所述,如果是基本数据类型,直接进行赋值操作,这样就相当于在栈内存中重新开辟了一个新的空间把值传递过去;如果是引用类型的值传递,进行的就是浅拷贝,浅拷贝赋值的只是对象的引用,如上述obj2=obj1,实际上传递的只是obj1的内存地址,所以obj2和obj1指向的是同一个内存地址,所以这个内存地址中值的改变对obj1和obj2都有影响。

深拷贝

深拷贝不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上,所以对一个对象的修改并不会影响另一个对象。

数组(注意:该数组只是单纯的数组,如果数组里面嵌套对象,则下面的几种方法都不是深拷贝。) --更新于 2020.02.26
法一:for循环

 let arr1 = [1,2,3];
  let arr2 = copyArr(arr1);
  function copyArr(arr){
    let res=[];
    for(let i=0,length=arr.length;i<length;i++){
        res.push(arr[i]);
    }
    return res;
  }

法二: slice
利用数组自身的方法,slice、concat方法在运行后会返回新的数组
let arr1 = [1,2,3];
 let arr2 = arr1.slice(0);

法三: concat
let arr1 = [1,2,3];
 let arr2 = arr1.concat();

法四:扩展运算符
let arr1 = [1,2,3];
 let [...arr2] = arr1;

法五:Array.from
如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组
 let arr1 = [1,2,3];
 let arr2 = Array.from(arr1);

对象

法一:for循环
let obj1={count:1,name:'grace',age:1};
    let obj2 = copyObj(obj){
        let res = {};
        for(let key in obj){
            res[key]=obj[key];
        }
        return res;
    }
法二:利用JSON
let obj1={count:1,name:'grace',age:1};
let obj2 = JSON.parse(JSON.stringify(obj1));
//使用JSON比较简单,但是JSON的深拷贝方式会忽略函数对象和原型对象(有待考证)

法三:扩展运算符
let obj1={count:1,name:'grace',age:1};
let {...obj2} = obj1;

合成版,可以实现数组和对象的深拷贝
function deepCopy(obj){
        let result = Array.isArray(obj)?[]:{};  
        if(obj && typeof obj === 'object'){ 
            for(let key in obj){
                if(obj.hasOwnProperty(key)){
                    if(obj[key]&&typeof obj[key]==='object'){
                        result[key]=deepCopy(obj[key]);
                    }else{
                        result[key]=obj[key];
                    }
                }
            }
        }
        return result;
    }


注意:ES6新增了Object.assign() 方法
第一个参数是目标对象,之后还可以跟一个或多个源对象。它会遍历一个或多个源对象可枚举的自有键并把它们复制到目标对象,最后返回目标对象
assign是使用=操作符来赋值,

Object.assign() 只是一级属性复制,比浅拷贝多深拷贝了一层而已。用的时候,还是要注意这个问题的
引用:https://blog.csdn.net/baidu_36065997/article/details/80309991
参考:https://www.jianshu.com/p/2aa380414a0e

数组合并

var arr1 = [1, 2, 3];var arr2 = ["a","b","c","d","e","f"];
1、concat
var arr = arr1.concat(arr2);  // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

//函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我
//们可以利用这点,直接上代码:

1.
arr1.push.apply(arr1,arr2);   
console.log(arr1)  // [1, 2, 3, "a", "b", "c", "d", "e", "f"] 
2.
Array.prototype.push.apply(arr1,arr2);
console.log(arr1)  // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

es6拓展运算
arr = [...arr1,...arr2]
console.log(arr)   // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

相关文章

  • Array操作

    1.创建数组 2.forEach遍历 3.for循环 4.for of 循环,会把数组中值的类型直接输出 5.f...

  • Array操作

    Array.from Array.from从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例 从string...

  • array操作

    首先可以给js的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: 然后使用通过得到这个元素...

  • array操作

    将数组中的nan值赋值

  • 009_scala编程详解数组操作之Array,ArrayBuf

    Array ArrayBuffer 遍历Array和ArrayBuffer 数组常见操作

  • javascript的数组Array

    创建数组及修改 类型检测 转换方法 Array栈操作 Array队列操作 Array的反转和排序 数组的连接与截取...

  • 第十天_java数组(2018-08-07)

    1、数组Array操作类的方法: 1、Array.toString(); 输出数组 2、Array.bina...

  • JavaScript数组的映射

    JavaScript中数组的常用操作之数组的映射 Array.map()方法 Array.from(array[,...

  • PHP数组的进阶用法

    对于数组的基本操作,可参考PHP数组的相关操作 array_filter()过滤数组元素array_filter(...

  • php数组合并,拆分,替换,组合

    php数组的操作(合并,拆分,删除,排序) 1. 合并数组 array_merge ( array $array1...

网友评论

      本文标题:array操作

      本文链接:https://www.haomeiwen.com/subject/jreonhtx.html