js分享11-ES6新增（小白必看）

小郭日常说
92 阅读8分钟

ES6新增介绍

ES6新增的声明变量的关键字

let

  • 声明一个变量，变量遵循块级作用域
  • 变量没有变量提升
  • 声明的变量是可以被修改的
  • 声明的时候可以不给初始值

const

  • 声明一个常量，变量遵循块级作用域
  • 变量没有变量提升
  • 声明的变量不可以被修改
  • 声明的时候必须给初始值

var

  • 定义的变量遵循全局作用域
  • 声明的变量可以变量提升（执行定义提升，值没有提升，所以是undefined）

let/const 与 var 的区别

var

  • 定义的变量遵循全局作用域/函数作用域
  • 声明的变量可以变量提升(但是执行定义提升了, 值没有提升,所以是 undefined)
  • 变量可以重复声明

let/const

  • 定义的变量/常量遵循块级作用域/函数作用域
  • 声明的变量/常量不能变量提升 具有暂时性死区(其实就是说没有变量提升)
  • 变量不可以重复声明

let 与 const 的区别

let

  • 声明的是变量
  • 声明的变量可以被修改
  • 声明的时候可以没有初始值

const

  • 声明的是常量
  • 声明的变量不可以被修改
  • 声明的时候必须有初始值
（贴心提示）

推荐大量const结合let进行使用哦~

ES6 新增的函数写法优化

箭头函数

箭头函数专属的写法优化

    1. 箭头函数的形参如果只有一个, 并且没有默认值的时候, 可以省略形参的小括号不写==> 如果 函数的形参有多个, 或者说有一个形参并且有默认值, 或者 没有形参, 这些情况都必须书写 形参的小括号
    1. 如果 函数的调用要执行的代码只有 1 行, 那么可以省略 大括号, 并且默认自带 return 效果

箭头函数 和 普通函数的差别

    1. 写法不同
    1. 函数内部的 this 不同

推荐写法

        // 1. 函数只有一个形参
        const fn1 = a => { }
        // 2. 函数只有一个形参 但是具有默认值
        const fn2 = (a = 100) => { }
        // 3. 函数没有形参
        const fn3 = () => { }
        // 4. 函数有多个形参
        const fn4 = (a, b, c, d) => { }

        // 5. 函数没有返回值, 并且内部代码有多行
        const fn5 = () => {
            console.log(1)
            console.log(1)
            console.log(1)
        }
        // 6. 函数不需要返回值, 但是内部代码有多行
        const fn6 = () => console.log(1)
        // 7. 当函数只需要返回一个对象的时候
        // const fn7 = () => {
        //     return { a: 1, b: 2 }
        // }
        const fn7 = () => ({ a: 1, b: 2 })
        // console.log(fn7())

        // 8. 函数内部只需要返回一个数组
        const fn8 = () => [1, 2, 3]
        // console.log(fn8())

        // 9. 函数内部返回一个新的箭头函数
        // const fn9 = () => {
        //     // return function () {}
        //     return () => {}
        // }
        const fn9 = () => () => {}
        console.log(fn9())

解构赋值

  • 含义：快速地从数组或对象中拿到数据

数组的解构赋值

  • 要求：

    • = 赋值号右边必须是数组

    • 声明变量的时候，需要使用[ ]包裹

    • [ ]内部的变量名，只要符合命名规则与规范即可

  • 作用：

    • 会按照数组内部元素的排列顺序, 依次赋值给 = 左边 的变量

对象的解构赋值

  • 要求：

    • = 赋值号右边必须是数组

    • 声明变量的时候，需要使用{ }包裹

    • { }变量名必须和对象内部的属性名完全相同

  • 作用：

    • 将对象内部属性对应的值 给到 左边的变量中

模板字符串

  • ES5 中我们表示字符串的时候使用 '' 或者 ""
  • 在 ES6 中, 我们还有一个东西可以表示字符串 `` (反引号)
let str = `hello world`
console.log(typeof(str))    // string
  • 反引号与之前的区别
    1. 反引号可以换行书写 
      let str = 'hello world' // 使用单引号或者双引号不能换行书写, 换行会报错

// 使用反引号不会报错, 这样写也不会报错
let str = `
    hello
    world
`
    2. 反引号可以直接在字符串里拼接变量, 不过需要借助 ${} 
      // ES5 需要使用字符串拼接变量的时候
let num = 100
let str = 'hello' + num + 'world' + num
console.log(str)

let str2 = 'hellonumworldnum'
console.log(str2)

// 使用模板字符串
let num = 100
let str = `hello${num}world${num}`
console.log(str)

展开运算符

  • 在 函数的形参 前 书写一个 ...

  • 能够将 所有的实参的内容, 存放在这个形参中, 并且是以数组的形式存储的

  • 如果一个实参都没有传递, 那么这个形参就是一个 空数

  • 注意: 如果一个形参前书写了 ... 那么这个形参的后边不要再写形参了

        var arr = [111,222,333]
        console.log(...arr);
        var ar = [444,555]
        var a = [...arr,444,555]
        console.log(a);
        fn = (a,b) =>{
            console.log(a,b);
        }
        fn(...ar)
        
        const fn1 = (fb, ...myEl) => {
            console.log(fb, myEl)
        }
        fn1()
        fn1(1)
        fn1(1, 'QF001')
        fn1(1, 'QF001', true)
        fn1(1, 'QF001', true, undefined)

