对象

介绍

在JS中, 对象Object是一组无序的相关属性和方法的集合, 所有的事物都是对象, 例如字符串, 数值, 数组, 函数等

组成:

  • 属性
    事物的特征, 在对象中用属性来表示
  • 方法
    事物的行为, 在对象中用方法来表示

为什么需要对象:

保存一个值时, 可以使用变量, 保存多个值(一组值)时,, 可以使用数组.

如果要保存一个人完整的信息呢?

JS中的对象表达结构更加清晰, 强大

对象

创建对象以及使用对象

利用字面量创建对象

创建一个空对象

var obj = {}; 创建了一个空对象

实例:

var obj = {
username:'张三丰',
age:18,
gender:'男',
sayHi: function() { //方法
console.log('hi');
}
}

注意:

  1. 里面的属性或者方法我们我们采取键值对的形式 属性名: 值,
  2. 多个属性或者方法中间用逗号隔开
  3. 方法冒号后面跟的是一个匿名函数

使用对象

  • 调用对象的属性(里面的属性值)
  1. 调用对象的属性 我们采取 对象名.属性名 的形式 小点. 理解为”的” 对象的属性
    console.log(obj.username);

  2. 第二种方法: 对象名[‘属性名’]

在遍历对象中的属性值会用到这个方法

console.log(obj['age']);

  • 调用对象的方法

​ 调用对象的方法/行为 sayHi 对象名.方法名() 就是函数调用(别忘记添加小括号)

obj.sayHi();

一些区别

变量与对象中的属性

变量: 单独声明并赋值 使用的时候直接写变量名 单独存在

对象中的属性: 在对象里面的不需要声明, 使用的时候必须: 对象.属性

函数与对象中的方法

函数: 单独声明 调用的 函数名() 单独存在

方法: 在对象里面 调用时 对象.方法()

利用new Object创建

创建空对象

var obj = new Object(); //创建了一个空对象

给创建的对象追加属性和方法

obj.uname = '张三丰'; //给对象obj追加一个uname属性 其值为'张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() { // 给对象obj追加一个方法
console.log('hi~');
}

注意:

(1) 我们是利用等号赋值的方法 添加对象的属性和方法

(2) 每个属性和方法之间 用分号结束

利用构造函数来创建对象

因为我们前面两种创建对象的方式 一次只能创建一个具体的对象

把对象封装到函数里面: 把对象里面一些相同的属性和方法抽象出来 封装到函数里面

语法:

  • 构造
function 构造函数名(形参) {
this.属性 = 值(形参);
this.方法 = function() {}
}
  • 使用(实例化这个构造函数/或者说实例化这个对象)

    new 构造函数名(实参)

    var 变量名 = new 构造函数名()

实例:

创建构造函数(对象模板)

function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang)
}
}

使用构造函数(实例化对象)

var ldh = new Star('刘德华', 18, '男');  // 调用函数 返回的是一个对象
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');

var zxy = new Star ('张学友', 19, '男');
console.log(zxy.name);
console.log(zxy.age);

注意:

  1. 构造函数的名字首字母要大写
  2. 构造函数不需要return 就可以返回结果
  3. 我们调用函数 必须使用 new
  4. 只要new Star() 调用函数就创建一个对象
  5. 在创建构造函数时, 我们的属性和方法前面必须加上this.

构造函数与对象的关系

构造函数将一类对象的共同属性封装在函数里面

function Stars() { this.....}

利用构造函数创建对象的过程 称为 对象的实例化

new Satrs(实参) 将实参传入构造函数 进行对象实例化

New关键词

执行过程:

  1. 在内存中创建一个空对象
  2. 让this指向这个新的对象
  3. 执行构造函里面的代码, 给这个新对象添加属性和方法
  4. 返回这个新对象(记得把这个新对象赋值给一个变量) , 所以构造函数里面不需要return

遍历对象的属性及属性值

例子

var obj = {
name: 'pink老师',
age: 18,
sex: '男',
fn: function () { }
}

方法

for…in语句用于对数组或者对象的属性进行循环操作.

for (变量(属性名) in 要遍历的对象名) {

}

实例:

for (var k in obj) {
console.log(k); //k 变量 输出 得到的是属性名
console.log(obj[k]) // obj[k] 得到的是属性值 []不可以用加'' 这里的obj[]指的不是查看数组元素
}

