JavaScript初探 三 （学习js数组）

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

Pop<u>ping</u>()（删除元素）

• pop()：从数组中**<u>删除最后一个元素</u>**

var arr = ["Huawei","China","Mirror"];
arr.pop(); //删除最后一个元素 Mirror

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

Pushing()（添加元素）

• push()：在数组的<u>最后一个数组元素</u>，向数组后添加一个新元素

var arr = ["Huawei","China","Mirror"];
arr.push("Refueling");  // 添加 Refueling到数组中，并返回最新数组的长度

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

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

• shift()：删除**<u>首个数组元素</u>**，并把全部其余元素”位移“到更低的索引

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()：返回经过测试函数的<u>第一个</u>数组元素的值

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 ;
}

---