美文网首页
观看《Javascript秘密花园》小结(1)

观看《Javascript秘密花园》小结(1)

作者: 月半女那 | 来源:发表于2018-09-10 10:39 被阅读0次

原文地址: http://bonsaiden.github.io/JavaScript-Garden/zh/#object.general

1.hasOwnProperty函数

  • 用来判断一个对象是否包含自定义属性而不是原型链上的属性,hasOwnProperty是js中唯一一个处理属性但是不查找原型链上的函数
  • 一般会在使用 for in 循环偏离对象的时候总会配合使用hasOwnProperty ,这样可以有效的避免原型对象扩展带来的干扰
    搞段代码:
object.prototype.bar = 1;
var foo = {goo : undefined}
foo.bar // 1
'bar' in foo // true
foo.hasOwnProperty('bar') // false
foo.hasOwnProperty('goo') // true

2.循环

2.1 for in 循环

  • 主要用来循环遍历带有字符串key的对象
  • 遍历时不仅能读取对象自身上面的成员属性,而且也可以延续原型链遍历出对象的原型属性(可以用haOwnProperty 来判断是否是对象自身属性)
  • 可以中断循环(通过break:跳出循环,continue:跳过本次循环,继续执行下次循环)
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // 输出两个属性:bar 和 moo
    if(foo.hasOwnProperty(i)){
       console.log(i); // 输出 moo
    }
}

2.2for of

  • for of 内部调用的其实Symbol.iterator接口,
  • 适用范围:数组,Set和Map结构还有一些类似arguments对象,DOM对象以及字符串等等
  • 如果for of 循环提前退出(通常是因为出错,或者有break语句)其实是调用的return方法。
  • for-of循环不支持普通对象,但是如果你想迭代一个对象的属性,可以使用for-in循环(这也是它的本职工作)或者内建的Object.keys()方法
var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
console.log(Object.keys(student)) // ['name','age','locate']
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}
// name: wujunchuan
// age: 22
// locate: [object Object]

2.3 foreach

  • 不能使用break,return 退出循环
  • 主要用来遍历数组
var a = ["a", "b", "c"];
a.forEach(function(element) {
    console.log(element);
}); // a,b,c

2.4 for

  • 可以通过break,continue退出循环
for (var i = 0; i< 4; i++){ 
   console.log(i); 
    if(i== 2){ continue } 
} // 0,1,3

for (var i = 0; i< 4; i++){
  console.log(i); 
  if(i== 2){ break } 
} // 0,1,2

2.5 map

  • 如果没有return则是返回undefined
  • 会创建一个新数组
var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
users.map(function (user) { return user .name});
["张含韵","江一燕","李小璐"]

3.闭包和引用

4.构造函数

  • 通过new关键字方式调用的函数都被认为是构造函数
  • 在构造函数内部,this指向的是新创建的对象Object这个新创建的对象的prototype被指向构造函数的prototype

5.作用域

由于js中没有显示的命名空间定义,这就意味着所有的对象都定义在一个全局共享的命名空间下面

function add(a, b) {
    return 
        a + b;
}
console.log(add(1, 2)); // undefined

function add(a, b) {
    return  a + b;
}
console.log(add(1, 2)); // 3
// 如果需要return的对象和reutrn不在一行就会出错

每次引用变量,js都会向上遍历整个作用域,知道找到这个变量,如果直到全局作用域这个变量还是未知的就会抛出ReferenceError异常

5.1变量提升

js会提升变量声明。意味着var和function 声明都会被提升到当前作用域的顶部

5.2 名称解析顺序

在js的所有作用域中,this指向的是当前对象,
函数作用域内也有默认的变量arguments
以访问函数内部的foo变量为例,讲解js查找顺序

  • 首先判断当前作用域内是否有 var foo 的定义
  • 函数的形参是否有foo
  • 函数自身是否叫做foo
  • 回溯到上一级作用域循环以上操作

6.数组

一般通过[]来创建数组

[1,2,3]  // 1,2,3
new Array(1,2,3) //1,2,3
new Array(3) // [] 长度为3

要尽量避免使用数组构造函数创建数组。推荐使用数组的字面语法,短小简洁,可读性强

相关文章

  • 观看《Javascript秘密花园》小结(1)

    原文地址: http://bonsaiden.github.io/JavaScript-Garden/zh/#ob...

  • JavaScript备忘

    JavaScript 秘密花园 深入理解JavaScript系列 JavaScript 标准参考教程(alpha)

  • 学习资料整理

    JavaScript 秘密花园 http://bonsaiden.github.io/JavaScript-Gar...

  • 资源

    JavaScript 秘密花园:http://bonsaiden.github.io/JavaScript-Gar...

  • 相等与比较

    JavaScript 秘密花园为什么 【】 == 【】 为 false,【】 == !【】 为 true Java...

  • JavaScript秘密花园(一)

    关于作者 这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel(写作)...

  • JavaScript秘密花园--数组

    数组 1、经典for循环,不推荐for in,使用l缓存数组长度,减少性能消耗 2、length 属性的 gett...

  • JavaScript秘密花园--类型

    类型 1、比较对象虽然 == 和 === 操作符都是等于操作符,但是当其中有一个操作数为对象时,行为就不同了。 比...

  • JavaScript秘密花园--函数

    函数 1、命名函数的赋值表达式 bar 函数声明外是不可见的,这是因为我们已经把函数赋值给了 foo; 然而在 b...

  • JavaScript秘密花园--对象

    对象: Hoist:变量提升,声明提升,初始化不会(赋值语句只在运行时执行)。Strict Mode:不允许使用未...

网友评论

      本文标题:观看《Javascript秘密花园》小结(1)

      本文链接:https://www.haomeiwen.com/subject/rgzwwftx.html