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变量已经保存了创建出来的空对象。

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

在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
// 这几个操作符返回的都是布尔型
  1. 如果两个操作数都是字符串,则比较两个字符串对应(两个字符串中对应位置的每个字符)的字符编码值
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
  1. 如果一个操作数是数值,则会把另个操作数转化为一个数值,然后进行数值比较
var res1 = '23';
var res2 = 3;

alert(res1 < res2); //false
// res1会转化为数值23,23 > 3
  1. 任何操作数与NaN比较,都是false
var res1 = 'a';
var res2 = 3;

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

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

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

⑤ 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;
}
  1. 计算时间差,返回相差的天/时/分/秒
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];
  1. 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
  1. instanceof 运算符可以判断一个对象是否是某个构造函数的实例

  2. 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('-')) // 字符串:刘备-关羽-张飞
  1. 将一个字符串数组的元素的顺序进行反转,["a", "b", "c", "d"] --> [ "d","c","b","a"]。
// 使用reverse()
var array = ['刘备', '关羽', '张飞'];
console.log(array.reverse()); // ["张飞", "关羽", "刘备"]
  1. 工资的数组 [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]
  1. ["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);
  1. 编写一个方法,去掉一个数组的重复元素。
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

内存图如下:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容