【前端】ES6：数值扩展、对象扩展、函数扩展

1 数组扩展

1.1 扩展运算符

let arr1 = [1,2,3]
let arr2 = [4,5,6]

console.log([...arr1,...arr2])

1.2 Array.from

将类数组对象转换为真正数组。

function test(){
	console.log(Array.from(arguments))
}

test(1,2,3)

let oli = document.querySelectorAll("li")
console.log(Array.from(oli))

1.3 Array.of

将一组值转化为数组，即新建数组。

let arr1 = Array(3)
console.log(arr1) // [,,]

let arr2 = Array.of(3)
console.log(arr2) // [3]

1.4 find方法

• 该方法主要应用于查找第一个符合条件的数组元素。
• 它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素，如果没有符合条件的元素，返回值为undefined。

let arr = [11,12,13,14,15]
let res1 = arr.find(function(item){
    return item > 13
})
let res2 = arr.findIndex(function(item){
    return item > 13
})
console.log(res1) //14
console.log(res2) //3

1.5 fill方法

使用自己想要的参数替换原数组内容，但是会改变原来的数组。

let arr1 = new Array(3).fill("kerwin")
let arr2 = ['a', 'b', 'c'].fill("kerwin", 1, 2)
console.log(arr1) //['kerwin', 'kerwin', 'kerwin']
console.log(arr2) // ['a', 'kerwin', 'c']

1.6 flat与flatMap方法

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

var obj = [
	{
    	name: "A",
    	list: ["鞍山", "安庆", "安阳"]
	},
	{
		name: "B",
		list: ["北京", "保定", "包头"]
	}
]
console.log(obj.flatMap(item => item.list))

2 对象扩展

2.1 对象简写

let name ="moduleA"
let obj = {
    name,
    test1(){

    },
    test2(){

    }
}

2.2 属性名表达式

let name ="moduleA"
let obj = {
    name,
    [name + "test1"](){

    },
    [name + "test2"](){

    }
}

2.3 Object.assign

• Object.assign(target，object1，object2)的第一个参数是目标对象，后面可以跟一个或多个源对象作为参数。
• target：参数合并后存放的对象，object1：参数1，object2：参数2。

const obj1 = {
    name: "kerwin"
};
const obj2 = {
    name:"tiechui"
};
const obj3 = {
    age:100
};

Object.assign(obj1, obj2, obj3);
//obj1 {name: 'tiechui', age: 100}

2.4 Object.is

方法判断两个值是否是相同的值。

console.log(NaN === NaN) //false
console.log(+0 === -0) //true

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

3 函数扩展

3.1 箭头函数

• 箭头函数是 ES6 里面一个简写函数的语法方式。

• 重点： 箭头函数只能简写函数表达式，不能简写声明式函数。

function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
	fn: function () {} // 可以简写
}

• 语法： (函数的行参) => { 函数体内要执行的代码 }。

const fn = function (a, b) {
    console.log(a)
    console.log(b)
  }
// 可以使用箭头函数写成
const fun = (a, b) => {
	console.log(a)
    console.log(b)
}

const obj = {
	fn: function (a, b) {
		console.log(a)
      	console.log(b)
    }
}
// 可以使用箭头函数写成
const obj2 = {
	fn: (a, b) => {
		console.log(a)
      	console.log(b)
    }
}

3.2 箭头函数的特殊性

• 箭头函数内部没有 this，箭头函数的 this 是上下文的 this。

// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
	fn: function () {
		console.log(this)
    },
    // 这个位置是箭头函数的上一行，但是不能打印出 this
    fun: () => {
      	// 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
      	console.log(this)
    }
}
  
obj.fn()
obj.fun()

• 按照我们之前的 this 指向来判断，两个都应该指向 obj。

• 但是 fun 因为是箭头函数，所以 this 不指向 obj，而是指向 fun 的外层，就是 window。

• 箭头函数内部没有 arguments 这个参数集合。

const obj = {
	fn: function () {
      	console.log(arguments)
    },
    fun: () => {
      	console.log(arguments)
    }
}

obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
obj.fun(1, 2, 3) // 会直接报错

• 函数的形参只有一个的时候可以不写 () 其余情况必须写。

const obj = {
	fn: () => {
      	console.log('没有参数，必须写小括号')
    },
    fn2: a => {
      	console.log('一个行参，可以不写小括号')
    },
    fn3: (a, b) => {
      	console.log('两个或两个以上参数，必须写小括号')
    }
}

• 函数体只有一行代码的时候，可以不写 {} ，并且会自动 return。

const obj = {
	fn: a => {
      	return a + 10
    },
    fun: a => a + 10
}
  
console.log(fn(10)) // 20
console.log(fun(10)) // 20

3.3 函数传递参数的时候的默认值

• 在定义函数的时候，有的时候需要一个默认值出现。
• 当不传递参数的时候，使用默认值，传递参数了就使用传递的参数。

function fn(a) {
	a = a || 10
    console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

• 在 ES6 中我们可以直接把默认值写在函数的形参位置。

function fn(a = 10) {
	console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

• 这个默认值的方式箭头函数也可以使用。
• 注意： 箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写 （）。

const fn = (a = 10) => {
	console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20