javascript数组篇

最新推荐文章于 2023-09-22 20:01:03 发布
翻译 最新推荐文章于 2023-09-22 20:01:03 发布 · 629 阅读 · 0
本文详细介绍JavaScript数组的基本操作方法，包括修改原数组的多种方法如push、unshift等，以及数组排序、去重、拼接等高级操作技巧。通过具体实例帮助读者深入理解每个方法的应用场景。

总结数组操作的方法

修改原数组：
push/unshift 。
pop/shift
reverse
splice
sort

push与unshift 添加数据

push跟unshift都是继承Array的原型
返回值，都是执行了方法以后数组的长度
用法

var arr = [1, 2, 3]
console.log(arr.push(7)); //4  这个4就是现在数组的长度
arr.push(4);
console.log(arr); //[ 1, 2, 3, 7, 4 ]   //在最后面添加
arr.unshift(8);
console.log(arr); //[ 8, 1, 2, 3, 7, 4 ]  在最前面添加

push的源码

Array.prototype.myPush = function() {
    for (var i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i];
    }
    return this.length;
}
arr.myPush(1, 2, 3)
console.log(arr)

重写unshift源码

var arr = ['d', 'e', 'f'];
Array.prototype.myunshift = function() {
    var por = 0;
    for (var i = 0; i < arguments.length; i++) {
        this.splice(por, 0, arguments[i]);
        por++;
    }
    return this.length;
};
arr.myunshift('a', 'b', 'c');
console.log(arr);

pop和shift

每次会把数组的最后一位剪切掉，然后返回剪切掉的数值给你
pop例子
pop里面是没有参数的，他就是剪切数组的最后一位

var arr = ["a", "b", "c"];
console.log(arr.pop()); //c
console.log(arr);  //[ 'a', 'b' ]

shift例子
pop里面是没有参数的，他就是剪切数组的第一位

var arr = ["a", "b", "c"];
console.log(arr.shift())  //a
console.log(arr)  //[ 'b', 'c' ]

reverse方法（倒序）

var arr = ["a", "b", "c"];
arr.reverse();
console.log(arr) //[ 'c', 'b', 'a' ]

splice

//arr.splice(开始项的下标,剪切长度,剪切以后最后一位开始添加数据);

var arr = ['a', 'b', 'c'];
arr.splice(1, 1, 1, 2, 3);
console.log(arr);//[ 'a', 1, 2, 3, 'c' ],在剪切的位置添加数据

var arr = ["a", "b", "c", "e"];
arr.splice(3, 0, "d");
//因为选的事第4个，也就是e，但是没有删除他，所以会在她前面添加数据
console.log(arr); //[ 'a', 'b', 'c', 'd', 'e' ]

var arr = ["a", "b", "c", "e"];
arr.splice(3, -1, "d");
//-1的位置是指着e的
console.log(arr); //[ 'a', 'b', 'c', 'd', 'e' ]

数组排序之sort法

升降序

var arr = [-1, -5, 8, 0, 2];
arr.sort();
console.log(arr);//[ -1, -5, 0, 2, 8 ]用了sort方法后会升序排列


var arr = [27, 48, 6, 9];
arr.sort();
console.log(arr);//[ 27, 48, 6, 9 ]
sort->按照ascli码来排列的，会先对比第一位，而不是两位数



//用自己的方法来排序，必须要有的两样东西
//1.参数a,b;
//2.返回值：1.负值,a就排前面
//         2.正值,b就排前面
//         3.0保持不动
var arr = [27, 48, 6, 9];
arr.sort(function(a, b) {
    // if (a > b) {
    //     return 1;
    // } else {
    //     return -1;
    // }
    return a - b;//升序a-b，降序b-a；
});
console.log(arr); //[ 6, 9, 27, 48 ]

随机排序

//随机排序
var arr = [1, 2, 3, 4, 5, 6];
//Math.random()  -> 随机返回0-1的数;开区间
arr.sort(function(a, b) {
    var rand = Math.random(); //运用Math.random()随机生成的数来随机排序
    if (rand - 0.5 > 0) {
        return 1;
    } else {
        return -1;
    }
});
console.log(arr); //[ 5, 4, 3, 2, 6, 1 ]

数组里面是对象


//里面是对象
var arr = [{
        son: 'jenny',
        age: 18,
    },
    {
        son: 'jone',
        age: 10,
    },
    {
        son: 'Ben',
        age: 13,
    },
    {
        son: 'Lucy',
        age: 5,
    }
];
arr.sort(function(a, b) {
    if (a.age > b.age) {
        return 1;
    } else {
        return -1;
    }
});
console.log(arr);
//按长度排序
var arr = ['1', '123', '1234567', '12345', '12'];
arr.sort(function(a, b) {
    if (a.length > b.length) {
        return 1;
    } else {
        return -1;
    }
});
console.log(arr);

