当前位置：首页 > news >正文

前端基础1-6 ：es6

news 来源：原创 2024/7/6 18:34:27

点击跳转，详细查看es6

const常量

const LIMIT = 10;
const OBJ_MAP = {a: 'A',A: 'a'
}

1. 不允许重复声明赋值

    var arg1 = 'a'arg1 = 'aa'// 常量 - ES5Object.defineProperty(window, 'arg2', {value: 'aaa',writable: false})// ES6const arg2 = 'aaa'

2. 块级作用域

    if (true) {console.log(arg1)var arg1 = 'aa'}console.log(arg1)if (true) {const arg1 = 'aa'}// dead zone => 先声明赋值 再使用

3. const 和 let

    // 会被改变的对象，到底用const还是let?const obj = {teacher: 'aa',date: '20240530'}obj.teacher = ''const obj2 = obj// 1. 栈 + 2. 堆// 能用const的地方，都用const// 面试：如何对一个对象进行常量化？// 破局 - Object.freeze()Object.freeze(obj)// 追问：只能冻结根层？const obj = {teacher: 'aa',date: '20240530',course: {course1: 'basic',course2: 'trial'}}function deepFreeze(obj) {Object.freeze(obj)(Object.keys(obj) || []).forEach(key => {if (typeof obj[key] === 'object') {deepFreeze(obj[key])}})}

deconstruction 解构 - 解开对象结构

    const obj = {teacher: 'yy',course: 'es'}const {teacher,course} = obj;const arr = [1, 2, 3, 4, 5]const [a, b, c, d, e] = arr;let a = 1;let b = 2;[b, a] = [a, b]

arrow_function 箭头函数

    // 传统函数function test(a, b) {return a + b;}const test = function(a, b) {return a + b;}const test = (a, b) => {return a + b;}const test = (a, b) => a + b;const test = x => {}

上下文

    const obj2 = {teacher: 'aa',course: 'es',table: ['black', 'red'],getTeacher: function() {return this.teacher;},getTable: () => {// 不存在独立上下文}}

class 助力js更加具有面向对象的形式 - 类

    // 传统类型的对象 - functionfunction Course(teacher, course) {this.teacher = teacherthis.course = course}Course.prototype.getCourse = function() {return `teacher is ${this.teacher}`;}const course = new Course('aa', 'ES')const course1 = new Course('aa1', 'ES2')// ES6class Course {constructor(teacher, course) {this.teacher = teacherthis.course = course}getTeacher() {return ''}static getCourse() {}}const course = new Course('aa', 'ES')course.getTeacher()Course.getCourse()

追问

class 的类型是什么？

Function => Object => null

class的prototype

    Course.prototype

class 函数对象的属性

    course.hasOwnProperty('teacher')

// 1. 如何建立只读变量class Course {constructor(teacher, course) {this._teacher = teacherlet _course = 'es'this.getCourse = () => {return _course}}// get teacher() {//     return this._teacher// }}class Course {#course = 'es6'set course(val) {if (val) {this.#course = val}}}// 3. 封装核心 - 适配器模式// {//     name: {//         value: 'lodash',//         tag: 124,//         name: 'es6'//     }// }class utils {constructor(core) {this._main = corethis._name = 'myName'}get name() {return {...this._main.name,name: `${this._name}`}}set name(val) {this._name = val}}