对象及数组扩展

数组扩展

一、创建数组

ES 6 之前： 1、通过数组字面量创建： let arr = ['a', 'b']; 2、通过构造函数创建：let arr = new Array();

let arr = new Array(2);   （含义：创建一个长度为2的空数组）
console.log(arr.length);  // 3
console.log(arr[0]); //   undefined
console.log(arr[1]); //   undefined

let arr = new Array('2');  （含义：创建只有一个元素为 '2' 的数组）
console.log(arr.length);  // 1 
console.log(arr[0]);  // '2'

ES 6: Array.of() 与Array 构造函数的工作机智类似，只是不存在单一数值型参数值的特例。无论有多少参数，无论参数是什么类型的， Array.of() 方法总会创建一个包含所有参数的数组。

let arr = Array.of(2)
console.log(arr.length) // 1
console.log(arr[0]) // 2
let arr = Array.of('2')
console.log(arr.length) // 1
console.log(arr[0]) // '2'

eg:

function createArray(arrayCreator, value) {
  return arrayCreator(value)
}
let arr = createArray(Array.of, value)
function createArray(arrayCreator, value) {
  return arrayCreator(value)
}
let val = ['z', 'd', 'c']
let arr = createArray(Array.of, val.toString())
console.log(arr) // ["z,d,c"]

二、Array.from() 方法可以接受可迭代对象或类数组对象作为第一个参数，返回值为一个新数组。

function doSomething() {
  var args = Array.from(arguments) // 类数组对象转化为准数组
}
/* Array.form() 方法也是通过this来确定返回数组的类型的 */

1、Array.from(arg, fun, obj)

function translate() {
  return Array.from(arguments, (value) => value + 1)
}

let nums = translate(1, 2, 3, 4)
console.log(nums) // [2, 3, 4, 5]
let helper = {
  diff: 'a',
  add(value) {
    return value + this.diff
  },
}
function translate() {
  return Array.from(arguments, helper.add, helper)
}
let nums = translate(1, 2, 3, 4) // ["1a", "2a", "3a", "4a"]

/_ 示例 translate 方法内传入 helper.add 作为转换用的映射函数，由于该方法使用来this.diff属性，因此需要为Array.from()方法提供第三个参数来指定this的值，从而无须通过调用bind()方法或其他方式来指定this的值了。 _/

let helper = {
  diff: 'a',
  add(value) {
    return value + this.diff
  },
}
function translate() {
  return Array.from(arguments, helper.add) // 如果没有映射函数的对象，会报下面的  [NaN, NaN, NaN, NaN]
}

let nums = translate(1, 2, 3, 4) // [NaN, NaN, NaN, NaN]

用 Array.from() 转换可迭代对象

let numbers = {
  *[Symbol.iterator]() {
    yield 1
    yield 2
    yield 3
  },
}
let newNums = Array.from(numbers, (value) => value + 1)
console.log(newNums) // 2, 3, 4

三、find() 方法和 findIndex() 方法 VS indexOf() 方法和lastIndexOf()方法

以上两个方法都接受两个参数： 1、一个是回调函数；执行回调函数时可以传人 3 个参数。与传人 map() 和 forEach() 方法的参数相同。回调函数应返回 true，一旦回调函数返回true，find() 方法和 findIndex() 方法都会立即停止搜索数组剩余的部分。 a、数组中的某个元素 b、该元素在数组的索引index c、数组本身 2、另一个是可选参数，用于指定回调函数中的 this 的值。

let arr = [2, 4, 6, 8, 10]
console.log(arr.find((value) => value > 6))
console.log(arr.findIndex((value, index) => value > 2 && index > 2)) // index 为遍历到当前值的索引

四、fill() 方法

fill(val, startIndex, endIndex) val (必选，要填充的值) startIndex (可选，开始索引) endIndex (可选，结束索引，但不包括结束索引的值)

fill() 方法可以用指定的值填充一至多个数组元素。 1、fill(val) 当传人一个值时，fill() 方法会用这个值重写数组中的所有值。 2、fill(val, startIndex, endIndex) 1、eg:

let arr = [2, 4, 6, 8, 10]
arr.fill(1)
console.log(arr) // [1, 1, 1, 1, 1]
arr.fill('a')
console.log(arr) // ["a", "a", "a", "a", "a"]

2、eg:

let arr = [2, 4, 6, 8, 10]
arr.fill('q', 2)
console.log(arr) // [2, 4, "q", "q", "q"]
arr.fill('aa', 3, 4)
console.log(arr) // [2, 4, "q", "aa", "q"]

3、eg:

let arr = [2, 4, 6, 8, 10]
arr.fill('ccc', -3, -1)
console.log(arr)
;[2, 4, 'ccc', 'ccc', 10]
/* 如果startIndex 或者 endIndex为负值， 那么这些值会与数组的length属性 相加 来作为最终的索引位置。
   eg: 如果 startIndex 为 -1，那么索引的值实际为 arr.length-1。 */

