网站首页 > 知识剖析 正文
1、概述
对象的属性和方法统称为对象的成员。
JS 调用属性一般有两种方法——点和中括号的方法。
标准格式是对象.属性(不带双引号),注意一点的是:js对象的属性,key标准是不用加引号的,加也可以,特别的情况必须加,如果key数字啊,表达式啊等等。
加引号是为了将其视为整体,认识一点:从对象角度,属性是不加引号的,如name,"name"这是啥,属性不可能是“name”,所以即使加了双引号,对象调用时还是要去掉引号的
2、相同点和区别
2.1访问对象的属性
相同点:在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。
二者区别:“ . ”表示法一般作为静态对象使用时来存取属性。而“[ ]”表示法在动态存取属性时就非常有用。
点方法是在对象名后面跟上属性名,而中括号方法里的索引存放的与属性名字相同的---字符串 。
中括号方法里面的属性名可以是数字,而点方法后面的属性名不可以是数字
当动态为对象添加属性时,必须使用中括号[],不可用点方法.
点方法后面跟的必须是一个指定的属性名称,而中括号方法里面可以是变量。
var object = {name:'xiaoming',age:29};
var name1 = object.name;
var name2 = object['name'];
2.2访问对象的方法
在JavaScript中,只能用“ . ”来访问对象的方法。
function Person(){
this.name = 'xiaoming';
this.age = 29;
this.say = function(){
alert('This is person');
}
}
var student = new Person();
alert(student.name);
alert(student['age']);
student.say(); //使用" . "访问对象方法
3、引申出的两个题目:
3.1.判断一个字符串中出现次数最多的字符,统计这个次数
var str = 'Thisthebesttimesewerty';
var obj = {};
for(var i=0; i<str.length;i++){
var char = str[i];
// var char = str.charAt(i); //charAt()可返回指定位置的字符,i为字符的下标,从0开始
if(obj[char]){
obj[char]++; //char是obj对象的一个属性,如果存在次数加1
}else{
obj[char] = 1; //如果不存在,保存在obj中并计数为1
}
}
var max = 0;
var maxChar = null;
for(var key in obj){
if(max < obj[key]){
max = obj[key]; //出现最多次数max
maxChar = key; //出现次数最多的字符maxChar
}
}
3.2.编写arraysSimilar函数,实现判断传入的两个数组是否相似。
具体需求:
\1. 数组中的成员类型相同,顺序可以不同。例如[1, true] 与 [false, 2]是相似的。
\2. 数组的长度一致。
\3. 类型的判断范围,需要区分:String, Boolean, Number, undefined, null, 函数,日期, window.
当以上全部满足,则返回"判定结果:通过",否则返回"判定结果:不通过"。
function arraysSimilar(arr1,arr2){
if(!(arr1 instanceof Array) || !(arr2 instanceof Array)){
return false;
}
if(arr1.length !== arr2.length){
return false;
}
var i=0, n=arr1.length, countMap1={}, countMap2 = {}, t1, t2,
TYPES = ['string','boolean','number','undefined','null','function','date','window'];
for(i; i<n; i++){
t1 = typeOf(arr1[i]);
t2 = typeOf(arr2[i]);
if(countMap1[t1]){
countMap1[t1]++;
} else{
countMap1[t1] = 1;
}
if(countMap2[t2]){
countMap2[t2]++;
} else{
countMap2[t2] = 1;
}
}
for(i=0; i<TYPES.length; i++){
if(countMap1[TYPES[i]] != countMap2[TYPES[i]]){
return false;
}
}
return true;
}
function typeOf(ele){
var r;
if(ele === null){
r = 'null';
}
else if(ele === 'window'){
r = 'window';
}
else if(ele instanceof Array){
r = 'array';
}
else if(ele instanceof Date){
r = 'date';
}
else{
r = typeof(ele);
}
return r;
}
4、总结
相同点:都是用于属性
区别:[]动态属性,不能适用于方法调用;.静态属性,可以用于方法调用
5、引用
1、详解js访问对象的属性和方法:https://www.jb51.net/article/149482.htm
2、js对象中属性调用.和[] 两种方式的区别:https://www.cnblogs.com/ll15888/p/11904707.html
- 上一篇: 了解 JS 的加载顺序和方式,实现 Ready 方法
- 下一篇: TS保姆级教程,吐血整理常见问题
猜你喜欢
- 2025-01-18 JS 高手进阶:玩转七种继承艺术
- 2025-01-18 关于JavaScript必学的基础知识(上)
- 2025-01-18 记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题
- 2025-01-18 JS入门基础知识
- 2025-01-18 vue 开发规范
- 2025-01-18 面试遇到 性能优化 必答的 9 个点,加分!
- 2025-01-18 我不知道还可以用 JS 做的 6 件事
- 2025-01-18 织梦后台如何使用sql语句给dedecms模板添加自定义属性
- 2025-01-18 JavaScript中关于null的一切
- 2025-01-18 自学Python的学习顺序,知识要点
- 最近发表
-
- 表格存储 SQL 查询多元索引(表格存储 sql 查询多元索引的方法)
- 数据库教程-SQL Server多条件模糊查询
- Twitch宣布放弃Flash并逐步转型至HTML5平台
- 移动平台最强播放器MX Player:终于支持安卓5.0了!
- win10 NFS+黑群晖远程加载管理Windows文件夹(读写NTFS格式+高清播放器)
- Android端VLC 3.3版本发布,重新设计播放器界面
- 不仅仅被苹果封杀!Youtube宣布迁移Flash
- 揭开网站背后的魔法:B/S系统原来这么简单!
- Adobe Animate (An) 2020网页设计软件下载和安装教程
- Adobe发布“巨量”安全更新:遏制Flash“祸害”Linux
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)