JavaScript-对象、数据类型

1 - 对象

1.1 对象的相关概念

① 什么是对象？

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，对象是由属性和方法组成。

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

② 为什么需要对象？

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？例如，将“张三疯”的个人的信息保存在数组中的方式为：

var arr = ['张三疯', '男', 128];

上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的记住所有的数据的索引，才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。

为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

使用对象记录上组数据为：

var obj = {
  "name":"张三疯",
  "sex":"男",
  "age":128,
  "height":154
}

JS中的对象表达结构更清晰，更强大。

1.2 创建对象的三种方式

① 使用对象字面量创建对象

就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示。

键：相当于属性名，值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码如下：

var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){ // 匿名函数
        alert('大家好啊~');
    }
};

上述代码中 star 即是创建的对象。

• 对象的属性：对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项

通过对象.属性名 访问对象的属性，这个小点 . 就理解为“ 的 ”

console.log(star.name)     // 调用名字属性

• 对象的方法：对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项

通过对象.方法名()调用对象的方法，注意这个方法名字后面一定加括号

star.sayHi();           // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

• 变量、函数、属性、方法区别
  • 变量：单独声明赋值，单独存在
  • 函数：单独存在的，通过“函数名()”的方式就可以调用
  • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
  • 方法：对象里面的函数称为方法，不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

② 使用 new Object 创建对象

1. 创建空对象

var andy = new Obect();

通过内置构造函数Object()创建对象，此时andy变量已经保存了创建出来的空对象。

2. 给空对象添加属性和方法

在JS中，如果一个对象不存在某个属性或方法，可以通过直接赋值来动态为对象增加属性和方法。

andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}

③ 使用构造函数创建对象（推荐使用）

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

构造函数的封装格式：

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

构造函数的调用格式

var obj = new 构造函数名(实参1，实参2，实参3)

以上代码中，obj即接收到构造函数创建出来的对象。

示例代码如下：

// 构造函数
function Stars(name, age, sex, sayH) { 
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.sayH = sayH;
}
var sayH = function() {
  console.log('大家好啊~');
}
// 创建对象
var star = new Stars("pink", 18, '男', sayH);
console.log(star.name);
console.log(star.age);
console.log(star.sex);
console.log(star.sayH());
// 打印：pink 18 男 大家好啊~

注意事项：

1. 构造函数约定首字母要大写，并且使用驼峰命名。
2. 函数内的属性和方法前面需要添加 this，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 new 来调用构造函数。

new关键字的作用：

1. new 会在内存中创建一个新的空对象
2. new 会让 this 指向这个新的对象
3. 执行构造函数，目的：给这个新对象加属性和方法
4. new 会返回这个新对象

1.3 函数内部的 this 指向

1. 函数作为一个对象的方法，被该对象所调用，那么 this 指向的是该对象。
2. 构造函数中的 this 指向一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过 new 关键字来调用，从而实现实例化。
3. 函数在定义的时候 this 指向是不确定的，只有在调用的时候才可以确定，如果是普通的函数调用，那么this指向全局 window，如果是构造函数调用，那么this指向一个隐式对象。

1.4 遍历对象的属性

原生JS中，for…in是专门为了遍历对象设计的。

var obj = {}; // 通过字面量，创建一个空对象
for (var i = 0; i < 10; i++) { // 使用for循环
obj[i] = i * 2; // 给空对象赋值
}

for(var key in obj) { // 遍历对象的key和value
console.log(key + "==" + obj[key]); 
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) {
  console.log(k);      // 这里的 k 是属性名
  console.log(obj[k]); // 这里的 obj[k] 是属性值
}

1.5 Object.keys(对象) 获取对象的属性名数组

var obj = {
    id: 1,
    pname: '小米',
    price: 1999,
    num: 2000
};
var result = Object.keys(obj)
console.log(result); // [id，pname,price,num]

2 - 内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
JavaScript 提供了多个内置对象：Math、 Date 、Array、String 等

2.1 Math对象

Math 是个对象，不是构造函数，Math 对象具有和数学相关的属性和方法，跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

属性、方法名	功能
Math.PI	圆周率 (属性)
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max() / Math.min()	求最大和最小值
Math.random()	获取范围在 [0,1) 内的随机值

