数组知识整合

数组

  • 数据结构(数据的结构形态,数据表现时的形态方式)

    var a = 1;
    var b = 2;
    var c = 3;
    var d = 4;
    
    var obj = { a: 1, b: 2, c: 3, d: 4 };
    
  • 不关心 key,只关心值,并且希望值可以排序,希望可以统计到数据的数量

  • ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

  • 数组,数据组合,一组数据

    var arr = [1, 2, 3, 4];
    

数组如何创建

  1. 字面量创建
    var arr = [1, 2, 3, 4];
    var arr = [1, , 2, undefined, 3, 4];
    
  2. 实例化(函 shu)创建(按照实际案例的格式化创建出来)
    var arr = new Array();
    var arr = new Array(10); //建立了一个长度为10空数组,里面有10个空元素
    
    • 使用 new Array 或者 Array 时,如果,参数只有一个并且是数值类型,这个数值就是数组创建的长度,并且放入对应个数的空元素,所以这个数值必须是正整数,如果是小数或者负数时,就会抛出错误
      (Invalid array length 长度错误)
      function fn() {
        // 抛出错误
        // throw new Error("错误");
        // throw new TypeError("数据类型错误")
        // throw new RangeError("Invalid array length");
        // console.error("错误")
      }
      fn();
      console.log("aa");
      var arr = new Array(-2);
      
  3. 构造函数创建
    var arr = Array();
    
  • 对象创建法(用的不多)
    var arr = new Object([1, 2, 3]);
    

数组的下标和长度

  • var arr=[1,2,3,4];

  • 数组里面的所有内容称为元素,简称元

  • 每个元素,对应的一个索引数,这个索引数叫做下标

  • 根据变量[下标]就可以获取到这个变量数组的下标所对应索引的元素

    console.log(arr[0]);
    
    arr[0] = 1;
    //1 元素
    //arr 数组变量
    //0 下标 索引值
    //arr[0]  下标变量
    
  • 下标是从 0 开始,第一个元素对应的下标是 0

  • 因为这个 100 表示第 101 个元素,因此,数组先有 101 个元素,可是原数组只有 4 个元素,就会自动生,成 96 个元素,在里面,这些都是空元素

    var arr = [1, 2, 3, 4];
    arr[100] = 20;
    //输出结果是 ➡(101) [1, 2, 3, 4, 空属性 × 96, 20]
    

length (长度 数组的元素数量)

  • length 是最大下标+1 最大下标=length-1

    console.log(arr.length);
    
    //在末尾添加一个元素1
    arr[arr.length] = 1;
    
  • 如果设置的 length 的长度比原有的长度大,这就会将数组的元素数量增多,并且补充空元素在数组末尾

    var arr = [1, 2, 3, 4];
    arr.length = 10;
    
  • 如果设置的 length 的长度比原有的长度小,这就将数组的元素进行删除,只保留给定的长度

    var arr = [1, 2, 3, 4];
    arr.length = 2;
    
  • 如果设置 length 为 0 时,表示清空数组

        var arr=[1,2,3,4];
        arr.length=;
    
  • 如果设置 length–时,表示删除数组的最后一个元素

    var arr = [1, 2, 3, 4];
    arr.length--;
    

push

  • 给数组的尾部添加多个元素,并且返回数组的新长度,改变原数组

    var arr = [1, 2, 3, 4, 5];
    
    //arr.push(6);
    arr.push(6, 7, 8);
    var len = arr.push(6, 7, 8);
    console.log(arr, len);
    
    var arr = Array(10);
    arr.push(1);
    console.log(arr);
    
    var arr = [];
    var i = 1;
    while (arr.length <= 10) {
      arr.push(i);
      i++;
    }
    console.log(arr);
    
    var arr = [];
    var i = 1;
    while (arr.push(i++) <= 10);
    console.log(arr);
    
  • unshift 在数组的最前面添加一个或多个元素,并且返回数组的新长度,改变原数组,每往前面添加一个元素,会往数组最后添加一个空间,把原元素整体往后挪一位,当第一个空间没有值,再给这个空间添加新元素,效率太低,尽量少用

  • pop 删除数组尾部的一个元素,并且返回这个删除的元素,改变原数组

    var arr = [1, 2, 3, 4, 5, 6, 7];
    for (var i = 0; i < arr.length; i++) {
      arr.pop();
    }
    console.log(arr);
    
    //当长度是3时,i的值已经是4不再满足条件,停止循环
    //所以有两种方法解决:
    
    var len = arr.length;
    for (var i = 0; i < len; i++) {
      arr.pop();
    }
    console.log(arr);
    
    while (arr.length > 0) arr.pop();
    console.log(arr);
    