注意:

我们使用for in 里面的变量 我们喜欢写k或者key

小结:

  1. 对象可这样放代码结构更清晰
  2. 对象是复杂数据类型object
  3. 本质:对象就是一组无序的相关属性和方法的集合
  4. 构造函数泛指某一大类, 比如苹果, 不管是青苹果还是红苹果, 都统称为苹果
  5. 对象实例特指一个对象 比如这个苹果
  6. for…in 语句用于对 对象的属性进行循环操作

内置对象

内置对象的分类

  • 自定义对象
  • 内置对象:

​ JS语言自带的一些对象 也可以实现一些常用且必要的功能, (属性和方法)

​ Math, Date, Array, String

  • 浏览器对象

Math对象—Math.

不是一个构造函数 不需要new来调用 而是直接使用里面的属性和方法即可

案例: 封装自己的数学对象

要求:利用对象封装自己的数学对象 里面有PI 求最大值方法 求最小值方法

实例:

var myMath = {   //字面量创建对象 
PI:3.1415926, // 创建一个对象的属性 注意逗号
max: function() { //创建一个求最大值的方法
var max = arguments[0];
for(var i=1; i<arguments.length; i++) {
if (arguments[i]>max) {
max =arguments[i];
}
}
return max; //返回最大值
}, //注意这里的逗号 (属性或方法之间 用逗号隔开)
min: function() { //创建一个求最小值的方法
var min = arguments[0];
for(var i=1; i<arguments.length; i++) {
if (arguments[i]<min) {
min =arguments[i];
}
}
return min; //返回最小值
}
}

console.log(myMath.PI); //3.1415926
console.log(myMath.max(1,5,9)); //9
console.log(myMath.min(1,5,9)); //1

Math常用对象

Math.PI 圆周率 它时一个属性, 不是一个方法 不需要加小括号

Math.floor() 向下取整

1.1—–1
1.9—-1

Math.ceil() 向上取整 往大的整数取值

1.1—-2
1.9—-2

Math.round() 四舍五入取整 就近取值
注意- 3.5 取-3
恰好在整数中间的这个数往大了取(无论正整数还是负整数)

-1.5 取-1
-2.5取-2
2.5取3

Math.abs() 取绝对值
遇到字符串型的数字会隐式转换 ‘1’=1

Math.max()/Math.min() 求数字中的最大值和最小值
注意: 只能传参数, 不能传数组

解决: 利用apply( 参数1, 参数2(数组) ) 先把数组转化为字符串

var arr = [1, 66, 3, 99, 4];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max,min); //99,1

Math对象—random() 随机数

注意:

返回一个随机的浮点数 范围[0,1)之间
取到0 但是娶不到1
不跟参数

使用: 得到一个两数之间的随机整数,包括两个数在内

function getRandom(min, max) { //作用  得到一个两数之间的随机整数,包括两个数在内
// min = Math.ceil(min);
// max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
console.log(getRandom(1, 10)); //获得[1,10]之间的一个随机整数
//班级点名
var arr = ['张三', '李四','Angel', '网吧','或者']
console.log(arr[getRandom(0,arr.length-1)]);

案例: 猜数字游戏

要求:

程序随机生成一个 1~ 10 之间的数字,并让用户输入一个数字,

  1. 如果大于该数字,就提示,数字大了,继续猜;
  2. 如果小于该数字,就提示数字小了,继续猜;
  3. 如果等于该数字,就提示猜对了, 结束程序

分析:

① 随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
② 需要一直猜到正确为止,所以一直循环。
③ 用while 循环合适更简单。
④ 核心算法:使用 if else if 多分支语句来判断大于、小于、等于。

日期对象—new Date( )

介绍

是一个构造函数, 必须使用new来调用我们的日期对象

new Date( )

不使用参数:

var date= new Date(); //参数为空  返回系统当前时间
console.log(date); //获取当前时间 Mon Mar 28 2022 11:20:58 GMT+0800 (中国标准时间)

得到了一个非格式化的时间字符串, 浏览器不同 得到的格式也不同

所以我们需要

日期格式化

调用日期对象 并赋予date

var date = new Date();

提取单个的年, 月, 日

console.log(date);  //获取当前系统的年月日时间
console.log(date.getFullYear());//返回当前系统日期的年 2022
console.log(date.getMonth() + 1); // 本应该输出2 实际是1 所以事实是返回的月份会小一个月 必须加1
console.log(date.getDate());// 输出当前的日期号
console.log(date.getDay());// 输出当前的星期号 周一到周六返回的是1-6 但是周日返回的是0

实例:

我们写一个****年**月**日 星期几 格式的结果

var date = new Date(); //调用当前日期对象
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates =date.getDate();
var arr =['星期日','星期一', '星期二', '星期三','星期四','星期五','星期六'] //星期日写在最前面
var day = arr[date.getDay()];//利用数组 将数字的星期1换成汉字的星期一
console.log('今天是'+year+'年'+ month+'月'+ dates+'日 '+day);

提取单个的 时 分 秒

var date = new Date();
console.log(date.getHours()); //11
console.log(date.getMinutes()); //11
console.log(date.getSeconds()); //11

实例:

要求封装一个函数 返回当前的时分秒 格式08:08:08

function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h; // 用三元表达式 给个位数的时间 补0
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;

return h + ':' + m + ':' + s;
}
console.log(getTimer());

