ES6新特性

es6语法

1.this的指向

2.修改this指向的方法

3.let和const关键字

4.箭头函数

5.函数参数默认值

6.模板字符串

7.解构赋值

8…展开运算符

9.对象的简写形式

10.es6模块化语法

1.this的指向【面试题】

`概念`： js内部提供的一个关键词。

`全局环境中的this`: window对象。因为什么呢？调用函数是：函数名(); 其实可以看成是 window.函数名()。也就是挂载到了window上自然指向window全局
`在普通函数中的this`:this取决于谁调用，谁调用我，this就指向谁，跟如何定义无关
`对象中方法的this`: 利用对象调用的函数，this指向对象本身
`定时器中的this`: window对象
`事件函数中的this`: 事件源
`箭头函数中的this`: 两种理解：
1. ：该函数声明时所处的作用域
2. ：箭头函数内没有自己的this，箭头函数内的this就是外部作用域的this。
换句话说，当你需要判断箭头函数内的this的时候，和函数怎么调用没有关系了，要看函数定义在什么位置

`构造函数中的this`:构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象，所以构造函数中的this->实例化对象

'注意'： 一般情况，this会指向函数的调用者





`经验一 :`
在js的非严格模式下适用：箭头函数除外
1. 函数的this，不管函数定义在哪里，不管函数怎么定义，只看函数的调用方式
	只要我想知道this是谁
    就看这个this是写在哪个函数里边
    这个函数是怎么被调用的（只看父级函数被调用没，其他不管，父级没调用，自己调用那就指向window）
`经验二 :`
2. 严格模式下,全局函数没有 this,全局this是个 undefiend，其他照搬经验一 即可
 严格模式：'use strict'

2.修改this指向的3种方法【面试题】

`call方法`： 
	1. 立即执行对应的函数
    2. 第一个参数用来修改this指向， 不需要被接收
    3. 可以设置多个参数，形参会依次错位的接收
    
`apply方法`：
	1. 立即执行对应的函数
    2. 第一个参数用来修改this指向， 不需要被接收
    3. 只能设置两个参数，第2个参数必须是数组或者伪数组，形参会依次接收数组里面的每一数组元素
    
 `bind方法`：
 	1. 不会立即执行对应的函数，而是返回一个修改了this指向的新函数
    2. 第一个参数用来修改this指向， 不需要被接收
    3. 可以设置多个参数，形参会依次错位的接收
    
  # 面试题： call，apply和bind方法的区别？

3.let和const关键字

`概念`： es6语法提供的两个关键字，专门用来声明变量的。

3.0 let 和 const使用场景：

` let一般应用于基本数据类型；const 一般应用于引用数据类型，也就是函数对象等。`

3.1 var和let的区别【面试题】

var 和 let的区别：
1. var可以重复声明相同的变量，可能会造成程序问题； let不可以重复声明相同的变量

2. var声明的变量会挂载到window对象上，let声明的变量不会挂载到window对象上

3. var声明的变量只有全局和函数作用域，let声明的变量具有块级作用域，用'{}'表示块级作用域

4. var声明的变量支持变量提升， let声明的变量不支持变量提升

`暂时性死区`：
1. let所声明的变量一定要在声明后使用，否则报错
2. let不允许在相同作用域内，重复声明同一个变量
3. typeof 不再是一个百分之百安全的操作

console.log(a); // ReferenceError: Cannot access 'a' before initialization ：a 不能在初始化之前进入
let a = 123;

typeof a // ReferenceError: Cannot access 'a' before initialization
let a

3.2 const声明常量

`常量`： 不能改变的数据，和变量相对的

// const的特点： 
// 1. 不能重复声明相同的常量名
// 2. 常量不能修改值
// 3. 常量必须赋初始值
// 4. 使用常量可以提高代码的执行效率

// 常量的使用场景：
// 1. js内置的一些不会改变属性： Math.PI
// 2. const 变量名 = function(){}
// 3. 预计不会改变的数据

4.箭头函数

# 箭头函数是用来替代函数表达式的语法。任何使用函数表达式的地方都可以使用箭头函数
`语法`： 
const 变量名 = () => {
    // 函数体
}
`可以简写的两个地方`：
1. 如果有且仅有一个形参，可以省略形参的小括号
const fn = item => {}
2. 如果函数体的代码只有一行，可以省略花括号+return关键词
const fn1 = arr.map((item) => {
    return item + 2
})
简写为： const fn1 = arr.map(item => item + 2)

`注意`：箭头函数的this指向：该函数声明时所处的作用域

5.函数参数默认值

# 函数参数默认值的作用：让程序变得更健壮，兼容性更强

`es5通过逻辑或运算来实现`
// function fn(hero, saying) {
//     hero = hero || '亚索'  // 如果hero为true， 就将hero的值赋值给hero, 否则就把默认值亚索赋值给hero
//     saying = saying || '哈撒给'
//     return `${hero}说：${saying}`
// }

// console.log(fn());
// console.log(fn('小妲己'));
// console.log(fn('小妲己', '随便说'));