五、copyWithin() 方法，从数组中复制元素的值。可以同时改变数组中的多个元素。

copyWithin(startFillIndex, startCopyIndex, stopCopyIndex) startFillIndex(必选，开始填充的索引) startCopyIndex (可选，开始复制的索引) endCopyIndex (可选，停止复制的索引，但不包括结束索引的值)

1、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee']
arr.copyWithin(1)
console.log(arr) // ["aa", "aa", "bb", "cc", "dd"]

2、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee']
arr.copyWithin(1, 2)
console.log(arr) // ["aa", "cc", "dd", "ee", "ee"]

3、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee']
arr.copyWithin(1, 2, 4)
console.log(arr) // ["aa", "cc", "dd", "dd", "ee"]

4、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee']
arr.copyWithin(1, -3, -1)
console.log(arr) // ["aa", "cc", "dd", "dd", "ee"]
/* 如果startCopyIndex 或者 endCopyIndex为负值， 那么这些值会与数组的length属性 相加 来作为最终的索引位置。eg: 如果 startCopyIndex 为 -1，那么索引的值实际为 arr.length-1。 */

对象扩展

对象的类别： 1、普通对象具有JavaScript对象所有的默认内部行为 2、特异对象具有某些与默认行为不符的内部行为 3、标准对象 Array、Date等。标准对象既可以是普通对象，也可以是特异对象。 4、内建对象脚本开始执行时存在于JavaScript执行环境中的对象，所有标准对象都是内建对象

对象属性的简写： ECMAScript 5 及更早的版本

function creatPerson(name, sex) {
  return {
    name: name,
    sex: sex,
  }
}

ECMAScript 6 版本

function creatPerson (name, sex) {
  return {
    name，
    sex
  }
}

一、可计算属性名

let name = 'name'
let obj = {
  ['first' + name]: '郭',
  ['last' + name]: '志鹏',
}
console.log(obj.firstname) // 郭
console.log(obj['first' + name]) // 郭

对象方法的简写： ECMAScript 5 及更早的版本（字面量对象写法）

let person = {
  name: '悟空',
  say: function () {
    console.log('打妖精！')
  },
}

ECMAScript 6 （字面量对象写法）

let person = {
  name: '悟空',
  say() {
    console.log('打妖精！')
  },
}

二、Object.is() 方法来弥补全等运算符的不准确运算。这个方法接受两个参数，如果这两个参数类型相同且具有相同的值，则返回true。

相等操作符（==）、不相等操作符（!=）这两个操作符都会先转换操作数（称为强制转型），然后再比较他们的相等性。转换不同的数据类型时规则：

a、如果有一个操作数为布尔值，比较前先将布尔值转换为数值： false —> 0； true —> 1； eg: false == 0; // true true == 1; // true true == 2; // false

b、如果有一个操作数为字符串，另一个操作数为数值，比较前先将字符串—>数值。 eg: '2' == 2; // true c、如果有一个操作数为对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较。

d、null 和 undefined 是相等的。（要比较相等性之前，不能将 null 和 undefined 转换成其他的任何值） eg: null == undefined; // true e、如果有一个操作数是NaN，则相等操作符返回 false，不相等操作符返回 true。 eg: 5 == NaN; // false 5 != NaN; // true f、即使两个操作数都是NaN，相等操作符返回 false。 eg: NaN == NaN // false NaN != NaN; // true 'NaN' == NaN; // false g、如果两个操作数都是对象，则比较他们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true；否则返回 false。

全等操作符（===）、不全等操作符（!==）不会进行转换操作数（称为强制转型）后，再比较相等。

console.log(+0 == -0) // true
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false

console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true

console.log(4 == 4) // true
console.log(4 === 4) // true
console.log(Object.is(4, 4)) // true

console.log(4 == '4') // true
console.log(4 === '4') // flase
console.log(Object.is(4, '4')) // false

三、Object.assign() 方法，一个对象接收来自另一个对象的属性和方法。接受任意数量的对象，并按指定的顺序将属性复制到接收对象中。如果多个源对象有同名属性，则排位靠后的源对象会覆盖靠前的对象。

1、eg:

let receiver = {}
Object.assign(
  receiver,
  {
    type: 'js',
    name: 'javascript.js',
  },
  {
    type: 'java',
  }
)
console.log(receiver.type) // java

2-1、eg:

let receiver = {
  age: 10,
}
let obj = {
  type: 'as',
  name: 'action script',
}
Object.assign(receiver, obj)
console.log(receiver.type) // as
receiver.type = 'test'
console.log(obj.type) // "as"
console.log(receiver.type) // "test"

2-2、

let receiver = {
  age: 10,
}
let obj = {
  type: 'as',
  name: 'action script',
}
let newObj = Object.assign({}, receiver, obj) /* 以空对象{}开头，可以避免更改 receiver 对象。 */
console.log(newObj) // {age: 10, type: "as", name: "action script"}
console.log(receiver.type) // undefined
receiver.type = 'test'
console.log(obj.type) // "as"
console.log(receiver.type) // "test"