获取日期的总的毫秒数

获取Date总的毫秒数(时间戳)(永远不会重复) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数

三种方法

1.通过 valueOf() 或者 getTime()

var date = new Date();
console.log(date.valueOf()); //就是我们现在时间 距离1970年1月1号过了多少毫秒数
console.log(date.getTime());//就是我们现在时间 距离1970年1月1号过了多少毫秒数

2.简单的写法: +new Date()

var date1 = +new Date(); // +new Date() 就是返回的总毫秒数
console.log(date1);

对象括号中如果输入一个时间, 格式是: 2022-2-23 18:00:00

则返回这个时间距离1970年初始时间的毫秒数

3.H5 新增的 获得总毫秒数

console.log(Date.now());

案例:倒计时

分析:

核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。

用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。

把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)

1s ===1000ms

转换公式如下:

总秒数 = ms /1000
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

实施:

function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数;
var inputTime = +new Date(time); // 返回的是用户输入时间 总的毫秒数; 用户输入一个时间 会转换为毫秒数
var times = (inputTime - nowTime) / 1000; //times 就是剩余时间总的(/毫/)秒数
var d = parseInt(times / 60 / 60 / 24); // 得到剩余的天数
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24) //得到剩余的小时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); // 得到剩余的分钟数
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); // 得到剩余的秒数
s = s < 10 ? '0' + s : s; // 小于10 利用字符串连接 补0
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-2-23 18:00:00'));

数组内置对象

  1. 利用数组字面量创建数组—–回顾上文

利用数组内置对象创建数组

利用new创建数组

注意Array(); A要大写

var arr = new Array(); // 利用new Array() 创建一个空数组
var arr1 = new Array(2); // 还是一个空数据 数组长度为2 只不过有两个空元素
var arr1 = new Array(2,3); // 等价于[2,3] 这样写表示 里面有两个数组元素 是2和3

利用数组内置对象检测参数是否为数组

(1) instanceof 运算符 它可以用来检测是否为数组

var arr = [];
console.log(arr instanceof Array); //true

var obj = {} //这是对象的写法
console.log(obj instanceof Array); //false

(2)Array.isArray(参数); H5 新增的方法 ie9以上版本才支持

console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false

实例: 翻转数组的规范:确定传入的数据为数组才倒叙

