vue基础知识2

4、剩余参数

大家可能遇到过这种问题，一个函数，传入参数的个数是不确定的，这就可以用ES6的剩余参数

function fn (name, ...params) {
  console.log(name)
  console.log(params)
}
fn ('林三心', 1, 2) // 林三心 [ 1, 2 ]
fn ('林三心', 1, 2, 3, 4, 5) // 林三心 [ 1, 2, 3, 4, 5 ]

5、模板字符串

以前的我，拼接字符串只能这么做

const name = '林三心'
const age = '22'

console.log(name + '今年' + age + '岁啦') // 林三心今年22岁啦

现在我可以这么做，会更优雅

const name = '林三心'
const age = '22'

console.log(`${name}今年${age}岁啦`) // 林三心今年22岁啦

6、Object.keys

可以用来获取对象的key的集合，进而可以获得对应key的value

const obj = {
  name: '林三心',
  age: 22,
  gender: '男'
}

const keys = Object.keys(obj)
console.log(keys) // [ 'name', 'age', 'gender' ]

7、箭头函数

以前我们使用普通函数

function fn () {}

const fn = function () {}

ES6新加了箭头函数

const fn = () => {}

// 如果只有一个参数，可以省略括号
const fn = name => {}

// 如果函数体里只有一句return
const fn = name => {
    return 2 * name
}
// 可简写为
const fn = name => 2 * name
// 如果返回的是对象
const fn = name => ({ name: name })

普通函数和箭头函数的区别：

• 1、箭头函数不可作为构造函数，不能使用new

• 2、箭头函数没有自己的this

• 3、箭头函数没有arguments对象

• 4、箭头函数没有原型对象

8、Array.prototype.forEach

ES6新加的数组遍历方法

const eachArr = [1, 2, 3, 4, 5]

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数
eachArr.forEach((item, index, arr) => {
  console.log(item, index, arr)
})
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]

9、Array.prototype.map

常用于返回一个处理过后的新数组

const mapArr = [1, 2, 3, 4, 5]

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，对每一个元素进行翻倍
const mapArr2 = mapArr.map((num, index, arr) => 2 * num)
console.log(mapArr2)
[ 2, 4, 6, 8, 10 ]

10、Array.prototype.filter

顾名思义，用来过滤的方法

const filterArr = [1, 2, 3, 4, 5]

// 三个参数：遍历项 索引 数组本身
// 配合箭头函数，返回大于3的集合
const filterArr2 = filterArr.filter((num, index, arr) => num > 3)
console.log(filterArr2)
[ 4, 5 ]