数组按照元素的字节数排序

//数组按照元素的字节数排序
//unicode 0-255 1字节  256(汉字)-  2字节

var arr = ['你好啊', 'ss', 'hello', '你在干嘛']

arr.sort(function(a, b) {
    return getBytes(a) - getBytes(b);
})

function getBytes(str) {
    var bytes = str.length;
    for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255) {
            bytes++;
        }
    }
    return bytes;
}
console.log(arr);//[ 'ss', 'hello', '你好啊', '你在干嘛' ]

concat方法拼接数组

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var arr3 = arr1.concat(arr2);
console.log(arr3);//[ 'a', 'b', 'c', 'd', 'e', 'f' ]

slice方法

//从第几位开始剪切到第几位
//slice-->[start,end)
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var arr1 = arr.slice(); //[ 'a', 'b', 'c', 'd', 'e', 'f' ]
var arr1 = arr.slice(1); //[ 'b', 'c', 'd', 'e', 'f' ]
var arr1 = arr.slice(1, 3); //[ 'b', 'c' ]
console.log(arr1);

toString方法(数组转成字符串)

var arr = ['a', 'b', 'c'];
console.log(arr.toString());//a,b,c

join和split方法

join

var arr = ['a', 'b', 'c'];
//join里面什么都不填他就用逗号隔开，要是填什么就用什么隔开
var arr1 = arr.join();//a,b,c
var arr1 = arr.join("");//abc
console.log(arr1);

split
把字符串变成一个数组，分隔符要跟字符串的分隔符一样才可以
join和split是一组的

var arr = ['a', 'b', 'c'];
//join里面什么都不填他就用逗号隔开，要是填什么就用什么隔开
var str = arr.join("-"); //a-b-c
console.log(str);
var arr1 = str.split('-'); //[ 'a', 'b', 'c' ]
//第二个参数是剪切的长度，长度多少里面就有多少位数
var arr1 = str.split('-', 2);//[ 'a', 'b' ]
console.log(arr1);

类数组

他不是继承Array的原型，而是继承Object

类数组

var obj = {
    '0': 0,
    '1': 1,
    '2': 2,
    'name': '你好啊',
    'age': 23,
    'length': 3,
    'splice': Array.prototype.splice, //让obj可以以数组的形式显示
    'push': Array.prototype.push //继承push方法
}
console.log(obj[2]);//2
console.log(obj.age);//23

//继承push的原理
Array.prototype.push = function(elem) {
    this[this.length] = elem;
    this.length++;
}

数组去重

a = [1, 1, 1, 2, 2, 2, 3, 3, 3]
Array.prototype.unique = function() {
    var temp = {},
        newArr = [];
    for (var i = 0; i < this.length; i++) {
    //hasOwnProperty查看数组里面有没有这个属性
        if (!temp.hasOwnProperty(this[i])) {
            temp[this[i]] = this[i];
            newArr.push(this[i]);
        }
    }
    return newArr;
}
console.log(a.unique());//[ 1, 2, 3 ]

字符串去重

var str = "sdasdsfasfgsadsdsds";
String.prototype.unique = function() {
    var temp = [],
        newStr = "";
    for (var i = 0; i < this.length; i++) {
        if (!temp.hasOwnProperty(this[i])) {
            temp[this[i]] = this[i];
            newStr += this[i]
        }
    }
    return newStr;
}

console.log(str.unique());//sdafg

forEach循环

简单实用

var arr = [1, 2, 3];
arr.forEach((elmen) => {
    console.log(elmen);
})

参数介绍

forEach方法中的function回调有三个参数：
array.forEach(function(遍历的数组内容,对应的数组索引,数组本身) {
    
});

应用

var arr = [1, 2, 3];
var a = 0;
arr.forEach(function(value, index, array) {
    array[index] == value;
    a += value;
});
console.log(a); //结果为 6

实现小项目

function test(day) {
    var weekday = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
    weekday[day - 1] !== undefined ?
        console.log(weekday[day]) :
        console.log("erry");
}
test(2);//星期二

稀松数组

//稀松数组
var arr = [, 1, 1, , 1, ];
//因为前面的逗号数组会识别，最后一个逗号数组不会识别，所以长度只有5
console.log(arr.length);//5  
//逗号中间的地址访问都会返回undefined
console.log(arr[0])//undefined
console.log(arr);//[ <1 empty item>, 1, 1, <1 empty item>, 1 ]