获取指定范围内的随机整数：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

2.2 Date构造函数

Date 是个构造函数，不是对象，所以使用时需要 new Date() 实例化后才能使用其中具体方法和属性，Date 实例用来处理日期和时间。

GMT是格林威治时间，在零时区，北京在东八区，比零时区快了八小时，所以 GMT+0800 是中国标准时间。

① Date();

• Date构造函数不传参数

// 如果不传入参数，获取的是当前时间
var now = new Date();

• Date构造函数传参数

//传入日期格式字符串
var future = new Date('2019/5/1');
var future = new Date('2019-5-1');
// Wed May 01 2019 00:00:00 GMT+0800 (中国标准时间)

//传入毫秒数
var future = new Date(1498099000356);
// Thu Jun 22 2017 10:36:40 GMT+0800 (中国标准时间)

//传入数字年、月、日
var future = new Date(2018, 8, 25)
// Fri Sep 25 2018 00:00:00 GMT+0800 (中国标准时间)

② Date实例的方法和属性

③ 通过Date实例获取总毫秒数

总毫秒数的含义：基于1970年1月1日（世界标准时间）起的毫秒数。

方法1: Date.now()

Date对象的内置方法

let a = Date.now();
console.log(a);     //1523619204809

方法2: getTime()

创建一个日期对象，调用该对象的getTime()方法

let d = new Date().getTime()
console.log(d);     //1523619204809     

方法3: valueOf()

基于Date类型的valueOf()方法，不会返回一个字符串，而是返回日期的毫秒表示

let c = new Date().valueOf();
console.log(c);     //1523619204809         

另外，基于Date类型valueOf()的特征，我们可以对两个日期进行比较大小：

let a = new Date('2000-02');
let b = new Date('2010-02');

console.log(b > a);     //true

这里的b > a中的关系操作符> , b 和 a是对象,调用对象的valueOf()方法，而Date类型的valueOf()会返回对应的毫秒数，所以可以进行比较。

具体的有关大小比较的转化规则，之前博客有写到，JS中大于、小于的不同比较规则

方法4: + new Date()

let b = +new Date();
console.log(b);     //1523619204809         

+ new Date()结果为什么是毫秒数?

其实这个涉及到JS中另外一个知识点，一元操作符（+或者-）对 非数值 的转换。

如果 + 号 应用于对象之前，会首先调用找个对象的valueOf()、toString().

我们看一个例子:

let n = {
    valueOf: function(){
        return -1;
    }
}

console.log(+n)     // -1

+n调用了对象的valueOf()，结果是 -1

所以 +new Date() 这个方法又回到了方法3中的 valueOf()，所以执行结果是相同的。

④ 补充：JS中大于、小于的比较规则

1. 如果两个操作数都是数值，则按照普通的数值比较

var result1 = 15 > 13; //true
var result2 = 15 < 13; //false
// 这几个操作符返回的都是布尔型

2. 如果两个操作数都是字符串，则比较两个字符串对应（两个字符串中对应位置的每个字符）的字符编码值

var res1 = 'alpha go';
var res2 = 'Backhome';

alert(res1 > res2);  //true
//字母a的字符编码是97, 字母B的字符编码66

var res1 = '23';
var res2 = '3';

alert(res1 < res2);  //true
//'2'的字符编码是50，'3'的字符编码是51

3. 如果一个操作数是数值，则会把另个操作数转化为一个数值，然后进行数值比较

var res1 = '23';
var res2 = 3;

alert(res1 < res2); //false
// res1会转化为数值23，23 > 3

4. 任何操作数与NaN比较，都是false

var res1 = 'a';
var res2 = 3;

alert(res1 < res2); //false,因为'a'转化为了NaN
//任何操作数与NaN比较，都是false
NaN < 10 //false
NaN >= 10 //false

一般来说，如果一个值不小于另外个值，则一定是大于或者等于那个值。特殊情况，在与NaN比较的时候，结果都返回false;

5. 如果有一个操作数是对象,调用这个对象的valueOf()方法，得到的结果按照前面的规则进行比较。如果对象没有valueOf()方法，则调用toString()方法，得到的结果按照前面的规则进行比较。
6. 如果操作数是布尔值，则转化为数值，再进行比较。

