web基础 —— javaScript 数组操作

最新推荐文章于 2022-04-28 21:19:08 发布
最新推荐文章于 2022-04-28 21:19:08 发布
阅读量285 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41699594/article/details/101011746
版权
  • 什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

  • 创建数组：使用数组文本是创建 JavaScript 数组最简单的方法。
var array-name = [item1, item2, ...];
  • 空格和折行并不重要。声明可横跨多行：
var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
  1. 请不要最后一个元素之后写逗号（比如 “BMW”,）。
  2. 可能存在跨浏览器兼容性问题。

访问数组元素
我们通过引用索引号（下标号）来引用某个数组元素。

var name = cars[0];

这条语句修改 cars 中的首个元素：

cars[0] = "Opel";

实例：

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。

  • 访问完整数组：通过 JavaScript，可通过引用数组名来访问完整数组。
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

数组是对象

  1. 数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
  2. 对象使用名称来访问其“成员”。在本例中，person.firstName 返回 Bill：
var person = {firstName:"John", lastName:"Doe", age:46};

数组元素可以是对象

  1. JavaScript 变量可以是对象。数组是特殊类型的对象。
  2. 正因如此，可以在相同数组中存放不同类型的变量。
  3. 可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组：
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

数组属性和方法 JavaScript 数组的真实力量隐藏在数组的属性和方法中：

var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序

length 属性：length 属性返回数组的长度（数组元素的数目）。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4

length 属性始终大于最高数组索引（下标）。

  • 访问第一个数组元素
fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
  • 访问最后一个数组元素
fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];
  • 遍历数组元素
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>遍历数组的最佳方法是使用标准的 for 循环：</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
  • 您也可以使用 Array.foreach() 函数：
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>Array.forEach() 为每个数组元素调用函数。</p>

<p>Internet Explorer 8 以及更早的版本不支持 Array.forEach()。</p>

<p id="demo"></p>

<script>
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>
  • 添加数组元素：向数组添加新元素的最佳方法是使用 push() 方法：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
  • 也可以使用 length 属性向数组添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // 向 fruits 添加一个新元素 (Lemon)
  • 如何识别数组
  • 常见的问题是：我如何知晓某个变量是否是数组？
  • 问题在于 JavaScript 运算符 typeof 返回 “object”：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // 返回 object
  • typeof 运算符返回 “object”，因为 JavaScript 数组属于对象。
  • 解决方案 1：为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：
Array.isArray(fruits);     // 返回 true

此方案的问题在于 ECMAScript 5 不支持老的浏览器。
解决方案 2：创建自己的 isArray() 函数以解决此问题：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
  1. 假如参数为数组，则上面的函数始终返回 true。 或者更准确的解释是：假如对象原型包含单词 “Array” 则返回 true。

解决方案 3：
假如对象由给定的构造器创建，则 instanceof 运算符返回 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // 返回 true

把数组转换为字符串：JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

join() 方法也可将所有数组元素结合为一个字符串，它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

  1. Popping 和 Pushing 在处理数组时，删除元素和添加新元素是很简单的。 Popping 和 Pushing 指的是，从数组弹出项目，或向数组推入项目。

  2. Popping pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
  • pop() 方法返回“被弹出”的值：

Pushing push() 方法（在数组结尾处）向数组添加一个新的元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

  • 位移与弹出等同，但处理首个元素而不是最后一个。
    shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
  • shift() 方法返回被“位移出”的字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift() 方法返回新数组的长度。

length 属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

**

  • 删除元素：既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
  • 使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

拼接数组
splice() 方法可用于向数组添加新项：

  1. 第一个参数（2）定义了应添加新元素的位置（拼接）。
  2. 第二个参数（0）定义应删除多少元素。
  3. 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice() 来删除元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

合并（连接）数组：concat() 方法通过合并（连接）现有数组来创建一个新数组

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：
实例（合并三个数组）

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数：

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

裁剪数组：slice() 方法用数组的某个片段切出新数组，本例从数组元素 1 （“Orange”）开始切出一段数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

