ES5 语法详解
ES5语法详解
全称 : ECMAScript
2019年发布
严格模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> // 启用严格模式 'use strict'; // 变量必须声明后使用 const name = 'flower' console.log(name) // eval 函数:解析字符串代码 启用严格模式会使eval函数存在自己的作用域,不启用会污染全局的作用域 eval('alert("flower")') </script> </body> </html>
JSON对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> // 声明JSON 对象 const obj = { username: 'flower' } // 将JSON对象转换为JSON字符串 const jsonString = JSON.stringify(obj) console.log(jsonString) // 将JSON字符串转换为JSON对象 const jsonObj = JSON.parse(jsonString) console.log(jsonObj) </script> </html>
Object扩展
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> /** * Object.create(prototype, [descriptors]) * 作用: 以指定对象为原型,创建新的对象 * 为新的对象指定新的属性,并对属性进行描述 * - value : 指定值 * - writable : 标识当前属性值是否是可以修改的,默认为false * - configurable : 标识当前属性是否是可以删除的,默认为false * - enumerable : 标识当前属性是否能用for in 枚举,默认为false */ // 定义指定对象原型 const srcObj = { username: 'flower' } // 定义新对象 let desc = {} desc = Object.create(srcObj, { // 新属性 sex: { value: '男', // 值 writable: true, // 可以被修改 configurable: true, // 可以被delete删除 enumerable: true // 可以被 for in 枚举 } }) console.log(desc) // 修改 desc.sex = '女' console.log(desc.sex) // for in 枚举 for (let key in desc) { console.log(key) } // 删除 delete desc.sex console.log(desc) /** * Object.defineProperties(object, descriptors) * 作用: 为指定对象定义扩展多个属性 * get : 用来获取当前属性值的回调函数 * set : 修改当前属性值触发的回调函数,并且实参即为修改后的值 * 存取器属性: * setter : 用于存值 * getter : 用于取值 */ const obj2 = { firstName: 'Mr', lastName: 'dance' } // 为指定对象定义扩展属性 Object.defineProperties(obj2, { fullName: { get() { return this.firstName + '.' + this.lastName }, set(data) { console.log(data) const fullName = data.split('.') this.firstName = fullName[0] this.lastName = fullName[1] } } }) console.log(obj2) // 修改扩展属性的值 obj2.fullName = 'Mis.flower' console.log(obj2) /** * 对象本身的两个方法 * get propertyName(){} 用来得到当前属性值的回调函数 * set propertyName(){} 用来监视当前属性值变化的回调函数 */ const obj3 = { firstName: 'Mr', lastName: 'dance', get fullName() { return this.firstName + '.' + this.lastName }, set fullName(data) { const fullName = data.split('.') this.firstName = fullName[0] this.lastName = fullName[1] } } console.log(obj3) // 修改扩展属性 set 方法是响应式的 obj3.fullName = 'Mis.flower' console.log(obj3) </script> </html>
Array扩展
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> /** * 1. Array.prototype.indexOf(value) : 得到值在数据中的第一个下标 * 2. Array.prototype.lastIndexOf(value) : 得到值在数据中的最后一个下标 * 3. Array.prototype.forEach(funcation(item,index){}) : 遍历数组 * 4. Array.prototype.map(funcation(item,index){}) : 遍历数组返回一个新的数组,返回加工之后的值 * 5. Array.prototype.filter(funcation(item,index){}) : 遍历过滤出一个新的子数组,返回条件为true的值 */ const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 6] // 输出第一个 6 的下标 const firstIndex = arr.indexOf(6) console.log(firstIndex) // 输出最后一个 6 的下标 const lastIndex = arr.lastIndexOf(6) console.log(lastIndex) // 输出所有元素的值和下标 arr.forEach(function(item, index) { console.log('index: ' + index + ',item: ' + item) }) // 根据 arr 产生一个新数组,要求每个元素都比原来大10 const bigArr = arr.map(function(item, index) { return item + 10 }) console.log(bigArr) // 根据 arr 产生一个新数组,返回的每个元素都要大于4 const filterArr = arr.filter(function(item, index) { if(item > 4){ return true } return false }) console.log(filterArr) </script> </html>
Function扩展
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> /** * 1. Function.prototype.bind(obj) * 作用: 将函数内的this绑定为obj,并将函数返回 * 2. 面试题: 区别bind()与call()和apply()? * 都能指向函数中的this * call() / apply() 是立即调用函数 * bind() 是将函数返回 */ // 定义对象 const obj = { username: 'Mr.dance' } // 定义函数 function foo(data) { console.log(this, data) } // 直接执行 this默认指向window foo(33) // 调用call 指定this 对象为 obj,传入参数33 foo.call(obj, 33) // 调用apply 指定this 对象为 obj,传入参数33 foo.apply(obj, [33]) /** * call 和 apply 传入参数的方式不同 */ // bind : 只绑定this 为 obj 不执行函数,需要手动调用 const bindFunction = foo.bind(obj) bindFunction(33) // 也可以在绑定this的同时,传入参数 const bindFunctionParam = foo.bind(obj, 33) bindFunctionParam() </script> </html>
作者：彼岸舞
时间：2021\08\16
内容关于：前端知识库
本文属于作者原创,未经允许,禁止转发
