大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、json对象扩展

  • 把一个Json对象转换成字符串
JSON.stringify(js对象/数组);
  • 把一个json格式的字符串转换成Json对象
JSON.parse(json对象/数组);

示例:

<script type="text/javascript">
var obj = {
name : 'Daotin',
age : 18
};
obj = JSON.stringify(obj);
console.log( typeof obj); // string
obj = JSON.parse(obj);
console.log(obj); </script>

二、Object对象扩展

1、方法一

以指定原型对象创建新的对象。

Object.create(prototype, [descriptors])

prototype:指定原型对象

descriptors:(可选)设置创建的新的对象的新属性。

示例:

  <script type="text/javascript">
var Obj1 = {
userName: "Daotin"
};
var Obj2 = Object.create(Obj1);
console.log(Obj2);
</script>

打印结果:Obj2下面的__proto__ 指向的原型对象中有Obj1的属性,相当于继承了Obj1属性。

为新创建的对象添加新属性的时候:

添加的新属性要以对象的方式来添加,这个对象其中有四个属性来描述当前属性对象:

  • value : 指定属性的值
  • writable : 标识当前属性值是否是可修改的, 默认为false
  • configurable: 标识当前属性是否可以被删除 默认为false
  • enumerable: 标识当前属性是否能用for in 枚举 默认为false
  <script type="text/javascript">
var Obj1 = {
userName: "Daotin"
};
var Obj2 = Object.create(Obj1, {
age: {
value: 18,
writable: true,
configurable: true,
enumerable: true
}
});
console.log(Obj2);
Obj2.age = 19;
console.log(Obj2);
delete Obj2.age;
console.log(Obj2);
for (var i in Obj2) {
console.log(i);
}
</script>

打印结果:

2、方法二

Object.defineProperties(object, descriptors)

为指定对象定义扩展多个属性.

  • object :指定对象
  • descriptors:需要扩展的属性(是一个对象)。

这个属性对象同样有:value, writable,configurable,enumerable 属性。

除了这4个属性外。还有:

  • get :用来获取当前属性的回调函数。
  • set :修改当前属性值得触发的回调函数,并且实参即为修改后的值。

由上图可知,直接修改对象的值是不可以的,必须设置set属性,这样在修当前属性值的时候,会自动调用 set 。类似的,在访问当前属性的时候,会自动调用 get

3、方法三

对象本身的两个方法:

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

三、数组的扩展

这些扩展的方法都在 Array 的原型对象中。

1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组,返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组, 返回条件为true的值

从零开始学 Web 之 ES6(二)ES5的一些扩展的更多相关文章

  1. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 ES6(一)ES5严格模式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 ES6(五)ES6基础语法三

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 ES6(六)ES6基础语法四

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 ES6(三)ES6基础语法一

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  7. 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

    大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...

  9. 从零开始学 Web 之 CSS(二)文本、标签、特性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. Add-Migration : 无法将“Add-Migration”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

    解决办法: PM>Import-Module C:\Users\Administrator.MACKJON\.nuget\packages\entityframework\6.2.0\tools ...

  2. Hadoop格式化namenode 出错 Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/hadoop/security/authorize/Refr

    一般是修改配置文件:etc/hadoop/hadoop-env.sh的时候出现的错误 export JAVA_HOME=/usr/jdk export HADOOP_COMMON_HOME=~/had ...

  3. Vc 检测内存泄漏

    启用内存泄漏检测 检测内存泄漏是 C/c + + 调试器和 C 运行时库 (CRT) 的主要工具调试堆函数. 若要启用调试堆的所有函数,在 c + + 程序中,按以下顺序包含以下语句: C++复制 # ...

  4. AX_InventCounting

    static void Job649(Args _args)  {      ItemId                  ItemId          = "000XA00612R1& ...

  5. shell解析my.cnf配置文件

    my.cnf配置格式如下 vi my.cnf[client]port=3306socket=/tmp/mysql.socket [mysqld]port=3306server-id=1datadir= ...

  6. PowerShell工作流学习-2-工作流运行Powershell命令

    关键点: a)inlineScript 活动具有活动通用参数,但不具有PowerShell 通用参数,且inlineScript 脚本块中的命令和表达式不具有工作流的功能b)默认inlineScrip ...

  7. 居于H5的多文件、大文件、多线程上传解决方案

    文件上传在web应用中是比较常见的功能,前段时间做了一个多文件.大文件.多线程文件上传的功能,使用效果还不错,总结分享下. 一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件进行上传: 支 ...

  8. IPC,Hz(Hertz) and Clock Speed

    How do we measure a CPU's work? Whether it's fast or not depends on three factors: IPC, Hz, Clock sp ...

  9. IIC通讯协议(非原创,转载他人,用于学习)

    I2C协议:1.空闲状态 2.开始信号 3.停止信号 4.应答信号 5.数据的有效性 6.数据传输 IIC详解 1.I2C总线具有两根双向信号线,一根是数据线SDA,另一根是时钟线SCL 2.IIC总 ...

  10. OpenCV库框架结构

    在上文已经学习过了opencv的编码规则,为了能够方便灵活的运用OPECV库,我们需要对其框架结构进行学习了解,以方便我们进行实际工程调用调用. 1.Opnecv库到底提供了什么? 打开opencv源 ...