当前位置：移动技术网 > IT编程>开发语言>JavaScript > JavaScript初探三（学习js数组）

JavaScript初探三（学习js数组）

2019年06月20日 | 移动技术网IT编程 | 我要评论

javascript初探（三）

javascript数组

定义

创建数组

var 数组名 = [元素0,元素1,元素2,……] ;

var arr = ["huawei","china","mirror"];

同时javascript也支持 new array 创建数组。但是建议使用上面的文本方式创建数组

数组访问

通过引用 索引号（下标） 来引用某个数组元素

var name = arr[0];
// name = huawei

ps：数组的索引是从 0 开始的

可以直接使用数组名不加索引属性，直接访问所有数组内容

var arr = ["huawei","china","mirror"];
document.getelementbyid("demo").innerhtml = arr ;
// 结果输出: huawei,china,refueling

更新数组元素

直接使用数组索引赋值方式，就可更改数组内元素

数组是对象

typeof arr_name 会返回 object

javascript的数组实际上是一种对象的表现，但是

数组最好还是以数组方式来描述
两者的区别：
- 数组是利用索引位置访问数组内容属性的
- 对象是利用对象属性名来访问属性名对象的属性值的
数组元素可以是对象：

由于数组的特点，数组是特殊类型的对象

故此，可以在数组中存放不同类型的变量

可以数字、字符串、函数、函数……

而且，还可以在数组中存储另一个数组

数组属性

length属性

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

var arr = ["huawei","china","mirror"];
arr.length;
// 结果：返回 3

由于arr索引是从零开始，而length数目计算是从1开始的

所以length-1 === 数组最后一个元素的下标索引

访问数组最后一个元素的技巧：

var arr[arr.length - 1] ;
// 结果返回 mirror

遍历数组

遍历数组理论上最好的是使用 for 循环

var arr = ["huawei","china","mirror"];
var text = "<ul>";
for（i = 0 ； i < arr.length-1 ; i ++){
    text += "<li>" + arr[i] + "</li>";
}

array.foreach()

var arr = ["huawei","china","mirror"];
var text ;
text = "<ul>";
arr.foreach(myarr);
text += "</ul>";
function myarr(value){
    text += "<li>" + value + "</li>";
}

添加元素：push()

push()：向数组添加新元素的最佳方法就是push()方法

var arr = ["huawei","china","mirror"];
arr.push("refueling");

手动添加元素

arr[arr.length] = ("refueling");
// 或者
arr[x] = ("refueling");

关联数组

在javascript中只支持数字索引；并不支持命名索引方法

var arr = [];
arr[0] = "huawei";
arr[1] = "china";
arr[2] = "refueling";
var x = arr.length ;   //返回  3
var y = arr[0];        //返回  huawei

如果使用了命名索引，则会把数组重定义为对象

var arr = [];
arr["a"] = "huawei";
arr["b"] = "china";
arr["c"] = "refueling";
var x = arr.length ;        // 返回 0 
var y = arr[0] ;        //返回 undefined

对象和数组的区别

在javascript中，数组使用数字索引
在javascript中，对象使用命名索引
对象和数组的不同应用

如果希望元素名为字符串（文本），则使用对象

如果希望元素名数字，则使用数组
避免 new array()

没有必要使用内建数组构造器 new array()

识别数组变量

我们用 typeof 判断数组数据类型的时候，会返回 object ，因为数组是特殊的对象，但是还是区分不了对象和数字变量。我们可以使用数组的内建：array.isarray()方法

数组方法

tostring() 数组输出

将数组转为字符串值输出（元素间逗号分隔）

var arr = ["huawei","china","mirror"];
document.getelimentbyid("demo").innerhtml = arr.tostring();
// 结果：huawei,china,mirror

join() 数组输出

join(c)：将所有数组元素结合为一个字符串；同时还可以规定分隔符 c

var arr = ["huawei","china","mirror"];
document.getelimentbyid("demo").innerhtml = arr.join("&");
// 结果：huawei&china&mirror

popping()（删除元素）

pop()：从数组中删除最后一个元素

var arr = ["huawei","china","mirror"];
arr.pop(); //删除最后一个元素 mirror

pop()：返回被删除的那个数

pushing()（添加元素）

push()：在数组的最后一个数组元素，向数组后添加一个新元素

var arr = ["huawei","china","mirror"];
arr.push("refueling");  // 添加 refueling到数组中，并返回最新数组的长度

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

位移元素（开头元素添/删）

shift()：删除首个数组元素，并把所有其他元素”位移“到更低的索引