⑤ Date相关案例

1. 写一个函数，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //如果date不是日期对象，返回
  if (!(date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}

2. 计算时间差，返回相差的天/时/分/秒

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000; // 将毫秒转换成秒
  day = Math.round(interval / 60 / 60 / 24); // round取整
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

2.3 Array数组对象

首先要知道数组是个对象。

① 创建数组的两种方式

1. 字面量方式

// 1. 使用字面量创建数组对象
var arr = [1,"test",true];

2. new Array()

// 2. 使用构造函数创建数组对象
var arr = new Array();

// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
console.log(arr.length); // 3

var arr = new Array(6);
console.log(arr.length); // 6
console.log(arr); // [空属性 × 6]

注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数，参数传递规则如下：
① 如果只传入一个参数，则参数规定了数组的长度
② 如果传入了多个参数，则参数称为数组的元素

② 是否为数组

1. Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

2. instanceof 运算符可以判断一个对象是否是某个构造函数的实例

3. typeof() 函数会判断实例的真实类型

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

console.log(typeof(arr)); // object
console.log(typeof(obj)); // object

③ 数组的方法

1. 会修改原数组的方法

数组末尾操作元素	说明	返回值
push(参数1...)	数组末尾添加一个或多个元素	并返回新的长度
pop()	删除数组最后一个元素	并返回删除的元素

数组开头操作元素	说明	返回值
unshift(参数1...)	数组开头添加一个或多个元素	并返回新的长度
shift()	删除数组第一个元素	并返回删除的元素

var numbers = [4, 2, 5, 1, 3];
var result = numbers.push('哈哈'); // 会修改原数组
console.log(numbers); // [4, 2, 5, 1, 3, '哈哈']
console.log(result); // 6

数组排序	说明	返回值
sort()	对数组的元素进行排序	并返回新数组

注意：sort方法需要传入参数来设置升序、降序排序，如果不传参数，就是按字符编码(Unicode)从小到大排序。

如果传入function(a,b){ return a-b;}，则为升序，如果传入function(a,b){ return b-a;}，则为降序。

var numbers = [4, 2, 5, 1, 3];
var result = numbers.sort(function(a, b) { // 会修改原数组
  return a - b; // 按照升序排列
});
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(result); // [1, 2, 3, 4, 5]

数组替换	说明	返回值
splice()	替换数组中的元素	返回被替换的元素组成的数组

//index:必需。规定从何处替换元素
//howmany:可选。替换多少元素
//item1, ..., itemX:可选。要添加到数组的新元素，如果这个参数没有，那就是把相应的元素替换为空（删除数组）。
array.splice(index,howmany,item1,.....,itemX) 

var numbers = [4, 2, 5, 1, 3];
var result = numbers.splice(1, 3, '哈哈', '嘿嘿'); // 会修改原数组
console.log(numbers); // [4, "哈哈", "嘿嘿", 3]
console.log(result); // [2, 5, 1] 返回值是替换出来的数组

数组翻转	说明	返回值
reverse()	翻转数组中的元素	会修改原数组，返回翻转后的数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 因为会修改原数组，所以一般我们直接使用原数组，不用返回值，因为是一样的
var newResult = fruits.reverse();
console.log(fruits); // ['Mango', 'Apple', 'Orange', 'Banana']
console.log(newResult); // ['Mango', 'Apple', 'Orange', 'Banana']

2. 不会修改原数组的方法

查找索引	说明	返回值
indexOf()	在数组中查找给定元素的第一个索引	如果存在，返回索引号，如果不存在，返回-1
lastIndexOf()	在数组中查找给定元素的最后一个索引	如果存在，返回索引号，如果不存在，返回-1

//item  必须。查找的元素。
//start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
var numbers = [4, 2, 5, 1, 3];
var index = numbers.indexOf(5, 1); // 不会修改原数组
console.log(numbers); // [4, 2, 5, 1, 3]
console.log(index); // 2

数组转换为字符串	说明	返回值
toString()	把数组转成字符串，逗号分隔每一项	返回字符串
join('分隔符')	使用分隔符，将数组中的元素拼接成字符串	返回字符串

var numbers = [4, 2, 5, 1, 3];
var result1 = numbers.toString(); // 不会修改原数组
var result2 = numbers.join('+'); // 不会修改原数组
console.log(numbers); // [4, 2, 5, 1, 3]
console.log(result1); // 字符串：4,2,5,1,3
console.log(result2); // 字符串：4+2+5+1+3

注意：join方法如果不传入参数，则默认按照 “ , ”拼接元素

数组迭代	说明	返回值
forEach()	遍历数组	无字符串
filter()	筛选数组	返回新数组
some()	检测数组中是否有某个元素	如果有满足条件的元素，返回true，否则返回false

arr.forEach(function(value, index, array) { // 没有返回值
     //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
})

filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组

var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index, array) {
   //参数一是:数组元素
   //参数二是:数组元素的索引
   //参数三是:当前的数组
   return value >= 20;
});
console.log(arr); // 不会改变原数组
console.log(newArr); // [66,88] // 返回值是一个新数组

