ES6 Object和Array中常用的api

万物皆对象

1、Object.assign()

Object.assign(target, source);将source对象中所有可枚举的属性的值复制到目标对象中,其会返回目标对象。
兼容方法:

if(typeof Object.assign!='function'){
  Object.assign = function(target){
    'use strict';
    if(target = null){
      throw new TypeError('Cannot convert undefined or null to object');
    }
    target = Object(target);
    for(var index=0;index
  }
}
复制代码

Object.assign()只是对一级属性进行复制,而不会对对象中的对象再进行深度拷贝。如果出现同名的属性值,后者的值会覆盖前者。

  1. 用在为对象添加属性
class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}
复制代码

上面方法通过 assign 方法,将 x 属性和 y 属性添加到 Point 类的对象实例
2)为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};
复制代码

3)合并多个对象到一个新对象

const merge =
  (...sources) => Object.assign({}, ...sources);
复制代码

4)为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  let options = Object.assign({}, DEFAULTS, options);
}
复制代码

2、Obejct.is()

Object.is()用来比较两个值是否严格相等。它与严格比较运算符的作用基本相等,不同之处只有两个,一是 +0 不等于 -0,二是 NaN 等于自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
复制代码

ES5可以用下面的办法,部署Object.is()

Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 针对+0 不等于 -0的情况
      return x !== 0 || 1 / x === 1 / y;
    }
    // 针对NaN的情况
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});
复制代码

3、Object.defineProperty()

Object.defineProperty()直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并且返回这个对象。

// 给obj对象定义了一个属性key,其不可枚举,不可配置,只读,值为static。
Object.defineProperty(obj, "key", {
	enumerable: false, // 当且仅当该属性出现在相应的对象枚举属性中。默认为 false。
	configurable: false, // 当且仅当这个属性描述符值为 true 时,该属性可能会改变,也可能会被从相应的对象删除。默认为 false。
	writable: false, // 定义属性值是否可写。
	value: "static" // 属性的值
});
复制代码

4、Object.defineProperties()

Object.defineProperties(obj,props)为对象定义属性。 方法直接在一个对象上修改或创建属性,并返回修改后的对象。

5、Object.create()

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。

// 创建一个继承自Object.prototype的对象,有一个属性a,其可写,可配置,不可枚举,值为1。
Object.create(Object.prototype, {
	a: {
		value: 1,
		writable: true,
		configurable: true
	}
});
复制代码

6、Object.keys

Object.keys() 方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组,数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致(两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性)。

var obj = {a: 1, b: 2};
console.log(Object.keys(obj));
// > ["a", "b"]
复制代码

keys可以用来代替原来的for in循环,借助es5新增的数组方法,可提升代码可读性。

Object.keys(obj).forEach(function (val) {console.log(val)});
复制代码

7、Object.freeze

Object.freeze() 方法可以冻结一个对象。冻结对象是指那些不能添加新的属性,不能修改已有属性的值,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性的对象。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。

Object.freeze(obj)
复制代码

冻结对象是不可扩展的,密封的,同时期值属性的writable会被设置为false,set也将失效,总之会变为不可更改。任何尝试修改该对象的操作都会失败,可能是静默失败,也可能会抛出异常(严格模式)。

8、Object.values()

Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。

var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]
复制代码

9、Object.entries

Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组。

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
复制代码

10、Object.hasOwnProperty()

Object.hasOwnProperty() 方法用来判断某个对象是否含有指定的自身属性。

obj.hasOwnProperty(prop)
复制代码

在没有Object.keys之前,借助hasOwnProperty,可以让for in 达到类似的效果

for(var key in obj) {
	if (obj.hasOwnProperty(key)) {
		//过滤掉原型上的方法
	}	
}
复制代码

数组对象的作用是:使用单独的变量名来存储一系列的值。

1、Array.from()

Array.from()将类数组对象转换成一个真正的数组

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }
console.log(Array.from(arrayLike)); // ["a","b","c"]
复制代码

2、Array.concat()

Array.concat()进行数组合并

let arr = [1, 2, 3]
arr.concat([4, 5])      // [1, 2, 3, 4, 5]
复制代码

3、Array.sort()

Array.sort()进行数组排序

arr.sort();                 // 升序,默认
arr.sort((a, b) => a - b);  // 升序
arr.sort((a, b) => b - a);  // 降序
复制代码

4、fill, sort, reverse, copyWithin, splice

var arr = [3, 6, 5, 8, 5];

// 测试时arr原始值都是[3, 6, 5, 8, 5],以下操作都会改变arr
arr.fill(0, 1, 3);      // [3, 0, 0, 8, 5],array.fill(value, start?, end?)
new Array(10).fill(0);  // 新数组填充非常方便