`es6通过直接在形参后面赋值来实现`
function fn1(hero = '亚索', saying = '哈撒给') {
    return `${hero}说：${saying}`
}

// console.log(fn1());
console.log(fn1('小妲己'));
console.log(fn1('小妲己', '随便说'));

6.es6模板字符串【回顾】

 // 普通字符串和es6模板字符串的区别：
// 1. 普通字符串用单引号或者双引号包起来；模板字符串用反引号包起来；
// 2. 普通字符串不支持直接换行，模板字符串支持换行
// 3. 普通字符串需要使用'+'拼接变量； es6模板字符串直接用模板站位符包起来即可

// 普通字符串
var uname = '渣渣辉'
var age = 18
var relation = '兄弟'
// var str = '大家好，我是渣渣辉，我今年18岁，是兄弟就来砍我一刀';
var str = '大家好，我是' + uname + ',我今年' + age + '岁，\n是' + relation + '就来砍我一刀'
console.log(str);
// var str1 = `大家好，我是渣渣辉，是兄弟就来砍我一刀`
var str1 = `大家好，我是${uname}, 我今年${age}岁，
是${relation}就来砍我一刀`
console.log(str1);

7.数组，对象，解构赋值：：：

口诀:数组(要位不要名), 对象(要名不要位)

# 数组解构： 快捷的将某些数组元素从数组中取出来

let [变量1, 变量2, ...] = 数组 

// 以上：从数组中将每一对应数量的数组元素解构出来，并且一一赋值给等号左边的变量

# 对象解构： 快捷的将某些属性和方法从对象中取出来
let { 变量1, 变量2, ... } = 对象
'注意'：等号左边的变量名必须和对象的属性名或者方法名一样





#了解下面：
# 字符串解构
字符串的解构可以理解为一维数组的解构,这在处理字符串的时候特别方便.
let [a,b,c] ='123'
console.log(a,b,c,typeof c)  //1,2,3,string   
//解构出来的是字符类型的数据　长度
let {length:s} ='123'
console.log(s,typeof s) //3,number 
//同理,数组也有长度
let {length:s} = [1,2,3]
console,log(s,typeof s) //3,number

# 函数参数在传参的时候，其实是自动解构了
function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2

8…展开运算符

# 作用：实现数组和对象的合并，以及将伪数组转换为真正的数组

var arr = ['坤坤', '凡凡', '宏宏']

console.log(...arr);

// 展开运算符实现数组合并
var arr1 = ['波波', '迪迪']

// console.log(arr.concat(arr1));

var arr2 = [...arr, ...arr1, 123, 234]

console.log(arr2);


// 展开运算符实现伪数组转换为真正的数组
function fn() {
    // console.log(arguments);
    var args = [...arguments]
    console.log(args);
}
fn(1, 2, 3, 4)

 // 2. 展开对象
var obj1 = {
    uname: '小貂蝉',
    hobby: '蹲草丛',
    addr: '科技六路'
}

var obj = {
    uname: '小妲己',
    age: 18,
    sex: '女'
}

// uname: '小妲己', age: 18, sex: '女'

// console.log(...obj);

// 合并对象
// Object.assign({}, 源对象1, 源对象2, ...)
// let obj2 = Object.assign({}, obj, obj1)
// console.log(obj2);

'注意'：合并对象时，如果对象里面有相同的属性，后面的会覆盖前面的
let obj2 = { ...obj, ...obj1, commpany: '王者农药' }

console.log(obj2);

9.对象可以简写的两个地方

`1.`
// 对象可以简写的两个地方：
// 1. 如果对象的属性名和属性值一样，保留一个即可
// 2. 对于对象里面的方法，可以省略':function'
var uname = '小妲己'
var obj = {
    uname,
    say: function () {
        console.log(111);
    },
    listen() {
        console.log(222);
    }
}

console.log(obj);

obj.listen()

10.es6模块化

`模块化`：在js中，每一个文件都是一个模块，模块之间可以相互导入导出。

# 先导出，再导入

`分开导出`： 在每一个需要导出的标识符前面加上'export'关键字
export function fn() {}
export let str = 'xxx'

`一起导出`：在内容的末尾添加export default {}
export default {
    fn1, // 这是对象的简写形式
    strB
}

`针对分开导出，对象解构的形式来导入`
import { fn, str } from '路径'

`针对一起导出的内容,只能使用变量来接收`
import 变量 from '路径'


# 注意：在html文件中导入：<script type='module' src = 'js文件路径'></script>

11.for…in 和 for…of

var arr = [1, 2, 3, 4, 5]

for (var val of arr) {
    console.log(val); // val就是数组元素
}

var obj = {
    uname: '小妲己',
    age: 18
}

for (var key of obj) {
    console.log(key); // 报错
}


// for...in可以遍历数组： key是数组的索引
for (var key in arr) {
    console.log(key);
}

// 注意：for...in既可以遍历对象（遍历对象是属性名，数组是索引，字符串是下标），又可以遍历数组； for...of只能遍历数组，字符串（遍历数组是数组元素，字符串是字符串中字符）