Object

显式创建实例的两种方式

第一种 new操作符

  1. let person = new Object(); 
  2. person.name = "Nicholas"; 
  3. person.age = 29;

第二种 对象字面量

  1. let person = { 
  2.  name: "Nicholas", 
  3.  age: 29 
  4. };

属性名可以是字符串或数值，但是数值属性会自动转换为字符串
所以可以认为所有属性名都是字符串形式的
引用object的属性有两种方式

  1. person.name//带点方式
  2. person["name"]//带括号方式，括号内是字符串

只有默认属性和方法的对象

  1. let person = {}; // 与 new Object()相同
  2. person.name = "Nicholas"; 
  3. person.age = 29;

对象字面量已经成为给函数传递大量可选参数的主要方式

  1. function displayInfo(args) { 
  2.  let output = ""; 
  3.  if (typeof args.name == "string"){ 
  4.  output += "Name: " + args.name + "\n"; 
  5.  } 
  6.  if (typeof args.age == "number") { 
  7.  output += "Age: " + args.age + "\n"; 
  8.  } 
  9.  alert(output); 
  10. } 
  11. displayInfo({ 
  12.  name: "Nicholas", 
  13.  age: 29 
  14. }); 
  15. displayInfo({ 
  16.  name: "Greg" 
  17. });

Array

创建数组

基本方式

  1. let colors = new Array();
  2. let colors = new Array(20);//初始化一个长度为20的数组
  3. let colors = new Array("red", "blue", "green");

如果初始值是一个数值，则会创建这个数值的长度的数组，如果是其他类型，则会创建一个只包含该特定值的数组

  1. let colors = new Array(3); // 创建一个包含 3 个元素的数组
  2. let names = new Array("Greg"); // 创建一个只包含一个元素，即字符串"Greg"的数组

也可以省略new操作符

  1. let colors = Array(3); // 创建一个包含 3 个元素的数组
  2. let names = Array("Greg"); // 创建一个只包含一个元素，即字符串"Greg"的数组

数组字面量表示法

  1. let colors = ["red", "blue", "green"]; // 创建一个包含 3 个元素的数组
  2. let names = []; // 创建一个空数组
  3. let values = [1,2,]; // 创建一个包含 2 个元素的数组

Array.from()方法

Array.from()的第一个参数是类数组对象
即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构。

  • 字符串会被拆分为单字符数组
  1. console.log(Array.from("Matt")); // ["M", "a", "t", "t"]
  • 可以使用 from()将集合和映射转换为一个新数组
  1. const m = new Map().set(1, 2) 
  2.  .set(3, 4); 
  3. const s = new Set().add(1) 
  4.  .add(2) 
  5.  .add(3) 
  6.  .add(4); 
  7. console.log(Array.from(m)); // [[1, 2], [3, 4]] 
  8. console.log(Array.from(s)); // [1, 2, 3, 4]
  • Array.from()对现有数组执行浅复制
  1. const a1 = [1, 2, 3, 4]; 
  2. const a2 = Array.from(a1); 
  3. console.log(a1); // [1, 2, 3, 4] 
  4. alert(a1 === a2); // false
  • 可以使用任何可迭代对象
  1. const iter = { 
  2.  *[Symbol.iterator]() { 
  3.  yield 1; 
  4.  yield 2; 
  5.  yield 3; 
  6.  yield 4; 
  7.  } 
  8. }; 
  9. console.log(Array.from(iter)); // [1, 2, 3, 4]
  • arguments 对象可以被轻松地转换为数组
  1. function getArgsArray() { 
  2.  return Array.from(arguments); 
  3. } 
  4. console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]
  • from()也能转换带有必要属性(length)的自定义对象
  1. const arrayLikeObject = { 
  2.  0: 1, 
  3.  1: 2, 
  4.  2: 3, 
  5.  3: 4, 
  6.  length: 4 
  7. }; 
  8. console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

Array.from()还接收第二个可选的映射函数参数
还可以接收第三个可选参数，用于指定映射函数中 this 的值。

  1. const a1 = [1, 2, 3, 4]; 
  2. const a2 = Array.from(a1, x => x**2); 
  3. const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
  4. console.log(a2); // [1, 4, 9, 16] 
  5. console.log(a3); // [1, 4, 9, 16]

Array.of()

可以把一组参数转换为数组
用于替代Array.prototype. slice.call(arguments)

  1. console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
  2. console.log(Array.of(undefined)); // [undefined]

数组空位

空位的值为undefined

  • 创建包含 5 个元素的数组
  1. const options = [,,,,,]; 
  2. console.log(options.length); // 5 
  3. console.log(options); // [,,,,,]
  • join()视空位置为空字符串
  1. console.log(options.join('-')); // "1----5"

数组索引