function reverse(arr) {
// if (arr instanceof Array) { /////
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) { //arr.length-1 是为了获取旧数组的最后一个元素的索引号, 以便调用最后一个元素 换成新数组的第一个, 以实现顺序调换; i>=0: 取到旧数组的索引号为0 即第1个元素.
newArr[newArr.length] = arr[i]; // newArr[newArr.length] 这样是当是长度为0 存入第一个 arr中的最后一个元素, 此时长度变成1, //则可继续接收一个新的元素, 长度自动变成2...
}
return newArr
} else { ////
return 'error 这个参数要求必须是数组格式[1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));

添加和删除数组元素

增加数组元素

  • 在后面增加

被添加元素的数组名.push(元素1,元素2,…. ) 在数组的末尾 添加一个或者多个数组元素

var arr = [1, 2, 3];
arr.push(4, 'pink');
console.log(arr); // (5) [1, 2, 3, 4, 'pink']
console.log(arr.push()); // 5 数组的长度

注意:

//(1) .push()可以给数组追加新的元素
//(2) .push() 参数直接写数组元素就可以
//(3) .push()  无参数 则返回 数组的长度
  • 在前面增加

被添加元素的数组名.unshift(元素1,元素2,…. ) 在数组的开头 添加一个或者多个数组元素;

arr.unshift('red')
console.log(arr); //['red', 1, 2, 3, 4, 'pink']
console.log(arr.unshift()); //6

注意:

//(1) .unshift可以给数组前面追加新的元素
//(2) .unshift() 参数直接写数组元素就可以
//(3) .unshift() 无参数 则返回 数组的长度

删除数组元素

  • 在后面删除

被修改的数组名.pop(最后一个元素) 它可以删除数组的最后一个元素

console.log(arr.pop()); //删除arr这个数组的最后一个元素 并返回被删除的元素
arr.pop() //删除最后一个元素
console.log(arr); //(5) ['red', 1, 2, 3, 4]

注意:

//(1) .pop是可以删除数组的最后一个元素, 记住一次只能删除一个
//(2) .pop() 没有参数
//(3) .pop完毕后会, 返回的结果是 删除的那个元素
//(4) 原数组也会发生变化
  • 在前面删除
console.log(arr.shift());  //删除数组第一的元素 并返回被删除的元素
console.log(arr); // [1, 2, 3]

案例1: 删选数组:有一个包含工资的数组[1500, 1200, 2000, 2100, 1800],要求把数组中工资超过2000的删除,剩余的放到新数组里面

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i =0; i<arr.length;i++) {
if (arr[i]<2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]) //依次添加 不用担心担心序号的问题
}
}
console.log(newArr);

数组排序

.reverse( )

颠倒数组中元素的顺序,无参数

修改原来的数组,返回值为新数组

var arr = [1,2,3,4,5,6,7];
arr.reverse();
console.log(arr); //[7, 6, 5, 4, 3, 2, 1]

.sort( )

该方法会改变原来的数组, 返回新数组

  • 单位数可以实现完美的从小到达排序
var arr1=[4,3,5,6,7,8,6,6,6];
arr1.sort();
console.log(arr1); //[3, 4, 5, 6, 6, 6, 6, 7, 8]
  • 双位数则不行::解决方案
var arr1=[4,33,5,6,77,88,6,6,6];
arr1.sort( function(a,b) { //数组含双位数
// return a-b; //升序的顺序排列
return b-a; //降序的排序排列

});
console.log(arr1);

获取数组索引方法

.indexOf( )

说明: 数组中从前面开始查找给定元素的第一个索引

返回值: 如果存在则返回索引号, 如果不存在, 则返回 -1

​ 可以用来查找用户

实例:

var arr = ['red','给个','你好','真棒','给个'];
console.log(arr.indexOf('给个')); // 1 有两个 '给个'
console.log(arr.indexOf('哈哈')); // 哈哈 不在数组中 则返回 -1

注意: 它只返回第一个查找到的元素的索引号.

.lastIndexOf( )

说明: 数组中从后面开始查找给定元素的索引—从最后一个元素开始查找, 只查找第一次

var arr = ['red', '给个', '你好', '真棒', '给个'];
console.log(arr.lastIndexOf('真棒')); //3

(重点)数组去重

要求:有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’],要求去除数组中重复的元素。

分析:

目标:
把就数组里面不重复的元素选出来放到新数组中, 重复的元素只保留一个, 放到新数组中去重.
核心算法:
我们遍历旧数组, 然后拿着旧数组元素去查询新数组, 如果该元素在新数组里面没有出现过, 我们即添加, 否则不添加
我们怎么知道该元素有没有存在呢?
来利用新数组indexOf(数组元素). 如果返回-1, 就说明新数组里面没有该元素

实施:

function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) { //如果arr[i]在newArr中查不到 即-1,
newArr.push(arr[i]); // 则将arr[i]这个元素存到newArr中
}
}
return newArr;
}

var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);

数组转为字符串

.toString( )

说明: 把数组转换为一条字符串, 默认逗号分隔每一项 不需要传参数

返回值: 返回一个字符串

实例:

var arr=[1,2,3];
console.log(arr.toString()); //1,2,3 黑色

.join(‘分隔符’)

说明: 方法用于把数组中的所有元素转换为一条字符串 可以自定义分隔符

