续上篇从零开始程序之路---JS（2）https://blog.youkuaiyun.com/2409_88130060/article/details/144497406
在这里的讲解中我可能不会专门分享程序的三大结构，不过即使这些东西以前没有了解如果能够严格动手把涉及的案例都走一遍的话应该理解也不是问题，我在分享过程中尤其是视频中会捎带提及这些结构，因为既要兼顾学过程序语言基本语法结构的同学不太枯燥，也要让纯小白跟着上手也是一个难题。
当下还在使用的语言除了C语言之外任何语言都加入了面向对象的思想，不过C语言可能也会说C++不是我的延续吗，它里面不是有面向对象了吗，何况C语言中的结构体也兼顾了一些类的特点，可见面向对象是一个多么重要的进步。本次博文分享的主题是写在分享js面向对象之前，我们是有意讲解一点js中常用对象的使用，这些对象很多人用了好久也没有注意到所谓面向对象也没有什么违和感，所以我们今天着重用一下这些对象看能做什么工作，再分享这些对象它们再js中是如何实现的以期待有个更好的分享体验。
那什么是对象呢，其实世间万物皆对象，一个对象往往有静态的属性和动态的方法，属性可以理解为一个对象中的变量，而方法可以理解为对象中的函数。
如上图中这辆汽车就是一个对象car，调用这个汽车的属性就是car.属性名，如car.name。调用这个汽车的动作如启动就是car.start（）。而Math，数组Array，Document，甚至window等对象就是系统自带的，只是我们现在还不知道对象的类如何定义而已，但系统既然已经给我们定义好了这些类，我们就先使用吧，用他们呢完成几个小案例体验了它们的功能，才能有动力学好他们。
1 Math和Canvas绘制正弦曲线
利用Math对象和Canvas绘制正弦曲线。代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align: center;">
<canvas id="huaban" style="background-color: black;" width="500" height="500">
</canvas>
</body>
</html>
<script language="javascript">
const hb=document.getElementById("huaban");
const hj=hb.getContext("2d");
hj.strokeStyle="#ffffff";
hj.lineWidth="1";
hj.moveTo(10,0);
hj.lineTo(10,500);
hj.stroke();
hj.moveTo(0,250);
hj.lineTo(500,250);
hj.stroke();
hj.strokeText("x轴",450,270,100);
hj.stroke();
hj.strokeText("y=sinx",15,20,100);
hj.stroke();
hj.moveTo(10,250);
for(i=0;i<Math.PI*6;i=i+0.01)
{
hj.lineTo(10+i*30,250+Math.sin(i)*200);
hj.stroke();
}
</script>
上述案例也可以调用screen对象设置canvas按照屏幕设置宽度。canvas中width的值是指宽度像素个数而不是尺寸，注意体会，如果有问题请仔细观看视频分享。
对应视频：
2 数组实现民族选择框和省市联动
变量是为了存储一个数据，很多程序语言都一样如果要一次存储多个数据都需要借助数组。在js中数组的定义格式为：
var arr1=[1,2,3];
var arr2=new Array(1,2,3);
两者效果上一致，只是后者更倾向于严格格式的数组定义，但前者更简洁明了。如果是string类型的数组则要注意引号哦，如var arr2=["123","abc"]。数组的数据引用同其他语言基本一致，要通过下标索引，上面arr1[0]的值是1，下标从0开始到（数组长度length-1），arr1的下标可以从0--2，其长度通过length属性来获得， 如果arr1[length]赋值则是给数组增加了一个元素，最好的给数组增加元素的方法是push，如arr1.push(4)，则arr1[3]的值就是4。
<script lang="javascript">
var arr1=[1,2,3];
arr1.push(4);
alert(arr1[3]);
</script>有的编程语言可以支持命名索引，但在js中要注意，如下列代码：
var arr4=new Array();
//arr4[0]=123;
arr4["jia"]="abc";
arr4["yi"]="123";
alert(arr4["jia"]);虽然arr4在上面定义为数组，可是如果在后面arr4["jia"]="abc"后则改变了arr4是数组的性质，这是因为js是一种弱类型语言，如同你做了 var a=1;此时a是数字型，而经过a="1"时它会编程字符串一样。有的文献讲上面arr4["jia"]="abc"则改变了arr4时数组的性质，将其变为了散列。但目前国内很多人写书就是胡编乱抄，需要自己验证，此时arr4仍是数组对象，但又失去了数组的一些特点，请参照视频中的对照，科学在于探索，如有新的见解，可以在评论区留言一起讨论！
当然最好的学习是自己动手加思考，请看下面案例.
这里我们做两个案例，一个是简单的民族下拉选择，另一个是省市联动效果。
民族选择框数据：
案例中使用的民族名称数据：
汉族、蒙古族、回族、藏族、维吾尔族、苗族、彝族、壮族、布依族、朝鲜族、满族、侗族、瑶族、白族、土家族、哈尼族、哈萨克族、傣族、黎族、傈僳族、佤族、畲族、高山族、拉祜族、水族、东乡族、纳西族、景颇族、柯尔克孜族、土族、达斡尔族、仫佬族、羌族、布朗族、撒拉族、毛南族、仡佬族、锡伯族、阿昌族、普米族、塔吉克族、怒族、乌孜别克族、俄罗斯族、鄂温克族、德昂族、保安族、裕固族、京族、塔塔尔族、独龙族、鄂伦春族、赫哲族、门巴族、珞巴族
对应代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="minzu">
<option value="0">请选择</option>
</select>
</body>
<script lang="javascript">
var mzk=document.getElementById("minzu");
var strmz="汉族、蒙古族、回族、藏族、维吾尔族、苗族、彝族、壮族、布依族、朝鲜族、满族、侗族、瑶族、白族、土家族、哈尼族、哈萨克族、傣族、黎族、傈僳族、佤族、畲族、高山族、拉祜族、水族、东乡族、纳西族、景颇族、柯尔克孜族、土族、达斡尔族、仫佬族、羌族、布朗族、撒拉族、毛南族、仡佬族、锡伯族、阿昌族、普米族、塔吉克族、怒族、乌孜别克族、俄罗斯族、鄂温克族、德昂族、保安族、裕固族、京族、塔塔尔族、独龙族、鄂伦春族、赫哲族、门巴族、珞巴族";
var mzs=strmz.split("、");//将字符串分割成数组
alert(mzs.length);
for(i=0;i<mzs.length;i++)
{
var op=new Option(mzs[i],mzs[i]);
mzk.options.add(op);
}
</script>
</html>省市联动的数据暂时由个别数据代替，重要的是其实现原理，请大家及时参考视频掌握：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="minzu">
<option value="0">请选择</option>
</select>
<br/>
<select id="sheng" onchange="gaibian(this.value)">
<option value="0">请选择</option>
</select>
<select id="shi" >
<option value="0">请选择</option>
</select>
</body>
<script lang="javascript">
var mzk=document.getElementById("minzu");
var strmz="汉族、蒙古族、回族、藏族、维吾尔族、苗族、彝族、壮族、布依族、朝鲜族、满族、侗族、瑶族、白族、土家族、哈尼族、哈萨克族、傣族、黎族、傈僳族、佤族、畲族、高山族、拉祜族、水族、东乡族、纳西族、景颇族、柯尔克孜族、土族、达斡尔族、仫佬族、羌族、布朗族、撒拉族、毛南族、仡佬族、锡伯族、阿昌族、普米族、塔吉克族、怒族、乌孜别克族、俄罗斯族、鄂温克族、德昂族、保安族、裕固族、京族、塔塔尔族、独龙族、鄂伦春族、赫哲族、门巴族、珞巴族";
var mzs=strmz.split("、");
alert(mzs.length);
for(i=0;i<mzs.length;i++)
{
var op=new Option(mzs[i],mzs[i]);
mzk.options.add(op);
}
var sheng=["贵州","湖南","云南"];
var shi1=new Array("贵阳","铜仁","凯里","毕节");
sheng["贵州"]=shi1;
var shi2=new Array("长沙","怀化");
sheng["湖南"]=shi2;
for(i=0;i<sheng.length;i++)
{
var op=new Option(sheng[i],sheng[i]);
document.getElementById("sheng").options.add(op);
}
function gaibian(v)
{
if(v!='0')
{
document.getElementById("shi").options.length=1;
var sz=sheng[v];
for(i=0;i<sz.length;i++)
{
var op=new Option(sz[i],sz[i]);
document.getElementById("shi").options.add(op);
}
}
}
</script>
</html>3 Set、Map
Set（集合）是一组唯一值的集合，即其中每个值只能出现在Set中一次。Set对象的产生可以通过
var st=new Set();也可以在定义Set的时候赋值，
const letters = new Set(["a","b","c"]);，
此时set在构造时内部是一个整体，可以理解为这个整体是一个数组。这个在后期讲解了类的编写方法就会理解的更好。
const st=new Set();
st.add("abc");
st.add("cdb");
for(const z of st)
{
alert(z);
}在JavaScript中也有一个非常重要的对象就是Map，Map和数组在很多地方也通用，在索引和赋值的时候格式略有不同，Map对象，map对象可以通过下面两种方式定义：
<script lang="javascript">
var mp1=new Map();
mp1.set("甲","苹果");
mp1.set("乙","香蕉");
alert(mp1.get("甲"));
var mp2=new Map([["a",90],["b",80]]);
alert(mp2.get("a"));
</script>map对应有key和value，map.set(key,value);通过key得到value即map.get（key）。其读写通过迭代读取其键值而获得。如下：
var mp1=new Map();
mp1.set("甲","苹果");
mp1.set(12,"ceshi12");
alert(mp1.get(12));
mp1.set("乙","香蕉");
alert(mp1.get("甲"));
var mp2=new Map([["a",90],["b",80]]);
alert(mp2.get("a"));
for(var jz of mp2.keys())
{
alert(mp2.get(jz));
}本博文视频后期更新。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
