javascript基础集锦(三)

本系列主要记录javascript中,新手比较容易搞错的地方。

(1)javascript对象

   由于JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除属性:var xiaoming = {name: ‘小明‘};

    xiaoming.age; // undefined

    xiaoming.age = 18; // 新增一个age属性

xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming[‘name‘]; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
如果我们要检测xiaoming是否拥有某一属性,可以用in操作符:

var xiaoming = {
name: ‘小明‘,
birth: 1990,
school: ‘No.1 Middle School‘,
height: 1.70,
weight: 65,
score: null
};
‘name‘ in xiaoming; // true
‘grade‘ in xiaoming; // false
不过要小心,如果in判断一个属性存在,这个属性不一定是xiaoming的,它可能是xiaoming继承得到的:

    ‘toString‘ in xiaoming; // true
   因为toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以xiaoming也拥有toString属性。
要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:

    var xiaoming = {
      name: ‘小明‘
        };
    xiaoming.hasOwnProperty(‘name‘); // true
    xiaoming.hasOwnProperty(‘toString‘); // false

(2)JavaScript把null、undefined、0、NaN和空字符串‘‘视为false,其他值一概视为true。

(3)Map  

Map是一组键值对的结构,具有极快的查找速度。
举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:
  var names = [‘Michael‘, ‘Bob‘, ‘Tracy‘];
  var scores = [95, 75, 85];
给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。
如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:
  var m = new Map([[‘Michael‘, 95], [‘Bob‘, 75], [‘Tracy‘, 85]]);
  m.get(‘Michael‘); // 95
初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:
  var m = new Map(); // 空Map
  m.set(‘Adam‘, 67); // 添加新的key-value
  m.set(‘Bob‘, 59);
  m.has(‘Adam‘); // 是否存在key ‘Adam‘: true
  m.get(‘Adam‘); // 67
  m.delete(‘Adam‘); // 删除key ‘Adam‘
  m.get(‘Adam‘); // undefined
由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:
  var m = new Map();
  m.set(‘Adam‘, 67);
  m.set(‘Adam‘, 88);
  m.get(‘Adam‘); // 88

(4)iterable

  遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历,但需要你的浏览器支持。用for ... of循环遍历集合,用法如下:

var a = [‘A‘, ‘B‘, ‘C‘];
var s = new Set([‘A‘, ‘B‘, ‘C‘]);
var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + ‘=‘ + x[1]);
}

(5)for ... of循环和for ... in循环有何区别?

  for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。
  当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:
    var a = [‘A‘, ‘B‘, ‘C‘];
    a.name = ‘Hello‘;
    for (var x in a) {
    alert(x); // ‘0‘, ‘1‘, ‘2‘, ‘name‘
    }
  for ... in循环将把name包括在内,但Array的length属性却不包括在内。
  for ... of循环则完全修复了这些问题,它只循环集合本身的元素:
    var a = [‘A‘, ‘B‘, ‘C‘];
    a.name = ‘Hello‘;
    for (var x of a) {
    alert(x); ‘A‘, ‘B‘, ‘C‘
    }
  这就是为什么要引入新的for ... of循环。
  然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:
  var a = [‘A‘, ‘B‘, ‘C‘];
  a.forEach(function (element, index, array) {
  // element: 指向当前元素的值
  // index: 指向当前索引
  // array: 指向Array对象本身
  alert(element);
  });
  注意,forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。
  Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:
    var s = new Set([‘A‘, ‘B‘, ‘C‘]);
    s.forEach(function (element, sameElement, set) {
    alert(element);
  });
  Map的回调函数参数依次为value、key和map本身:
    var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
    m.forEach(function (value, key, map) {
    alert(value);
  });
  如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Array的element:
    var a = [‘A‘, ‘B‘, ‘C‘];
    a.forEach(function (element) {
    alert(element);
  });

时间: 2024-11-05 18:32:54

javascript基础集锦(三)的相关文章

JavaScript基础(三)

JavaScript基础(三) for循环嵌套 循环嵌套不是什么特殊语法,就是说js中的许多语法结构都可以嵌套使用,for也可以 循环嵌套时,代码执行次数变多,通常使用是在2层左右 while循环 规则: 先进行条件检测,如果为true,执行循环体代码 再检测条件,再为true再执行循环体,以此类推 直到条件为false时循环结束 while (条件) { // 循环体 } for和while的使用场景 for循环适用于次数确定的重复操作(for使用较多) while循环适用于不确定次数的重复操

JavaScript基础学习(三)—数组

一.数组简介     JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可以随着数据的添加而自动增长以扩容纳新增数据.   二.数组的操作 1.创建 //创建一个空数组 var arr = []; var arr2 = [1,true,new Date()]; arr2.length = 2; alert(arr2); //true   2.pop和push方法     

JavaScript 基础(三)

数据类型 1.字符串 2.数值型 3.布尔型 4.对象 5.数组 为了更规范,使自己将来在工作时更容易与方便维护,采用一些数据类型的名命习惯 类型 前缀 例子 数组 a aArray 布尔值 b bMale 浮点 f fTax 函数 fn fnSwap 整型 i iAge 对象 o oCar 正则 re RePattern 字符串 s sUniversity 一.字符串 String var sMyString = "hello world"; 字符串可以是引号中的任意文本.可使用单引

javascript基础(第三天)

开胃菜, var a = [2,3,1,3,8,4,3]; 如何快速找到8的索引位置? 开始的一句话: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference  这个星球最好的js文档之一 ie9+ (2012年才基本普及,跟现在的es6差不多) in操作符的使用, 查找属性是否存在当前对象(包括原型也算) var a = {b:'bbb',c:'ccc'}; function b(){ this.d='ddd' };

javascript基础集锦_Json——原型继承(十)

在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototyp

JavaScript 基础语法三

一.循环 循环结构:在满足特定条件的情况下反复执行的操作.循环四要素:循环变量 ,循环条件 , 循环增量 ,循环体. 第一种:while 循环. while (条件表达式) {循环体;}. //第一步:定义循环变量 var count = 1; // 第二部:判断循环条件 while (count <= 5){ //第三部:循环体 console.log("跑圈") //第四步:循环增量 count++; } // 用while打印出1~100之间不是7的倍数并且不包含7的数 v

javascript基础集锦_Json——浏览器对象(十一)

(1)浏览器对象navigator JavaScript可以获取浏览器提供的很多对象,并进行操作. navigator对象表示浏览器的信息,最常用的属性包括: navigator.appName:浏览器名称: navigator.appVersion:浏览器版本: navigator.language:浏览器设置的语言: navigator.platform:操作系统类型: navigator.userAgent:浏览器设定的User-Agent字符串. 请注意,navigator的信息可以很容

javascript基础集锦_正则表达式(七)

本系列主要记录javascript中,新手比较容易搞错的地方. 这篇文章专门来说说正则表达式,相信大家在编程中会经常用到! 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦,而且代码难以复用. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该

javascript基础集锦_Json(八)

本系列主要记录javascript中,新手比较容易搞错的地方. (1)json JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.XML本身不算复杂,但是,加上DTD.XSD.XPath.XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范. 终于,在2002年