some() 方法用于检测数组中的元素是否满足指定条件，通俗来说就是查找数组中是否有满足条件的元素。注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false。如果找到第一个满足条件的元素，则终止循环，不再继续查找。

var arr = [10, 30, 4];
var flag = arr.some(function(value, index, array) {
    //参数一是:数组元素
    //参数二是:数组元素的索引
    //参数三是:当前的数组
    return value < 3;
});
console.log(arr); //不会修改原数组
console.log(flag); //false

数组拼接	说明	返回值
concat()	连接两个或多个数组	返回一个新的数组
slice(begin, end)	截取从下标begin到下标end(不包括该元素)的数组中的元素	返回被截取元素组成的新数组

var numbers1 = [4, 2, 5, 1, 3];
var numbers2 = ['jack', 'rose', 'lili'];
var result = numbers1.concat(numbers2); // 不会修改原数组
console.log(numbers1); // [4, 2, 5, 1, 3]
console.log(numbers2); // ['jack', 'rose', 'lili']
console.log(result); // [4, 2, 5, 1, 3, "jack", "rose", "lili"]

//start:必须。 截取的开始下标
//end:可选。 截取的结束下标
//注意: 截取的时候,包含start,不包含end
var numbers = [4, 2, 5, 1, 3];
var result = numbers.slice(1, 3);  // 不会修改原数组
console.log(numbers); // [4, 2, 5, 1, 3]
console.log(result); // [2, 5]

3. 清空数组

// 方式1
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

④ 案例练习

1. 将一个字符串数组输出为 | 分割的形式，比如 “ 刘备 | 张飞 | 关羽 ”。

var array = ['刘备', '关羽', '张飞'];
// 使用join()
console.log(array.join('-')) // 字符串：刘备-关羽-张飞

2. 将一个字符串数组的元素的顺序进行反转，["a", "b", "c", "d"] --> [ "d","c","b","a"]。

// 使用reverse()
var array = ['刘备', '关羽', '张飞'];
console.log(array.reverse()); // ["张飞", "关羽", "刘备"]

3. 工资的数组 [1500, 1200, 2000, 2100, 1800]，把工资超过2000的删除。

// 方式1：遍历
var array =  [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
  if(array[i] < 2000) {
    tmpArray.push(array[i]);
  }
}
console.log(tmpArray); // [1500, 1200, 1800]

// 方式2：filter
var array =  [1500, 1200, 2000, 2100, 1800];
var newArray = array.filter(function (item) {
  // item就是数组中的每一个元素
  return item < 2000;
})
console.log(newArray); // [1500, 1200, 1800]

4. ["c", "a", "z", "a", "x", "a"] 找到数组中每一个a出现的位置。

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
do {
  var index = array.indexOf('a',index + 1); // 第二个参数是从什么位置开始找
  if (index != -1){
    console.log(index); // 1 3 5
  }
} while (index > 0);

5. 编写一个方法，去掉一个数组的重复元素。

