对象和数组

主要内容：

1. 对象
2. 数组

一、Object

创建对象的两种方式

// first style
let person = new Object();
person.name = "Wangzz";
person.age = 23;
 
// ★【首选】 second style
let person = {
  name: "Wangzz",
  age: 23
}

访问对象的两种方式

// ★【首选】 first style
console.log("person's name: " + person.name);
 
// second style
console.log("person's name: " + person["name"]);
 

二、Array

创建数组

// 对象形式创建数组
let colors = new Array();
 
let colors = new Array(20);
 
let colors = new Array("red", "pink", "green");
 
// ★【首选】字面量形式创建数组
let colors = []；
 
let colors = ["red", "pink", "green"];
 

• Array.from()对数组中每一个元素进行操作

const arr01 = [1, 2, 3, 4];
const arr02 = Array.from(arr01, x => **2); // [1, 4, 9, 16]
const arr03 = Array.from(arr01, function(e) {
  return 1 + e;
}); // [2, 3, 4, 5]

• Array.of()把一组参数转换为数组

const arr03 = Array.of(1, 2, 3, 4); // [1, 2, 3, 4]

数组转换

// 所有对象都有toLocaleString()、toString()、valueOf()方法
 
let colors = ["red", "blue", "green"];
console.log(colors.toString()); // red,blue,green
console.log(colors.valueOf()); // red,blue,green
console.log(colors.join("<"); // red<blue<green
console.log(colors.join("||")); // red||blue||green

数组栈方法=》 后进先出(LIFO,Last-In-First-Out)结构 【push() 和 pop()】

color = [];
color.push("red","white","black");
color.pop(); // black

队列方法 =》 先进先出(FIFO,First-In-First-Out)结构【shift() => 取出第一项 和 push()】

let colors = new Array();
 
let count = colors.push("red", "green");
console.log(count.shift()); // red
console.log(count.length); // 2
 
// shift()取出第一项 pop()取出最后一项
 

排序方法 => reverse() 和 sort()

let values = [1, 2, 3, 4, 5];
values.reverse(); // 5, 4, 3, 2, 1
 
let values = [3, 1, 7, 4, 5];
values.sort(); // 1, 3, 4, 5, 7

操作方法： concat()方法在现有数组基础上创建当前数组的副本然后把它的参数添加到副本末尾

let colors = ["red", "green", "blue"];
let colors = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // red, green, blue, yellow, black, brown

方法slice()创建一个包含原有数组中一个或多个元素的新数组

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1); // green,blue,yellow,purple
let colors3 = colors.slice(1,4); // green,blue,yellow

slice 切片 splice 缝合
★ splice 在数组中间插入元素, 有3中不同的方式使用这个方法

1. 删除。 给splice()传入2个参数： 要删除的第一个元素位置和要删除元素的数量
eg: splice(0, 2)会删除两个元素
 
2. 插入。给splice()传入3个参数： 开始位置、0（要删除的元素数量）、要插入的元素
eg: splice(2, 0, "red","green")
 
3. 替换。splice()在删除元素的同时可以在指定位置插入新元素
eg: splice(2, 1, "red","green");
会在数组索引2的位置上删除1个元素，并添加两个新元素
 
★ splice总是返回从原数组中删除的元素，如果没有则返回空

使用案例

let colors = ["red", "green", "blue"];
let removed = colors.splice(0, 1);
removed
["red"]
colors
(2) ["green", "blue"]
colors.splice(2, 0, "black","pink");
[]
colors
(4) ["green", "blue", "black", "pink"]
colors.splice(1, 1, "purple");
["blue"]
colors
(4) ["green", "purple", "black", "pink"]

搜索和位置方法
ECMAScript提供3个严格相等的搜索方法： indexOf()、lastIndexOf()和includes()

let numbers = [1, 2, 3, 4, 5, 4];
console.log(numbers.indexOf(4)); // 3
console.log(numbers.lastIndexOf(5)); // 5
console.log(numbers.includes(4)); // true

数组的迭代方法

ECMAScript中提供5个迭代方法

• every(): 对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true
• filter(): 对数组每一项都运行该函数，会返回一个数组其符合过滤条件
• forEach(): 对数组每一项都运行传入的函数，没有返回值
• map(): 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组
• some(): 对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true

every()要求所有项必须返回true才返回true若出现一个false则都返回false，some()只要部分返回true结果就是true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2); // false
 
let someResult = numbers.some((item, index, array) => item > 2); // true
 
let filterResult = numbers.some((item, index, array) => item > 2); // [3, 4, 5, 4, 3] 
 
let mapResult = numbers.some((item, index, array) => item * 2); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
 
let forEachOperation numbers.forEach((item, index, array) => console.log(item) // 其他元素操作 );

归并方法： reduce()和reduceRight() 迭代数组的所有项，并在此基础上构建一个最终返回值。

reduce()方法从数组的第一项开始遍历到最后一项
reduceRight()方法从最后一项开始遍历到第一项

let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur); // 求和 => 15