第五周 JS 学习笔记

本周的内容比较多也比较难以理解，花了好长时间整理

一、变量，作用域和内存问题

1）基本类型和引用类型的值

• 给对象添加动态的属性

var person = new Object();
  person.name = 'Nicho'

** 基本类型不能动态添加属性

• 复制变量的值

1. 基本类型

 var num1 = 10;
  var num2 = num1;

2. 引用类型
   保存的是对象的引用指针

var obj1 = new Object()
  var obj2 = obj1     
  obj1.name = 'Nicho'

• 参数传递
  函数的参数是按值传递的

1. 基本类型， 直接拷贝值

 function add(num){
      num += 10;
      return num;
  }
  var count = 20;
  var result = add(count);

2. 引用类型， 传入的是引用指针，在函数内部修改会改变外部

function setName(obj){
      obj.name = 'Nicho'
  }
  var p = new Object();
  p.name = 'cools'
  setName(p);
  console.log(p.name)   // Nicho

• instanceof 类型检测

  console.log(new Object() instanceof Object)
  console.log(new Array() instanceof Array)
  console.log(new RegExp() instanceof RegExp)

2）作用域

• 没有块级作用域

 var color = 'blue';
  function changeColor() {
      if(color === 'blue'){  //可以访问外部的color
          color = 'red'
      }else {
          color = 'blue'
      }
  }
  changeColor();
  console.log('Color is now:' + color)    // red

全局环境只能访问在全局环境中定义的变量和函数，不能访问局部环境中的任何数据

3）垃圾回收

• 标记清除
• 引用计数

二、引用类型

1）基本包装类型

• new Boolean
• new Number

1. toFixed() 会自动舍入
2. toExponential() 指数表示法
3. toPrecision() 固定大小格式

• new String

1. length 获取长度
2. charAt() 查找指定位置的值，charCodeAt() 查找指定位置值的字符编码
3. concat() 字符串拼接
4. slice，substring，substr 字符串切片
5. indexOf() , lastIndexOf() , 查找值所在的位置
6. trim() 清除字符串前后的空格
7. toUpperCase() ,toLowerCase() 字符串大小写转换
8. match 字符串匹配，返回一个数组

var text = 'cat,bat,sat,fat'
  var pattern = /.at/g
  console.log(text.match(pattern)) 

9. search 返回字符串中第一个匹配项的索引 ， 没有匹配到 返回-1

console.log(text.search(pattern))  // 0

10. replace 替换

console.log(text.replace(/at/, '米'))

11. split 将一个字符串分割成多个子字符串，并放入数组中

console.log(text.split(','))

12. localeCompare 比较两个字符串

var stringValue = 'yellow'
  console.log(stringValue.localeCompare('brick'))  // 1

13. fromCharCode 将码值转为一个字符串

 console.log(String.fromCharCode(104,101,108,108,111))  // hello

2）Array类型

• 创建方式

 var arr = new Array()
  var arr2 = [];

• 获取数组长度

 var a = ['red','blue','green']
  console.log(a.length) // 3

• 检查是否为数组

 console.log(Array.isArray(a)) // true

• 将数组转换为字符串

var b = ['中国','日本','美国']
  console.log(b.toString())
  console.log(b.join('+'))

• 栈方法 后进先出

 b.push('澳大利亚')  // 在尾部推入
  console.log(b)
  console.log(b.pop()) // 弹出尾部最后一项
  console.log(b)

• 队列方法 先进先出

 b.unshift('澳大利亚')  // 在头部推入
  console.log(b)
  b.shift()   // 弹出头部的第一项
  console.log(b)

• 重排序方法

 var nums = [1,2,3,4,5,6]
  console.log(nums.reverse())

  nums.sort(function(val1,val2){
      if(val1 > val2){
          return -1
      }else if(val1 < val2){
          return 1
      }else {
          return 0
      }
  })

  nums.sort(function(val1,val2){
      return val1 - val2;
  })

• 数组拼接 concat

  var s = [1,2];
  console.log(s.concat([4,5],[66,77],'国家'))

• 数组切片

 var s1 = ['香蕉','苹果','栗子']
  console.log(s1.slice(1,2))

• splice 删除 插入 替换

  console.log(s1.splice(0,2))
  console.log(s1)
  console.log(s1.splice(1,0,'香蕉','苹果'))
  console.log(s1)
  console.log(s1.splice(1,1,'哈密瓜'))
  console.log(s1)