function clear(arr) {
  // 1 如何获取数组中每一个元素出现的次数
  var o = {}; // 记录数组中元素出现的次数
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]; // 数组中的每一个元素
    // o[item] = 1;
    // 判断o对象是否有当前遍历到的属性
    if (o[item]) {
      // 如果o[item] 存在，说明次数不为1
      o[item]++;
    } else {
      // 如果o[item] 不存在，说明是第一次出现
      o[item] = 1;
    }
  }
  // console.log(o);
  // 2 生成一个新的数组，存储不重复的元素
  var newArray = [];
  // 遍历对象o中的所有属性
  for (var key in o) {
    // 判断o对象中当前属性的值是否为 1  如果为1 说明不重复直接放到新数组中
    if (o[key] === 1) {
      newArray.push(key);
    } else {
      // o对象中当前属性 次数不为1 ，说明有重复的，如果有重复的话，只存储一次
      // 判断当前的newArray数组中是否已经有该元素  
      if (newArray.indexOf(key) === -1) {
        newArray.push(key);
      }
    }
  }
  return newArray;
} 

var array = ['c', 'a', 'z', 'a', 'x', 'a'];
var newArray = clear(array);
console.log(newArray);  // 结果：["c", "a", "z", "x"]

2.4 基本包装类型：String、Number、Boolean

上面我们说过，简单数据类型包括 String、Number、Boolean、Undefined、Null。为了方便操作简单数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和Boolean。基本包装类型就是把简单数据类型包装成复杂数据类型（也就是对象），这样基本数据类型就有了属性和方法。

又因为通过 typeof 获取的简单数据类型的类型如下，可以看出 null 就是对象类型，如下：

typeof 返回的是字符串，有6种结果："string","number","boolean","object","function","undefined"，函数也是对象。

所以我们总结：除了undefined，所有的js类型都是对象类型，包括数组等等。

下面代码有问题吗？没问题，为什么没问题？

var s1 = 'zhangsan';
var s2 = s1.substring(5);

s1 是简单数据类型，简单数据类型是没有方法的，但是为什么 s1 可以调用 substring(5) 呢？

当调用 s1.substring(5) 的时候，先把 s1 包装成 String 类型的临时对象，再调用 substring 方法，最后销毁临时对象，相当于：

// 1. 生成临时变量，把简单类型包装为复杂数据类型，赋值给我们声明的字符变量
var s1 = new String('zhangsan');
// 2. 进行字符串操作
var s2 = s1.substring(5);
// 3. 最后销毁临时变量
s1 = null;

对于 String、Number和Boolean 的基本包装类型的对象，我们也可以手动创建：

// 创建字符串对象
var str = new String('Hello World');
// 获取字符串中字符的个数
console.log(str.length);

// 创建Number对象
var num = 18;                   //数值，基本类型
var num = Number('18');     //将字符串'18'转换成Number类型的18
var num = new Number(18); //基本包装类型，对象
var realNum = num.PrimitiveValue // 对象中的PrimitiveValue就是原始值，就是18

对于Boolean的基本包装类型我们几乎不用，因为有可能引起歧义，如下：

var b1 = new Boolean(false); // 对象中包装的是false
var b2 = b1 && true;        // true
// 虽然语法上没啥毛病，但是包装 false 的对象 && true，最后结果还是 true，总给人感觉怪怪的，所以我们不这样用

2.5 String字符串对象

① 字符串的不可变

字符串通过基本包装类型可以调用部分方法来操作字符串，字符串所有的方法都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

字符串的不可变指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc'; // 指针str指向'abc'的内存
str = 'hello'; // 重新开辟内存存放'hello'，并更改str指针的指向，使其指向'hello'

由于字符串的不可变，在大量拼接字符串的时候会有效率问题。

② 字符串的方法

1. 根据字符返回位置 indexOf()

indexOf('要查找的字符', 开始的位置) //返回指定内容在原字符串中的位置，从前往后找，只找第一个匹配的，找不到返回-1
lastIndexOf() // 从后往前找，只找第一个匹配的，找不到返回-1

案例练习：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

1. 先查找第一个o出现的位置
2. 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
3. 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

var s = 'abcoefoxyozzopp';
var array = [];
do {
  var index = s.indexOf('o', index + 1);
  if (index != -1) {
    array.push(index);
  }
} while (index > -1);
console.log(array); // [3, 6, 9, 12]

2. 根据位置返回字符 charAt(index)

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

案例练习：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数

1. 核心算法：利用 charAt() 遍历这个字符串
2. 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1
3. 遍历对象，得到最大值和该字符

注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数

var s = 'abcoefoxyozzopp';
var o = {};

