ES6

1. 什么是 ES6

其实就是 JS 发展过程中的某一个版本号

JS:

JS 在最初的版本中并不是像现在一样具备很完善的功能
但是随着时间的流逝, JS 也在一版一版的迭代更新
然后再版本号为 ES6 这一个版本的时候, 推出了很多好用的而且常用的功能
但是后续也还有新的版本推出, ES7 ES8 ES9...
因为后续版本更新的内容每年一次, 但是内容方法不多, 所以也没有人特别记忆这个方法是 ES7还是ES8
我们统称为 ES6 的方法, 或者 ES6+ 的方法
再 ES6 刚出的时候, 因为浏览器是浏览器厂商生产的, 所以有些功能浏览器还暂时不支持
所以当时写的时候还需要考虑兼容性, 比如当前浏览器是否支持 ES6
但现在基本所有主流浏览器都全面支持 ES6 了

延伸一道面试题:

ES6 新增的方法中, 你了解过那些

2. let与const

语法: let 变量名; const 变量名

延申一道面试题:

ES6新推出的 let与const 这两个方法与之前的 var 有什么区别

和 var 的区别

1. let 和 const 不允许重复声明变量
1. let 和 const 声明变量的时候不会出现变量提升
1. let 和 const 声明的变量会被所有的代码块 {} 限制作用范围

let 与 const 的区别

1. let 声明的变量的值可以改变, const 声明的变量的值不可以被改变, 所以我们也把 const 声明的变量叫做 "常量"
1. let 定义的变量可以不赋值, 但是 const 定义的变量必须赋值

变量提升:

在定义变量前去使用这个变量时, 如果是通过 var 这个关键字定义的变量, 那么就会出现变量提升
也就是说能用这个变量, 但是没有实际的值, 得到的值为 undefined
但是如果是通过 let 或者 const 定义的变量则不会出现变量提升, 也就是说在定义前使用变量, 浏览器会报错

let a = 100 // 通过 let 关键字 定义一个变量 a, 并赋值为 100
const b = 200   // 通过 const 关键字 定义一个变量 b, 并赋值为 200
var c = 300

//1. let 与 const 不允许重复声明变量
var a = 100
var a = 999
console.log(a)
let b = 100
let b = 100
const c = 100
const c = 100

//2. let 和 const 声明变量的时候不会出现变量提升
console.log(a)  // undefined
var a = 100
console.log(a)  // 100
console.log(b)
let b = 100
console.log(b)  // 100
console.log(c)
const c = 100
console.log(c)  // 100

//3. let 和 const 声明的变量会被所有的代码块 {}   限制作用范围
if (true) {
    var a = 100
    let b = 200
    const c = 300
}
console.log(a)  // 100
console.log(b)  // b is not defined
console.log(c)  // c is not defined

//1. let 声明的变量的值可以改变, const 声明的变量的值不可以被改变, 所以我们也把 const 声明的变量叫做 "常量"
let a = 100
a = 'QF001'
console.log(a)  // QF001
const b = 200
b = 'QF666'
console.log(b)

//2. let 定义的变量 可以不赋值, 但是 const 定义的变量必须赋值
let a;
a = 'QF999'
console.log(a)  // QF999

const b;
console.log(b)

3. 箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式

重点箭头函数只能简写函数表达式, 不能简写声明式函数语法: (函数的形参) => {函数体内要执行的代码}

箭头函数的特殊性 (一道面试题: 箭头函数与普通函数有什么区别?)

1. 箭头函数内部没有 this, 箭头函数的 this 是书写时所在位置的 this 值
1. 箭头函数内部没有 arguments 这个参数集合
1. 如果形参只有一个的时候, 小括号可以不写, 如果有多个形参或者没有形参的时候, 小括号必须写
1. 函数体只有一行代码的时候, 可以不写 {}, 并且会自动 return

function fn() {}    // 不能简写
const fun = function () {}  // 可以简写
const obj = {
    fn: function () {}  // 可以简写
}

// 普通函数简化为 箭头函数1
const fn = function (a, b) {
    console.log(a, b)
}
fn(10, 20)
const fn1 = (a, b) => {
    console.log(a, b)
}
fn1(100, 200)

//普通函数简化为 箭头函数2
const obj = {
    fn: function (a, b) {
        console.log(a + b)
    },
    fn1: (a, b) => {
        console.log(a + b)
    }
}
obj.fn(2, 3)
obj.fn1(20, 30)

// 1. 箭头函数内部没有 this, 箭头函数的 this 是书写时所在位置的 this 值
/**
 *  在箭头函数定义的位置往上数, 这一行是可以打印出 this 的
 *  这个位置的 this 是 window
 *  所以当前案例中 箭头函数内部的 this 就是 window
*/
console.log(this)
const obj = {
    name: '我是对象 obj 的 name 属性',
    fn: function () {
        console.log(this)
    },
    // 这个位置是箭头函数的上一行, 但是这个位置不能打印 this
    fn1: () => {
        // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
        console.log(this)
    }
}

obj.fn()
obj.fn1()

// 2. 箭头函数内部没有 arguments 这个参数集合
function fn () {
    console.log(arguments)  // 当前这个函数 接收到的参数的集合  打印的是一个伪数组
}
fn(1, 2, 3)

const fn1 = () => {
    console.log(arguments)
}
fn1(1, 2, 3)

const obj = {
    // 3. 如果形参只有一个的时候, 小括号可以不写, 如果有多个形参或者没有形参的时候, 小括号必须写
    fn: () => {
        console.log('没有参数, 必须写小括号')
    },
    fn1: a => {
        console.log('一个参数, 可以不写小括号, 形参的值为: ', a)
    },
    fn2: (a, b) => {
        console.log('多个参数, 必须写小括号, 形参的值分别为: ', a, b)
    },
    // 4. 函数体只有一行代码的时候, 可以不写 {}, 并且会自动 return
    fn3: () => {
        return '我是 fn3 的返回值'
    },
    fn4: (a, b) => a + b
}
obj.fn()
obj.fn1(100)
obj.fn2(1, 2)

var str = obj.fn3()
console.log(str)    // '我是 fn3 的返回值'
var num = obj.fn4(100, 200)
console.log(num)    // 300

4. 解构赋值

就是快速的从对象或者数组中取出成员的一个语法方式

解构赋值的注意点!

{} 是专门解构对象使用的
[] 是专门解构数组使用的两个不能混用

// 1. 解构对象 --- 快速的从对象中获取成员
// ES5 拿到对象的某个属性
// let name = obj.name
// let age = obj.age
// let gender = obj.gender

/**
*  ES6 拿到对象的某个属性
*      前面的 {} 表示我要从 obj 这个对象中获取成员了
*      {} 内部的 name age gender 都必须是 obj 这个对象的某些属性
*      obj 必须是一个对象
*/
let { name, age, gender } = obj
console.log(name, age, gender)
//QF001 18 男

// 2. 解构数组 --- 快速的从数组中获取成员
const arr = ['QF001', 'QF002', 'QF003']
// ES5 拿到数组的三个成员
// let a = arr[0]
// let b = arr[1]
// let c = arr[2]

/**
*  ES6 拿到数组的三个成员
*      前面的 [] 表示我要从 arr 这个数组中获取成员了
*      a b c 分别对应了 数组中索引为 0 1 2 的值
*      arr 必须是一个数组
*/
let [a, b, c] = arr
console.log(a, b, c)
//QF001 QF002 QF003

JavaScript——SE6

ES6

1. 什么是 ES6

2. let与const

3. 箭头函数

4. 解构赋值