js 基础拓展
1.关于 try catch 的用法
<body>
<div>请输出一个 5 到 10 之间的数字:</div>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="mess"></p>
<!-- 只有不符合条件 才执行catch 才有p标签的内容显示 -->
</body>
</html>
<script type="text/javascript">
function myFunction(){
try{
var x=document.getElementById("demo").value; //取元素的值
if(x=="") throw "值为空"; // 根据获取的值,抛出错误
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x>=5 && x<=10) throw "符合条件";
if(x<5) throw "太小";
}
catch(err){
var y=document.getElementById("mess"); // 抓住上面throw抛出的错误,给p标签显示
y.innerHTML="错误:" + err + "。";
}
}
</script>
2.关于 Object.assign(target,sourcel1,sourcel2,...) 对象的方法 : 用于将所有课枚举的值从一个或者多个源对象复制到目标对象 它将返回目标对象
const target = { a: 1, b: 2 }; // 要操作的目标对象
const source = { b: 4, c: 5 }; // 想合过来的资源对象
const returnedTarget = Object.assign(target, source); // 返回值
console.log(target); // expected output: Object { a: 1, b: 4, c: 5 }
console.log(source); // expected output: Object { b: 4, c: 5 }
console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }
// 实际应用 克隆一个新对象
const sidleData = Object.assign({}, target)
注意: 同名的属性会覆盖
3.关于 Object.create(prototype,[propertiesObject]) 对象的方法 : 使用指定的原型对象及其属性去创造一个新的1.var parent = { x : ,y : var child = Object.create(parent, z : { // z会成为创建对象的属性
writable:true,
configurable:true,
value: "newAdd"
}
});
console.log(child) //{z:"newAdd"}
console.log(child.x) //1
2. var obj = Object.create({},{
"a":{value :1,congigurable :false,enumerable :true,writable:true},
"b":{value :2,congigurable :false,enumerable :true,writable:true},
"c":{value :3,congigurable :false,enumerable :true,writable:true}
}
); console.log(obj.a)//输出 1
console.log(obj.b)//输出 2
console.log(obj.c)//输出 3
---------------------
说明: 第二个参数是一个对象的形式配置的,key就是属性的名称,value 又是一个对象,这里的value对象就是对该属性的描述;这里value对象有四个属性值value、congigurable 、enumerable 、writable
value:对象的默认值
congigurable: 能否使用 delete 能否 简单的说 ,设置这个为false之后,就不能删除这个属性或修改这个属性(属性值不影响),这个属性就是这个对象固有的,如果删除,则不成功
enumerable: 可枚举性 对象是否可以通过 for-in遍历到 false 为不可遍历 默认为 true
writable: 对象的属性是否可以修改 false为不可修改 默认为 true
4. 关于 Object.keys(obj) 对象的方法 (;类似的有 values entries) 要注意的的是 返回数组的 顺序是会有变化的可能(数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 )
var arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// ['0', '1', '2'] /* Object 对象 */
var obj = { foo: "bar", baz: },
keys = Object.keys(obj);
console.log(keys);
// ["foo","baz"] var an_obj = { : 'a', : 'b', : 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a'] var obj = { : 'a', : 'b', : 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c'] const obj = { foo: 'bar', baz: };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] const simuArray = { : 'a', : 'b', : 'c' };
console.log(Object.entries(simuArray)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
5. 关于 Object.entries(obj) 对象的方法 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
示例1 -- 传入对象
const obj = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 'abc']]
妙用
示例2.1 -- 数组
const arr = [1, 2, 3];
console.log(Object.entries(arr)); // [['0', 1], ['1', '2'], ['2', '3']]
示例2.2 -- 数组(数组中包含对象)
const arr1 = [{ a: 1 }, 2, 3];
console.log(Object.entries(arr1)); // [['0', { a: 1 }], ['1', '2'], ['2', '3']]
示例2.3 -- 数组(数组中的值全部为对象)
const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }];
console.log(Object.entries(arr2)); // [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]]
示例3 -- 字符串
const str = '123';
console.log(Object.entries(str)); // [['0', '1'], ['1', '2'], ['2', '3']]
示例4 -- 数字、浮点数
const num = 123;
console.log(Object.entries(num)); // []
const float1 = 12.3;
console.log(Object.entries(float1)); // []
示例5 -- 将 Object 转化为 Map
new Map() 构造函数接受一个可迭代的 entries 。 借助 Object.entries 方法你可以很容易的将 Object 转换为 Map:
const obj2 = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj2)); // [['foo', 'bar'], ['baz', 'abc']]
const map = new Map(Object.entries(obj2));
console.log(map); // Map {'foo' => 'bar', 'baz' => 'abc'}
js 基础拓展的更多相关文章
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础(超级简单)
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
随机推荐
- C++:引用的简单理解
前言:引用是C++一个很重要的特性,最近看了很多有关引用的资料和博客,故在此对引用的相关知识进行总结 一.什么是引用 引用,顾名思义是某一个变量或对象的别名,对引用的操作与对其所绑定的变量或对象的操作 ...
- 51 Nod 1107 斜率小于0的连线数量 (转换为归并求逆序数或者直接树状数组,超级详细题解!!!)
1107 斜率小于0的连线数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 二维平面上N个点之间共有C(n,2)条连线.求这C(n,2)条线中斜率小于0的线 ...
- 【绝密】为什么现在的CAN收发器通信距离越来越短?
[绝密]为什么现在的CAN收发器通信距离越来越短? CAN收发器的改良和隔离器件引入,大大提高了通信的可靠性,但同时也引入了额外的延时,导致通信距离变短,或总线错误帧增加,本文以1Mbps波特率下 ...
- 第一次码java感想及前三次作业总结
写在前面 嗯,首先是java,这学期第一次oo作业布置下来的周末才开始看的,第一次作业因此写得有些手忙脚乱.不过大概看了一遍后发现比c好用,入门更简单吧,好多操作直接import一下就能用了,码代码的 ...
- 记录一下安装 mysql 的踩坑之路
坑点: 1.旧的mysql没有删除干净.在安装mysql的时候,没有注意到,在输入 “mysqld install” 指令时跳出来 exits,存在于另一个文件夹之中,这影响了后来的很多操作,包括ro ...
- 七、Delphi10.3读取JSON数组
一.Delphi读取JSON数组是非常方便的,首先我们网上找一段JSON数据 { "error": 0, "status": "success&quo ...
- 3.Functions-函数(Dart中文文档)
初次翻译,部分内容并非按字面翻译,是按本人理解进行了内容重组.如有错误望指正. Dart是完全的面向对象的语言,甚至函数也是一个Function类型的对象.这意味着函数可以赋值给变量或者作为函数的参数 ...
- 20145226 2016-2017-2 夏艺华 《Java程序设计》 课程总结
20145226夏艺华 <Java程序设计>课程总结 每周读书笔记链接汇总 第一周读书笔记 了解Java编程风格,认识Java的类型与变量,掌握Java流程控制的方法(分支.循环). ht ...
- 「PKUSC2018」最大前缀和
题面 题解 可以想到枚举成为最大前缀和的一部分的数 设\(sum_i=\sum\limits_{j\in i}a[j]\) 设\(f_i\)表示满足\(i\)的最大前缀和等于\(sum_i\)的方案数 ...
- 【LG3250】[HNOI2016]网络
[LG3250][HNOI2016]网络 题面 洛谷 题解 30pts 对于\(m\leq 2000\),直接判断一下这个个点是否断掉一个交互,没断掉的里面取\(max\)即可,复杂度\(O(m^2\ ...