第四章对象和数组

Object类型

创建方法有两种，字面量和new运算符

1. 使用new运算符

let obj = new Object(); new方式

obj.name = 'lin' 创建属性字段

2. new关键字可以省略

Let obj = Object(); 省略new关键字

3. 使用字面量方式

let obj = {a: 1, b: 2} 字面量方式创建字段

4. 属性字段也可以使用字符串形式

Let obj = {
    'a': 1,
    'b': 2
}

5. 字面量，传统赋值方式

let obj = {};
obj.name = 'lin';

两种输出方式

obj.a点表示法 obj['a']中括号表示法输出

再使用字面量声明Object对象时，不会调用Object构造函数
给对象创建方法

let obj = {};
obj.sayHello = function () {
    console.log('hello');
};
obj.sayHello(); //hello

let obj = {
    // ...
    sayHello: function () {
        console.log('hello');
    }
};
obj.sayHello(); //hello

delete方法

//接上面代码
delete obj.sayHello;
obj.sayHello(); // not a function

开发过程中，一般喜欢字面量的方式。清晰，语法代码少，也是传递大量参数的首选方式。

let obj = {};
for (let i = 1; i < 50; i++) {
    obj['a' + i] = i;
    if (i >= 50) break;
}
function foo(obj) {
    if(obj.a1) console.log(obj.a1);     //1
    if(obj.a22) console.log(obj.a22);   //22
    if(obj.a55) console.log(obj.a55);   //无输出
}
foo(obj);

Array类型

数组对象的作用是：使用单独的变量名来存储一系列的值。数组的类型是object;

两种方法创建：字面量，new运算符new Array();

使用new关键字创建数组

let arr = new Array();
console.log(arr);   // []

let arr1 = new Array(10);
console.log(arr1);  // [empty × 10]
arr1[3] = 'hello';
arr1[5] = 'world';
console.log(arr1);
//[empty × 3, "hello", empty, "world", empty × 4]

let arr2 = new Array(10,2);      
//写一个参数是定义数组长度，多个是传入参数。
console.log(arr2);  // [10, 2]

new关键字可以省略。

字面量方式创建数组

let arr = [];
let arr1 = [1,2,3];
let arr2 = [1,2,];  // 这里有些浏览器是三个元素 不推荐
let arr3 = [,,,];   //有些浏览器不兼容 不推荐

使用下标读取数组的值

let arr = [1,2,3];
console.log(arr[0]);    //1
arr[1] = 10;
console.log(arr[1]);    //10

使用length属性获取元素量

let arr = [1, 2, 3];
console.log(arr.length);    //3
arr.length = 10;
console.log(arr.length);    //10
console.log(arr);           //[1, 2, 3, empty × 7]
arr.length = 2;
console.log(arr);           //[1,2]
arr.length = 10;
console.log(arr);           //[1, 2, empty × 8]

数组中的方法

转换方法

对象或数组都有toLocaleString()、toString()、ValueOf()方法，toString()、ValueOf()无论重写哪个都会返回相同值。数组会将每个字用字符串的方式拼接，以逗号隔开。

let arr = ['小明', 18, '计算机'];
console.log(arr);                       // ["小明", 18, "计算机"]
console.log(arr.toLocaleString());      // 小明,18,计算机 
console.log(arr.toString());            // 小明,18,计算机
console.log(arr.valueOf());             // ["小明", 18, "计算机"]

join方法 — 转字符串

不改变原数组

let arr = ['小明', 18, '计算机'];
console.log(arr.join('|')); //小明|18|计算机

push&pop栈方法 — 尾插尾删

pop删除一个数组中的最后一个元素，并且返回这个元素
push添加一个或多个元素到数组的末尾，并返回数组新的长度
改变原数组

shift&unshift队列方法 — 头插头删

shift删除数组的第一个元素，并返回这个元素
unshift在数组的开头插入一个或多个元素，并返回数组的新长度
改变原数组

reverse&sort排序方法 — 逆序排序

reverse前后颠倒数组中元素的位置，第一个元素会成为最后一个
记a和b是两个将要被比较的元素：

如果函数function（a， b）返回值小于0，则a会排在b之前
如何函数返回值等于0，则a和b的相对位置不变（并不被保证）
如果函数返回值大于0，则a会排在b之后
比较函数输出结果必须稳定，否则排序的结果将是不确定的

改变原数组
```
let arr = [2, 5, 1, 10, 99, 3];
arr.sort(function (a, b) {
    return a - b;
});
console.log(arr);
// [1, 2, 3, 5, 10, 99]
arr.reverse();
console.log(arr);
// [99, 10, 5, 3, 2, 1]
```

concat&slice&splice — 连接数组、截取数组、删除/增加数组项

concat 基于原数组创建新数组

不改变原数组

let arr1 = [1, 2, 3];
let arr2 = arr1.concat([4, 5]);
console.log(arr1);  
// [1, 2, 3,]
console.log(arr2);  
// [1, 2, 3, 4, 5]

slice

方法可从已有的数组中返回选定的元素。

不改变原数组。

let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
let arr2 = arr1.slice(1);
console.log(arr2);
// [26, "吉林", "白山", "HELLO"]  从第一个位置截取数组
console.log(arr1);
// ["lin", 26, "吉林", "白山", "HELLO"]
let arr3 = arr1.slice(1, 3);
console.log(arr3);
// [26, "吉林"]  从第一个位置取到第三个位置

splice

方法向/从数组中添加/删除项目，然后返回被删除的项目。(改变原数组)

