小白学JavaScript的第九天

九、Array对象

（一）数组知识

1.数组对象的创建

（1）先定义数组，然后再赋值

     let arr=new Array();
     let arr=[];// 字面量

（2）定义数组的同时，即赋值 (变量初始化)

    let arr=new Array(10,20,30);
    let arr=[10,20];// 字面量

2.索引号

• 下标从0开始
• 添加元素 数组名[索引号]=值;

3.数组的长度 length

• ​ 长度指是元素的个数
• ​ 长度永远比本数线中最大的索 引号大1
• ​ 在数组末尾添加数组

（二）数组的操作

1.增

语法

数组名[索引号]=值;

案例

let arr = [10, 20, 40, 60, 50];
//增  先在末尾增
arr[arr.length] = 100;
arr.push(20);
arr[7] = 300;
console.log(arr); //[10, 20, 40, 60, 50, 100, 20, 300]

2.改

语法

数组名[索引号]=新的值;

案例

let arr = [10, 20];
arr[1] = "hello";
console.log(arr);//[10, "hello"]

3.查

语法

//查单个
let ele=  数组名[索引号]
//查所有数组中的数据都需取出来  遍历 （循环）
for(let i=0;i<arr.length;i++){
    console.log(数组名[索引号])
}

案例

let arr = [10, 20, 40, 60, 50];
let ele = arr[4];
console.log(ele);//50
for (let i = 0; i < arr.length; i++) {
    console.log(i, arr[i]); //i是索引号  arr[i]值
}
// for...in   ---比较适于自定义对象
for (let k in arr) {
    console.log(k, arr[k]); // k 索引号   arr[k]值
}

4.删

语法

delete 数组名[索引号];
数组名.splice(索引号,删除数量);
//在索引号以后的元素

案例

let arr1 = [10, 20, 30];
console.log(arr1);
delete arr1[1]; // 20不在了但是 位置还在
console.log(arr1);
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);

（三）检测数据类型

1.检测基本数据类型

1、数字类型、typeof 返回的值是 number。
2、字符串类型，typeof 返回的值是 string。
3、布尔类型，typeof 返回的值是 boolean。
4、对象、数组、null 返回的值是 object。
5、函数类型，返回的值是 function。
6、不存在的变量、函数或者 undefined，将返回 undefined。

"number"  "string"  "boolean"  "undefined"  "null"  "function" "symbol"

2.检测引用数据类型

语法

变量  instanceof 构造函数名字

案例

console.log(arr instanceof Array);//true
console.log(date instanceof Date);// true
console.log(date instanceof Array);//false

（四）深浅拷贝的问题

浅拷贝： 把一个数组名赋值给另外一个数组就是浅拷贝

特点：一个数组中的元素修改另外一个数组同步修改

深拷贝： 原数 组中的数组重新复制了一份到新数组中

特点：一个数组中的元素不影响另外一个元素

	  //浅拷贝;
      let arr = [10, 20, 30];
      let arr1 = arr;
      console.log(arr1, arr); //[10, 20, 30],[10, 20, 30];
      //修改
      arr[1] = 100;
      console.log(arr1, arr); //[10, 100, 30],[10, 100, 30];
      
      //深拷贝
      //需要原数组中的数据遍历一下，重新放在另一个数组中
      let arr = [10, 20, 30];
      let arr1 = [];
      for (let i = 0; i < arr.length; i++) {
        arr1[i] = arr[i];
      }
      console.log(arr, arr1);//[10, 20, 30],[10, 20, 30];
      arr[1] = 100;
      console.log(arr, arr1);//[10, 100, 30],[10, 20, 30];

(五)常用的数组内置方法

数字来自：很好用的学习网站（菜鸟教程）

方法	描述
concat()	连接两个或更多的数组，并返回结果。
slice()	选取数组的一部分，并返回一个新数组。
join()	把数组的所有元素放入一个字符串。
indexOf()	搜索数组中的元素，并返回它所在的位置。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
includes()	判断一个数组是否包含一个指定的值。
filter()	检测数值元素，并返回符合条件所有元素的数组。
forEach()	数组每个元素都执行一次回调函数。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。

案例

//concat()方法
var a = ["Google", "Taobao"];
var b = ["Runoob", "Wiki", "Zhihu"];
var c = a.concat(b);
document.write(c);//Google,Taobao,Runoob,Wiki,Zhihu

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

//join()方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();//Banana,Orange,Apple,Mango

//indexOf()方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");//2

//lastIndexOf()方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");//2

//includes()方法
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); // true 
site.includes('baidu'); // false

//filter()方法
var ages = [32, 33, 16, 40];
function checkAdult(age) {
	return age >= 18;
}
function myFunction() {
	document.getElementById("demo").innerHTML = ages.filter(checkAdult);//32,33,40
}

//forEach()方法
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
</script>
//index[0]: 4	index[1]: 9	index[2]: 16	index[3]: 25

//map()方法
var numbers = [4, 9, 16, 25];function myFunction() {    
x = document.getElementById("demo")    x.innerHTML 
= numbers.map(Math.sqrt);}//2,3,4,5