正常情况访问

  1. let colors = ["red", "blue", "green"]; // 定义一个字符串数组
  2. alert(colors[0]); // 显示第一项
  3. colors[2] = "black"; // 修改第三项
  4. colors[3] = "brown"; // 添加第四项

注意：如果访问的下标超过最大索引，数组长度则会自动扩展到该索引值+1

  1.         let a=[1,5,2,3,4];
  2.         console.log(a.length)//5
  3.         a[7]=9
  4.         console.log(a.length)//8

使用 length 属性可以方便地向数组末尾添加元素

  1. let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
  2. colors[colors.length] = "black"; // 添加一种颜色（位置 3）
  3. colors[colors.length] = "brown"; // 再添加一种颜色（位置 4）

检测数组

只有一个网页的情况，使用 instanceof 操作符就足矣

  1. if (value instanceof Array){ 
  2.  // 操作数组
  3. }

一般使用Array.isArray()方法，避免各种各样的问题

  1. if (Array.isArray(value)){ 
  2.  // 操作数组
  3. }

迭代器方法

3 个用于检索数组内容的方法
keys()、values()和entries()

  • keys()返回数组索引的迭代器
  • values()返回数组元素的迭代器
  • entries()返回索引/值对的迭代器
  1. const a = ["foo", "bar", "baz", "qux"]; 
  2. // 因为这些方法都返回迭代器，所以可以将它们的内容
  3. // 通过 Array.from()直接转换为数组实例
  4. const aKeys = Array.from(a.keys()); 
  5. const aValues = Array.from(a.values()); 
  6. const aEntries = Array.from(a.entries()); 
  7. console.log(aKeys); // [0, 1, 2, 3] 
  8. console.log(aValues); // ["foo", "bar", "baz", "qux"] 
  9. console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

使用 ES6 的解构可以非常容易地在循环中拆分键/值对：

  1. for (const [idx, element] of a.entries()) { 
  2.  alert(idx); 
  3.  alert(element); 
  4. } 
  5. // 0 
  6. // foo 
  7. // 1 
  8. // bar 
  9. // 2 
  10. // baz 
  11. // 3 
  12. // qux

复制和填充方法

fill()方法

  1. const zeroes = [0, 0, 0, 0, 0]; 
  2. // 用 5 填充整个数组
  3. zeroes.fill(5); 
  4. console.log(zeroes); // [5, 5, 5, 5, 5] 
  5. zeroes.fill(0); // 重置
  6. // 用 6 填充索引大于等于 3 的元素
  7. zeroes.fill(6, 3); 
  8. console.log(zeroes); // [0, 0, 0, 6, 6] 
  9. zeroes.fill(0); // 重置
  10. // 用 7 填充索引大于等于 1 且小于 3 的元素
  11. zeroes.fill(7, 1, 3); 
  12. console.log(zeroes); // [0, 7, 7, 0, 0]; 
  13. zeroes.fill(0); // 重置
  14. // 用 8 填充索引大于等于 1 且小于 4 的元素
  15. // (-4 + zeroes.length = 1) 
  16. // (-1 + zeroes.length = 4) 
  17. zeroes.fill(8, -4, -1); 
  18. console.log(zeroes); // [0, 8, 8, 8, 0];

fill忽略的操作

  1. const zeroes = [0, 0, 0, 0, 0]; 
  2. // 索引过低，忽略
  3. zeroes.fill(1, -10, -6); 
  4. console.log(zeroes); // [0, 0, 0, 0, 0] 
  5. // 索引过高，忽略
  6. zeroes.fill(1, 10, 15); 
  7. console.log(zeroes); // [0, 0, 0, 0, 0] 
  8. // 索引反向，忽略
  9. zeroes.fill(2, 4, 2); 
  10. console.log(zeroes); // [0, 0, 0, 0, 0] 
  11. // 索引部分可用，填充可用部分
  12. zeroes.fill(4, 3, 10) 
  13. console.log(zeroes); // [0, 0, 0, 4, 4]

copyWithin()
会按照指定范围浅复制数组中的部分内容

  1. // 从 ints 中复制索引 0 开始的内容，插入到索引 5 开始的位置
  2. // 在源索引或目标索引到达数组边界时停止
  3. ints.copyWithin(5); 
  4. console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 
  5. reset(); 
  6. // 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
  7. ints.copyWithin(0, 5); 
  8. console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9

转换方法

toString()方法
会得到一个以逗号分隔的字符串
内部是对数组中的每一个元素进行toString方法

  1. let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
  2. alert(colors.toString()); // red,blue,green

join()方法
仍然是将数组转换为字符串，但是可以接收一个参数作为分隔符

  1. let colors = ["red", "green", "blue"]; 
  2. alert(colors.join(",")); // red,green,blue 
  3. alert(colors.join("||")); // red||green||blue

