本文介绍了JavaScript内置对象的基本概念，包括Array、Date、String和Math，并详细讲解了如何向对象添加和删除属性。接着，文章重点讨论了数组的操作，如push、join、sort和reverse方法的用法，并通过示例展示了它们的功能。最后，提供了相关练习以巩固学习。
1.JS内置对象
JavaScript内置对象：JS中的所有事物都是对象
内置对象：
Array：用于在单独的变量名中存储一系列的值
Date：用于操作日期和时间
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
例如：
<script>
let student = { //student就是一个对象
name:'张三', //name就是属性名 属性值是张三
stuNo:9527, //stuNo就是属性名 属性值是9527
play:function (str){ //play也是属性名 属性值是一个匿名方法
/* str形式参数 可以理解为一个变量 */
document.write('我会学习'+str)
}
}
document.write(student.name) //输出变量名为student下的name属性的值
document.write(student.stuNo) //输出变量名为student下的styNo属性的值
student.play('游泳');
//'游泳'叫做实际参数传入变量名为student下的play属性的值，打印‘我会学习游泳’
</script>
举例子：
定义一个对象 汽车 car
属性 color 珍珠白
属性 price 50w
属性 name 保时捷
方法 drive 页面打印出 我1s可以破百
方法还可以传参数 字符串 拼接在 破百这两个字的后
例如：我相信我1s可以破百
<script>
let car = {
color: '珍珠白',
price: '50w',
name: '保时捷',
drive: function (str) {
document.write(str + '我1s可以破百！')
}
}
//<br>换行
document.write('<br>color：'+car.color + '<br>');
document.write('<br>price：'+car.price + '<br>');
document.write('<br>name：'+car.name + '<br>');
car.drive('<br>'+'我相信');
</script> 1.1添加属性
添加对象属性：变量名.自定义属性名 = 属性值
例如上面的实例：点击按钮 可以触发一个方法 添加lunzi属性和值 并打印在页面上
<body>
<button onclick="carlunzi()">点击按钮</button>
<script>
let car = {
color: '珍珠白',
price: '50w',
name: '保时捷',
drive: function (str) {
document.write(str + '我1s可以破百！')
}
}
function carlunzi() {
//添加lunzi属性和属性值
car.lunzi = 4;
document.write('<button onclick="carlunzi()">点击按钮</button>'+ '<br>');
document.write('车轮有' + car.lunzi + '<br>');
document.write('color：' + car.color + '<br>');
document.write('price：' + car.price + '<br>');
document.write('name：' + car.name + '<br>');
car.drive('我相信');
}
</script>
</body>1.2删除属性
删除对象属性：delete 变量名.自定义属性名；
小练习，添加和删除属性
<button onclick="add()">添加</button>
<button onclick="Delete()">删除</button>
<script>
let car = {
color: '珍珠白',
price: '50w',
name: '保时捷',
drive: function (str) {
document.write(str + '我1s可以破百！')
}
}
function add() {
let str = prompt('请输入汽车型号：');
car.type = str;
document.write(car.name + '的型号是' + car.type);
}
function Delete() {
delete car.color;
console.log(car)
}
</script>2.数组
数组：具有相同数据类型的一个或多个值的集合
<script>
/* 第一种：使用字面量的方式来创建一个数组 */
var arr = ["前端","JS","HTML"];
document.write(arr) //输出:前端,JS,HTML
</script>
<script>
/* 第二种：利用构造函数Array的方式来创建一个数组 */
var abc = new Array(3); // 3 表示有3个空数组
/* 通过索引 给数组赋值 索引是从0开始 0表示第一个 */
abc[0] = '前端'
abc[1] = 'JS'
abc[2] = 'HTML'
document.write(abc) //输出:前端,JS,HTML
</script>
小练习：
//利用构造方法构建数组
<script>
/*
let arr = ['JS','HTML','JQuery'];
document.write(arr);
*/
let arr = [3];
arr[0] = 'JS';
arr[1] = 'HTML';
arr[2] = 'JQuery';
arr[3] = 'CSS';
document.write(arr);
</script>
<!-- <script>
/* 利用for 来循环数组 打印出数组的每个值 */
/* arr.length 数组长度 */
let arr = ['JS','HTML','JQuery'];
for(var i=0;i<arr.length;i++){
document.write(arr[i]+'<br>')
}
/* 在控制台中数字类型的 亮
字符串类型的是白色的 */
// console.log('1000')
// for(var i in arr){
// /* i 是数组的索引 */
// document.write(arr[i]+'<br>')
// }
</script>-->2.1.数组push
变量名.push(); 表示①可以在数组后最后添加一个位置（可以是字符串）
②push方法执行完之后可以返回一个数组的长度
<script>
var arr = ['吕布','小乔','曹操']
/* arr的最后的位置 添加 大乔字符串 */
arr.push('大乔')
document.write(arr)
</script>
<script>
let arr = [1]
let a = arr.push(2)
// push方法执行完之后会返回一个数组的长度
document.write(a)
</script>
2.1.数组join
变量名.join();
①使用join方法可以把数组转成字符串
②使用join方法默认是以逗号进行分割------------也可以使用自定义分割
③join()方法里面可以添加参数，以什么参数为分割符号
④以''空字符串为分割，表示中间就没有分隔符号，分割符号是个空字符串
<script>
let arr = ['飞机','大炮','导弹'];
document.write( arr.join('--') + '<br>') /* 把数组 转成字符串 并以--分割 */
document.write( arr.join('&&') + '<br>') /* 把数组 转成字符串 并以&&分割 */
document.write( arr..join('**') + '<br> /* 把数组转成字符串 以**号分割 */
</script>
结果：飞机--大炮--导弹
飞机&&大炮&&导弹
飞机**大炮**导弹
2.3.数组sort
变量名.sort(); 表示对数组排序 会改变原数组 会返回排序后的数组
例如:
<script>
let arr = [1,3,2,6,5,4]; //乱序排列‘132654’
arr.sort()
document.write(arr) //自动排列顺序‘123456’
</script>
2.4.数组reverse
变量名.reverse(); 会把数组成员顺序做一个反转（颠倒顺序）
例如：
<script>
let arr = ['飞机','大炮','导弹']; //正常排序‘飞机，大炮，导弹’
arr.reverse();
console.log(arr) //结果是‘导弹，大炮，飞机’
</script>
注意：数组中push、sort、join、reserve可以同时使用；
3.练习
小练习1
/*
创建一个数组：周瑜、吕布、曹操；
在后面添加一个属性值为大乔；
当后台配对到周瑜是，输出周瑜爱小乔；
当配对到吕布是，输出吕布爱貂蝉；
当匹配到曹操时，输出曹操爱大乔和小乔；
匹配到大乔时，输出大乔爱孙策；
*/
<button onclick="fn()">配对</button>
<script>
var arr = ['周瑜','吕布','曹操']
function fn(){
arr.push('大乔');
// console.log(arr)
for(var i in arr){
if(arr[i] =='吕布'){
arr[i] = arr[i] + '爱貂蝉！'
}else if(arr[i]=='周瑜'){
arr[i] = arr[i] + '爱小乔！'
}else if(arr[i] =='曹操'){
arr[i] = arr[i] + '爱小乔和小乔！'
}else if(arr[i] =='大乔'){
arr[i] = arr[i] + '爱孙策！'
}
}
document.write(arr)
}
</script>小练习2
/*
创建一个数组使其在网页上输出时中间使用‘--’和‘&&’连接，并实现与原来数组排序的倒序
*/
<script>
let arr =['牛奶','面包','鸡蛋','果蔬']
console.log(arr)
let str1 = arr.join('--');
let str2 = arr.join('&&');
let str3 = arr.reverse();
console.log(str1)
console.log(str2)
console.log(str3)
</script>小练习3
<button onclick="fn1()">点击1</button>
<button onclick="fn2()">点击2</button>
<script>
let arr = [9,8,3,6,5,4,2,1,7]
function fn1(){
// 个位数的从小到大排序
arr.sort();
document.write(arr);
}
function fn2(){
// 个位数的从大到小排序
arr.sort().reverse();
document.write(arr);
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
