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
内容关于：前端知识库
本文属于作者原创,未经允许,禁止转发
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-08-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录