返回值: 返回一个字符串

实例:

var arr1=['green', 'blue','pink'];
console.log(arr1.join('-')); //green-blue-pink
console.log(arr1.join('&')); // green&blue&pink 后台表单提交样式

var mutant=arr1.join('-'); //把返回值赋值给mutant
console.log(mutant); //green-blue-pink

拓展

被连接的第一个数组1.concat(数组2,数组3,… ) 连接两个或多个数组, 不影响原数组

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr4 = [8, 8, 8, 8];
var arr3 = arr1.concat(arr2,arr4);
console.log(arr3);//[1, 2, 3, 4, 5, 6, 8, 8, 8, 8]

需要被截取的数组名.slice(index begin, index end)

参数: 指定的数组的索引号开始截取, 截取到指定数组索引号之前的那一个元素

返回值: 被截取的数组

注意: 不影响原数组

      var arr3 =[1, 2, 3, 4, 5, 6, 8, 8, 8, 8];
var arrSlice = arr3.slice(5,10);
console.log(arrSlice); //[6, 8, 8, 8, 8]
console.log(arrSlice); //[1, 2, 3, 4, 5, 6, 8, 8, 8, 8]

需要被截取删除的数组名.splice(index begin, index end)

参数: 指定的数组的索引号开始截取, 截取到指定数组索引号之前的那一个元素

返回值: 返回被删除元素 成为一个新数组,

注意: 这个会影响原数组

var arr3 =[1, 2, 3, 4, 5, 6, 8, 8, 8, 8];
var arrSlice = arr3.splice(5,10);
console.log(arrSlice); //[6, 8, 8, 8, 8]
console.log(arr3); //[1, 2, 3, 4, 5]

字符串对象

基本包装类型

疑惑

var str = 'andy'; console.log(str.length); //4
按道理 只有复杂数据类型(对象)才会有属性和方法, 但是简单数据类型为什么有length属性呢?

原因

就是把简单数据类型包装成为了复杂数据类型

//把简单数据类型包装为复杂数据类型;
var temp = new String('andy');
//把临时变量给temp
str = temp;
// 销毁这个临时变量
temp = null;

使得基本数据类型就有了属性和方法

为了方便操作基本数据类型, JS还提供了三个特殊的引用类型

String
Number
Boolean

字符串的不可变性

指的是里面的值不可变, 虽然看上去可以改变内容, 但是地址改变了, 内存中新开辟了一个内存空间

根据字符返回位置(经典面试)

被查找的字符串.indexOf(‘要查找的字符’, 开始查找的位置(默认为0) )

作用: 查出指定的字符在什么位置? 得到索引号

返回指定内容的原字符串中的位置(索引号), 如果找不到就返回 -1 , 开始的位置是index 索引号

被查找的字符串.lastIndexOf(‘要查找的字符’, 开始的位置(默认为0))

从后往前找, 只找第一个匹配到的

案例:返回字符的位置

要求:查找字符’abcoefoxyozzopp’中所有出现o的位置以及次数.

分析:

核心算法: 先查找出第一个o出现的位置
然后 只要indexOf()返回的不是-1就继续查找
因为indexOf只能查找到第一个, 所以后面的查找, 利用第二个参数, 即返回的索引号加1, 从而继续查找

实施:

var str = 'oabcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是'+num +'次');

根据位置返回字符(重点)

.charAt(index)

说明: 返回指定位置的字符(index字符串的索引号)

作用: 查出这个位置有什么字符? 得到字符

使用: str.charAt(0)

实例:

var str ='andy';
console.log(str.charAt(3)); //y

​ 遍历所有字符

//遍历所有字符
for (var i=0; i<str.length; i++){
console.log(str.charAt(i)); //a n d y
}

.charCode(index)

说明: 获取指定位置处字符的ASCII(index索引号)

var str = 'andy';

使用: str.charCodeAt(0)

实例: console.log(str.charCodeAt(0)); //97

str[index]

说明: 获取指定位置处字符

使用: html5, IE8 和charAt()等效

实例: console.log(str[0]); //a

案例: 查找字符串”abcoefoxyozzopp”中出现次数最多的字母以及打印这个次数

分析:

​ 核心算法: 利用charAt()遍历这个字符串

​ 把每个祖父储存给对象, 如果对象没有该属性, 就为1, 如果存在 就+1;