shift

  • 删除数组头部的一个元素,并且返回这个删除的元素,改变原数组 arr.shift()

concat

  • 将多个数组及元素,合并为一个新数组,原数组不发生改变

    //连接一个数组
    var arr2 = arr.concat(arr1);
    //连接多个数组
    var arr2 = arr.concat(arr1, [9, 10, 11]);
    //连接多个数组及元素
    var arr2 = arr.concat(arr1, 9, 10, [11, 12], 13);
    //复制一个新数组,浅复制
    var arr2 = arr.concat();
    

toString

  • 将数组转换为字符串,使用,连接每个元素

  • 数组隐式转换为字符串时,会自动调用 toString

    // var obj={};
    // obj[arr]=1;
    // console.log(obj)
    
    // var obj={};
    // var arr=["a"];
    // 因为转换为字符串变成"a"
    // obj[arr]=3;
    // console.log(obj.a);
    
    var arr = [];
    // 因为是空数组,转换为字符串时会变成""
    console.log(arr.toString());
    console.log([] == ""); //true
    console.log([] == false); //true
    console.log([] == 0); //true
    console.log([] == [].length); //true
    console.log([] == []); //false
    
    //""==false
    console.log([] == ![]); //![]  []是一个引用类型,直接转换为布尔值时就是true  !true-->false
    

join

  • 将数组以给入的参数作为间隔符连接为一个字符串,如果间隔符是空字符串,则将每个元素紧密连接在一起,返回这个字符串,原数组不发生改变

    var arr = [1, 2, 3, 4];
    //var str=arr.join("|");
    var str = arr.join("");
    console.log(str);
    
    console.log(arr.join("+"));
    
    var arr = ["FF", "00", "00"];
    console.log("#" + arr.join(""));
    

slice

  • 将数组中第几位开始到第几位之前的所有元素截取返回一个新数组,原数组不变

  • slice(开始位置,结束位置)

    • arr.slice(); 开始位置没有赋值,结束位置也没有赋值,开始位置默认从 0 开始,结束位置默认到数组尾部,这样做可以复制数组
    • var arr1=arr.slice(2);结束位置也没有赋值,结束位置默认到数组尾部
    • 开始和结束位置都可以给负数,负数就是倒数第几位,也可以使用 arr.length+(负数)
var arr=["a","b","c","d","e"];
var arr1=arr.slice(1,4);
console.log(arr1)

var arr=["a","b","c","d","e"];
   var arr1=arr.slice();
   arr[0]="z";
   console.log(arr1,arr);

var arr=["a","b","c","d","e"];
var arr1=arr.slice(2);
console.log(arr1);

var arr=["a","b","c","d","e"];
   var arr1=arr.slice(-3);
console.log(arr1);
var arr1=arr.slice(-1);
console.log(arr1);

var item=arr.slice(-1)[0];
console.log(item)
//连缀 用前面方法返回得到结果用于后面的方法
var str=arr.slice(-3).join("");
console.log(str);

var arr1=arr.slice(2).concat("f")
console.log(arr1);

splice

  • 在数组中删除,替换,插入,新的多个元素,改变原数组,并且返回一个由删除元素组成的新数组

    • arr.splice(开始位置,删除几个,插入的元素…);

    • var arr1=arr.splice();如果没有开始位置,不会删除元素,返回一个空数组

    • var arr1=arr.splice(2); 如果只有开始位置,没有删除几个,就会删除到数组的尾部

    • var arr1=arr.splice(1,2);从下标为 1 的位置开始删除 2 个元素,返回被删除的这两个元素

    • var arr1=arr.splice(1,2,“z”); 从下标为 1 的位置开始删除 2 个元素,并且在这个位置插入一个字符 z,返回被删除的两个元素组成的新数组

    • var arr1=arr.splice(1,2,“y”,“z”);

    • var arr1=arr.splice(1,0,“y”,“z”); 如果删除的数量为 0 时,表示不删除,在这个位置插入 y,z 两个字符,并且返回一个空数组

遍历

var arr = ["a", , "b", "c", "d", "e", "f"];