函数的this指向

  • 函数内部的 this 指向和函数的书写没有任何关系，而是和函数的调用有关系

  • 注意: 箭头函数内部没有 this, 他的 this 是从你使用的哪一行开始，向上一直寻找, 直到找到一个 this

        const fn = () => {
            console.log(this)
        }
        fn()

        var obj = {
            name: '我是 obj 对象',
            objFn: fn
        }
        obj.objFn()

        var obj = {
            name: '我是 obj 对象',
            objFn: () => {
                console.log(this)
            }
        }
        obj.objFn()

修改函数内部的this指向

  • 因为箭头函数 内部 没有 this, 所以我们的这些修改方法只适用于 普通函数
function fn(a, b, c) {
    console.log(a, b, c, this)
        }

const obj = {
     name: '我是 obj'
}

call

  • 语法: 函数名.call(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)* 作用: 修改函数内部的this指向, 并将参数传递进去, 并执行函数
fn.call(obj, 10, 20, 30)    // 10, 20, 30, object

apply

  • 语法: 函数名.apply(将函数内部的this指向谁, [实参1, 实参2, 实参3, 实参4....])
  • 作用: 修改函数内部的this指向, 并将参数传递进去, 并执行函数
fn.apply(obj, [1, 2, 3])    // 1, 2, 3, object

3. bind

  • 语法: 函数名.bind(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)
  • 作用: 修改函数内部的this指向, 并将参数传递进去, 然后将处理好的函数 返回
  • 注意: 这个方法不会立即执行函数, 而是会将修改好this的一个函数返回出来, 需要使用的话, 可以自己调用
const newFn = fn.bind(obj, 'bind_1', 'bind_2', 'bind_3')
newFn() // bind_1   bind_2  bind_3 object
console.log(newFn)

Map和Set 数据结构

  • ES6 新增的两种数据结构
  • 共同点: 都不接受重复数据

Map 数据结构

  • 类似于对象的数据结构, 但是他的 key 可以是任何数据类型
  • 可以被叫做一个 值=值 的数据结构
  • 创建一个 Map 数据结构
    • 语法: var m = new Map([ [key, value], [key, value] ])
  • Map 数据结构的属性和方法
    1. size 属性
      • 语法: 数据结构.size
      • 得到: 该数据内有多少个数据
    2. set() 方法
      • 语法: 数据结构.set(key, value)
      • 作用: 想该数据内添加数据
    3. get() 方法
      • 语法: 数据结构.get(key)
      • 作用: 数据结构内该 key 对应的 value
    4. has() 方法
      • 语法: 数据结构.has(key)
      • 返回值: true---数据结构内有该数据; false---数据结构内没有该数据
    5. delete() 方法
      • 语法: 数据结构.delete(key)
      • 作用: 删除该数据结构内的某一个数据
    6. clear() 方法
      • 语法: 数据结构.clear()
      • 作用: 清除该数据结构内所有数据
    7. forEach() 方法
      • 语法: `数据结构.forEach(function (value, key, origin) {})

Set 数据结构

  • 类似于数组的数据结构
  • 按照索引排列的数据结构
  • 创建 Set 数据结构
    • 语法: var s = new Set([数据1, 数据2, 数据2, 数据3, ... ])
  • Set 数据结构的属性和方法
    1. size 属性
      • 语法: 数据结构.size
      • 返回值: 该数据结构内有多少个数据
    2. add() 方法
      • 语法: 数据结构.add(数据)
      • 作用: 向该数据结构内添加数据
    3. has() 方法
      • 语法: 数据结构.has(数据)
      • 返回值: true---表示数据结构内有该数据; false---表示数据结构内没有该数据
    4. delete() 方法
      • 语法: 数据结构.delete(数据)
      • 作用: 删除该数据结构内的某一个数据
    5. clear() 方法
      • 语法: 数据结构.clear()
      • 作用: 清除该数据结构内所有数据
    6. forEach() 方法
      • 语法: 数据结构.forEach(function (value, key, origin) {})

模块化开发(重点)

  • 就是把我们的完整功能, 拆开成为一个一个的独立功能(模块)
    • 一个 JS 文件就是一个独立模块
  • 根据业务需求, 来进行模块整合
  • 当模块化开发的时候
    • 我们需要把多个逻辑书写在多个 JS 文件内
    • 此时, 每一个文件都是独立的文件, 都是一个独立的模块作用域(文件作用域)
    • 该文件内, 只能使用自己文件内的变量, 不能使用其他文件内的变量
  • 导出/导入
    • 导出: 在一个文件内向外暴露一些内容
    • 导入: 导入该文件的同时, 拿到它向外暴露的内容
  • 浏览器使用 ES6 模块化语法的要求
    • script 标签必须要有一个 type=module 的属性
    • 页面必须要在服务器上打开(可以借助 live server)
  • 导出语法
    1. 语法1: export default 你要导出的数据
      • 一个文件只能导出一个 default 数据
      const num = 100
const fn = () => {
    console.log('我是 header.js')
}
const obj = {
    num: num,
    fn: fn
}
export default obj
    2. 语法2: export 定义变量 = 值
      • 一个文件可以导出多个新定义的变量
      export const s = 100
export let a = 200
  • 导入语法
    1. import 变量 from '文件'
      • 这个语法必须对应导出语法1
      import myObj = from './index.js'
    2. import { 导出的内容 } from '文件'
      • 这个语法必须对应导出语法2
      import {s, a} from './index.js'
``
avatar
文章
阅读
粉丝