js-05--对象是什么、创建对象、对象使用、操作对象、遍历对象、内置对象、Math、任意范围随机数、日期对象、字符串对象
2024-05-09 17:37:45
对象
文章目录
- 对象
- 1.1 对象是什么
- 1.2 创建对象
- 1、字面量创建对象
- 2、new Object 创建对象
- 3、构造函数创建对象
- 1.3 对象使用
- 1 .4 操作对象
- 1. 5 遍历对象
- 1.6 内置对象
- 1. 内置对象是什么
- 2 . Math
- 3. 任意范围随机数
- 4. 日期对象
- 5. 添加删除数组元素
- 6. 数组转化为字符串
- toString()
- join('分隔符')
- 1.7 字符串对象
- 1、基本包装类型
- 2、字符串的不可变
- 3、根据字符返回位置
- 4、根据位置返回字符
- 5、字符串操作方法
- 6、简单复杂数据类型
- 练习题1
- 练习题2
- 练习题3
- 练习题4
思考
- 保存网站用户信息，比如姓名，年龄，电话号码… 用以前学的数据类型方便吗？
不方便，很难区分 - 我们是不是需要学习一种新的数据类型，可以详细的描述某个事物？
- 姓名
- 年龄
- 电话
- …
1.1 对象是什么
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象， 例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
属性： 事物的特征，在对象中用属性来表示（常用名词）
方法： 事物的行为，在对象中用方法来表示（常用动词）
对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合
用来描述某个事物，例如描述一个人
- 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
- 如果用多个变量保存则比较散，用对象比较统一
比如描述班主任信息：
- 静态特征(姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
- 动态行为(点名, 唱, 跳, rap) => 使用函数表示
小结
- 对象是什么？
- 对象是一种数据类型
- 无序的数据的集合
- 对象有什么特点？
- 无序的数据的集合
- 可以详细的描述描述某个事物
1.2 创建对象
1、字面量创建对象
// 声明人对象
let person = {uname: '刘德华',age: 18,sex: '男',// 方法名：function(){}sayHi: function () {console.log('hi~~~')},mtv: function (s) {console.log(s)}
}
// console.log(uname)
// 1. 访问属性 得到值 对象.属性名
console.log(person.uname)
console.log(person.age)
// 2. 访问属性 得到值 对象['属性名']
console.log(person['sex'])// 调用方法 对象.方法名()
person.sayHi()
person.mtv('无间道')
（1）里面的属性或者方法我们采取键值对的形式
键 属性名： 值 属性值
（2）多个属性或者方法中间用逗号隔开
（3）方法冒号后面跟的是一个匿名函数
2、new Object 创建对象
（1）我们是利用 等号 = 赋值的方法 添加对象的属性和方法
（2）每个属性和方法之间用 分号结束
var obj = new Object(); // 创建了一个空的对象obj.uname = '张三丰';obj.age = 28;obj.sex = '男';obj.sayHi = function() {console.log('hi!');}
3、构造函数创建对象
// 构造函数的语法格式
// this当前对象
/* function 构造函数名() {this.属性 = 值;this.方法 = function() {}}new 构造方法名(); */
// 我们需要创建四大天王的对象，相同的属性： 名字、年龄、性别 相同的方法：唱歌
// （1）构造函数名字首字母要大写
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, '男');
ldh.sing('恭喜发财');
console.log(ldh.name);
console.log(ldh.sing);
var zxy = new Star('张学友', 19, '男');
console.log(zxy.name)
案例：请按照要求创建对象
利用构造函数创建两个英雄对象，函数中的公共部分包括：姓名属性（name），类型属性（type）， 血量属性（blood）和攻击方式（attack）。
英雄的信息如下：
- 廉颇 力量型 500血量 攻击：近战
- 后裔 射手型 100血量 攻击：远程
function Obj(uname, type, blood) {this.name = uname;this.type = type;this.blood = blood;this.attack = function(at){console.log(at)}
}
var lianpo = new Obj('lianpo', '力量型', '500血量');
lianpo.attack('近战');
console.log(lianpo.name,lianpo.type,lianpo.blood);var houyi = new Obj('houyi', '射手型', '100血量');
houyi.attack('远程');
console.log(houyi.name, houyi.type, houyi.blood);
new 关键字执行过程
（1）new 构造函数可以在内存中创建一个空的对象
（2）this 就会指向刚才创建的空对象
（3）执行构造函数里面的代码 给这个空对象添加属性和方法
（4）返回这个对象
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, '男')
1.3 对象使用
目标：掌握对象语法，用它保存多个数据
1. 对象声明语法
var 对象名 = {}
例如：
// 声明了一个 person 对象
var person = {}
// 2、使用对象
// （1）、调用对象的属性 我们采取 对象.属性名
// . 的 对象的名字
console.log(obj.uname);
// （2）、调用属性还有一种方法 对象名['属性名']
console.log(obj['sex']);
// （3）、调用对象的方法 sayHi 对象名.方法名() 千万别忘记加括号
obj.sayHi();
2. 对象有属性和方法组成
- 属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…
- 方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…
3.属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
- 属性都是成对出现的，包括属性名和值，它们之间使用英文: 分隔
- 多个属性之间使用英文, 分隔
- 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用"" 或’'，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
// 对象是有属性和方法组成的，那么属性和方法都要写在对象里面
let ldh = {// 属性uname: '刘德华',// 方法 方法名: function(){}sing: function () {console.log('唱歌')},dance: function (s) {console.log(s)}
}// 外部使用 对象.方法名()
ldh.sing()
ldh.dance('恭喜发财')
小结
- 对象属性有顺序吗？
- 没有
- 属性和值用什么符号隔开？多个属性用什么隔开？
- 属性和值用; 隔开
- 多个属性用，逗号隔开
课堂单独案例
请声明一个产品对象，里面包如下信息：
要求：
对象是一个产品信息可以命名为：goods
商品名称命名为：name
商品编号：num
商品毛重：weight
商品产地：address
属性访问
声明对象，并添加了若干属性后，可以使用. 或[] 获得对象中属性对应的值，我称之为属性访问。
简单理解就是获得对象里面的属性值。
let person = {name: 'andy',age: 18,sex: '男'
}
console.log(person.name)
console.log(person['age'])
小结
对象访问属性有哪两种方式？
- 点形式 对象.属性
- [] 形式 对象[‘属性’]
两种方式有什么区别？
- 点后面的属性名一定不要加引号
- [] 里面的属性名一定加引号
- 后期不同使用场景会用到不同的写法
对象中的方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
方法是由方法名和函数两部分构成，它们之间使用: 分隔
多个属性之间使用英文, 分隔
方法是依附在对象中的函数
方法名可以使用"" 或’'，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象中的方法访问
声明对象，并添加了若干方法后，可以使用. 调用对象中函数，我称之为方法调用。
注意：千万别忘了给方法名后面加小括号
小结
- 对象访问方法是如何实现的？
- 对象.方法()
- person.sayHi()
- 对象方法可以传递参数吗？
可以，跟函数使用方法基本一致
1 .4 操作对象
小结
- 对象是什么？
- 一种数据类型
- 可以理解为一堆数据的集合
- 用来表示某个事物
- 对象的是如何声明和使用的？
- 用{} 把一堆数据包起来
- 多个属性和方法之间用逗号隔开
- console.log输出能方便查看对象里有哪些属性和方法
- 如何动态添加属性和方法？
- 对象如果有这个属性相当于重新赋值
- 对象如果没有这个属性相当于动态添加一个属性
let obj = {uname: '小明',age: 18
}
console.log(obj.age) // 18// 修改 对象.属性 = 新值
obj.age = 81
console.log(obj) // {uname: '小明', age: 81}// 新增一个属性 js 可以非常方便的动态新增属性或者方法
obj.sex = '男'
// 会去对象里面找是否有 sex这个属性，如果有则更新值修改
// 会去对象里面找是否有 sex这个属性，如果没有则新增这个属性
obj.sing = function () {console.log('hi')
}
console.dir(obj) // {uname: '小明', age: 81, sex: '男', sing: ƒ}// 删除 (了解)
delete obj.uname
console.dir(obj) // {age: 81, sex: '男', sing: ƒ}
1. 5 遍历对象
目标：能够遍历输出对象里面的元素
遍历对象
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对,没有规律.不像数组里面有规律的下标
遍历对象
- 一般不用这种方式遍历数组、主要是用来遍历对象
- 一定记住： k 是获得对象的 属性名 ， 对象名[k] 是获得 属性值
小结
- 遍历对象用那个语句？
- for in
- 遍历对象中, for k in obj,获得对象属性是那个，获得值是那个？
- 获得对象属性是 k
- 获得对象值是 obj[k]
// 遍历对象
var obj = {name: 'ice',age: 18,sex: '女',fn: function() {}
}// for in 遍历我们的对象
// for (变量 in 对象) {// }for (var k in obj) {console.log(k); // k 变量 输出 得到的是 属性名console.log(obj[k]); // obj[k] 得到的是 属性值
}
输出结果如下：
let obj = {uname: '小明',age: 18,sex: '男',}
// 请输出对象的名字 小明
console.log(obj.uname); // 小明
console.log(obj['uname']) // 小明
// 遍历对象
for (let k in obj) {// 得到的是带字符串的属性名// k === 'uname' === 'age' === 'sex'console.log(k) // uname // age // sex// 得到字符串的属性值console.log(obj[k])// 小明// 18// 男// console.log(obj['uname']) // 小明// console.log(obj['age']) // 18// console.log(obj['sex']) // 男}
案例：遍历数组对象
需求：请把下面数据中的对象打印出来：
//定义一个存储了若干学生信息的数组
letstudents=[
{name:‘小明’,age:18,gender:‘男’,hometown:‘河北省’},
{name:‘小红’,age:19,gender:‘女’,hometown:‘河南省’},
{name:‘小刚’,age:17,gender:‘男’,hometown:‘山西省’},
{name:‘小丽’,age:18,gender:‘女’,hometown:‘山东省’}
]
// 数组 里面可以放任何的数据类型
// let arr = [1, 'pink', true, undefined, null, {}, []]
// console.log(arr)
// 数组对象
let students=[
{name:'小明',age:18,gender:'男',hometown:'河北省'},
{name:'小红',age:19,gender:'女',hometown:'河南省'},
{name:'小刚',age:17,gender:'男',hometown:'山西省'},
{name:'小丽',age:18,gender:'女',hometown:'山东省'}
]for (var k in students) {console.log(students[k]);
}// 输出如下
// {name: '小明', age: 18, gender: '男', hometown: '河北省'}
// {name: '小红', age: 19, gender: '女', hometown: '河南省'}
// {name: '小刚', age: 17, gender: '男', hometown: '山西省'}
// {name: '小丽', age: 18, gender: '女', hometown: '山东省'}for (var k in students) {console.log(k);
}
// 输出如下
// 0
// 1
// 2
// 3// 打印对象 其实里面的每一个对象都是 数组里面的元素 值
// 遍历数组
for (let i = 0; i < students.length; i++) {console.log(students[i].name)console.log(students[i].hometown)
}
// 输出如下
// 小明
// 河北省
// 小红
// 河南省
// 小刚
// 山西省
// 小丽
// 山东省
学生信息表综合案例
需求：根据以上数据渲染生成表格
分析：
- 打印表格头部和尾部
- 中间的行遍历数组，然后填充对象数据
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;/* border-collapse 用于表格属性, 表示表格的两边框合并为一条。 */border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head>
<body><h2>学生信息成绩表</h2><p>将数据渲染到页面中...</p><script>// 定义一个存储了若干学生信息的数组let students=[{name:'小明',age:18,gender:'男',hometown:'河北省'},{name:'小红',age:19,gender:'女',hometown:'河南省'},{name:'小刚',age:17,gender:'男',hometown:'山西省'},{name:'小丽',age:18,gender:'女',hometown:'山东省'}]document.write(`<table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr>`)// 中间遍历行数 原则就是有几条数据，我就遍历几次for (var i = 0; i < students.length; i++){document.write(`<tr><td>${i + 1}</td><td>${students[i].name}</td><td>${students[i].age}</td><td>${students[i].gender}</td><td>${students[i].hometown}</td></tr>`)}// 尾部document.write(`</table>`)</script></body>
输出结果如下：
1.6 内置对象
目标：掌握内置对象，调用JavaScript为我们准备好的功能
1. 内置对象是什么
- JavaScript内部提供的对象，包含各种属性和方法给开发者调用
- 思考：我们之前用过内置对象吗？
- document.write()
- console.log()
2 . Math
- Math对象是JavaScript提供的一个“数学高手”对象
- 提供了一系列做数学运算的方法
- 方法有：
- random：生成 0 - 1 之间的随机数（包含 0 不包括 1 ）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
console.log(Math.PI) // 圆周率 π
console.log(Math.random()) // 随机数 随机抽奖 随机点名
// 返回的是小数 但是能得到 0 得不到 1
// 向上取整 返回的整数
console.log(Math.ceil(1.1)) // ceil 2
console.log(Math.ceil(1.5)) // ceil 2
console.log(Math.ceil(1.9)) // ceil 2
// 向下取整 返回的整数 floor
console.log(Math.floor(1.1)) // floor 1
console.log(Math.floor(1.5)) // floor 1
console.log(Math.floor(1.9)) // floor 1
console.log('-------------------------------')
// round 就近取整( .5往大取整) 返回的整数
console.log(Math.round(1.1)) // round 1
console.log(Math.round(1.5)) // round 2
console.log(Math.round(1.9)) // round 2
console.log('-------------------------------')
console.log(Math.round(-1.1)) // round -1
console.log(Math.round(-1.5)) // round -1
console.log(Math.round(-1.9)) // round -2// 最大值和最小值
console.log(Math.max(1, 5, 9, 45))
console.log(Math.min(1, 5, 9, 45))
案例：封装自己的数学对象
利用对象封装自己的数学对象 里面由 PI最大值和最小值
var myMath = {PI: 3.141592653,Max: function() {max = arguments[0];for(var i = 1; i < arguments.length; i++){max = max < arguments[i] ? arguments[i] : max;}return max;},Min: function() {min = arguments[0];for (var i = 1; i < arguments.length; i++){min = min > arguments[i] ? arguments[i] : min}return min;}
}console.log(myMath.PI);
console.log(myMath.Max(1, 9, 20))
console.log(myMath.Min(9, 3, 7));
3. 任意范围随机数
如何生成 0 - 10 的随机数呢？
Math.floor(Math.random() * ( 10 + 1 ))如何生成 5 - 10 的随机数？
Math.floor(Math.random() * ( 5 + 1 )) + 5如何生成N-M之间的随机数
Math.floor(Math.random() * (max - min + 1 )) + min
函数得到两个数之间的随机整数， 并且 包含这 2 个整数
// Math.floor(Math.random() * (max - min +1)) + min;
function getRandom(min, max){return Math.floor(Math.random() * (max - min +1)) + min;
}
使用函数
var random = getRandom(1, 10)
console.log(random)
var random1 = getRandom(1, 50)
console.log(random1)
案例：随机点名案例
需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号
②：数组[随机数] 生成到页面中
// 随机数
function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
var arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']// 生成1个随机数 作为数组的索引号
var random = getRandom(0, arr.length - 1)
// console.log(random)
document.write(arr[random])
案例：随机点名案例改进
需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是不允许重复显示
分析：
①：利用随机函数随机生成一个数字作为索引号
②：数组[随机数] 生成到页面中
③：数组中删除刚才抽中的索引号
// 随机数
function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']// 生成1个随机数 作为数组的索引号
let random = getRandom(0, arr.length - 1)
// console.log(random)
document.write(arr[random])// 之后删除这个 人的名字
// arr.splice(从哪里开始删， 删几个)
arr.splice(random, 1)
console.log(arr)
案例：猜数字游戏
需求：程序随机生成1~10 之间的一个数字，用户输入一个数字
分析：
①：利用随机数生成一个数字
②：需要一直猜，所以需要不断的循环
③：因为条件是结果猜对了，就是判断条件退出，用while循环合适
④：内部判断可以用多分支语句
// 随机数
function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min
}
// 生成 1~10 之间的随机数
let random = getRandom(1, 10)
// console.log(random)
// 3. 用户输入 不断的弹框直到输入正确为止
while (true) {let num = +prompt('请您输入一个数字：')// 如果输入的大于随机数就提示猜大了if (random < num) {alert('私密马赛，你猜大了')} else if (random > num) {alert('比亚乃， 你猜小了')} else {alert(' 萨卡迪卡，正确')break // break 退出循环 return 退出函数}// 如果输入的小于随机数就提示猜小了// 如果输入的正好就提示正确
}
script可以写在标签内部
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;height: 300px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="box"><script>document.write(`你好`)</script></div></body></html>
4. 日期对象
//创建一个日期对象
var date = new Date();// 获取当年
console.log(date.getFullYear());
// 获取当月（0-11） 返回的月份小 1 个月， 记得月份 +1
console.log(date.getMonth() + 1);
// 返回的是 几号
console.log(date.getDate());
// 获取星期几（周日0到周六6）
console.log(date.getDay());// 获取当前小时
console.log(date.getHours());
// 获取当前分钟
console.log(date.getMinutes());
// 获取当前秒钟
console.log(date.getSeconds());函数获取当前的年月日时分秒
function getDate() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = arr[date.getDay()];var hour = date.getHours();hour = hour < 10 ? '0' + hour : hour;var minutes = date.getMinutes();minutes = minutes < 10 ? '0' + minutes : minutes;var second = date.getSeconds();second = second < 10 ? '0' + second: second;console.log('今天是：' + year + '年' + month + '月' + dates + '日' + day + '\t'+ hour + '点: ' + minutes + '分: ' + second + '秒');
}getDate();
获取 Date 总的毫秒数（时间戳）
不是当前时间的毫秒数， 而是距离 1970 年 1月1 号过了多少毫秒数
- 通过 valueOf () getTime()
var date = new Date();
console.log(date.valueOf()); // 就是我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
- 简单的写法（最常用的写法）
var date1 = +new Date(); // + new Date() 返回的就是总的毫秒数
- H5 新增的 获得总的毫秒数
console.log(Date.now());
5. 添加删除数组元素
倒计时案例
核心算法： 输入的时间减去现在的时间就是甚于时间，即倒计时，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
用时间戳来做，用户输入时间总的毫秒数减去现在时间总的毫秒数，得到的就是剩余时间的毫秒数。
把剩余时间总的毫秒数转换成天、时、分、秒（时间戳转化为时分秒）
function getinteval(time) {// 返回的是 当前时间总的毫秒数var nowTime = + new Date();// 返回的是 用户输入时间总的毫秒数var inputTime = + new Date(time);// seconds 是剩余时间总的秒数var seconds = (inputTime - nowTime) / 1000;// 当前的秒var second = parseInt(seconds % 60);second = second < 10 ? '0' + second: second;var minutes = parseInt(seconds / 60 % 60);minutes = minutes < 10 ? '0' + minutes: minutes;var hour = parseInt(seconds / 60 / 60 % 24);hour = hour < 10 ? '0' + hour : hour;var day = parseInt(seconds / 60 / 60 / 24);return '距离' + time + '还有' + day +'天' + hour + '小时' + minutes + '分钟' + second + '秒';}
console.log(getinteval('2022-5-18 09:25:00'));
检测是否为数组
// 翻转数组
function reverse(arr) {//判断是否是数组的两种方式//if(arr instanceof Array){if(Array.isArray (arr)) {var newArr = [];for (var i = arr.length -1 ; i >= 0; i--){newArr[newArr.length] = arr[i];}return newArr;} else {return 'error 输入数据要为数组，如[1, 2, 3]'}}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
// 数组排序
// 1.翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);// 2.数组排序
var arr1 = [13, 4, 77, 1, 7];
// 默认的sort()函数是按第一位排序的
// arr1.sort();
// [1, 13, 4, 7, 77]
arr1.sort(function(a, b){// return a - b; 升序的顺序排列return b - a; // 降序的顺序排列
})
console.log(arr1);
获取元素索引
// 返回数组元素索引号方法 indexOf（数元素）
// 作用就是返回该数组元素的索引号，从前面开始查找
// 它如果在该数组里面找不到元素，则返回的是-1
// 它只返回第一个满足条件的索引号
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue')); //-1// 返回数组元素索引号方法 lastIndexOf（数组元素）
// 作用就是返回该数组元素的索引号 ， 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4
案例：数组去重
1、目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
2、核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
3、我们怎么直到该元素没有存在？利用新数组.indexOf(数组元素)，如果返回是 -1就说明 新数组里面没有改元素。
function unique(arr){var newArr = [];for (var i = 0; i < arr.length; i++){// indexOf()：返回该数组元素的索引号；// 如果在该数组里面找不到元素，则返回的是-1if (newArr.indexOf(arr[i]) == -1) {newArr.push(arr[i]);}}return newArr;}var ar = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(ar);
6. 数组转化为字符串
toString()
把数组转换为字符串，逗号分隔每一项，返回一个字符串
join(‘分隔符’)
方法用于把数组中的所有元素转化为一个字符串，返回一个字符串
// 数组转换为字符串
// 1. toString() 将我们的数组转化为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3// 2. join(分隔符)
var arr1 = ['blue', 'purple', 'pink', 'white'];
console.log(arr1.join()); // blue,purple,pink,white
console.log(arr1.join('-')); // blue-purple-pink-white
console.log(arr1.join('&')); // blue&purple&pink&white
1.7 字符串对象
1、基本包装类型
为了方便操作基本数类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);
按道理基本数据类型是没有属性和方法的， 而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下：
// （1）生成临时变量，把简单数据类型包装为复杂数据类型
var temp = new String('andy');
// （2）赋值给我们声明的字符变量
str = temp;
// （3）销毁临时变量
temp = null;
2、字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
3、根据字符返回位置
字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完全会返回一个新的字符串。
| 方法名 | 说明 |
|---|---|
| indexOf(‘要查找的字符’,开始的位置) | 返回指定内容在原字符串中的位置，如果找不到就返回 -1 ， 开始的位置是 index 索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
// 字符串对象， 根据字符返回位置
// str.indexOf('要查找的字符',[起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
// 从索引号是 3 的位置开始往后查找
console.log(str.indexOf('春',3));
案例：返回字符位置
查找字符串 ”abcoefoxyozzopp“ 中所有 o 出现的位置以及次数
- 核心算法：先查找第一个 o 出现的位置
- 然后 只要 indexOf 返回的结果不是 -1 就继续往后查找
- 因为 indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加 1 ， 从而继续查找
function findStr(str) {var count = 0;var find = prompt('请输入你想查找的字母：');// 1.找到字母的下标var index = str.indexOf(find);// 2.如果还找得到就继续找（找不到 下标会为 -1）while (index != -1){console.log(find + '出现在：'+ index);count++;// 3.因为 indexOf 只能查找到第一个// 所以后面的查找，一定是当前索引 +1 ，从而继续查找index = str.indexOf(find, index + 1);}console.log('出现的次数：' + count);
}
var str = findStr('abcoefoxyozzopp');
4、根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符（index 字符串的索引号） | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处支付的ASCII码（index 索引号） | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5, IE8 + 支持 和 charAt() 等效 |
// 根据位置返回字符// 1. charAt(index)
// 根据位置返回自字符
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
}// 2. charCodeAt(index)
// 返回相应索引号的字符 ASCII 值
// 目的： 判断用户按下了哪个键
console.log(str.charCodeAt(0)); // 97// 3. str[index]
// H5 新增的
console.log(str[0]); // a
案例：判断一个字符串 ’abcoefoxyozzopp‘ 中出现次数最多的字符，并统计其次数
/* o.a = 1o.b = 1o.c = 1o.o = 4核心算法：利用 charAt() 遍历这个字符串把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1遍历对象，得到最大值和改字符*/
// 求字符串中字母出现次数最多的函数
function mostTimes(str) {// 创建一个对象var o = {};for (var i = 0; i < str.length; i++){// chars 是字符串的每一个字符var chars = str.charAt(i);// o[chars] 得到的是属性值if (o[chars]) {o[chars] ++;} else {o[chars] = 1; }}/* for ( var i = 0; i < str.length; i++){if (o[str[i]]) {o[str[i]] ++;} else {o[str[i]] = 1;}}*/// 2.遍历对象// max 是获取字符中的最大次数var max = 0;var ch = '';for (var k in o) {// k 得到的是 属性名// o[k] 得到的是属性值if (o[k] > max){max = o[k];// 因为 k 在 for 里面，外层访问不到ch = k;}}console.log('最多的字符是' + ch + '\t出现了' + max + '次');// return o;
}
var str = mostTimes('abcoefoxyozzopp');
console.log(str);
5、字符串操作方法
| 方法名 | 说明 |
|---|---|
| concat(str1, str2, st3…) | concat() 方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从 start 位置开始（索引号），length 取的个数 重点 |
| slice(start, end) | 从 start 位置开始，截取到 end 位置， end 娶不到（他们俩都是索引号） |
| substring(start, end) | 从 start 位置开始，截取到 end 位置， end 取不到， 基本和 slice 相同，但是不接受负值 |
// 字符串操作方法// 1. concat('字符串1', '字符串2'.....)var str = 'andy';console.log(str.concat('red'));// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
// 2 代表从第2个开始，5代表取5个字符
console.log(str1.substr(2, 5));
// 1. 替换字符 replace('被替换的字符', '替换为的字符')
// 它只会替换第一个字符
var str = 'iceice';
console.log(str.replace('i','a')); // aceice// 有一个字符串 'abcoefoxyozzopo'要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopo';
// 当 str1 中还能找到 o 的时候
while(str1.indexOf('o') != -1) {str1 = str1.replace('o', '*');
}
console.log(str1); // abc*ef*xy*zz*p*// 2. 字符转换为数组 split('分隔符')
var str2 = 'a, b, c, d';
var str3 = 'red&blue&purple';
console.log(str2.split(',')); // ['a', ' b', ' c', ' d']
console.log(str3.split('&'));
作业
给定一个字符串，如：‘abaasdffggghhijjkkgfddsssssss3444343’，问题如下：
1、字符串的长度
2、取出指定位置的字符，如：0，3，5， 9等
3、查找指定字符是否在以上字符串存在，如：i，c，b等
4、替换指定的字符，如：g替换为22， ss替换为b等操作方法
5、截取指定开始位置到结束位置的字符串，如：取得1-5的字符串
6、找出以上字符串中出现次数最多的字符和出现的次数
6、简单复杂数据类型
// 简单数据类型存储的是值
let num1 = 10
let num2 = num1
num2 = 20
console.log(num1)// 对象 引用数据类型 栈里面存储的是地址let obj1 = {age: 18
}
let obj2 = obj1
obj2.age = 20
// console.log(obj1, obj2)
console.log(obj1) // 20
学成在线页面渲染案例
需求：根据数据渲染列表页面
分析：
①：根据数据来渲染页面
拓展-术语解释
目标：知道一些术语，让自己更专业
拓展- 基本数据类型和引用数据类型
简单类型又叫做基本数据类型或者值类型复杂类型又叫做引用类型。
- 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string ，number，boolean，undefined，null
- 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中
的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面
- 值类型（简单数据类型）：string ，number，boolean，undefined，null
- 值类型变量的数据直接存放在变量（栈空间）中
- 引用类型（复杂数据类型）：通过new 关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
- 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
练习题1
点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 [“老赵”, “老李”, “小传”, “小黑”]，如果输出了，则数组中删除这个名字
练习题2
声明对象
目的: 复习对象的声明
要求:
- 声明一个变量per, 类型为对象类型
- 该对象的属性为性别,年龄,爱好(3个)
- 该对象的方法有 说话, 吃饭(2个)
4. 在控制台分别调用该对象的属性和方法
let per = {sex: 'man', // 年龄,age: 18, // 性别,hobby: 'studyAndGame', // 爱好speak: function () {// 说话,document.write(`speak方法被调用了--- <br>`)},eat: function () {// 吃饭document.write(`eat方法被调用了---`)}
}
// 下面是调用部分
document.write(`姓名:${per.sex} <br>`)
document.write(`姓名:${per.age}<br>`)
document.write(`姓名:${per.hobby}<br>`)
// 调用方法
per.speak()
per.eat()练习题3
调用对象的方法
目的: 复习对象的使用
要求:
- 对象声明完毕后, 调用对象中的吃饭的方法
- 提示: 对象中的方法本质是函数, 调用需要加()
- 方法也可以传递参数的
let per = {sex: 'man', // 年龄,age: 18, // 性别,hobby: 'studyAndGame', // 爱好speak: function () {// 说话,document.write(`speak方法被调用了---<br>`)},eat: function (f) {// 吃饭document.write(`我今天吃的是${f}`)}
}
// 下面是调用部分
document.write(`姓名:${per.sex} <br>`)
document.write(`姓名:${per.age}<br>`)
document.write(`姓名:${per.hobby}<br>`)// 调用方法
per.speak()
per.eat('苹果')
练习题4
猜数字游戏，设定次数，最多猜8次
function random(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}// 生成一个数字先,猜0-20之间的数let num = random(0, 20)let flag = true// 最多猜8次for (let i = 1; i <= 8; i++) {let userNum = prompt('请输入您要猜的数字')// 比较数字if (userNum > num) {alert('您猜的数字大了')} else if (userNum < num) {alert('您猜的数字小了')} else {flag = falsealert('恭喜猜对了！')break}}if (flag) {alert('太笨了，这都猜不到！O(∩_∩)O')}js-05--对象是什么、创建对象、对象使用、操作对象、遍历对象、内置对象、Math、任意范围随机数、日期对象、字符串对象相关推荐
- JSP的内置对象概述 什么是JSP的内置对象
JSP的内置对象概述 什么是JSP的内置对象 JSP的内置对象:指的是可以直接在JSP页面中直接 使用的对象. JSP的内置对象有哪些 JSP当中有9大内置对象: request:从客户端向服务器发送 ...
- 【JavaScript-内置对象】找对象，那家好，内置对象错不了，方便简单，还好用
目录 1.内置对象 2.什么是MDN 3.如何使用对象中的方法 4.Math是啥? 5.封装对象 6.Math绝对值和取整 7.随机数 8.利用Math.random()来进行简单的猜数字 写在最后 ...
- jsp内置对象【02】四种内置对象【02】session、application
我们继续来学习,上一篇文章中说到了request属性,那么既要想客户端和服务端都都能实现跳转的话,就用到了session. 第三种:session属性 我们接着修改一下上一篇文章中的代码来对比一下: ...
- JS总结：数组 字符串 对象
JS总结:数组 字符串 对象 JS中的数据分类: 1)基本数据类型 数据存储在栈区 number, string, boolean, und, null 2)引用数据类型 数据存储在堆区(引用地址 ...
- 82、常见的JS内置对象及其方法
1.JavaScript3大对象:本地对象(又叫原生对象).内置对象.宿主对象 (1)本地对象: 需要通过new来创建所需的实例对象. 包含:Object.Array.Date.RegExp.Func ...
- js内置对象【学习笔记】
今天系统的学了一下javascript的内置对象.mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http:// ...
- JS内置对象操作方法整理
JS对象操作方法整理 文章目录 JS对象操作方法整理 数组 ES5 ES6 字符串 String 日期 Date() 数字 Number 算数 Math 数组 ES5 concat() 连接两个或更多 ...
- JS的对象与内置对象详细介绍
感谢内容提供者:金牛区吴迪软件开发工作室 文章目录 前言 一.基本对象Object: 二.内置对象之Array: 三.内置对象之Math: 四.内置对象之Number: 五.内置对象之String: ...
- 对象的内置属性和js的对象之父Object()
js中对象有constructor,valueOf(),toString()等内置属性和方法; 创建一个空对象的方法: var o = {}; 或者 var o= new Object(); o.co ...
- js内置对象 BigInt
目录 概述 场景 定义BigInt 例子 使用BigInt时的注意点 验证例子1: n1为bigint, n2为数字, 使用Math.pow()函数来求两者的平方 验证例子2: 使用大数和number ...
最新文章
- linux raid卷,linux – Areca RAID卷和LVM对齐
- Zookeeper核心工作机制（zookeeper特性、zookeeper数据结构、节点类型）
- 《HTTPS权威指南》- SSL、TLS和密码学学习笔记
- SDK、API、JDK都是些什么？
- python中random函数用法_random函数的用法
- 红米性价比之王宣布！网友：干翻友商小米、干翻友商荣耀
- ChaiNext：过去24小时，比特币破5.5W
- 动手动脑（Java）
- Python解微分方程(验证数学建模第五版火箭发射模型)
- 计算机科学与技术职业规划1000字,计算机职业生涯规划书1000字
- 读书之二 --《程序员修炼之道》
- 利用三轴加速器的计步测算方法
- 计算机系统u盘判断,如何在电脑上检测U盘是否是缩水盘
- 小森生活服务器维护到几点,小森生活几点开服上线 2021小森生活开服表大全[多图]...
- Java使用freemarker生成word文件
- Ubuntu系统安装Wine环境运行流量精灵教程
- iphone开发技巧整合
- java语言生成plist下载ipa文件
- pb文件转json文件python脚本
- HashMap深度解释推导