ES6数组、对象的扩展

数组的扩展

forEach

格式：

//第一个参数为函数
    //函数的第一个参数 是遍历的当前元素
    //函数的第二个参数 当前元素的下标
    //函数的第三个元素 数组本身。
//第二个参数为：函数中this指向。
arr.forEach(function(item,index,arr){
	
},obj);

var arr = [
    "千与千寻",
    "肖申克的救赎",
    "谁先爱上他的",
    "哈尔的移动城堡",
    "海上钢琴师"
]
var lis = document.querySelectorAll("li")

arr.forEach(function(item,index,self){
    // console.log("电影名:"+item+",下标为："+index);
    this[index].innerHTML = item;
},lis);

map方法

map 映射含义，用法与forEach基本类似。

可以在函数中定义返回值。返回是一个数组。

var arr = [
    {name:"千与千寻",score:"8.6"},
    {name:"肖申克的救赎",score:"9.6"},
    {name:"谁先爱上他的",score:"8.3"},
    {name:"哈尔的移动城堡",score:"8.9"},
    {name:"海上钢琴师",score:"9.0"}
]
var arr2 = arr.map(function(item){
    return item.score;
});
console.log(arr2);

Array.form()

Array.form方法可以将类似数组的对象转为真正的数组。比如：DOM获取的伪数组，arguments对象。

let lis = document.querySelectorAll("li");
console.log(lis);
var arr = Array.from(lis);
console.log(arr);

function sort(){
    var args = Array.from(arguments);
    return args.sort();
}
console.log(sort(6,3,5));

let likeArr = {
    length:3,
    "0":"hello",
    "1":"word",
    "2":"你好"
}
let arr = Array.from(likeArr);
console.log(arr);

Array.of()

Array.of方法将一组值，转换为数组。

let arr = Array.of(1，2，3);
console.log(arr);

let arr2 = new Array(3);
console.log(arr2);

copyWithin()

将指定位置的内容复制到其他位置（复制会覆盖原有的内容）然后返回当前数组。

格式：

//target：必需，从该位置进行覆盖
//start：可选，从该位置开始读取数据，默认为0。如果为负数，表示倒数。
//end:可选 到该位置结束读取数据，默认为数组的长度。如果为负数，表示倒数、
arr.copyWithin(target,[start],[end]){}

find()和findIndex()

find方法，找到第一个符合条件的数组元素。

arr.find(function(item,indedx,arr){
//条件判断
})

var arr = [1,6,-10,-9].find(function(item){
	return item < 0;
})
// ES6箭头函数写法
var arr = [1,6,-10,-9].find(item=>item < 0)
console.log(arr);

findIndex，找到第一个符合条件的数组元素的下标。

var arr = [1,6,-10,-9].findIndex(item=>item < 0)
console.log(arr);

keys(),values(),entries()

这三个方法主要用于数组的遍历。配合for…of循环。

keys():对键名的遍历

values():对键值的遍历

entries():对键值对的遍历。

for…of循环

//格式：
//item 指遍历的当前元素
//arr 指遍历的数组
for (const item of arr) {
	console.log(item);
}
var arr = ["a","b"]
for (const item of arr) {
	console.log(item);
}

var arr = ["a","b"]
for (const item of arr.keys()) {
	console.log(item);
}
// 0 1
for (const item of arr.values()) {
	console.log(item);
}
// a b
for (const item of arr.entries()) {
	console.log(item);
}
//[0,"a"] [1,"b"]

includes()

该方法可以判断数组是否包含指定的值。

格式：

//arr:数组
//value：判断该数组中是否包含该值
//target：从数组的指定位置开始查找。
arr.includes(value,target)

返回值：布尔值 true为包含,false 不包含

console.log( [1,2,3].includes(2)); //true
console.log( [1,2,3].includes("2")); //false
console.log([1,2,3].includes(2,1));//true
console.log([1,2,3].includes(2,2));//false

var arr = [1,2,3]
var index = arr.indexOf(2);
if(index !== -1){
	console.log("该值已包含");
}else{
	console.log("该值不包含");
}

includes方法与indexOf()方法的区别

1. indexOf返回的是下标。 includes返回的是布尔值
2. indexOf用来判断是否包含不够语义化，不够直观。
3. 对于NaN是有误判的。

对象扩展方法

Object.assign()

assign()用于对对象的合并。

格式：

//第一个参数后面的所有参数，合并到第一个参数中。
Object.assign(target,obj1,obj2)

        const target = {name:'奥黛丽·赫本'}
        const obj1 = {age:'20'}
        const obj2 = {sex:'女'}
        Object.assign(target,obj1,obj2);
        console.log(target);

浅拷贝

只拷贝复合数据的内存地址。拷贝后的变量仍然指向原本的对象。

深拷贝

生成了新的对象，新对象和旧对象的值完全相同，然后将新对象的地址复制。

assign方法时浅拷贝。也就是说，如果被合并的对象中有一个属性为对象，那么target对象拷贝得到的是这个对象的内存地址。

同名属性

const obj1 = {
    name:"奥黛丽",
    age:"20",
    son:{
        name:"卢卡·多蒂",
        age:"40"
    }
}
const obj2 = {
    name:"赫本"
}
const target = {
    name:"奥黛丽·赫本",
    sex:"女"
};
Object.assign(target,obj1,obj2);
console.log(target);

遇到同名属性，则后面的参数对象中的属性会将前面的属性覆盖。

用在数组上

用在数组上时，会将数组视为对象。

var arr1 = [10,20,30];
// arr1 = {
//     "0":"a",
//     "1":"b",
//     "2":30
// }
var arr2 = ["a","b"];
// arr2 = {
//     "0":"a",
//     "1":"b"
// }
Object.assign(arr1,arr2);
console.log(arr1);
//a,b,30

对象的扩展

1.对象属性的简洁表示法

ES6可以在对象的大括号中，直接写入变量 和函数，作为对象的属性和方法。如果属性名与变量名相同，则可以简写，只写属性名即可。

var name = "赫本"
var obj = {name}
//相当于
var obj = {name:name}

function fn(a,b){
	return {a,b};
}
var obj = fn("hello","word");
console.log(obj);

方法的简写

在对象中，可以对方法进行简写

let obj = {
    fn(){
        console.log("今晚九点，海岛集合。");
    }
}
//相等于
let obj = {
    fn:function(){
        console.log("今晚九点，海岛集合。");
    }
}

简写只适用于普通方法，构造函数不能简写。

2.属性名表达式

拆分的功能，如果是对象，则将对象中的所有属性遍历出来，如果是数组，则将所有的元素遍历出来

let a = {x:1,y:2}
let b = {...a}
console.log(b);

let arr = [10,20,30];
let c = {...arr}
console.log(c["0"]);