ES6常用

1. 为什么使用ES6

使得JS可以用来开发大型的Web应用，成为企业级语言
而企业级的开发语言就是：适合模块化开发，拥有良好的依赖管理

2. var、let、const的区别

var不受条件限制，定义的变量没有范围限制，没有前后关系

let与var相反，受范围与前后关系限制

const是常量，定义完之后不能修改

3. ES6块级作用域

什么是块级作用域？

作用域就是一个变量可以使用的范围

在没有es6 的let之前，只有var 的全局作用域 和 函数作用域

而块级作用域的意思其实就是一个{} (代码块)，变量只有在 {} 中生效

{
    let a = 'ab'
    var b = 'cd'
    console.log(a) // 'ab'
}
console.log(a)  // ReferenceError: a is not defined
console.log(b)  // 'cd'

2. ES6字符串模板

使用反字符号``来总括分行的字符串

str = `<div>
			<span>你好</span>
		</div>`
console.log(str)  // <div><span>你好</span></div>

在字符串中插入变量和表达式，变量名写在${}中，${}也可以放入js表达式

let a = '小明'
let b = '西瓜'
let c = 18
let d = `${a}今年${c + 20}岁，爱吃${b}`  // 小明今年38岁，爱吃西瓜

插入函数

function fineFunc() {
    return `是的，不错！`
}
let say = `今天天气不错！${fineFunc()}`
console.log(say)

3. ES6判断字符串里是否包含某些值

1. indexOf()

方法可以返回某个指定的字符串值在字符串中首次出现的位置

如果要检索的字符串值没有出现，则该方法返回 -1

let str = 'Tom'
console.log(str.indexOf('a') != -1) // false

2. includes()

返回布尔值，表示是否找到了参数字符串。

let str = 'Tom'
str.includes('a')?console.log(true):console.log(false)  // false

let arr = [2, 4, 8]
arr.includes(3)  // false
arr.includes(4)  // true

3. startsWith()

用来判断当前字符串是否是以另外一个给定的值开头的，根据判断结果返回 true 或 false

// str.startsWith(searchString, [position])
// searchString: 要搜索的值
// position: 在str中搜索searchString 的开始位置，默认为0

// 例子：
let str = "我和我的祖国，一刻也不能分割"
str.startsWith("我和")  // true
str.startsWith("我和", 0)  // true
str.startsWith("我和", 1)  // false
str.startsWith("一刻")  // false
str.startsWith("一刻",7)  // true

4. endsWith()

用于判断字符串是否以给定的值结尾，根据判断结果返回true或false

let str = "前端开发工程师"
str.endsWidth('师')  // true

4. ES6箭头函数

箭头函数的出现简化了函数的定义，让代码更简洁，省去关键字function

但是也要注意箭头函数的局限性，以及箭头函数中自身没有this，this指向父级

弊端：

箭头函数没有原型prototype, 因此箭头函数没有this指向。
箭头函数不会创建自己的this，如果存在外层第一个普通函数，在函数定义的时候会继承它的this
箭头函数外层没有函数，严格模式和非严格模式下它的this都会指向window全局对象

let getFunc = ()=>{
    return '你好'
}
// 只有一个参数可以省去括号
let getData = name => {
    return name
}
// 多个参数用括号包裹，以逗号分割
let getStr = (a,b,c,d) => {
    return [a,b,c,d]
}

5. ES6对象表达式

let a = 'jack'
let b = 'tom'

const obj1 = {
    a:a,
    b:b
}
const obj2 = {
    a,
    b,
}

6. ES6判断两个值是否相等

除了常用的 === 和 == 用来比较两个值的结果，ES6 可以使用新的方式。

Object.is(val1, val2)
Object.is(88,88)  // true
Object.is(88,'88')  // false
Object.is('',0)  // false
Object.is('ab','cd')  // false

7. ES6 Object.assign() 复制对象,数据合并

let obj = {}
Object.assign(obj, { name: 'jack' })
console.log(obj)  // { name: 'jack' }

let target = { a: 1 }
let s1 = { b: 1 }
let s2 = { c: 1 }
Object.assign(target, s1, s2)
console.log(target)  // { a: 1, b: 1, c: 1 }

9. ES6解构运算符

let arr = [1,2,3]
let [a, b, c] = arr
console.log(a,b,c)  //  1,2,3

10. ES6展开操作符

let arr = ['a','b','c']
console.log(...arr)  // a b c

11. 获取对象属性Object.keys(),Object.values(),Object.entries()

const person = {
    name: 'jack',
    age: 20,
    lang: ['html', 'css', 'javascript']
}
console.log(Object.keys(person)) // ['name', 'age', 'lang']
console.log(Object.values(person))  // ['jack', 20, ['html', 'css', 'javascript']]
console.log(Object.entries(person)) 
// [
//  [ 'name', 'jack' ],
//  [ 'age', 20 ],
//  [ 'lang', [ 'html', 'css', 'javascript' ] ]
// ]

12. 深度拷贝 ...

1. 单个对象拷贝

const person1 = {
    name: 'jack',
    age: 28
}
// 将person1 的内容完全拷贝给 person2
const person2 = { ...person1 }
console.log(person1)
console.log(person2)

2. 合并两个对象到第三个对相

相同的属性会覆盖，多余会添加。

const m1 = {
    name: 'jack',
    age: 18,
    address: 'zhengzhou'
}
const m2 = {
    name: 'tom',
    age: 23,
    sex: 'girl'
}
const m3 = { ...m1, ...m2 }
console.log(m3) 
// { name: 'tom', age: 23, address: 'zhengzhou', sex: 'girl' }

014 ES6常用