console.log("for遍历");
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i], i);
}
console.log("for in遍历");
for (var index in arr) {
  console.log(arr[index], index);
}
    1. for 会遍历到空元素,但是 for in 不会遍历到
    • for in 遍历时 主要是针对对象的,目的是遍历 key value 这种键值对,因此 for in 使用变量会自动转换为字符串,数组是由对象创建来的,所以可以理解为数组中的下标就相当于对象中 key,元素相当于对象中 value,for in 的前提必须是键值对,也就是说必须有键有值,数组中空元素,仅有下标没有值,不能称为键值对,因此,在 for in 中不做遍历
    1. for 循环时仅遍历数组的元素,但是 for in 循环时会遍历到数组元素之外的数组属性
    var arr = ["a", , "b", "c", undefined, "d", "e", "f"];
    arr.a = 10;
    for (var i = 0; i < arr.length; i++) {
      if (i in arr) console.log(arr[i]);
    }
    //在这里的话,if(i in arr)是判断元素在数组中成没成键值对,也就是过滤空元素(空元素只有键没有值)
    

forEach

  • 遍历数组的每个元素,并且执行 forEach 函数中回调函数 arr.forEach(回调函数) 回调函数中里面有 3 个参数,分别对应的是数组的元素,下标,数组本身

    arr.forEach(function (item) {});
    

map

  • 遍历数组的每个元素,并且执行 map 函数中回调函数,将这个回调函数中 return 的结果分别存储在一个新数组的当前下标对应位置,并且返回这个新数组,原数组不改变
    var arr1 = arr.map(function (item) {
      return value;
    });
    

forEach 和 map 的区别

  • forEach 仅遍历数组的每个元素,map 不但遍历数组的每个元素,还会将回调函数 return 返回的结果放在一个新数组对应下标的位置,返回这个新数组,map 使用后,返回的新数组与数组的长度相等如果没有使用 return,则该项就是 undefined

indexOf

  • arr.indexOf(元素,从下标第几位开始向后查找)
  • 查找元素所对应的下标,如果找到了就返回找到第一个下标,如果没有找到返回-1

lastIndexOf

  • arr.lastIndexOf(元素,从下标第几位开始向后查找)
  • 从后向前查找元素所对应的下标,如果找到了就返回找到第一个下标,如果没有找到返回-1

includes

  • arr.includes(元素);
  • 判断当前数组中是否有这个元素,如果有返回 true,否则返回 false

some

  • 数组中是否有满足条件的,返回布尔值,如果遇到一个满足条件的就会直接跳出
var arr = [1, 2, 3, 4, 5, 6, 7];
var bool = arr.some(function (item, index, arr) {
  return item > 4; //判断每个元素是不是都大于4
});

every

  • 数组中是否所有元素都满足条件,返回布尔值,如果遇到一个不满足条件的就会直接跳出
var arr = [1, 2, 3, 4, 5, 6, 7];
var bool = arr.every(function (item, index, arr) {
  return item > 2; //判断所有元素是不是都大于2
});

filter

  • 筛选数组中满足条件的元素,返回满足条件元素组成的数组
var arr = [1, 2, 3, 4, 5, 6, 7];
var arr1 = arr.filter(function (item, index, arr) {
  return item > 3; //把所有大于3的元素都放在arr1中
});
var arr = [
  { id: 1001, name: "计算机1", price: 1200, num: 1 },
  { id: 1002, name: "计算机2", price: 3200, num: 1 },
  { id: 1003, name: "计算机3", price: 6800, num: 1 },
  { id: 1004, name: "计算机4", price: 7200, num: 1 },
  { id: 1005, name: "计算机5", price: 13000, num: 1 },
];

var arr1 = arr.filter(function (item) {
  return item.price > 5000;
});
console.log(arr1);

var arr1 = arr.filter(function (item) {
  return item.id === 1003;
});
var o = arr1[0];
console.log(o);

find

  • 在数组中找到满足条件的第一个元素,返回,并且不在继续向后循环
var o = arr.find(function (item) {
  return item.id === 1003;
});

reduce

  • 归并,返回一个元素
var arr = [12, 13, 14, 15, 16, 17];

//reduce return结果会传递给下一次遍历时的value,遍历完成后返回最终value值

var sum = arr.reduce(function (value, item, index, arr) {
  console.log(value, item, index, arr);
  return value + item;
});
console.log(sum);
  • 用 reduce 求和