var arr = ["huawei","china","mirror"];
arr.shift();    // 返回 huawei

shift() 返回被移出（删除）的元素

unshift()：在数组开头添加元素 ，并把所有其他元素向后”位移“索引标志

var arr = ["huawei","china","mirror"];
arr.unshift("refueling");   // 返回 新的数组长度 5

unshift()：返回新的数组长度

更改元素

通过对应的索引号引用直接赋值，来改变该索引位置的元素内容

删除元素 delete

javascript 数组属于对象类型，其中的元素可以使用 javascript delete 运算符来删除

var arr = ["huawei","china","mirror"];
delete arr[0];      //把 "huawei" 改为 undefined

不建议使用delete运算符，可以使用pop() 或 shift() 代替

原因：后者的数组方法，会自动抹除数组索引，而delete则会保留索引并导致空洞

拼接数组 splice()

splice()：用于向数组添加新项

var arr = ["huawei","china","mirror"];
arr.splice(2,0,"refueling","hello");

第一个参数：定义添加新元素的位置

第二个参数：定义应删除多少元素

其余参数：定义要添加的新元素

splice()：删除元素

var arr = ["huawei","china","mirror"];
arr.splice(0,1); // 删除 arr 数组中的第一个元素

第一个参数：定义新元素添加的元素

第二个参数：定义删除多个元素

其余参数：被忽略，没有新元素添加

splice()会返回被删除的元素

而原数组的内容就会被修改

合并数组 concat()

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

var str1 = ["huawei","refueling"];
var str2 = ["china","refueling"];
var mystr = str1.concat(str2) ;   // 连接 str1 和 str2

array1.concat(array2,……)

同样的，concat()也可以和数值合并

array1.concat([值,……])

裁剪数组 slice()

slice()：裁剪数组的某个片段，返回一个新的数组

var arr = ["huawei","china","refueling","hello","world"];
var array = arr.slice(1);
var array = arr.slice(1,3);

第一个元素：裁剪的开始位置

第二个元素：裁剪的结束位置

若第二个元素被省略，

则从开始的位置截取到数组的最后一个元素

javascript数组排序

排序 sort()

sort()：按照ascii顺序对数组(字符和数字)进行升序排序

var arr = ["huawei","china","refueling","hello","world"];
arr.sort();
// 结果：china,hello,huawei,refueling,world

反转数组 reverse()

reverse() ：将数组中的所有元素反转

var arr = ["huawei","china","refueling","hello","world"];
arr.reverse()

利用 sort() + reverse() 对数组进行降序排序

var arr = ["huawei","china","refueling","hello","world"];
arr.sort();
arr.reverse();

比值函数 *

比较函数目的是定义另一种排序顺序
比较函数应该返回一个负、零或正值，这取决于参数

function(a,b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据返回的值，对这些值进行排序。

实例：

当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)

该函数计算 40 - 100 ，然后返回一个负值

排序函数将40排序为比100更低的值

    <div>
        <button onclick="myfunction1()">字母顺序</button>
        <button onclick="myfunction2()">数字顺序</button>
        <p id = "demo"></p>
    </div>
    <script>
        var points = [40,100,1,5,25,10] ;
        document.getelementbyid("demo").innerhtml = points ;
        
        function myfuntion1() {
            points.sort();
            document.getelementbyid("demo").innerhtml = points ;
        }
        
        function myfuntion2() {
            points.sort(function(a,b){return a - b}) ;
            document.getelementbyid("demo").innerhtml = points ;
        }
    </script>

以随机顺序排序

var points = [40,100,1,5,25,10] ;
points.sort(function(a,b){return 0.5 - math.random()});

原理就是：0.5减去一个随机数

查找最值

math.max()

math.max.apply：查找数组中的最高值

function myarraymax(arr) {
    return math.max.apply(null,arr);
}

math.max.apply([1,2,3]) === math.max(1,2,3)

math.min()

math.min.apply：查找数组中的最小值

function myarraymin(arr) {
    return math.min.apply([null,arr]);
}

math.min.apply([1,2,3]) === math.min(1,2,3)

自定义的max和min

function myarraymax(arr) {
    var len = arr.length ;
    var max = -infinity ;  //最小的负值
    while (len --) {
        if  (arr[len] > max) {
            max = arr[len] ;
        }
    }
    return max ;
}

function myarraymin(arr) {
    var len = arr.length ;
    var min = infinity ;
    while (len --) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min ;
}

排序对象数组

javascript 数组的定义中，是允许存储对象的；

var cars = [
    {name:"huawei",age:"good"},
    {name:"mi",age:"where"},
    {name:"java",age:"no:1"}
];