slice() 可接受两个参数，比如 (1, 3)。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
清净如月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web学习笔记 —— javascript基础
05-25
这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...
Web前端开发笔记29——数组
DRLDER的博客
04-30 505
1.创建数组，使用： var arr=new Array(); var arr=[]; 创建数组的两种方法。 2.添加元素及访问数组： var arr = [1, 2, '3', 'String1', true] for (var i = 0; i < arr.length; i++) { console.log(typeof arr[i]); } 上面的例子，使用了遍历数组的方法，完整的展示了arr的创建、取值、及遍历的编码过程。 3.增加数组长度的方法： 通过修改arra
java web定义数组_Java基础之数组-->>数组常用操作
weixin_39633452的博客
02-26 787
3.2一维数组3.2.1声明数组数组类型[] 数组名称；int[] username;或者数组类型 数组名称[];int username[];3.2.2初始化一维数组一维数组初始化有两种格式，一种是先声明再赋值，一种是直接声明并赋值int [] array = new int[5]; //创建一个整型数组对象，长度为5；int [] array = {1,2,3,4,5}; ...
js中forEach的用法
热门推荐
雪小白
07-18 1万+
今天在浏览时遇到了下面一段代码，里面有一个forEach的函数，决定写个文章详细记录以下。 <script> var fruits, text; fruits = ["Banana", "Orange", "Apple", "Mango"]; text = "<ul>"; fruits.forEach(myFunction); ...
web.一些简单的数组操作
尹烁的博客
05-04 848
哈哈，话不多说，看代码var arr=[1,2,3]; //arr.shift(); //arr.unshift(5);// 弹出 5,1,2,3从第一个的前面加入一个 //arr.shift();//弹出2,3 删除第一个 //arr.pop(); //1,2从最后删除一个 //arr.push(22);//1,2,22从最后加上一个 alert(arr);增加个，稍微更加好用的函数—–sp
JavaScript学习笔记（七）
sinat_38483976的博客
08-20 176
JS数组 语法： var cars = ["Saab", "Volvo", "BMW"]; 访问数组元素 var name = cars[0]; 数组是对象，使用typeof会返回object。 数组长度：.length。 访问最后一个数组： var last = fruits[fruits.length - 1]; 遍历数组： for循环： var fruits, ...
web前端——好玩的魔方.zip
12-04
在JavaScript中，可能创建一个数组来表示魔方的每个面，然后通过计算每个面在不同旋转状态下的位置来更新CSS的`transform`属性。魔方的旋转逻辑需要遵循一定的规则，例如，每次只能旋转一层，且旋转的角度通常为90度...
全JavaScript语言Web实现学习项目
最新发布
02-19
这个项目可能涵盖从基础语法到高级特性的全面学习，通过构建一个实际的Web应用——书籍管理系统来实践和巩固JavaScript知识。在这个过程中，开发者不仅能够熟悉JavaScript的核心概念，还能了解如何在Web开发中有效地...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
美化你的网页(三)——Javascript应用实例.pdf
01-03
"美化你的网页(三)——Javascript应用实例" 这篇文章主要讲述了使用JavaScript来美化网页的实例，包括动态广告看板和文字滚动效果。 一、动态广告看板 在这篇文章中，作者提供了一个使用JavaScript来创建动态广告...
JS数组
lb569484787的博客
09-21 224
1.创建数组 （1）语法： var array-name = [item1, item2, ...]; 例子： var cars = ["Saab", "Volvo", "BMW"]; （2）使用 JavaScript 关键词 new：（不建议使用，请使用 [] 取而代之！） var cars = new Array("Saab", "Volvo", "BMW"); 2.访问数组 （1）访...
web学习 -- JavaScript 数字和数组
qq_39273039的博客
07-27 407
文章目录数字64 位浮点数NAN 非数值Infinity十六进制前导零 和 tostring进制转化数值方法toString()toExponential() 方法toFixed() 方法toPrecision() 方法valueOf() 方法Number() 方法parseInt() 方法parseFloat() 方法数值属性数组创建数组new 创建访问遍历属性 和 方法length 属性isArray（）toString（）join()Popping 和 Pushingpop()push（）shift(
JavaScript基础语法
qq_67673170的博客
04-28 1765
一、JavaScript简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web， JavaScript 是一种轻量级的编程语言，可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript的作用：直接写入HTML输出流；对事件作出反应；改变HTML内容；改变HTML图像；改变HTML样式；用于验证用户的输入。 二、JavaScript基础语法 一、引入方式 1、行内引入: <开始标签 on+事件类型=“js
JavaScript(1)
weixin_43398639的博客
11-06 117
一、JavaScript基本知识 JavaScript是一种网页编程技术，经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言，类似C语言和Java的语法 事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写少量程序可以完成目标 不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样 目前主流版本为ES6 二、Jav...
JavaScript 自学学习笔记
weixin_43178103的博客
07-31 247
导入文件路径范例 file://F:/js_html_test/image/tisssmg.jpg win window.alert('') 弹窗 console.log('') 浏览器控制台输出（打印） style.fontSize = '35px' 算出数据变为35像素展示 style.display='block' 等于打开隐藏内容 <p id=...
js-数组基础和数组方法的使用
琳
10-12 538
数组对象的作用是：使用单独的变量名来存储一系列的值。 定义数组 我们用关键词new创建一个数组名字为Array对象： var Array=new Array（）； 1、var myCars=new Array（）     myCars[0]="Abhs"     myCars[1]="jdhfl"     myCars[2]="jhafjk
024_JavaScript数组
aihiao的专栏
11-09 267
1. JavaScript数组用于在单一变量中存储多个值。 2. 创建数组 2.1. 简单数组使用中括号[]包含项, 多个项用逗号分割: var array-name = [item1, item2, ...]; 2.2. 实例 var cars = ["Saab", "Volvo", "BMW"]; 3. 访问数组元素 3.1. 我们通过引用索引号(下标号)来引用某个数组元素。 3.2. 数组索引从0开始。[0]是数组中的第一个元素, [1]是第二个, 依此类推。 3.3. 实例
javascript ES5中 foreach()遍历方法
weixin_44638167的博客
09-28 5784
forcach() array.forEach(function(currentValue, index, arr)) currentValue：数组当前项的值 index：数组当前项的索引 (可选) arr：数组对象本身 filter() 方法创建一个新的数组， 新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组 注意它直接返回一个新数组 代码: <script> var arr=[50,86,12,10,0,38]; var newa
Javascript预习博客
weixin_50796134的博客
05-15 301
Javascript预习博客（以下大部分内容参考W3school)添加javascript的方式Javascript的基本语法js的输出语句变量运算符数据类型函数 （以下大部分内容参考W3school) 添加javascript的方式 脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。 <head>//<body> <script> function myFunction() { document.g
JavaScript笔记.pdf
07-24
本资源是一份关于JavaScript的详细学习笔记，主要涵盖了Day_3-4的...这份笔记覆盖了JavaScript语言的基础到进阶内容，对提升JavaScript编程技能非常有帮助，无论是初学者还是进阶开发者，都能从中找到有价值的知识点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值