var arr = [12, 13, 14, 15, 16, 17];
//求和
var sum = arr.reduce(function (v, t) {
  return v + t;
});
console.log(sum);
  • 用 reduce 从初始值是一百开始求和
  • 如果有 reduce 的初始值,value 开始就是这个初始值,并且 item 会从第 0 项开始遍历
// 如果有reduce的初始值,value开始就是这个初始值,并且item会从第0项开始遍历
var arr = [12, 13, 14, 15, 16, 17];
var sum = arr.reduce(function (value, item, index) {
  console.log(value, item, index);
  return value + item;
}, 100);
console.log(sum);
  • 数据驱动显示
// 数据驱动显示
var arr = [
  { site: "网易", url: "http://www.163.com" },
  { site: "腾讯", url: "http://www.qq.com" },
  { site: "淘宝", url: "http://www.taobao.com" },
  { site: "京东", url: "http://www.jd.com" },
  { site: "百度", url: "http://www.baidu.com" },
  { site: "小米", url: "http://www.mi.com" },
  { site: "华为", url: "http://www.huawei.com" },
];
var ul = document.getElementById("ul");
ul.innerHTML = arr.reduce(function (value, item) {
  return value + "<li><a href='" + item.url + "'>" + item.site + "</a></li>";
}, "");
//初始值是空字符串
  • 用 reduce 替代 map
// map输出新数组
var arr = [1, 2, 3, 4, 5];
var arr1 = arr.map(function (item) {
  return item + 10;
});
// 用reduce替代map
var arr1 = arr.reduce(function (value, item) {
  value.push(item + 10);
  return value;
}, []);
console.log(arr1);
  • 用 reduce 替代 some
var arr = [1, 2, 3, 4, 5];

var bool = arr.some(function (item) {
  return item > 3;
});

//  用reduce替代some

var bool = arr.reduce(function (v, t) {
  if (t > 3) v = true;
  return v;
}, false);
console.log(bool);
  • 用 reduce 替代 every
var bool = arr.every(function (item) {
  return item > 3;
});

//用reduce替代every

var bool = arr.reduce(function (v, t) {
  if (t <= 3) v = false;
  return v;
}, true);
  • 用 reduce 去重
//去重
var arr = [1, 2, 2, 3, 4, 4, 5, 6, 5, 6, 7, 8, 9];
var arr1 = arr.reduce(function (v, t) {
  if (v.indexOf(t) < 0) v.push(t);
  return v;
}, []);
console.log(arr1);
var arr = [
  { id: 1001, name: "计算机1", price: 1200, num: 1 },
  { id: 1002, name: "计算机2", price: 3200, num: 1 },
  { id: 1003, name: "计算机3", price: 6800, num: 1 },
  { id: 1004, name: "计算机4", price: 7200, num: 1 },
  { id: 1005, name: "计算机5", price: 13000, num: 1 },
];

//筛选price大于5000的数组,替代filter,返回的是数组
var arr1 = arr.reduce(function (v, t) {
  if (t.price > 5000) v.push(t);
  return v;
}, []);
console.log(arr1);

//筛选id 是 1003的对象,替代find,返回的是对象
var o = arr.reduce(function (v, t) {
  if (t.id === 1003) v = t;
  return v;
}, null);
console.log(o);
// var arr=[[1,2,3],[5,6,7],8,9];
// // 扁平化数组
// var arr1=arr.flatMap(function(item){
//     return item;
// });
// console.log(arr1);

var arr = [[1, 2, 3], [4, 5, 6], 7, 8, 9, [[11, 12], [13, 14], 15]];

// 扁平化数组
function flat(arr, target) {
  if (!target) {
    target = [];
  }
  for (var i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      flat(arr[i], target);
    } else {
      target.push(arr[i]);
    }
  }
  return target;
}

var arr1 = flat(arr);
console.log(arr1);

fill

  • 填充数组
  • arr.fill(值,从什么位置开始填充,到什么下标之前结束)
// fill
var arr = Array(6);

var arr = [];
arr[3] = 2;
arr.length = 20;

arr.fill(10);
console.log(arr);

var arr = Array(10);
arr.fill(1, 5);
arr.fill(1, 2, 6);
console.log(arr);

Math.random()

  • 随机数 Math.random()
  • 随机颜色
// console.log(Math.random())//0-1

var div = document.getElementById("div1");
div.onclick = function () {
  div.style.backgroundColor = Array(6)
    .fill(1)
    .reduce(function (value, item) {
      return value + parseInt(Math.random() * 16).toString(16);
    }, "#");
};