即使对象拥有不同数据类型的属性，sort()方法仍然可以对数组进行排序

解决方法就是利用比较函数对比属性值

cars.sort(function(a,b){return a.year - b.year});

通过比较函数，将属性中的属性值内容进行对比

javascript 数组迭代方法

array.foreach()

foreach()：为每个数组元素调用一次函数（回调函数）

var txt = "" ;
var number = [45,4,9,16,25] ;
numbers.foreach(myfunction) ;

function myfunction (value , index , array) {
    txt += value + "<br>" ;
}

注释：
- 项目值
- 项目索引
- 数组本身

上述代码的作用：数组中每个值传递并调用函数

array.map()

map()：通过对每个数组元素执行函数来创建数组
map()：不会对没有值的数组元素执行函数
map()：不会改变原始数组

var number1 = [45,4,9,16,25] ;
var number2 = number1.map(myfunction) ;
function myfunction(value,index,array){
    return value * 2 ; // 数组中的元素 * 2 并返回
}

注释：
- 项目值
- 项目索引
- 数组本身

array.filter()

filter()：创建一个包含通过测试的数组元素的新数组

var number = [45,4,9,16,25] ;
var over18 = number.filter(myfunction) ;
function myfunction(value , index , array){
    return value > 18 ; // 返回大于18的数组元素并组成一个新数组
}

注释：
- 项目值
- 项目索引
- 数组本身

array.reduce()

reduce()：在每个数组元素上运行函数，生成单个值；方法在数组中从左到右运行；不会改变原始的数组。

var number = [45,4,9,16,25] ;
var sum = number.reduce(myfunction) ;
function myfunction(total , value , index , array){
    return total + value ;
}

注释：
- 总数（初始值/先前返回的值）
- 项目值
- 项目索引
- 数组本身

reduce()：方法能够接收一个初始值

array.reduceright()

和reduce() 类似

array.every()

every()：检查所有数组值是否可以通过测试

var number = [45,4,9,16,25] ;
var allover18 = number.every(myfunction) ;
function myfunction(value , index , array) {
    return value > 18 ;
}

array.some()

some()：检查某些数组值是否通过测试

var number = [45,4,9,16,25] ;
var someover18 = number.some(myfunction) ;
function myfunction(value , index , array) {
    return value > 18 ;
}

array.indexof()

indexof()：在数组中搜索元素值并返回其位置

var number = [45,4,9,16,25] ;
var a = number.indexof(45);

array.indexof(item,start)

item：必须，要检索的项目

start：可选，检索的起点

未找到项目，返回 -1

如果搜索的内容出现多次，则返回第一个出现的位置

array.lasindexof()

lasindexof()：和indexof()功能类似，不同的是，从数组结尾开始搜索

array.find()

find()：返回通过测试函数的第一个数组元素的值

var number = [45,4,9,16,25] ;
var first = number.find(myfunction) ;
function myfunction(value , index , array) {
    return value > 18 ;
}

array.findindex()

findindex()：返回通过测试函数的第一个数组元素的下标索引

var number = [45,4,9,16,25] ;
var first = number.findindex(myfunction) ;
function myfunction(value , index , array){
    return value > 18 ;
}

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

js中的四种继承方式

js中的继承什么是继承js中创建对象的方式：继承的四种方式原型继承call继承组合式继承ES6中的继承什么是继承... [阅读全文]
JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]

网友评论


验证码：

JavaScript初探 三 （学习js数组）

2019年06月20日 | 移动技术网IT编程 | 我要评论

javascript初探 （三）

javascript数组

定义

创建数组

数组访问

更新数组元素

数组是对象

数组属性

length属性

遍历数组

array.foreach()

添加元素：push()

关联数组

对象和数组的区别

识别数组变量

数组方法

tostring() 数组输出

join() 数组输出

popping()（删除元素）

pushing()（添加元素）

位移元素（开头元素添/删）

更改元素

删除元素 delete

拼接数组 splice()

合并数组 concat()

裁剪数组 slice()

javascript数组排序

排序 sort()

反转数组 reverse()

比值函数 *

以随机顺序排序

查找最值

math.max()

math.min()

自定义的max和min

排序对象数组

javascript 数组迭代方法

array.foreach()

array.map()

array.filter()

array.reduce()

array.reduceright()

array.every()

array.some()

array.indexof()

array.lasindexof()

array.find()

array.findindex()

您可能感兴趣的文章:

相关文章:

网友评论

JavaScript初探三（学习js数组）

javascript初探（三）