ES5详解_es6配置表

ES5详解_es6配置表目录1严格模式1.1使用1.2严格模式的作用1.3严格模式的规定2JSON2.1**`JSON.parse`**2.2`JSON.stringify`3对象扩展3.1Object.create3.2Object.defineProperties3.3对象本身的方法3.4Object.keys4数组扩展4.1indexof/lastIndexOf4.2forEach4.3map4.4filter5函数扩展1严格模式1.1使用在JS文件的头部或者函数的

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

脑图
在这里插入图片描述

1 严格模式


1.1 使用


在JS文件的头部或者函数的第一句写上use strict ,详情点击

文件

"use strict"

Jetbrains全家桶1年46,售后保障稳定

函数

function fn(){ 
   
    "use strict"
}

1.2 严格模式的作用


严格模式主要增加了对于JS语法的检验,并规定了一些规则,违反规则就会抛出错误

  • 消除javascript语法的一些不合理、不严谨之处,减少一些怪异行为
  • 消除代码运行的一些不安全之处,保证代码运行的安全
  • 提高编译器效率,增加运行速度

1.3 严格模式的规定


  1. 必须用var声明变量
  2. 禁止自定义的函数中的this指向window
  3. 创建eval作用域
  4. 对象不能有重名的属性

2 JSON


ES5提供了JSON全局对象,用来序列化和反序列化对象为JSON

序列化: 把对象转换为字节序列的过程称为对象的序列化

2.1 JSON.parse


将字符串转化为对象,一共两个参数

  • 第一个参数:必须,字符串
  • 第二个参数:可选,是一个函数,函数传递两个参数
    • key转换为对象的属性名
    • value转换为对象的属性值

实例

JSON.parse('{"name": "Jerry", "age": 18,"gender":"male"}', function(key, value) { 
   
    console.log(key); // 输出当前属性,最后一个为 ""
    console.log(value)

    /* 对于对象的属性值做修改 */
    return value + "OK"; // 返回修改的值
})

输出

在这里插入图片描述

这里最后输出一个空字符串,并最终输出整个对象,我们可以利用这个特性来返回对象

JSON.parse("{...}",function(key,value){ 
   
    if(key === ""){ 
   
        return value
    }
})

2.2 JSON.stringify


