Java Script 2.0数组专栏

# 数组 Array

数组 array: 数据的有序集合
用 typeof 检测数组 结果是 object

# 数组的创建

var arr = new Array(30); //创建了长度为30的数组
var users = ["赵四", "王五", "张三"];
var nums = [1, 2, 3, 4, 5, 6, 7, 8];
var goodsArr = [
  { goodsName: "iphone", goodsPrice: 9999 },
  { goodsName: "HuaWei", goodsPrice: 19999 },
];
var arr = [
  [1, 2],
  [3, 4],
];

# 数组的元素

数组的下标 (索引) 从 0 开始

var nums = [1, 2, 3, 4, 5, 6];
// 获取第六个数字
var sixNum = nums[5];
console.log(sixNum); //6

var sixNum = nums[8];
console.log(sixNum); // undefined

// 修改
nums[5] = 100;

// 相当于添加
nums[7] = 7;
console.log(nums); // [1, 2, 3, 4, 5, 100, empty, 7]

# 数组的属性和方法

var numArr = [5, 6, 7, 8, 9];
//  length 属性  获取数组的长度 也就是元素个数
var len = numArr.length;
console.log(len); //5

numArr.length = 3;
// 如果直接给 length 属性赋值的话,就是向数组内增加 empty
// 或者删除后面的元素 ，一般不会使用
console.log(numArr); //(3) [5, 6, 7]

# 直接使用大写的 Array 下的方法

1.Array.isArray(值)  检测这个值是否是数组,是数组返回 true 不是的话返回 false

2.Array.from()将伪数组转成真数组 用的很少
aLis = Array.from(arr)

3.Array.of() 用来创建数组的 用的很少

# 创建好的数组下的方法

方法四要素 1. 该方法是哪个谁 (哪个对象) 的 2. 该方法干什么的 (功能) 3. 该方法的返回值 4. 该方法修不修改原来的对象

push, pop, unshift, shift, splice, reverse, sort修改原数组;
slice, concat, indexOf, includes, join, filter不修改原数组;

# var arr = [1, 2, 3, 4, 5, 6];

# arr.push (值，值，值…)

向数组 后面添加 一个或多个元素，并 返回数组的新长度并修改了原数组

var num = arr.push(7, 8, 9, 10);
console.log(arr); //1,2,3,4,5,6,7,8,9,10
console.log(num); //10

# arr.pop()

删除 数组内的 最后 一个元素，并 返回被删除的元素,修改了原数组

var num1 = arr.pop();
console.log(arr); //1,2,3,4,5,6,7,8,9
console.log(num1); //10

# arr.unshift (一个或多个值)

向数组的 前面添加 一个或多个元素，并 返回数组的新长度,修改了原数组

var num2 = arr.unshift(-1, 0);
console.log(arr); //-1,0,1,2,3,4,5,6,7,8,9
console.log(num2); //11

# arr.shift()

删除 数组内的 第一个 元素，并 返回被删除的元素,修改了原数组

var num3 = arr.shift();
console.log(arr); //0,1,2,3,4,5,6,7,8,9
console.log(num3); //-1

# arr.splice(a,b,c)

数组的删除或添加， 返回被删除的元素组成的数组或者空数组,修改了原数组
a 代表删除或者添加的起始位置
b 代表删除的个数 0 代表不删除
c 代表添加的元素 c 可以省略也可以加多个 c 省略的话就是删除不是添加
在 a 位置删除 b 个元素，并添加上 c
只写起始位置代表从起始位置一直删除到最后

// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
var newArr = arr.splice(0, 2, 2, 3);
console.log(arr); //[2, 3, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newArr); //[0,1]

var newArr = arr.splice(0, 0, -2, -1);
console.log(arr); //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newArr); //[] 因为没被删除所以是空数组

# arr.slice(begin,end)

数组的截取,返回截取后的数组,不修改原数组
[begin,end)
写 负数 的话代表的是 倒数第几个 的截取
end 可以省略，那么就截取到 末尾

arr.slice(0);
// 拷贝arr数组;

var newArr1 = arr.slice(1, 5);
console.log(arr); //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newArr1); //[-1, 0, 1, 2]

# arr.concat (一个或多个数组)

数组的 拼接 ， 返回拼接之后数组,原数组不变

// 拷贝数组：var arr1 = [].concat(arr)
var newArr2 = arr.concat([10, 11, 12]);
console.log(arr); //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newArr2); //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

# arr.indexOf (值)

检测 该值是否在数组中存在 ，如果存在的话 返回位置 ， 不存在 的话返回 -1 , 原数组不变

var ind = arr.indexOf(5);
console.log(arr); //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(ind); //7

# arr.includes (值)

检测该值是否在数组中存在，如果存在的话返回 true ，不存在的话返回 false , 原数组不变

