本文详细介绍了JavaScript中的对象、数组和函数的基础概念，包括数组的声明、操作、函数的声明与传参、对象的声明与操作、WebAPI中的DOM和BOM以及模板字符串的使用案例。
一.面对对象
一.数组
1.数组的基本使用
1.数组的声明
let 数组名={数据1，数据2，数据3…,数据n}
[与c++的不同，javascript中的数族组可以包含各种数据。]
2.取值数组
与c++一致。
3.一些术语：元素，下标，长度
4.遍历数组
通过for循环遍历数组
let nums=[10,20,30,40,50]
for(let i=0;i<nums.length;i++)
{
document.write(nums[i])
}
(.length用于测量数组的长度）
2.数组操作——修改
let arr=[];
arr[0]=1;
arr[1]=5;
console.log(arr)//输出数组arr
arr[0]=2;//修改数组中的值
cinsole.log(arr)
let arr=['happy','香蕉','苹果''];
for(let i=0;i<arr.length;i++)
3.数组操作——新增
arr.push(新增的内容），在数组末尾添加。
arr.unshift(新增的内容）,在数组的开头添加。
两者返回的都是新数组的长度。
4.数组操作——删除
数组.pop（）方法从数组中删除最后一个元素，返回的值为删除的元素。
数组.shift（）方法是删除数组的第一个元素。
数组.splice()方法删除指定元素。
arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素)
let arr=['red','green','blue']
arr.splice(1,1)//是从索引号1开始删删除一个。
二.函数
1.函数的声明
函数名命名规范
{
和变量名基本一致
尽量小驼峰式命名法（除了第一个单词外,其他单词的首字母大写）
前缀应该为动词
命名建议：常用动词约定
}
函数的语法：
function 函数名（）
{
函数体
}
2.函数传参
语法：function 函数名（参数列表）
{
函数体
}
function getSum(num1,num2)
{
document.write(num1+num2)
}
getSum(10,20)
相比c++少了形参的声明。
num1与num2的默认值是undefined。
设定默认值：
sunction getSum（x=0，y=0）
{
document.write(x+y);
}
getSum(2,2);
函数封装求和案例：
function getArrSum(arr)
{
let sum=0;
for(let i=0;i<arr.length;i++
{
sum+=arr[i];
}
console.log(sum);
}
getArrSum([11,22,33]);
3.函数的返回值
语法：return 数据
注意：如果函数体中的变量没有声明则会被看作全局变量
了解：
4.匿名函数
前面说的是具名函数，而没有名字的函数没法直接使用
1.函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
let fn=function（）{}
函数表达式与具名函数的不同：具名函数的调用可以写到任何位置，函数表达式必须先声明函数表达式，后调用
2.立即执行函数
功能：不需要调用，立即执行
(function(){let a=10})();//最后一个函数相当于在调用函数
(function(){}());//第二种写法
(function(x,y){console.log(x+y)})(1,2);//第一种写法
(function(x,y){console.log(x+y)}(1,2));//第二种写法
三.对象
1.对象的声明
声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
let user={}
对象的内容被称为属性，属性分为属性的名和值，属性之间用 “,” 隔开。属性名可用""或’'，一般情况虚啊省略，除非名称遇到特殊符号如空格，中横线等
let person={
name:'李华',
'user-name':'ddyy',
age:18,
gender:'男',
}
2.null也为对象，不过是空对象
3.对象的增删改查
（1）查找：
方法1：对象名.属性名；
方法2：对象名[‘属性名’]
（2）增加：对象名.新属性名=?
（3）删除：delete 对象名.属性名
（4）修改：对象名.属性名=?
4.对象的方法
语法：
属性名：function(){}
let ganyu={
say:function(){
console.log("好困啊");
},
}
方法的使用和匿名函数是一致的。
5.对象的遍历
let obj = {
uname: 'Squidward Tentacles'
}
for(let k in obj) {
console.log(obj[k])
// obj[k] 属性值 obj['uname'] obj[k]
}
6.数学内置对象
使用语法：Math.属性名
其中包含的方法：
random：生成0-1之间的随机数
ceil：向上取整
floor：向下取整
max：找最大值
min：找最小值
pow：幂运算
abs：绝对值
7.简单数据类型和引用数据类型
（1）简单类型的内存分配
值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中
（2）复杂类型的内存分配
引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
let num=10;
let num2=num;
num2=10;
console.log(num);//答案是10
let obj={age:18};
let obj2=obj;
obj2.age=20;
console.log(obj.age);//答案是20
二.Web APIS
DOM
BOM
正则表达式
三.一些注意事项
1.concole.log打印的是返回值；
2.对象里面用：对象外面用=；
四.一些案例
综合案例1——渲染柱形图案
<!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>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
let arr=[];
for(let i=0;i<4;i++)
{
let a=0;
a=+prompt(`请输入第${i+1}季度的数据`);
arr.push(a);
}
document.write(`<div class="box">`)
for(let i=0;i<=3;i++)
{
document.write(`
<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>第${i+1}季度</h4>
</div>
`)
}
document.write(`</div>`)
</script>
</body>
</html>
关于模板字符串的使用
在没有它之前，凭借变量比较麻烦
document.write('大家好，我叫' + name + ',今年' + age + '岁')
模板字符串语法：``(tab上面的反引号）
内容拼接变量时，用${}包住变量
document.write(`大家好，我叫${name),今年${age}岁了`)
除了插入变量，模板字面量还支持多行字符串和标记模板字面量（tagged template literals）等高级用法。
案例——猜数字游戏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let random=Math.floor(Math.random()*10+1);
console.log(random);
while(true)
{
let a= +prompt('请输入一个一到十的数字，猜猜我是几~');
if(a>random)alert('数字大了，再猜猜看~');
else if(a==random)
{
alert('猜对了！你真棒');
break;
}
else if(a<random)alert('数字小了，再猜猜看~');
}
</script>
</body>
</html>
案例——随机点名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let wuhu=['赵云','黄忠','马超','张飞','关羽'];
let random=Math.floor(Math.random()*5);
document.write(wuhu[random]);
</script>
</body>
</html>
综合案例2——渲染学成在线
for(let i=0;i<data.length;i++)
{
document.write(`
<li>
<a href="#">
<img src=${data[i].src} alt="">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
</li>
`)
}
扫一扫
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