将数组和对象转化为JSON字符串,一共有三个参数 ,详情点击

  • 第一个参数:必须,要转化的数组或者对象
  • 第二个参数:可选,是一个函数,或者数组(如果传递第二个参数,则返回值由你自己决定
    • 如果是一个函数,则参数与功能与**JSON.parse** 相同
  • 第三个参数:可选,对于返回值进行格式化
    • 数字:表示缩进几个空格,最多缩进10个
    • 非数字:比如\t

实例

const person = { 
   
    name:"Jerry",
    age:18
}
console.log(JSON.stringify(person)) //{"name":"Jerry","age":18}

3 对象扩展


以下的方法是添加到Object身上的方法

  • Object.getPrototypeOf
  • Object.getOwnPropertyDescriptor
  • Object.getOwnPropertyNames
  • Object.create
  • Object.defineProperty
  • Object.defineProperties
  • Object.seal
  • Object.freeze
  • Object.preventExtensions
  • Object.isSealed
  • Object.isFrozen
  • Object.isExtensible
  • Object.keys

3.1 Object.create


创建一个对象,为对象指定原型并返回,一共有两个参数

  • 第一个参数:必须,原型对象
  • 第二个参数:可选,是一个配置对象,为对象定义新的属性
    • value : 指定值
    • writable : 标识当前属性值是否是可修改的, 默认为false
    • configurable: 标识当前属性是否可以被删除 默认为false
    • enumerable: 标识当前属性是否能用for in 枚举 默认为false

实例

const person = { 
   
    name:"Jerry",
    age:18
}
const createPerson = Object.create(person,{ 
   
    gender:{ 
   
        value:"male",
        writable:true,
    }
})
console.log(createPerson)
/* 删除 */
delete createPerson.gender
console.log(createPerson)

输出

在这里插入图片描述

  • 我们发现新建的对象的原形为person,并将属性继承了下来
  • 我们和无法去删除定义的属性

3.2 Object.defineProperties


用来监听对象属性,可直接在一个对象上定义一个或者多个新的属性可修改属性一共两个参数

  • 第一个参数:必须, 对其添加或修改属性的对象
  • 第二个参数:配置对象,包括
    • 数据(数据描述符)属性
      • 属性的配置与Object.create相同
    • 访问器(存取描述符)属性,我们主要使用它的gettersetter
      • get:用来获取当前属性值得回调函数
      • set:修改当前属性值得触发的回调函数,并且实参即为修改后的值

实例

const person = { 
   
    firstName:"WuKong",
    lastName:"Sun"
}
// 在这里相当于监视fullName,当fullName被读取或修改是会调用相应的函数
Object.defineProperties(person,{ 
   
    fullName:{ 
   
        get:function(){ 
   
            console.log('get被调用了')
            return this.firstName + this.lastName// 这里的this指向的是 person,因为是他调用的函数
        },
        set:function(data){ 
   
            console.log('set被调用了')
            const names = data.split('-') 
            this.firstName = names[0]
            this.lastName = names[1]
        }
    }
})
console.log(person.fullName) // 读取会调用get
console.log(person.fullName = "BaJie-Zhu")// 返回修改的属性值
console.log(person.firstName)// BaJie

输出

在这里插入图片描述

3.3 对象本身的方法


是队形本身具有的gettersetter,功能与Object.defineProperties相同

  • get propertyName(){} 用来得到当前属性值的回调函数
  • set propertyName(data){} 用来监视当前属性值变化的回调函数

实例

const person = { 
   
    firstName: "WuKong",
    lastName: "Sun",
    get fullName() { 
   
        console.log('get被调用了')
        return this.firstName + this.lastName // 这里的this指向的是 person,因为是他调用的函数
    },
    set fullName(data){ 
   
        console.log('set被调用了')
        const names = data.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}
console.log(person.fullName) // 读取会调用get
console.log(person.fullName = "BaJie-Zhu") // 返回修改的属性值
console.log(person.firstName) // BaJie

输出

在这里插入图片描述

3.4 Object.keys


返回一个对象键名组成的数组,需要IE9+支持

const person = { 
   
    name:"Jerry",
    age:18,
    gender:"male"
}
console.log(Object.keys(person))//["name", "age", "gender"]

4 数组扩展


主要新增了一些数组遍历的方法

  • Array.prototype.indexOf
  • Array.prototype.lastIndexOf
  • Array.prototype.every
  • Array.prototype.some
  • Array.prototype.forEach
  • Array.prototype.map
  • Array.prototype.filter
  • Array.prototype.reduce
  • Array.prototype.reduceRight

4.1 indexof/lastIndexOf


  • Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
  • Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标

例题

const persons = ['SunWuKong','TangSeng','ZhuBaJie','ShaWuJing','TangSeng']
// 因为方法在原型链上所以我们有两种使用的方法
// 1. Array.prototype.方法名.call(arr,数组中的元素)
// 2. arr.方法名
console.log(persons.indexOf('TangSeng')) // 1
// console.log(persons.lastIndexOf('TangSeng'))
console.log(Array.prototype.lastIndexOf.call(persons,'TangSeng'))//4

4.2 forEach


用来遍历数组,参数为回调函数,回调函数有两个参数

  • 数组中的元素
  • 元素的下标

例题

const persons = ['SunWuKong','TangSeng','ZhuBaJie','ShaWuJing','TangSeng']
persons.forEach((item,index) => { 
   
    console.log(item,index)
})

输出

在这里插入图片描述

4.3 map


遍历数组返回一个新的数组,不改变原数组,返回加工之后的值,参数为回调函数,回调函数有两个参数

  • 数组中的元素
  • 元素的下标

例题

const persons = ['SunWuKong','TangSeng','ZhuBaJie','ShaWuJing','TangSeng']
/* const vPersons = persons.map((item,index) => { return item = 'hello, \t' + item }) */
/* 使用单行箭头函数,省掉关键字return */
const vPersons = persons.map(item => 'hello,' + item)
console.log(persons)
console.log(vPersons)

输出

在这里插入图片描述

4.4 filter


遍历过滤出一个新的子数组,不改变原数组, 返回条件为true的值,参数为回调函数,回调函数有两个参数

  • 数组中的元素
  • 元素的下标

例题

const persons = ['SunWuKong','TangSeng','ZhuBaJie','ShaWuJing','TangSeng']
const filterPersons = persons.filter(item => item === 'TangSeng')
console.log(persons)
console.log(filterPersons)

输出

在这里插入图片描述

5 函数扩展


函数扩展主要扩展了 bind 方法 ,详情点击

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/213451.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号