var bool = arr.includes(55);
console.log(arr); //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(bool); // false

# arr.reverse()

颠倒数组 顺序，返回结果， 原数组也颠倒了 ，修改了原数组

var newArr3 = arr.reverse();
console.log(arr); //[9,8,7,6,5,4,3,2,1,0,-1,-2]
console.log(newArr3); //[9,8,7,6,5,4,3,2,1,0,-1,-2]

# arr.sort (函数或者不写)

对数组进行排序， 不写的话按照首字符(从小到大)排序 ，修改了原数组

写函数的话要写成 function(a,b){return a-b} 就是从小到大排序(升序) b-a 从大到小(降序)
a 和 b 分别代表数组内相邻的元素

var arr1 = [123, 23, 5, 6, 34, 78, 323, 5, 9];
var newArr4 = arr1.sort();
console.log(arr1); //[123,23,323,34,5,5,6,78,9]
console.log(newArr4); //[123,23,323,34,5,5,6,78,9]

var arr1 = [123, 23, 5, 6, 34, 78, 323, 5, 9];
var newArr4 = arr1.sort(function (a, b) {
  return b - a;
});
console.log(arr1); //[323,123,78,34,23,9,6,5,5]
console.log(newArr4); //[323,123,78,34,23,9,6,5,5]

# arr.join (值)

将数组使用该值拼接成字符串， 返回新的字符串 ，原数组不变， 不设置 值就会使用 ,(逗号) 拼接

var arr2 = [1, 3, 5, 7, 9];
var str = arr2.join("");
console.log(arr2); //[1,3,5,7,9]
console.log(str); //13579

# sort 排序案例

var users = [
  {
    username: "小张",
    age: 25,
    gl: 10,
  },
  {
    username: "小王",
    age: 26,
    gl: 16,
  },
  {
    username: "小赵",
    age: 24,
    gl: 4,
  },
];
// 给 users 数组按照年龄排序
users.sort(function (a, b) {
  return a.age + a.gl - (b.age + b.gl);
});
console.log(users);

# .some()

检测数组中 是否存在满足条件(至少存在一个) 的元素，返回 true 或 false 和 .every() 差不多

# .every () 方法

检测数组内的 所有元素 是否满足条件，条件写在函数的返回值内，返回 true 或者 false

注意：当数组为空的时候，every 的结果是 true

var numbers = [1, 3, 5, 7, 9];
var res = numbers.every(function (ele, ind, array) {
  // 在这可以做任何操作
  return ele % 2 === 1;
});
console.log(res); //true

# .find()

查找数组中 第一个满足条件 的元素，否则返回 undefined

var arr = [1, 2, 3, 7, 5];
var res = arr.find(function (ele) {
  return ele > 3;
});
console.log(res); //7

# .findIndex()

查找数组中 第一个满足条件的元素索引 ，否则返回 -1

var users = [
  {
    name: "小二",
    age: 24,
  },
  {
    name: "小二1",
    age: 18,
  },
  {
    name: "小二2",
    age: 30,
  },
];
var ind = users.findIndex(function (ele) {
  return ele.age > 26;
});
console.log(users[ind]); //{name: "小二2", age: 30}

# .filter()

数组的筛选，筛选出满足条件的元素组成的数组， 如果没有满足条件的数组，返回空数组 ，不修改原数组

var newUsers = users.filter(function (ele) {
  return ele.age < 24;
});
console.log(newUsers); //将 name 为 "小二1" 的 元素作为数组返回

# .map 映射 (一一对应)

根据给定的条件生成新的数组

var nums = [1, 2, 3];
var newNums = nums.map(function (ele) {
  return ele * ele;
  // map 函数的返回值就是对应的新数组内的元素
});
console.log(newNums); //[1,4,9]

# .reduce () 累加器

reduce 方法接收两个参数
第一个参数是函数 该函数可接收四个参数 1 最终结果(累加器)
234 分别代表 ele ind array , 该函数必须设置一个返回值 (return), 这个返回值是新的最终结果
第二个参数是 最终结果的初始值 你想要获取什么内容，就设置对应的初始值 数字是 0 字符串是空字符串等等

var arr = [10, 1, 2, 3];
var res = arr.reduce(function (res, ele) {
  return res + ele;
}, 0);
console.log(res); //16

var newArr = arr.filter(function (ele) {
  return ele % 2 === 1;
}); //(2) [1, 3]
var newArr = arr.reduce(function (res, ele) {
  if (ele % 2 === 1) {
    res.push(ele);
  }
  return res;
}, []);
console.log(newArr); //(2) [1, 3]

# forEach (函数) 数组的遍历

function 可以设置三个参数 (形参)

1.element 查找到的元素 2. index 该元素的索引 3. 原数组