reverse

  • 反转数组,改变原数组,并且返回这个原数组
// 数组反转
var len = parseInt(arr.length / 2);
for (var i = 0; i < len; i++) {
  var temp = arr[i];
  arr[i] = arr[arr.length - 1 - i];
  arr[arr.length - 1 - i] = temp;
}
console.log(arr);

Aarry 的静态方法(Array.isArray())

  • arr.puth() 实例化方法
  • **Array.isArray();静态方法;**判断给入的内容是不是数组
  • arr.constructor===Array;判断这个变量的构造函数是不是 Array
  • Array.from()将迭代器对象转换成数组(ES6)
    • iterable 迭代器
    • 常用的迭代器有:HTMLCollection arguments NodeList Set Map
var divs = document.getElementsByClassName("div1");
var arr = Array.from(divs);
console.log(arr.pop());
console.log(divs);

function fn() {
  console.log(Array.from(arguments));
  console.log(arguments);
}
fn(1, 2, 3, 4, 5, 6);
//可以将迭代器对象转换为数组(ES5)
var arr = Array.prototype.slice.call(divs);
var arr = Array.prototype.concat.apply([], divs);
console.log(arr);
  • 可以将迭代器对象转换为数组(ES5)
    • var arr=Array.prototype.slice.call(divs);
    • var arr=Array.prototype.concat.apply([],divs);
      console.log(arr)

sort 排序

  • arr.sort()
var arr = [1, 4, 5, 3, 2, 11, 15, 6, 7, 9, 1, 12, 3, 1, 22, 8, 9];
// arr.sort();
// console.log(arr);
arr.sort(function (a, b) {
  return a - b; //从小到大排序
  return b - a; //从大到小排序
});
console.log(arr);

var arr = [
  { id: 1001, name: "计算机1", price: 1200, num: 1 },
  { id: 1002, name: "计算机2", price: 3200, num: 1 },
  { id: 1003, name: "计算机3", price: 6800, num: 1 },
  { id: 1004, name: "计算机4", price: 7200, num: 1 },
  { id: 1005, name: "计算机5", price: 13000, num: 1 },
];
arr.sort(function (a, b) {
  return b.price - a.price;
});
console.log(arr);

var arr = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
];
arr.sort(function () {
  return Math.random() - 0.5;
});
算法
  • 冒泡算法
for (var j = 0; j < arr.length - 1; j++) {
  for (var i = 0; i < arr.length - j - 1; i++) {
    if (arr[i] > arr[i + 1]) {
      var temp = arr[i];
      arr[i] = arr[i + 1];
      arr[i + 1] = temp;
    }
  }
}
console.log(arr);
//找最大的往后放
  • 选择排序
// 选择排序

for (var i = 0; i < arr.length; i++) {
  var min = i;
  for (var j = i + 1; j < arr.length; j++) {
    if (arr[min] > arr[j]) {
      min = j;
    }
  }
  if (i !== min) {
    var temp = arr[i];
    arr[i] = arr[min];
    arr[min] = temp;
  }
}
console.log(arr);
//直到比较完才交换,找最小的往前放

  • 快速排序
function qSort (arr) {
	if (arr.length == 0) {
		return []
	}
	var left = []
	var right = []
	var pivot = arr[0]
	for (var i = 1; i < arr.length; i++) {
		if (arr[i] < pivot) {
			left.push(arr[i])
		} else {
			right.push(arr[i])
		}
	}
	return qSort(left).concat(pivot, qSort(right))
}

二维数组

// 二维数组

var arr = [
  [1, 2],
  [3, 4],
];

var arr = [];
for (var i = 0; i < 10; i++) {
  arr[i] = [];
  for (var j = 0; j < 10; j++) {
    arr[i][j] = i * 10 + j;
  }
}

console.log(arr[4][5]);

//arr[3][4]-->arr[3][5];

对象型数组

  • 不能用 typeof 查询
// 对象型数组
var arr = [
  { id: 1001, name: "计算机1", price: 1200, num: 1 },
  { id: 1002, name: "计算机2", price: 3200, num: 1 },
  { id: 1003, name: "计算机3", price: 6800, num: 1 },
  { id: 1004, name: "计算机4", price: 7200, num: 1 },
  { id: 1005, name: "计算机5", price: 13000, num: 1 },
];
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小码~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值