ES6笔记分享 part 2

ECMAScript ES6 从一脸懵逼到灵活运用

接 part 1

New String Methods

const id = 'adcd123456x';
const fan = 'I love ES6.'

// .startsWith()
//   检查字符串是否以xx开头，返回布尔值，第二个参数传入开始位置索引，不传默认为0，大小写敏感

id.startsWith('abc');	// true
id.startsWith('123', 5);// true
fan.startsWith('I');	// true
fan.startsWith('i');	// false

// .endsWith()
//   检查字符串是否以xx结尾，返回布尔值，第二个参数传入结尾位置索引，不传默认为最后，大小写敏感

id.endsWith('x');	// true
id.endsWith('X');	// false
fan.endsWith('love', 6);	// true

// .includes()
//   检查子字符串是否包含于字符串中，返回布尔值，可以传入第二个参数，指定匹配开始位置索引，大小写敏感

fan.indexOf('ES6') !== -1;	// in past
fan.includes('ES6');	   // now

// .repeat()
//   将字符串重复n次，参数为重复次数( >=0 )

解构

对象解构

const Tom = {
    name: 'Tom Jones',
    age: 25,
    family: {
        mother: 'Norah Jones',
        father: 'Richard Jones',
        brother: 'Howard Jones'
    }
}

// 1. without destructuring

// const name = Tom.name;
// const age = Tom.age;
// ...

// 2. with destructuring

// 这行语句的意思：先声明变量 name 和 age ，然后在 Tom 对象中寻找同名属性，找到把属性值后赋值给变量
// 注意： 在这之前不能声明 name 和 age 变量，否则会报错
const { name, age } = Tom;
console.log(name);	// 'Tom Jones'
console.log(age);	// 25

// 如果你实在想要提前声明变量的话 可以使用 let 然后 将语句用()包裹起来
// let name = '';
// ({ name, age } = Tom);
// 因为如果不加 () 的话，解析器会把 { } 内的内容解析成一个代码块，而不是解构语法

// 对象解构中还允许对变量进行重命名
// 比如 father 变量名已经被提前占用，下面语法中把 father 重新命名成了 f ，引用时就必须使用 f 来代替
// 如果我们去获取一个对象没有的属性时，则会返回 undefined
// 当然也允许我们传入一个默认值，但只有在当对象该属性的值为 undefined 时才会使用默认值，null false 等不行
const father = "Tom's Dad";
const { father: f, mother, brother, sister = 'have no sister' } = Tom.family;
console.log(f);	// 'Richard Jones'
console.log(sister); // undefined

数组解构

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

// 获取相对应位置的值
const [one, two] = numbers
console.log(one, two)	// 1 2

// 像这样用逗号隔开可以跳过某个索引位置
const [yi, , san] = numbers
console.log(yi, san)	// 1 3

// 如果变量数量多余数组的值的话 多余的会被赋值 undefined ，
// 同样，我们也可以提供默认值， 当值为绝对的(===) undefined 时会使用默认值

// 还有一种写法 ...others 会将剩余的内容保存到一个数组里
const [first, ...others] = numbers
console.log(first, others)	// 1 [2, 3, 4, 5]

// ... + 变量名 是 rest参数 ， 后面我们再介绍
// 注意它只能出现在数组的最后面，否则会报错

以前我们要交换两个变量的值的时候，经常会定义一个中间变量，有了解构赋值我们就可以方便的进行交换了

let a = 10
let b = 20

// 引入中间变量
let temp
temp = a
a = b
b = temp
console.log(a, b)	// 20 10

// 解构赋值
[a, b] = [b, a]
console.log(a, b)	// 10 20

for of 循环

for of 是ES6新增的一种循环方式

const fruits = ['apple', 'banana', 'orange', 'mango']

// 我们在遍历一个数组的时候， 常常有这几种方法：
// 1. for 循环 - 这种方式既繁琐可读性又差
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i])
}

// 2. 数组的 forEach() 方法 - 简化了for循环，而且可以有新的变量名 fruit，但此方法无法中止或跳出循环
fruits.forEach(fruit => {
    console.log(fruit)
})

// 3. for in 循环 -
for (let fruit in fruits) {
    console.log(fruit)	// 0 1 2 3   : for in 循环的值是属性名而不是属性值，所以在遍历数组是返回的是索引值
}

for (let index in fruits) {
    console.log(fruits[index])	// apple banana orange mango
}

// 但是还有一个问题，for in 循环遍历的是对象上的所以可枚举属性， 即使你是加在原型对象上
// 比如我们给 fruits 加一个属性，这时候再去遍历输出， 你会发现输出多了个 My favorit fruits
// for in 更适合用来遍历对象，不适合用来遍历数组
fruits.description = 'My favorit fruits'
for (let index in fruits) {
    console.log(fruits[index])	// apple banana orange mango My favorit fruits
}

// 为了解决以上几种方法的缺陷 ES6 引入了新的循环方法 for of
// 它解决了 for in 遍历内容为属性名 和 会遍历数组的非数字属性 的问题
// 而且相对 forEach() 方法而言，它还支持循环中止和跳过
for (let fruit of fruits) {
    console.log(fruit)	// apple banana orange mango
}

New Array Methods

.from() & .of()

这两个方法并不是原型上的方法，需要通过 Array 对象来调用，即Array.from()和 Array.of()

• Array.from()用于把一个类数组或者可遍历对象转换为一个真正的数组，

  同时它还支持传入回调函数作为第二个参数 ，来对转换成的数组每一项执行一定的方法进行处理

• Array.of()主要解决Array()构造函数传入不同数量的参数时行为不一致的问题：

  ​ 当你传入一个参数(例如：2)时，它会返回长度为2的数组(undefined x 2)，当你传入多个参数(例如：1,2,3)，这时它又会返回由这些参数组成的数组

  而Array.of()无论你传入多少个参数，它都会返回由这些参数组成的数组

其他方法

.find() .findIndex() .some() .every()

find()方法用于返回满足条件（函数内判断）的数组的第一个元素的值

• 当数组中的元素在符合条件时返回，之后的值不会再调用执行函数
• 如果没有符合条件的元素返回 undefined

语法：array.find(function(element, index, arr))

参数：测试函数 function(element, index, arr)

​ element - 当前元素

​ index - 当前元素索引

​ arr - 正在执行该方法的数组

findIndex()方法与find()方法类似，唯一不同就是它返回的是满足条件的元素的索引值

some()和every()方法也是传入一个测试函数，返回一个布尔值

​ 前者表示至少有一个满足，即找到一个满足条件的元素时返回true

​ 后者表示每一个都满足，即当所有元素都满足条件时才会返回true，当找到一个不满足条件的元素时就会立即返回false

剩余参数

当我们定义一个函数的时候，在最后一个形参前面加三个点，就表示剩余参数

// 比如我们定义一个函数来计算商品的折后价
// 第一个参数传入的是折扣 后面的参数为商品原价
// 这里我们就可以用到剩余参数啦，将价格存到一个数组中去
function discount(rate, ...prcies) {
	// 因为prices是一个数组，所以我们可以直接调用 map 方法
    return prices.map((price) => price * rate)
}

const discountPrices = discount(0.8, 100, 150, 1000)
console.log(discountPrices)		// [80, 120, 800]

前面我们提到过，剩余参数还以用于变量的解构

// 我们定义一个变量来记录玩家的 name id 和 scores
// 利用剩余参数我们就可以方便的将分数都保存到一个数组里面
const player = ['Tom', 123456, 5.6, 7.3, 3,4, 8.9]
const [name, id, ...scores] = player