• 位置方法

  console.log(s1.indexOf('苹果'))
  console.log(s1.lastIndexOf('苹果'))

• 迭代方法

1. every() 数组中的所有项都满足条件，返回true

 var interation = ['老虎','狮子','孔雀','羚羊'];
  var res = interation.every(function(val,index,arr){
      return typeof val === 'string'
  })

2. filter() 按条件过滤，返回数组

var res1 = interation.filter(function(val,index,arr){
      return index > 2
  })

3. some() 数组中只要有一项满足条件，返回true

 var res2 = interation.some(function(val,index,arr){
      return val.indexOf('子')
  })

4. forEach() 迭代数组中的每一项

interation.forEach(function(val,index,arr){
      console.log(val)
  })

5. map() 对数组的每一项进行操作后，返回数组

interation.forEach(function(val,index,arr){
      console.log(val)
  })

• 归并方法

 var res4 =  interation.reduce(function(perv,curr,index,arr){
      return perv + curr
  },'猎豹')

** 第二个参数表示，表示第一个值为指定的参数值

3）Date类型

• 获取当前时间

  var  currentTime = new Date()

• 创建指定的时间

Date.parse('2002-08-22T12:11:11')

• 获取毫秒数

currentTime.getTime()
Date.parse('2002-08-22T12:11:11')

4）Object类型

• 创建方法

 var person = new Object();
  var person2 = {};

• 取值

1. 使用点， 和中括号

  var a = 'say'
  var o = {}
  o[a] = 'hello'
  console.log(o.say)

5）Function类型

• 创建方式

 // 声明式
  function foo(){}
  // 表达式
  var foo = function (){}
  // 构造式
  var sum = new Function("num","return num")

• 将函数作为值

  function add(){}
  function res(cb){}
  res(add)

• 函数中返回匿名函数

function ret(){
      return function(){}
  }

• 函数内部属性

function foo2(){
      console.log(arguments.callee) // 是一个指针，指向拥有arguments对象的函数
  }

** 使用 callee 实现递归调用

function factorial(num){
      if(num <=1){
          return 1;
      }else {
          return num * arguments.callee(num-1)
      }
  }

• 函数的属性

 function sum1(num1,num2){}
  console.log(sum1.length)  // 2  length用来获取函数形参的个数
  console.log(sum1.prototype)  // 获取函数的原型

• 改变函数运行的作用域

1. call

  window.color = 'red';
  var o2 = {color: 'blue'};
  function sayColor(){
      console.log(this.color)
  }
  sayColor();  // red
  console.log( sayColor.call(o2))  // blue

  function test(a,b,c,d){
      // 转换为数组
      return [].slice.call(arguments,0,3)
  }
  var result = test(1,2,3,4)

2. apply() 同call 类似， 参数传递为数组
3. bind()

// bind  创建一个函数的实例，其this会被绑定到传给bind()函数的值
  window.a = 'red'
  var o4 = {color: 'blue'}
  function saycolor(){
      console.log(this.color)
  }
  var objcolor = saycolor.bind(o4)
  objcolor()

6）单体内置对象

• URI编码

  var uri = "http://www.wrox.com/illegal value.htm#start"
  // 编码
  console.log(encodeURI(uri)) //http://www.wrox.com/illegal%20value.htm#start
  console.log(encodeURIComponent(uri))  // http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start
  // 解码
  console.log(decodeURI(uri))
  console.log(decodeURIComponent(uri))

• evel 执行域

eval("var msg = 'hello world'")
  console.log(msg)

• Math 对象

1. min , max
   由于min，max 不允许传递数组故调用apply方法

  console.log(Math.min(1,2,3,4))
  console.log(Math.max(1,2,3,4))
  console.log(Math.max.apply(Math,[1,2,3,4]))

2. 舍入方法

  console.log(Math.ceil(24.4))  // 25 向上舍入
  console.log(Math.floor(24.8))  // 24 向下舍入
  console.log(Math.round(24.6))  // 25  四舍五入

3. 随机数

  var randomVal = Math.floor(Math.random()*10 + 1)

  function selectFrom(lowerVal, upperVal){
      var choices = upperVal - lowerVal + 1;
      return Math.floor(Math.random()*choices + lowerVal)
  }