数组

数组

数组

• 数组也是一个对象
• 他和我们普通功能类似
• 不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素
• 索引
  从零开始的整数就是索引
• 数组的存储比普通对象好，在开发中我们经常使用一些数组来存储一些数据

创建数组对象

var arr = new Array();

像数组中添加元素

语法：数组[索引] = 值

arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;

读取数组中的元素

语法：数组[索引]
如果读取不存在的索引，他不会报错而会返回undefind

image.png

获取数组长度

可以使用length属性来获取数组的长度（元素的个数）
语法：数组.lenth
对于连续的数组，使用length可以获取到数组的长度（元素的个数）
对于非连续的数组，使用length会获取到数组的最大索引加1

image.png

向数组的最后一个位置添加元素

arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;

image.png

使用字面量来创建一个数组

创建一个数组

var arr = new Array();

使用字面量来创建数组

语法：[]

var arr = [];

使用字面量创建数组时，可以在创建时就指定数组中的元素

var arr = [1,2,3,43,5,16];

使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递

var arr2 = new Array(10,20,30);

创建一个数组，数组中只有一个元素10

arr = [10];

创建一个长度为10的数组

arr2 = new Array(10);

数组中的元素可以是任意数据类型

arr = ["aaaa","aaaads","sfaa","rafer"];

也可以是对象

var obj = {name:"孙悟空"}；
arr[arr.length] = obj;
arr = [ {name:"孙悟空"}, {name:"沙和尚"}, {name:"老王"}];

也可以是函数

arr = [function (){},function (){}];

也可以是数组

arr = [[1,23,4],[21,3,4],[2,4,5]];

数组的四个方法

push（）

• 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度

• 可以将要添加的元素作为方法的参数传递
  这样这些元素将会自动添加到数组的末尾

  
  image.png

pop（）

• 该方法可以删除数组的最后一个元素

  
  image.png

unshift（）

• 向数组开头添加一个或多个元素，并返回新的数组长度

  
  image.png

shift（）

• 可以删除数组的第一个元素，并将被删除的元素作为返回值返回

  
  image.png

遍历数组

image.png

forEach（）遍历数组

• forEach（）方法需要一个函数作为参数
• 像这种函数，由我们创建但是不由我们调用的，我们称之为回调函数
• 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参，来读取这些内容
• 第一个参数，就是当前正在遍历的元素
• 第二个参数，就是当前正在遍历元素的索引
• 第三个参数，就是正在遍历的数组

var arr = ["孙悟空",18,"男"];
arr.forEach(function (value,index,obj) { console.log(value) })

image.png

slice()

• 可以用来从数组提取新元素
• 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
• 参数
  1、截取开始位置的索引，包含开始索引
  2、截取结束位置的索引，不包含结束索引
• 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
• 索引可以传递一个负值，如果传递一个负值，则从后往前计算
  -1 ：倒数第一个
  -2：倒数第二个

var arr = ["孙悟空","猪八戒","沙和尚","白骨金","蜘蛛精"];

var result = arr.slice(1,2);
var result2 = arr.slice(3);
var result4 = arr.slice(1,-2);
console.log(result);
console.log(result2);
console.log(result4);

image.png

splice()会影响到原数组，会将指定元素从原数组中删除，并将删除的元素作为返回值返回

• 参数
  第一个：表示开始位置的索引
  第二个：表示删除的数量
  第三个及以后：
  可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = ["孙悟空","猪八戒","沙和尚","白骨金","蜘蛛精"];

var result = arr.slice(1,2);
var result2 = arr.slice(3);
var result4 = arr.slice(1,-2);
//从第一个位置开始，删除俩个
var result5 = arr.splice(1,2);
//从第一个位置开始，删除一个，在第一个位置之前插入"牛魔王","天山公主","红孩儿"
var result6 = arr.splice(1,1,"牛魔王","天山公主","红孩儿");
console.log(result);
console.log(result2);
console.log(result4);
console.log(arr);
console.log(arr);

image.png

数组去重练习

//出创建一个数组
var arr = [1,2,3,4,3,21,1,4,53,32,53,2,7,5,9,7,6,45,56,56,78];

//去除数组中重复的数字

//获取数组中的每一个元素
for (var i = 0;i < arr.length;i++){
  //获取当前元素后的所有元素
  for (var j = i+1;j < arr.length-i;i++){
    //判断俩个元素是否相等
    if (arr[i] ==arr[j]){
      //如果相等，则证明出现了重复的元素，则删除j对应的元素
      arr.splice(j,1);
      //当删除了当前j所在的元素以后，后面的元素会自动补位
      //此时将不会比较这个元素，需要再一次比较j所在位置的元素
      //使j自减
      j--;
    }
  }

}
console.log(arr);

image.png

call()和apply()

• 这俩个方法都是函数对象的方法，需要通过函数对象来调用
• 当对函数调用call（）和apply都会调用函数执行
• 在调用call（）和apply（）可以将一个对象指定为第一个参数
  此时这个对象将会成为函数执行时的this
• call（）方法可以将实参在对象之后依次传递
• apply（）方法需要将实参封装到一个数组中统一传递
• this的情况
  1、以函数形式调用时，this永远是window
  2、以方法形式调用时，this是调用方法的对象
  3、以构造函数的形式调用时，this是新创建的那个对象
  4、使用call（）和apply（）调用，this是指定的那个对象

fun()=fun.call()=fun.apply

Arguments

• 在调用函数时，浏览器每次会传递进俩个隐含的参数
  1、函数的上下文对象this
  2、封装实参对象arguments
• arguments是一个类数组对象，他也可以通过索引来操作数据，也可以获取长度
• 在调用函数时，我们所传递的实参都会在arguments保存
• arguments.length可以用来获取实参的长度
• 我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
  arguments[0] 表示第一个实参
  arguments[1] 表示第二个实参
• 他里边 有一个属性叫做callee
  这个属性对应一个函数对象，就是当前正在指向的 函数的对象

function fun(a,b) {
  console.log(arguments instanceof Array);
  console.log(Array.isArray(arguments));
  console.log(arguments[1]);
  console.log(arguments.length);
  console.log(arguments.callee);
}
fun("helkl","aFEWQA");

image.png