对象
文章目录
对象1.1 对象是什么1.2 创建对象1、字面量创建对象2、new Object 创建对象3、构造函数创建对象1.3 对象使用1 .4 操作对象1. 5 遍历对象1.6 内置对象1. 内置对象是什么2 . Math3. 任意范围随机数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 = 81console.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.unameconsole.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 2console.log(Math.ceil(1.5)) // ceil 2console.log(Math.ceil(1.9)) // ceil 2// 向下取整 返回的整数 floor console.log(Math.floor(1.1)) // floor 1console.log(Math.floor(1.5)) // floor 1console.log(Math.floor(1.9)) // floor 1console.log('-------------------------------')// round 就近取整( .5往大取整) 返回的整数 console.log(Math.round(1.1)) // round 1console.log(Math.round(1.5)) // round 2console.log(Math.round(1.9)) // round 2console.log('-------------------------------')console.log(Math.round(-1.1)) // round -1console.log(Math.round(-1.5)) // round -1console.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 个月， 记得月份 +1console.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('-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,whiteconsole.log(arr1.join('-')); // blue-purple-pink-whiteconsole.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、根据字符返回位置
字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完全会返回一个新的字符串。
// 字符串对象， 根据字符返回位置 // 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、根据位置返回字符
// 根据位置返回字符// 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、字符串操作方法
// 字符串操作方法// 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 = 10let num2 = num1num2 = 20console.log(num1)// 对象 引用数据类型 栈里面存储的是地址let obj1 = {age: 18}let obj2 = obj1obj2.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 任意范围随机数 日期对象 字符串对象