ES6数组去重，求交集，并集，差集

Set介绍
Set ES6提供的新的数据结构Set(集合)。它类似于数组
集合的属性和方法
sise 返回集合的元素个数
add 增加一个新的元素，返回当前的集合
delete 删除元素，但会boolean值
has 检测集合中是否包含某个元素，放回boolean值

let ss = new Set(); //会自动去重

实践

//Set实践
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
//1.数组去重
let resultq = [...new Set(arr)]; //[...]不用这个的话不是数组
console.log(resultq);
//2.交集
let arr2 = [4, 5, 6, 5, 6];
let resultq2 = [...new Set(arr)].filter((item) => {
  let ss2 = new Set(arr2); //4 5 6
  if (ss2.has(item)) {
    return true;
  } else {
    return false;
  }
});
console.log(resultq2); //[ 4, 5 ]
//3.并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);
//4.差集
let diff = [...new Set(arr)].filter((item) => {
  !new Set(arr2).has(item);
});
console.log(diff);
structs.js:用于创建和操作字节数组的Javascript数据类型
05-16
structs.js 用于创建和操作字节数组的Javascript数据类型 用法示例 import Struct from 'structs.js' var bottle = new Struct ( ) ; var label = bottle . push ( new Struct ( ) ) ; var content = bottle . push ( "B" , [ 119 , 0x41 , 116 , 101 , 114 ] ) ; //push array of unsigned 8bit integers label . push ( "c" , "WATER" ) ; //push a string, strings are pushed as arrays of uint8 charcodes. //structs have some getter-methods
JavaScript字节转字符串 编程
ByteGlide的博客
09-22 1289
在JavaScript中，我们可以使用不同的方法进行字节到字符串和字符串到字节的转换。在本文中，我们将探讨如何在JavaScript中进行字节到字符串的转换，并提供相应的源代码示例。然后，我们实例化了一个TextDecoder对象，并使用decode方法将字节数组转换为字符串。通过遍历字节数组，我们使用String.fromCharCode方法将每个字节转换为相应的字符，并将其追加到结果字符串中。在较新的JavaScript版本中，我们还可以使用TextDecoder API来进行字节到字符串的转换。
在 JavaScript 中存储字节数组
six6de6的博客
09-23 4170
在 JavaScript 中存储字节数组
小程序二进制图片 buffer存储_系统性学习 Nodejs（4）——Buffer
weixin_39867559的博客
11-21 886
往期传送门Node.js 基础概念手写 require手写 events(发布订阅)Buffer 是什么在 Node 中，我们总是会遇到处理二进制数据的情况，比如文件操作、图片处理、网络 IO 等等。为了能够处理二进制数据，Node 引入了 Buffer。归根结底，Buffer 是一个存储二进制数据的特殊对象，它对外暴露了操作二进制数据的能力。计算机是如何存储数据的非科班出身的程序员可能对二进制都...
js 字节数组操作，TCP协议组装
weixin_37391237的博客
02-27 2015
js 字节数组
【JavaScript基础】你真正了解如今的Js数组吗，看这篇就（Go）够了
归子莫的博客
01-09 3060
数组用过很多了，应该是太平常了。在循环♻️的时候，我这么说是不是不太专业呀（有点不太聪明的样子）！ 那好，这样说？ 在遍历数组时候，甚至想对数组有所操作的（是不是已有内置的方法了？），都可以考虑一下，先别自己写一大坨（我以前就是！！！），特别是在加入了es6语法之后。 熟悉数组的操作是一项基本工，在刷LeetCode的时候，因为对数组不熟悉而不能落实自己的思路，那简直就是，太可惜了！所以学数组，从现在起！！！ 不过话说回来，你看了本文也不一定记得全部，一定要多用，多练，多总结！然后多出点BUG（这个
JavaScript数组排序之五级反转（新人篇原生JS）
xhd11257339的博客
06-18 894
冒泡排序在当前工作中我们应用的还是很广泛的，但是也是根据项目要求进行，每个项目的标准都不一样，今天先来简单了解一下什么叫做冒泡排序吧！ 冒泡排序： 1.
〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」
易编橙 · 终身成长社群，相遇已是上上签！
05-08 1万+
接下来阶段，我们将进入到 JavaScript 数组的相关知识学习阶段，该章节我们将要学习一下关于 "数组" 的一些基本知识点。
js数组篇
weixin_41688609的博客
06-06 452
1.chunk转换二维数组 将数组（array）拆分成多个数组，并将这些拆分的多个数组组成一个新数组。 2.cloneArray克隆数组 浅拷贝一份数组副本。 3.compact去除数组中的无效值 创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, “”, undefined, 和 NaN 都是被认为是“假值”。 4.difference 数组差集 创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。 假设有 A 和 B 两个数组，返回 A 数组中的集合不包含 B
JavaScript第 18 篇，JavaScript数组方法 find() ，使用详细（JS的 find() 方法，js的 find() 方法）
前端架构师（AI + GIS + Web3D）& 数字芯片系统架构师（FPGA），NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.csdn.net）
05-05 5万+
⭐我们知道find() 方法是 JavaScript 中用于在数组中查找特定条件的第一个元素，如果找到一个元素使得回调函数返回true，则该元素作为结果返回；如果没有找到这样的元素，则返回undefined，该函数不会修改原始数组
这么骚的 js 代码，不怕被揍么
Yvette Lau的专栏
01-14 879
布拉德特皮https://juejin.im/post/5e044eb5f265da33b50748c8前言 曾经，我接手了一份大佬的代码，里面充满了各种“骚操作”，还不加注释那种，短短...
JavaScript 的数据类型【六】(数组)
妖怪的博客
12-06 786
JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有八种。数值、字符串、布尔值这三种是原始类型。undefined和null，为两个特殊值。function，函数也为一种基础类型。对象则称为合成类型。ES6 添加了Symbol类型的值。
js byte[] 和string 相互转换 UTF-8
热门推荐
忆凌波的专栏
02-14 6万+
function stringToByte(str) { var bytes = new Array(); var len, c; len = str.length; for(var i = 0; i < len; i++) { c = str.charCodeAt(i); if(c >= 0x010000 && c <= 0x10FFFF) {
js byte[]、hex、base64各种编码转换
t_xuanfeng123的博客
07-11 9802
1、base64 base64把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的字符串理论上将要比原来的长1/3。 关于这个编码的规则： 1、把3个字符变成4个字符。 2、每76个字符加一个换行符。 3、最后的结束符也要处理,不足的用=补位。 原文的字节数量应该是3的倍数，如果这...
JavaScript类型化数组（二进制数组）
Dragonfly_w的博客
02-03 1270
简介 JavaScript类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。 正如你可能已经知道，Array 存储的对象能动态增多和减少，并且可以存储任何JavaScript值。JavaScript引擎会做一些内部优化，以便对数组的操作可以很快。然而，随着Web应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑，访问WebSockets的原始数据等，很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助。 但是，不要
js的字节数组与数值之间的相互转换
changruobing的博客
12-27 2119
用的是别人写的文章，这里只做记录方便使用 test(); function test() { var bytes = getFloat64Bytes(-3.33); alert(bytes); alert(toFloat64(bytes)); } //构建一个视图，把字节数组写到缓存中，索引从0开始，大端字节序 function getView(bytes) { var view = new DataView(new ArrayBuffer(bytes.length)); for (var i = 0; i
在 javascript 中存储字节数组
迹忆客
07-05 908
类型化数组视图就像不同的镜头，提供字节数组的解释，特别是存储在内存中的 ArrayBuffer。此外，您不能像我们在通常的 JavaScript 数组中那样直接访问 ArrayBuffer 对象中的元素。同理，我们可以使用所有类型化的数组视图来操作底层的ArrayBuffer或者内存中的字节数组。这个缓冲区不提供任何机制来操作它的字节。如您所见，不同的视图使您能够将 ArrayBuffer 中的二进制数据解释为不同的数字格式。在前面的示例中，让我们创建一个新的 Uint8Array 视图来操作已经创建的。
JavaScriptd的8种数据类型
2301_76379758的博客
02-11 332
Unicode 是目前最常见的字符编码，它用一个码位映射一个字符。在 js 中，Unicode 码位范围为'\u{0000}'，可以表示超过110万个字符。格式为'\u{十六进制数字}'Unicode 最前面的 65536 个字符位称为 基本多文种平面，它的码位范围为'\u{0000}''\u{ffff}'，最常见的字符都放在这个平面上。剩下的字符都放在 辅助平面 上，码位范围为判断是否为辅助平面的方法为十六进制数字的位数是否超过4位。
JavaScript
这里是菠萝味菠萝啤的博客
03-23 314
css，html不能说是语言 JavaScript才是一门编程语言 前端和后端之间相连接，就用json， 就是把前端的语言转换成后端认识的语言，比如字符串 所以，字符串就是json ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值