var numbers = [11, 22, 33, 44, 55, 66, 77, 88];
// 依次查找数组内的元素,每次查找到执行 function 内的内容

numbers.forEach(function (element, index, array) {
  console.log(element);
});

# 对象的遍历

//对象遍历
var person = {
  username: "钢铁侠",
  age: 18,
  sex: "男",
};

// 1.for...in

for (var i in person) {
  // i  是当前遍历到的属性(变量名)
  document.write("对象遍历：" + i + ", " + person[i] + "<br/>");
  console.log(person[i]); //当对象的属性名存在了一个变量内，想要访问属性值 person[i]
}

// 2. Object.keys(对象)  获取对象内的 所有属性名的集合
var keys = Object.keys(person);
for (var i = 0; i < keys.length; i++) {
  person1[keys[i]] = person[keys[i]];
}

# 对象的存储和比较

当 对象类型 的数据进行 比较 的时候，比较的是数据的 地址 并不是里面的 值
对象数据类型在浏览器中存储方式和普通的数据存储方式不一样，对象存储的是 地址 ，而其他存储的是 值

var a = 10;
var b = 10;
console.log(a === b); //true

var obj = {
  name: "小二",
};
var obj1 = obj;
obj.age = 30;
console.log(obj1 === obj); //true

console.log(
  {
    name: "小二",
    age: 30,
  } === obj
); //false

# 对象的合并

Object.assign (obj1,obj2,obj3……) 将 第一个参数后面的 所有对象 合并到第一个参数 内
重名的属性后面的覆盖前面的 (constructor 没有被覆盖)
Object.assign 只拷贝 自身属性 ， 不可枚举的属性 （enumerable 为 false）和 继承的属性 不会被拷贝。

var obj = { name: "哈哈哈", a: "hello", age: 20 };
var obj1 = { age: 10 };

Object.assign(obj1, obj); //将obj合并到obj1

// 2. 使用高级 js 语法 ... 展开运算符(三个点，不是省略号)
// 合并 obj1 和 obj 到 newObj
var newObj = { ...obj1, ...obj };
console.log(newObj);

# 冒泡排序

var arr = [23, 5, 78, 3, 5, 90, 35, 69, 1, 8];
for (var i = 0; i < arr.length - 1; i++) {
  for (var j = 0; j < arr.length - 1 - i; j++) {
    if (arr[j] > arr[j + 1]) {
      var dashu = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = dashu;
    }
  }
}

# 选择排序

for (var i = 0; i < arr.length - 1; i++) {
  for (var j = 1 + i; j < arr.length; j++) {
    if (arr[i] > arr[j]) {
      var xiaoshu = arr[j];
      arr[j] = arr[i];
      arr[i] = xiaoshu;
    }
  }
}

# 数组去重

var arr = [1, 2, 3124, 12, 1, 1, 1, 1, 2, 451, 23, 313, 4, 5, 1];
// 第一种
// 第一个数和后面的数进行比较相同的话删除后面的数
// 第二数和后面的数再次比较在删除
for (var i = 0; i < arr.length - 1; i++) {
  for (var j = 1 + i; j < arr.length; j++) {
    if (arr[i] === arr[j]) {
      // 删除 arr[j] 怎么实现    splice,并且splice会修改原数组
      arr.splice(j, 1);
      j--;
      // j--是关键
    }
  }
}

// 第二种 先创建一个空数组，然后循环判断数组中是否有当前这个值
var res = [];
for (var i = 0; i < arr.length; i++) {
  if (!res.includes(arr[i])) {
    res.push(arr[i]);
  }
  // 或者
  // if (res.indexOf(arr[i]) < 0) {
  //   res.push(arr[i]);
  // }
}

// 第三种 使用 Set 集合
var arr = [10, 20, 30, 40, 50, 40, 30, 20, 10];
arr = [...new Set(arr)];
alert(arr);

# 数组的拷贝

slice map filter

var arr = [1, 2, 3];
var arr1 = arr.slice(0);
var arr3 = arr.map(function (ele) {
  return ele;
});
var arr4 = arr.filter(function (ele) {
  return true;
});
console.log(arr === arr1); //false
console.log(arr === arr3); //false
console.log(arr4); //(3) [1, 2, 3]

var books = [
  {
    bookName: "红楼梦",
    date: "xx-xx-xx",
  },
  {
    bookName: "西游记",
    date: "aa-aa-aa",
  },
  {
    bookName: "水浒传",
    date: "bb-bb-bb",
  },
];
var newBooks = books.slice(0);
newBooks[0].date = "yy-yy-yy";
console.log(newBooks);
console.log(newBooks[0] === books[0]); //true 因为上边拷贝的是最外层的大地址，没有拷贝里边的
console.log(books[0]); //{bookName: "红楼梦", date: "yy-yy-yy"}