['a', 'c', 'b', 'd'].sort().reverse();  // 字符串数组的降序

arr.copyWithin(2, 1, 2);    // [3, 6, 6, 5, 5],array.copyWithin(target, start, end?)
arr.copyWithin(2, 1);       // [3, 6, 6, 5, 8],end默认为length-1

// 返回值是被删除的元素,array.splice(index, howmany?, item?...)
arr.splice(1);      // 返回[6, 5, 8, 5], arr = [3]
arr.splice(1, 2);   // 返回[6, 5], arr = [3, 8, 5]
arr.splice(1, 2, 0);    // 返回[6, 5], arr = [3, 0, 8, 5]
复制代码

5、indexOf, lastIndexOf, includes, find, findIndex, some, every

var arr = [3, 6, 5, 8, 5];

arr.indexOf(5, 3);      // 4, array.indexOF(value, start?),和String对象原理相同
arr.lastIndexOf(5, 3);  // 2,无匹配返回-1
arr.includes(5, -2);    // true,这里相当于length+(-2)

// 以下方法的参数都是:(function(curValue, index, array){}, thisValue)
arr.find(num => num > 5);       // 6,第一个大于5的element,无匹配返回undefined
arr.findIndex(num => num > 5);  // 2,第一个大于5的element的index,无匹配返回-1
arr.some(num => num > 5);       // true,有element > 5
arr.every(num => num > 5);      // false,不是所有element > 5

arr.findIndex((num, index, array) => index > 2 && num > 5)  // 等价于indexOf(5, 3)
复制代码

6、slice, filter, map, forEach, reduce, reduceRight

var arr = [3, 6, 5, 8, 5];

arr.slice(1, -2);   // [6, 5],原理同String对象

// 以下方法的参数都是:(function(curValue, index, array){}, thisValue)
arr.filter(num => num > 5);     // [6, 8]
arr.map(num => num * 2);        // [6, 12, 10, 16, 10]

// 注意:输出6行,最后为undefined
arr.forEach((num, index) => {
    console.log(index > 2 && num > 5 ? num : 0);
})

// 参数:(function(total, curValue, index, array){}, initialValue)
arr.reduce((total, num) => total + num);    // 27,所有值相加
arr.reduceRight(((total, num) => total - num), 100);    // 73,从右开始,100-elementValue
复制代码

7、keys, values, entries

// 都返回遍历器(Iterator)对象,其他语言有叫游标(cursor)的
for (let index of ['a', 'b'].keys()) {
    console.log(index);             // 0, 1
}

// 报错:TypeError: ["a","b"].values(...) is not iterable,但看阮一峰的测试是可以的
for (let elem of ['a', 'b'].values()) {
    console.log(elem);
}

for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem);
}

let arr = ['a', 'b'];
let entries = arr.entries();    // entries={},Iterator对象

entries.next();     // {value: [0, 'a'], done: false}
entries.next();     // {value: [1, 'b'], done: false}
entries.next();     // {value: undefined, done: true},判断是否遍历完毕
复制代码

8、扩展运算符(…)

// 将Array展开成逗号分隔的参数序列,主要用于函数调用
console.log(1, ...[2, 3, 4], 5);    // 1 2 3 4 5

// 替代apply方法
let arr = [0, 1, 2];

Math.max.apply(null, arr);  // 2
Math.max(...arr);           // 2

Array.prototype.push.apply(arr, [3, 4, 5]);
arr.push(...[3, 4, 5]);

new (Date.bind.apply(Date, [null, 2018, 7, 1]));
new Date(...[2018, 7, 1]);
复制代码

9、from, of

// 部署了Iterator接口的数据结构,会调用Iterator转为Array
Array.from('test');                 // ['t', 'e', 's', 't']
Array.from(new Set(['a', 'b']));        // ['a', 'b']

// 有length属性的数据结构
let obj = {}
Array.from(obj)     // [],空数组

obj.length = 3
Array.from(obj)     // [undefined, undefined, undefined]

let obj = {'3': 3, '2': 2, '1': 1}

obj.length = 4      // [undefined, 1, 2, 3],下标会排序,没有找到'0'属性
obj.length = 3      // [undefined, 1, 2],'3'被舍去了

// 将一组值转换为Array
Array.of();             // []
Array.of(undefined);    // [undefined]
Array.of(1);            // [1]
Array.of(1, 2, 3);      // [1, 2, 3]
复制代码

参考:

juejin.im/post/593769… blog.csdn.net/u014711094/…

你可能感兴趣的:(数据结构与算法)