es6学习笔记二 —— 函数和数组的扩展

函数的扩展

es6可以与解构赋值默认值结合使用，直接为函数的参数指定默认值。

function fn(x, y=123){	// 函数里的参数可以设置默认值
	console.log(x, y)
}
fn(1, 3)	//1, 3
fn(1,)		//1, 123
function fn({ x=666, y=999 }){
	console.log(x, y)
}
fn({})		//666, 999
fn(1, 2)	//666, 999	//这种情况会使用默认值
//Cannot read property 'x' of undefined
fn()		//报错

函数的 length 属性

指定了默认值后，length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

• fn.length 返回形参个数
• arguments.length 返回实参个数

rest 参数

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，代替arguments对象。

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。

rest 参数就是一个真正的数组，数组特有的方法都可以使用。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

箭头函数

基本用法

var f = a => a;
//上面的箭头函数等同于
var f = function(a) {
  return a;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var a = () => 1;
// 等同于
var a = function () { return 1 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数直接返回一个对象，必须在对象外面加上括号。

// 报错
let getTempItem = id => { id: id, name: "byu" };

// 不报错
let getTempItem = id => ({ id: id, name: "byu" });

箭头函数使用注意点

箭头函数转成 ES5 的代码如下。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}
//转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。

由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

数组的扩展

判断数组与类数组

//typeof是无法判断出数组与类数组的
console.log(typeof divs)	//Object
console.log(typeof arr)		//Object

let divs = document.getElementsByTagName('div')
let arr = []

//第一种方法：instanceof 能够判断出数组与类数组
console.log(arr instanceof Array)	//true
console.log(divs instanceof Array)	//false

//第二种判断方法：判断他们的构造器
console.log(arr.constructor === Array)
console.log(divs.constructor === Array)

//第三种判断方法：判断对象中的字符串方法是否为[object Array]
console.log(Object.prototype.toString.call(arr) === "[object Array]")
console.log(Object.prototype.toString.call(divs) === "[object Array]")

//第四种方法：根据es6中isArray的API来进行判断
console.log(Array.isArray(arr))
console.log(Array.isArray(divs))

将类数组转为数组

let divs = document.getElementsByTagName('div')
let arr = []

Array.from(divs)
//或者
[...divs]

类数组中没有forEach方法，只能先转为数组之后再遍历

Array.from(divs).forEach((val, idx, self) => {
	console.log(val)
})

function foo(a, b, c){
	console.log(arguments)		//arguments为类数组
}

find()、findIndex()

find()用于找出第一个符合条件的数组成员

它的参数是一个回调函数，所有的数组成员依次执行这个回调函数，直到找出第一个返回值为true的成员。
如果没有符合条件的成员，则返回undefined。

let arr = [1, 2, 3, 44, 222]
console.log(arr.find(val => val > 20))

findIndex方法与find方法很类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

let arr = [1, 2, 3, 44, 222]
console.log(arr.findIndex(val => val < 5)）

for … of和for … in

for … of 拿到的是值且不可以对json进行遍历。

let arr = ["a", "f", "e", "o"]
for(let key of arr){
	console.log(key)	//a,f,e,o
}

for … in 遍历的是数组的项，若用于遍历json，则遍历的是对象的键。

let arr = [1, 2, 3, 44, 222]
for(let key in arr){
	console.log(key)	//0,1,2,3
}

keys()和values()

keys()和values()都用于遍历数组 ，他们都返回一个遍历器对象，可以用for…of循环进行遍历。

唯一的区别是keys()是对键名的遍历；values()是对键值的遍历；entries()是对键值对的遍历。

let arr = Array.from(btns)
console.log(arr)	//[button, button, button, button, button]
for(let key of arr.keys()){
	console.log(key)	//0,1,2,3,4
}
for(let key of arr.values()){
	console.log(key )	//<button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button>
}
for(let key of arr.entries()){
	console.log(key)	//[0, button],[1, button],[2, button],[3, button],[4, button]
	}

合并数组

//方法一
let a = []; let b = []
let c = a.concat(b)

//方法二
let c = [...a, ...b]	//rest扩开运算