for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) { //如果对象中有这个属性
    o[item] ++;  //就加1
  } else {
    o[item] = 1; //否则就为1
  }
}
//上面循环结束之后，o对象中就存储了每个字符出现的次数

var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
  }
}

console.log(max); // 4
console.log(char); // o

3. 字符串操作方法 substr(start,length) slice(start,end)

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串，以下是部分操作方法：

案例练习：截取字符串"我爱中华人民共和国"，中的"中华"

var s = "我爱中华人民共和国";
s = s.substr(2,2);
console.log(s); // 中华

4. 大小写转换方法

toUpperCase()   //转换大写
toLowerCase()   //转换小写

5. 替换字符串 replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

字符串.replace(被替换的字符串， 要替换为的字符串)； //替换，只能替换一次 

案例练习：把字符串中所有的 o 替换成 !

var s = 'abcoefoxyozzopp';
var index = -1;
do {
  index = s.indexOf('o', index + 1);
  if (index !== -1) {
    // 将 o 替换为 !
    s = s.replace('o', '!');
  }
} while(index !== -1);
console.log(s); // abc!ef!xy!zz!pp

6. 分割字符串，结果是数组 split()

split()方法用于分割字符串，它可以将字符串分割为数组。在切分完毕之后，返回的是一个新数组。

其使用格式如下：

字符串.split("分割字符")

案例练习：把字符串中的所有空白去掉 ' abc xyz a 123 '

var s = '   abc       xyz  a    123   ';   
var arr = s.split(' '); // 通过空格截取，截取后的内容放到一个数组里面
console.log(arr.join('')); // abcxyza123
// 或者：s = s.replace(' ', '');

③ 综合案例：获取url中?后面的内容，并转化成对象的形式

获取url中?后面的内容，并转化成对象的形式。例如：http://www.itheima.com/login?name=zs&age=18&a=1&b=2

var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
// 获取url后面的参数
function getParams(url) {
  // 获取?后面第一个字符的索引
  var index = url.indexOf('?') + 1;
  // url中?后面的字符串 name=zs&age=18&a=1&b=2
  var params = url.substr(index);
  // 使用&切割字符串，返回一个数组 
  var arr = params.split('&');
  var o = {};
  // 数组中每一项的样子name=zs
  for (var i = 0; i < arr.length; i++) {
    var tmpArr = arr[i].split('='); // 使用'='截取
    var key = tmpArr[0];
    var value = tmpArr[1];
    o[key] = value;
  }
  return o;
}

var obj = getParams(url);
console.log(obj); // {name: "zs", age: "18", a: "1", b: "2"}

console.log(obj.name); // zs
console.log(obj.age); // 18

3 - 简单数据类型和复杂数据类型

3.1 js 的数据类型

关于数据类型，在本文的前面已经讲过了。

简单数据类型：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null。是值类型。
复杂数据类型：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。是引用类型。

3.2 堆栈

栈：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。
堆：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

简单数据类型变量的数据直接存放在变量（栈空间）中。

复杂数据类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。

3.3 简单数据类型传参 - 值传递

当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {
    a++;
    console.log(a);
}
var x = 10;
fn(x); // 11
console.log(x); // 10
// 打印：11 10

运行结果如下：

3.4 复杂数据类型传参 - 指针传递

当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 刘德华
    x.name = "张学友";
    console.log(x.name); // 3. 张学友
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 刘德华
f1(p);
console.log(p.name);    // 4. 张学友

运行结果如下：

总结：对于函数传参，简单数据类型传递的是值，复杂数据类型传递的是指针。

3.5 案例练习

下面代码输出的结果?

function Person(name,age,salary) {
  this.name = name;
  this.age = age;
  this.salary = salary;
}
function f1(person) { // ③ 这时候p指针、person指针存储的地址都是0xaabb，都指向对象p
  person.name = "ls"; 
  person = new Person("ww",20,10); // ④ person指针存储的地址变成了0xaacc，指向person对象
  console.log(person.name); // ww
}

var p = new Person("zs",18,1000); // ① p指针存储的地址是0xaabb，指向对象p
console.log(p.name); // zs
f1(p); // ② 调用f1函数
console.log(p.name); // ls

// 打印：zs ww ls

内存图如下：