一、数组扩展
1.Array.from方法
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(本质特征是必须拥有length属性)。因此任何有length属性的对象和可遍历的对象(ES6新增的数据结构Set和Map),都可以通过Array.form方法转为数组。
(1)Array.from方法会将数组的空位转换为undefined,也就是说这个方法不会忽略空位
(2)将类数组的对象转换为真正的数组
let arrayLike = {'0':'a','1':'b','2':'c',length:3};
//es5
let arr1 = Array.prototype.slice.call(arrayLike);
console.log(arr1);
//["a", "b", "c"]
//es6
let arr2 = Array.from(arrayLike);
console.log(arr2);
//["a", "b", "c"]
(3)数组深拷贝
let arr1 = [1,2];
let arr2 = Array.from(arr1);
arr2[0] = 10;
console.log(arr1);
//[1,2]
console.log(arr2);
//[10,2]
(4)Array.from 还可以接受第二个参数 ,作用类似于数组的map方法 用来对每个元素进行处理然后放入返回的数组之中
let obj = { 0: 1, 1: 2, 2: 3, length: 3 };
let arr = Array.from(obj, x => x * x);
console.log(arr);
//[1,4,9]
2.Array.of方法
Array.of方法用于将一组值转换为数组
这个方法主要是弥补数组构造函数Array()的不足,因为参数个数的不同会导致Array()的行为有差异
let arr = [1,2];
console.log(arr);
//通过字面量创建数组[1,2]
let arr1 = new Array(1,2);
console.log(arr1);
//通过new Array()创建数组[1,2]
但是有参数只有一个的时候会发生以下的问题:
let arr = [1];
let arr1 = new Array(1);
console.log(arr);
//[1]
console.log(arr1);
//[empty]
console.log(arr1.length);
//1
new Array()创建的数组在这种情况下返回的数组是一个[empty]它显示为空,但它有长度。因为当我们new Array()方法中只传一个参数的时候,它表示长度。
这个时候我们可以用Array of来解决new Array()的问题
let arr = Array.of(10);
console.log(arr);
//[10]
3.数组实例方法
(1)copyWithin
数组实例的copyWithin方法 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组
它接受三个参数。
target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
0 1 2 3 4 5 6 7 8
arr.copyWithin(0, 3, 6);
//从4读取到6再将这段数据把1到3替换掉
console.log(arr)
//[4, 5, 6, 4, 5, 6, 7, 8, 9]
(2)find()和findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
var arr = [1, 5, 10, 15];
var num = arr.find(function(value, index, arr) {
return value > 9;
});
console.log(num);
//10
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
var arr = [1, 5, 10, 15];
var index = arr.findIndex(function(value, index, arr) {
return value > 9;
});
console.log(index);
//2
(3)fill方法
数组实例的fill() fill方法使用给定值,填充一个数组
fill方法还可以接受第二个参数和第三个参数,用于指定填充的起始位置和结束位置
let arr = new Array(10);
arr.fill(7,1,3);
console.log(arr)
//[empty, 7, 7, empty × 7]
(4)entries(),keys()和values()
ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组。可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ["a", "b"].keys()) {
console.log(index);
// 0 1
}
for (let elem of ["a", "b"].values()) {
console.log(elem);
// a b
}
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index);
console.log(elem);
//0
//a
//1
//b
}
(5)includes
include可以用来判断元素是否存在于数组,结果返回的是布尔值
let arr = [1,2,3,4];
console.log(arr.includes(1));
//true
console.log(arr.includes(5));
//false
这里includes可以判断NAN是否在数组里,因为includes是判断两者字符串是否相等。而indexOf()进行的是严格等于操作,而NAN并不严格等于NAN。
二、对象扩展
ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
ES6允许在对象之中,只写属性名,不写属性值。这时,属性值等于属性名所代表的变量。
let name = 'Mike' ;
let obj = {
name
}
console.log(obj.name);
//Mike
ES6中对象中函数也有了简写:
let obj = {
a(){
console.log('i am fn');
}
}
obj.a();
//i am fn
ES5中不允许对象属性值是变量,但ES6支持:
let prop = "name";
let obj = {
[prop]: "Mike"
};
console.log(obj);
//{name: "Mike"}
ES6中对象还支持字符串的拼接:
let obj = {
['n'+'a'+'m'+'e']: "Mike"
};
console.log(obj);
(1)Object.is()
ES5比较两个值是否相等,只有两个运算符:相等运算符和严格相等运算符。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。
JavaScript缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。
ES6提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
console.log(+0 === -0);
//true
console.log(NaN === NaN);
//false
console.log(Object.is(+0, -0));
//false
console.log(Object.is(NaN,NaN));
//true
(2)Object.assign()
Object.assign()用于对象合并 (其实是浅拷贝)
let target = {a:1};
let source1 = {b:2};
let source2 = {c:3};
Object.assign(target,source1,source2);
console.log(target);
//{a: 1, b: 2, c: 3}
let target = {a:1};
let source1 = {b:{a:2}};
let source2 = {c:3};
Object.assign(target,source1,source2);
console.log(target);
//{a: 1, b: {a:2}, c: 3}
source1.b.a = 5;
console.log(target);
//{a: 1, b: {a:5}, c: 3}
对于Object.assign()来说,对于嵌套的对象,一旦遇到同名属性,它的处理方式是替换而不是添加,这可能不是我们想要的:
var target = { a: { b: "c", d: "e" } };
var source = { a: { b: "hello" } };
console.log(Object.assign(target, source));
// { a: { b: 'hello' } };
代码中,target对象的a属性被source对象的a属性整个替换掉了,而不会得到{ a: { b: ‘hello’, d: ‘e’ } }的结果
(3)Object.keys、Object.values和Object.entries方法
1.ES5引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
2.Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
3.Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
var obj = { foo: "bar", baz: 42 };
console.log(Object.keys(obj));
// ["foo", "baz"]
var obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj));
// ["bar", 42]
var obj = { foo: "bar", baz: 42 };
console.log(Object.entries(obj));
// [ ["foo", "bar"], ["baz", 42] ]