语法： array.splice(start, deleteCount[, item1[, item2...])

// 删除功能
let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
let arr2 = arr1.splice(1);
console.log(arr1);
// ["lin"] 原数组被改变
console.log(arr2);
// [26, "吉林", "白山", "HELLO"]+
let arr3 = arr2.splice(0, 2);
console.log(arr3);
// [26, "吉林"] 表示从第0位置取两个

// 增加功能
let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
arr1.splice(0, 0, '3号', '回家');
// 第0项 删除0 增加两项
console.log(arr1);
// ["3号", "回家", "lin", 26, "吉林", "白山", "HELLO"]

// 替换功能
let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
arr1.splice(0, 1, 'zhang');
// 第0项 替换1项 内容
console.log(arr1);
// ["zhang", 26, "吉林", "白山", "HELLO"]

fill方法 * ES6 替换数组元素

用于将一个固定值替换数组的元素。改变原数组。

语法：array.fill(value, start, end);IE 11 及更早版本不支持 fill() 方法。

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.fill(6, 0, 10);
console.log(arr);   //[6, 6, 6, 6, 6, 6, 6, 6, 6, 6]

copyWithin * ES6

语法：array.copyWithin（target, start [, end = this.length]

改变原数组。

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

进行替换操作，不改变数组长度，从开始下标：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.length = 12;
arr.copyWithin(2, 0);
console.log(arr);   // [1, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

includes

用来判断当前数组是否包含某指定的值，如果是，则返回true，否则false

语法：array.includes(searchElement, [, fromIndex])

let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
console.log(arr1.includes('lin'));
// true

toString

返回一个字符串，该字符串由数组中的每个元素的toString（）返回值经调用join（）方法连接（由逗号隔开）组成。

let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
console.log(arr1.toString());
// lin,26,吉林,白山,HELLO

toLocaleString

返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转化成字符串，这些字符串将使用一个特定语言环境的字符串（例如逗号）隔开

let arr1 = ['lin', 26, '吉林', '白山', 'HELLO'];
console.log(arr1.toLocaleString());
// lin,26,吉林,白山,HELLO

indexOf

返回指定元素能在数组中找到的第一个索引值，否则返回-1
fromIndex可以为负，表示从倒数第n个开始（此时仍然从前向后查询数组）
使用“严格相等”（===）进行匹配

array.indexOf(searchElement[, fromIndex = 0])

let arr1 = [1,2,5,5,6,7,8,8,9];
console.log(arr1.indexOf(5));
// 2
console.log(arr1.indexOf(55));
// -1

lastIndexOf

返回指定元素在数组中的最后一个的索引，如果不存在则返回-1， 从数组的后面向前查找

array.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

let arr1 = [1,2,5,5,6,7,8,8,9];
console.log(arr1.lastIndexOf(5));
// 3
console.log(arr1.lastIndexOf(55));
// -1

数组遍历

forEach

array.forEach(function(currentValue, index, arr), thisValue)；

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

let arr1 = [1, 2, 3, 4, 5];
let sum = 0;
arr1.forEach(item => {
    sum += item;
});
console.log(sum);   //15

map

返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）

array.map((value, idx, a) => {})

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.map(item => item += 'haha');
console.log(arr1);
// [1, 2, 3, 4, 5]
console.log(arr2);
// ["1haha", "2haha", "3haha", "4haha", "5haha"]

filter

使用指定的函数测试所有元素，并创建一个包含所有测试通过的元素的新数组
callback函数返回一个布尔值，true即通过测试
callback只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用
不会改变原数组

array.filter((v, i, a) => {})

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.filter(item => item !== 2);
console.log(arr1);
// [1, 2, 3, 4, 5]
console.log(arr2);
// [1, 3, 4, 5]

reduce

reduce() 函数会对参数序列中元素进行累积。

函数将一个数据集合（链表，元组等）中的所有数据进行下列操作：用传给 reduce 中的函数 function（有两个参数）先对集合中的第 1、2 个元素进行操作，得到的结果再与第三个数据用 function 函数运算，最后得到一个结果。

reduce(function, iterable[, initializer])

function -- 函数，有两个参数
iterable -- 可迭代对象
initializer -- 可选，初始参数

let arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1.reduce((a, b) => a + b);
console.log(arr1);
// [1, 2, 3, 4, 5]
console.log(arr2);
// [1, 3, 4, 5]

let arr1 = [[1, 2], [3, 4], [5, 6]].reduce((a, b) => a.concat(b));
console.log(arr1);
// [1, 2, 3, 4, 5, 6] 扁平数组

reduceRight

使用同上，与reduce（）的执行方向相反

entries

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for...in 一致，但不会遍历原型属性。

let arr1 = ['xiaoming', 'kakaxi', 'mingren', 'zuozhu', 'huoying'];
console.log(Object.entries(arr1));

arr

let obj = {name: 'xiaoming', age: 18, hobby: 'computer'};
console.log(Object.entries(obj));

obj

every

callback只会为那些已经被赋值的索引调用，不会为那些被删除或从来没有被赋值的索引调用
和forEach函数类似
注意：array.every()返回一个布尔值，即对每个元素的callback函数结果作逻辑“&”操作

some

使用方法同上，
注意：对每个元素的callback函数结果作逻辑“||”操作

keys

返回一个数组索引的迭代器（类似于array.entries()方法）

find

【有兼容性问题目前】
返回数组中满足测试条件的第一个元素，如果没有满足条件的元素，则返回undefined

第四章 对象和数组