3、eg:

let obj = Object.assign(
  {},
  (function () {
    return { name: 'aaa', age: 34 }
  })()
)
console.log(obj) //  {name: "aaa", age: 34}

4、eg:

let arr1 = [1, 2, 3]
let arr2 = ['name', 'age']
let obj = Object.assign([], arr1, arr2)
console.log(obj) // ["name", "age", 3]

5、eg:

let arr1 = [1, 2, 3]
let arr2 = ['name', 'age']
let obj = Object.assign({}, arr1, arr2)
console.log(obj) // {0: "name", 1: "age", 2: 3}

6、eg:

let obj1 = { name: 'admin', age: 13 }
let obj2 = { name: 'zhangsan', sex: '男' }
let obj = Object.assign([], obj1, obj2)
console.log(obj) // [name: "zhangsan", age: 13, sex: "男"]
console.log(obj.length) // 0
obj.forEach((item) => {
  console.log(item.name) // 无法遍历出来
})

四、自有属性枚举顺序。ES 6 严格规定来对象的自有属性被枚举时的返回顺序，这会影响到 Object.getOwnPropertyNames() 方法及 Reflect.ownKeys 返回属性的方式，Object.assign() 方法处理属性的顺序也将随之改变。

自有属性枚举顺序的基本规则 1、所有数字键按升序排序。 2、所有字符串键按照他们被加入对象的顺序排序。 3、所有 symbol 键按照他们被加入对象的顺序排序。

let obj = {

    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1: 1
};

obj.d = 1;
console.log(Object.getOwnPropertyNames(obj));  // ["0", "1", "2", "a", "c", "b", "d"]
console.log(Object.getOwnPropertyNames(obj).join('')); // 012acbd        (字符串)

提示：for-in 、 Object.keys() 方法和 JSON.stringify() 方法枚举的顺序是无序的。

五、增强对象原型

原型在对象创建时被指定的两种方法：（对象原型在实例化后保持不变） 1、通过构造函数创建对象 2、通过Object.create() 方法创建对象 ES 5：Object.getPrototypeOf() 方法来返回任意指定对象的原型，但缺少对象在实例化后改变原型的标准方法。 ES 6: Object.setPrototypeOf(objA, objB) 方法可以改变任意指定对象的原型。 objA: 被改变原型的对象 objB：替代第一个参数（objA）原型的对象

let person = {
  getGreeting() {
    return 'hello'
  },
}
let dog = {
  getGreeting() {
    return 'this is a dog'
  },
}
// 以 person 对象为原型
let friend = Object.create(person)
console.log(friend.getGreeting()) // hello
console.log(Object.getPrototypeOf(friend) === person) // true

// 原型设置为 dog
Object.setPrototypeOf(
  friend,
  dog
) /* friend: 被改变原型的对象     dog: 替代第一个参数（objA）原型的对象 */
console.log(friend.getGreeting()) // this is a dog
console.log(Object.getPrototypeOf(friend) === dog) // true

六、简化原型访问的 Super 引用：可以更便捷地访问对象原型。

使用环境：既想重写对象实例的方法，又需要调用与该对象实例方法同名的原型方法。

对象及数组扩展

目录

数组扩展

一、创建数组

二、Array.from() 方法可以接受 可迭代对象 或 类数组对象 作为第一个参数，返回值为一个新数组。

三、find() 方法 和 findIndex() 方法 VS indexOf() 方法和lastIndexOf()方法

四、fill() 方法

五、copyWithin() 方法，从数组中复制元素的值。可以同时改变数组中的多个元素。

对象扩展

一、可计算属性名

二、Object.is() 方法来弥补全等运算符的不准确运算。这个方法接受两个参数，如果这两个参数类型相同且具有相同的值，则返回true。

三、Object.assign() 方法，一个对象接收来自另一个对象的属性和方法。 接受任意数量的对象，并按指定的顺序将 属性 复制到接收对象中。如果多个源对象有同名属性，则排位靠后的源对象会覆盖靠前的对象。

四、自有属性枚举顺序。ES 6 严格规定来对象的自有属性被枚举时的返回顺序，这会影响到 Object.getOwnPropertyNames() 方法及 Reflect.ownKeys 返回属性的方式，Object.assign() 方法处理属性的顺序也将随之改变。

五、增强对象原型

六、简化原型访问的 Super 引用：可以更便捷地访问 对象原型。

二、Array.from() 方法可以接受可迭代对象或类数组对象作为第一个参数，返回值为一个新数组。

三、find() 方法和 findIndex() 方法 VS indexOf() 方法和lastIndexOf()方法

三、Object.assign() 方法，一个对象接收来自另一个对象的属性和方法。接受任意数量的对象，并按指定的顺序将属性复制到接收对象中。如果多个源对象有同名属性，则排位靠后的源对象会覆盖靠前的对象。

六、简化原型访问的 Super 引用：可以更便捷地访问对象原型。