栈方法和队列方法

栈：

数组内置了两个方法，push和pop

  1. let colors = new Array(); // 创建一个数组
  2. let count = colors.push("red", "green"); // 推入两项
  3. alert(count); // 2 
  4. count = colors.push("black"); // 再推入一项
  5. alert(count); // 3 
  6. let item = colors.pop(); // 取得最后一项
  7. alert(item); // black 
  8. alert(colors.length); // 2

队列

shift()方法

  • 删除头部，在尾部添加
  • 使用 shift()和 push()
  1. let colors = new Array(); // 创建一个数组
  2. let count = colors.push("red", "green"); // 推入两项
  3. alert(count); // 2 
  4. count = colors.push("black"); // 再推入一项
  5. alert(count); // 3 
  6. let item = colors.shift(); // 取得第一项
  7. alert(item); // red 
  8. alert(colors.length); // 2

unshift()方法
删除尾部，在头部添加
使用 unshift()和 pop()

  1. let colors = new Array(); // 创建一个数组
  2. let count = colors.unshift("red", "green"); // 从数组开头推入两项
  3. alert(count); // 2 
  4. count = colors.unshift("black"); // 再推入一项
  5. alert(count); // 3 
  6. let item = colors.pop(); // 取得最后一项
  7. alert(item); // green 
  8. alert(colors.length); // 2

排序方法

reverse()和 sort()

reverse()方法

将数组反转

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

sort()方法

默认是升序（从小到大）
内部过程：先把数组的每一项都转换为字符串（即调用String()函数），然后再比较字符串来决定顺序。

比较函数
定义排序规则

  1.         function compare(value1, value2) {
  2.             if (value1 < value2) {
  3.                 return 1;
  4.             } else{
  5.                 return -1;
  6.             } 
  7.         }

操作方法

concat()方法

返回一个数组，在原数组的基础上，加上后面的内容

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

特殊符号：Symbol.isConcat-Spreadable能够阻止打平数组
为true则打平，反之不打平

  1. let colors = ["red", "green", "blue"]; 
  2. let newColors = ["black", "brown"]; 
  3. let moreNewColors = { 
  4.  [Symbol.isConcatSpreadable]: true, 
  5.  length: 2, 
  6.  0: "pink", 
  7.  1: "cyan" 
  8. }; 
  9. newColors[Symbol.isConcatSpreadable] = false; 
  10. // 强制不打平数组
  11. let colors2 = colors.concat("yellow", newColors); 
  12. // 强制打平类数组对象
  13. let colors3 = colors.concat(moreNewColors); 
  14. console.log(colors); // ["red", "green", "blue"] 
  15. console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]] 
  16. console.log(colors3); // ["red", "green", "blue", "pink", "cyan"]

slice()方法

返回一个拆分过的数组

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

注意不包含末尾下标的值

splice()方法

返回删除的元素数组，对原数组进行操作

  1. let colors = ["red", "green", "blue"]; 
  2. let removed = colors.splice(0,1); // 删除第一项
  3. alert(colors); // green,blue 
  4. alert(removed); // red，只有一个元素的数组
  5. removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
  6. alert(colors); // green,yellow,orange,blue 
  7. alert(removed); // 空数组
  8. removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
  9. alert(colors); // green,red,purple,orange,blue 
  10. alert(removed); // yellow，只有一个元素的数组

迭代方法

every()方法和some()方法

下面意思是，数组中每一项都大于2时，every()方法返回true
数组中只要有一项大于2，some()方法返回true

  1. let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
  2. let everyResult = numbers.every((item, index, array) => item > 2); 
  3. alert(everyResult); // false 
  4. let someResult = numbers.some((item, index, array) => item > 2); 
  5. alert(someResult); // true

filter()方法

返回一个经过筛选的数组

  1. let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
  2. let filterResult = numbers.filter((item, index, array) => item > 2); 
  3. alert(filterResult); // 3,4,5,4,3

map()方法

返回一个对每一项都进行相同操作的数组

  1. let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
  2. let mapResult = numbers.map((item, index, array) => item * 2); 
  3. alert(mapResult); // 2,4,6,8,10,8,6,4,2

forEach()方法

相当于for循环遍历数组

  1. let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
  2. numbers.forEach((item, index, array) => { 
  3.  // 执行某些操作 
  4. });

归并方法

reduce（）方法

两个参数

  • 第一个参数：必需。用于执行每个数组元素的函数。
    函数接收4个参数:上一个归并值（必须）、当前项（必须）、当前项的索引（可选）和数组本身（可选）。
  • 第二个参数：initialValue， 可选。传递给函数的初始值

执行累加数组中所有数值的操作

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

reduceRight（）方法

和reduce（）方法一样，只是反方向操作