​ 遍历对象, 得到最大值和该字符

实施:

var str = 'abcoefoxyozzopp';
var o = {}; //声明一个对象
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); // chars 是字符串的每一个字符
if (o[chars]) { //o[chars] 得到的是属性值 第一次属性值为0;
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o); //{a: 1, b: 1, c: 1, o: 4, e: 1, …}
// 遍历对象
var max = 0;
for (var k in o) {
// k 得到的是o的属性名, o[k]得到的是属性值
if (o[k] > max) {
max = o[k]
ch = k;
}

}
console.log(max); //原始字符串某个字符最大的次数
console.log('最多的字符是' + ch); // 得到出现最大出现次数的这个字符 o对象中方的属性

字符串操作方法(重点)

concat(str1, str2, str3…)

用于链接两个或多个字符串. 拼接字符串,等效于+, +更常用

substr(start, length)

从start位置开始(索引号), length取的个数 重点记住这个

var str1 = '改革春风吹满地';
console.log(str1.substr(2,2)); //春风

slice(start, end)

从start位置开始, 截取到end位置, end取不到(他们俩都是索引号)

substring(start, end)

从start位置开始, 截取到end位置, end取不到 基本和slice相同 但是不接收负值

替换字符串

replace( ‘ 被替换的字符’, ‘替换为的字符’)

var str = 'andy';
console.log(str.replace('a', 'b')); //bndy

!!!只会替换第一个检测到的字符

案例: 有一串字符 里面的o全部替换为*

var str2 = 'abcoefoxyozzopp';
while (str2.indexOf('o') !== -1) {
str2 = str2.replace('o', '*');
}
console.log(str2); //abc*ef*xy*zz*pp

字符串转换为数组

split(‘分隔符’)

var str3 = 'red,pink,blue'; // , 分隔符
console.log(str3.split(',')); // ['red', 'pink', 'blue']

var str4 = 'red&pink&blue'; // , 分隔符
console.log(str4.split('&')); // ['red', 'pink', 'blue']

转换为大写或小写

toUpperCase()

转换为大写

var str5 = 'red,pink,blue';
console.log(str5.toUpperCase());//RED,PINK,BLUE

var str6 = 'red,pink,BLUE';
console.log(str6.toUpperCase()); //RED,PINK,BLUE

toLowerCase()

转换为小写

var str7 = 'red,pink,BLUE';
console.log(str7.toLowerCase()); //red,pink,blue

作业

7、 遍历字符串,并将遍历出的字符两头添加符号“@”

var str9 = 'abaasdffggggggggggghhjjkk22fddbbs3444343';
var num = 0;
var newArr = '';
for(var i= 0; i<str9.length; i++) {
newArr += str9.substr(i,1) + '@'
}
newArr = '@'+ newArr;
console.log(newArr); //@a@b@a@a@s@d@f@f@g@g@g@g@g@g@g@g@g@g@g@h@h@j@j@k@k@2@2@f@d@d@b@b@s@3@4@4@4@3@4@3@

!!! 如果要去掉字符串的某些字符 可以先转换为数组, 进行操作, 在从编辑后的数组转换为字符串

JS的简单数据类型与复杂数据类型

简单数据类型与复杂数据类型

简单类型 又叫做基本数据类型或值类型

在储存时变量中存储的是值本身

  • string

  • number

  • boolean

  • undefined

  • null

    var timer=null;
    console.log(typeof timer);// object

    返回的是一个空的对象

    如果有个变量我们以后打算存储为对象, 暂时没想好, 这个时候就给null

复杂类型 又叫做引用类型

通过关键字new创建的对象(系统对象, 自定义对象)

系统对象: Object Array Date

栈和堆

栈(操作系统)

由操作系统自动分配释放存放函数的参数值, 局部变量的值,. 其操作方式类似一数据结构中的栈

简单数据类型存放到栈里面

开辟空间 直接存储值

堆(操作系统)

存储复杂类型(对象), 一半由程序员分配释放, 若程序员不释放, 由垃圾回收机制回收

复杂数据类型存放到堆里面

  • 首先在栈里面存放地址, 用十六进制表示

  • 然后这个地址指向堆里面的数据

简单类型的内存分配

复杂类型的内存分配

简单类型传参: 传值

复杂类型传参:传地址

JS基础复习完成