JS的基础语法
整理了一下JS的基础语法，这里记录一下。
1 <!--Js的三大模块：ECMAScript(基本语法)、DOM(Document Object Model：文档对象模型，用于操作页面元素)、BOM(Browser Object Model：浏览器对象模型，用于操作浏览器)--> 2 <html> 3 <head> 4 <meta charset="utf-8"> <!--设置html界面采用utf-8字符集--> 5 <title>js的基本语法（ECMAScript）</title> 6 7 <!--内部JavaScript--> 8 <script type="text/javascript"> 9 /*js中变量类型有：Number(数字类型)、String(字符串类型)、Boolean(布尔类型)、Null(空类型)、Undefined(未赋值)、Object(对象)*/ 10 //数字类型 11 var num; 12 num = 0; //可以先声明一个变量，后赋值 13 var num1,num2,num3; 14 num1=100,num2=200,num3=300; //也可以一次性声明多个变量，然后赋值 15 var num4=400,num5=400,num6=400; //还可以一次性声明多个变量，并同时赋值 16 alert(num); /*alert：弹框*/ 17 console.log(num3.toString()); //转换为字符串类型，如果被转换的对象是null，就不能用toString()，得用String() 18 console.log(Boolean(num)); //输出false（因为num=0），将数字转换为Boolean类型 19 console.log(Boolean(num1)); //输出true（因为num1>0），将数字转换为Boolean类型 20 21 //字符串类型 22 var str="我是字符串类型，"; 23 var str1="你是谁？ " 24 var str2="100"; 25 var str3="100.99"; 26 var str5="Hello World"; 27 var str6="语文-数学-英语-物理-化学"; 28 for(var i=0;i<str5.length;i++){ //遍历字符串 29 console.log(str5[i]); 30 } 31 console.log(str); 32 console.log(str+str1); //字符串拼接 33 console.log(str.length); //获取字符串的长度 34 console.log(str1.trim()); //去除字符串两端的空格 35 console.log(str5.toLocaleLowerCase()); //将字符串转换为小写 36 console.log(str5.toLocaleUpperCase()); //将字符串转换为大写 37 console.log(str6.split("-")); //根据“-”，分割字符串，转成数组（可遍历取出每个元素） 38 console.log(str5.slice(2,5)); //输出llo，从字符串索引2的位置，截取到索引5的前一位（不包括索引5所在的字符） 39 console.log(str5.indexOf("l")); //从左往右找字符，输出字符串str5中，l字符所在的索引 40 console.log(str5.indexOf("l",2)); //从左边第二个字符开始往右找，输出字符串str5中，l字符所在的索引。不存在则输出-1 41 console.log(str5.lastIndexOf("l")); //从右往左找字符，输出字符串str5中，l字符所在的索引 42 console.log(Number(str2)); //输出100，将str2转换为数字类型，如果str2不能转为数字，则返回NaN 43 console.log(parseInt(str3)); //输出100，将str3转换为数字类型，并同时取整（不四舍五入） 44 console.log(parseFloat(str3)); //输出100.99，将str3转换为浮点数 45 46 //布尔类型 47 var bool=true; 48 console.log(bool); 49 50 //Undefined类型 51 var und; //只声明不赋值，该对象就是Undefined类型 52 console.log(und); //输出undefined 53 console.log(und+10); //这个会输出NaN，因为und没有赋值，所以是Undefined类型，Undefined加上任何类型都会输出NaN 54 55 //空类型 56 var nul=document.getElementById("abcd"); //因为body里没有值为abcd的id，所以这里就会返回空类型 57 console.log(nul); 58 console.log(String(nul)); //将空类型转为字符串，必须用String()，不能用toString() 59 60 //获取数据类型 61 console.log(typeof(str)); 62 console.log(typeof(nul)); //空类型获取数据类型是，返回的是Object类型 63 64 //变量的预解析 65 console.log(pre); //将变量使用，放在变量声明前面，仍能执行，就叫变量的预解析。但输出的却是undefined，不是下面的变量内容。可如果下面没有声明变量，就会报错了。 66 var preVar="我是预解析变量！" 67 68 69 70 /*js中的操作符：算术运算符、复合运算符、关系运算符、逻辑运算符、一元运算符*/ 71 //算数运算符：+ - * / % 72 var num=100; 73 var sum=num+100; 74 console.log(sum); 75 76 //复合运算符：+= -= *= /= %= 77 var num1=100; 78 num1+=200; 79 console.log(num1); //输出300 80 81 //关系运算符：> < >= <= == === != !== 82 var num2="100"; 83 var num3=100; 84 console.log(num2==num3); //结果是true，使用2个等于号（等于）的时候，只要数值相等就返回true 85 console.log(num2===num3); //结果是false，使用3个等于号（恒等于）时，会同时比较数值和数据类型，所以返回false 86 87 //逻辑运算符：& || ! 88 89 //一元运算符：++ -- 90 var num4=100; 91 num4++; 92 console.log(num4); //输出101 93 94 95 96 /*js中的语句*/ 97 //if-else 98 var num1=200; 99 var num2=100; 100 if(num1>num2){ 101 console.log(num1); 102 }else{ 103 console.log(num2); 104 } 105 106 //if-else if-else 107 var money=13000; 108 if(money>=20000){ 109 console.log("个人所得税25%"); 110 }else if(money>=15000){ 111 console.log("个人所得税20%"); 112 }else if(money>=10000){ 113 console.log("个人所得税15%"); 114 }else{ 115 console.log("无需缴税"); 116 } 117 118 //三元表达式：var var1=expression1?expression2:expression3 119 var num1=100; 120 var result=(num1%7)==0?"可以被7整除":"不能被7整除"; 121 console.log(result); 122 123 //switch 124 var level="A"; 125 switch(level){ 126 case "A":console.log("90~100");break; 127 case "B":console.log("80~90");break; 128 case "C":console.log("70~80");break; 129 default:console.log("不及格"); 130 } 131 132 //while循环语句 133 var i=1; 134 while(i<=10){ 135 console.log(i); 136 i++; 137 } 138 139 //do while循环语句 140 var i=1; 141 do{ 142 console.log(i); 143 i++; 144 }while(i<=10); 145 146 //for循环语句 147 for(var i=1;i<=10;i++){ 148 console.log(i); 149 } 150 151 //循环中的continue和break 152 //continue; //跳过此次循环，继续下一次循环 153 //break; //结束循环 154 155 156 157 /*js中的数组*/ 158 //通过构造函数创建 159 var arr=new Array(); //创建一个空数组 160 var arr1=new Array(5); //创建一个长度为5的数组 161 var arr2=new Array(10,20,30,40,50); //创建一个长度为5的数组，并同时赋值 162 arr2[2]=300; //通过索引给数组赋值 163 console.log(arr); 164 console.log(arr1); 165 console.log(arr2); 166 console.log(arr2[1]); //输出数组arr2里的第2个元素 167 168 //基本类型创建数组 169 var arr3=[10,20,30,40]; //创建一个长度为4的数组，并同时赋值 170 var arr4=["h","e","l","l","o"]; //创建一个长度为5的数组，并同时赋值 171 console.log(arr3); 172 173 //遍历数组，并输出元素 174 for(var i=0;i<arr3.length;i++){ 175 console.log(arr3[i]); 176 } 177 178 //遍历数组，并拼接字符串 179 var str4=""; //这里必须有=""，否则str4就是Undefined类型 180 for(var i=0;i<arr4.length;i++){ 181 var str4=str4+"-"+arr4[i]; 182 } 183 console.log(str4); 184 185 //将数组前后对应的元素交换 186 var temp=""; 187 for(var i=0;i<arr4.length/2;i++){ //获取交换次数 188 temp=arr4[i]; 189 arr4[i]=arr4[arr4.length-1-i]; 190 arr4[arr4.length-1-i]=temp; 191 } 192 console.log(arr4); 193 194 //求数组中最大值 195 var max=arr3[0]; 196 for(var i=1;i<arr3.length;i++){ 197 if(max<arr3[i]){ 198 max=arr3[i]; 199 } 200 } 201 console.log(max); 202 203 //数组的冒泡排序 204 var arr5=[20,10,40,50,30]; 205 for(var i=0;i<arr5.length-1;i++){ //获取总共比较几轮（5个元素就比较4轮） 206 for(var k=0;k<arr5.length-1-i;k++){ //获取每轮比较几次（第一轮比较4次：5-1-0） 207 if(arr5[k]<arr5[k+1]){ //前面的元素比后面小，则交换 208 var temp=""; 209 temp=arr5[k]; 210 arr5[k]=arr5[k+1]; 211 arr5[k+1]=temp; 212 } 213 } 214 } 215 console.log(arr5); 216 217 //数组的方法 218 console.log(arr3.length); //获取数组的长度 219 220 221 222 /*js中的函数*/ 223 //静态函数 224 //声明 225 function getSum1(){ 226 var num1=10; 227 var num2=20; 228 var sum=num1+num2; 229 console.log(sum); 230 } 231 //调用 232 getSum1(); 233 234 //有参数的函数 235 function getSum2(num1,num2){ 236 var sum=num1+num2; 237 console.log(sum); 238 } 239 getSum2(40,50); 240 241 //有返回值的函数 242 function getSum3(num1,num2){ 243 var sum=num1+num2; 244 return sum; 245 } 246 var result=getSum3(50,50); 247 console.log(result); 248 249 //匿名函数 250 var sayHi=function(){ //因为是匿名函数，所以需要定义一个变量来接收函数值 251 console.log("hello world!"); 252 } 253 sayHi(); //调用匿名函数 254 255 //有隐式全局变量的函数 256 function variable(){ 257 dog="小狗"; //变量前面没有var，就是隐式全局变量 258 console.log(dog); 259 } 260 variable(); 261 262 //函数的预解析 263 pre(); //将函数调用，放在函数声明前面，仍能正常执行，这就叫函数的预解析 264 function pre(){ 265 console.log("我是预解析函数！"); 266 } 267 268 //函数的方法 269 function nums(){ 270 console.log(arguments[0]); //输出第一个参数 271 console.log(arguments.length); //arguments.length，获取函数一共传入了几个参数 272 } 273 nums(10,20,30,40,50,60); //输出6 274 275 276 277 /*js中的对象*/ 278 //用构造函数创建对象 279 var person=new Object(); 280 person.name="小明"; //这是对象的属性 281 person.sex="男"; 282 person.height="170"; 283 person.sayHi=function(){ //这是对象的方法 284 console.log("hello"); 285 } 286 console.log(person.name); //输出对象的某个属性 287 person.sayHi(); //调用对象的方法 288 289 //用函数的方式创建对象，并给对象的属性赋值 290 function persons(name,height){ 291 var pers=new Object(); 292 pers.name=name; 293 pers.height=height; 294 295 pers.sayHello=function(){ 296 console.log("大家好，我是"+pers.name+"，我的身高是"+this.height); //这里用对象名或者this都可以 297 } 298 return pers; 299 } 300 var per1=persons("张三",180); //创建一个persons对象 301 per1.sayHello(); 302 303 //自定义构造函数创建对象 304 function human(name,height){ 305 this.name=name; 306 this.height=height 307 this.sayHello1=function(){ 308 console.log("大家好，我是"+this.name+"，我的身高是"+this.height); 309 } 310 } 311 var per2=new human("李四",170); //注意这里new的不是Object，而是human 312 per2.sayHello1(); 313 314 //字面量形式创建对象 315 var obj={ 316 name:"小明", //这里使用逗号，不是分号 317 age:18, 318 height:170, 319 sayHello2:function(){ 320 console.log("我是"+this.name+"，我的年龄是"+this.age+"，我的身高是"+this.height); 321 } 322 } 323 console.log(obj.name); //输出name属性值（方法一） 324 console.log(obj["name"]); //输出name属性值（方法二） 325 obj.sayHello2(); //调用sayHello2方法（方法一） 326 obj["sayHello2"](); //调用sayHello2方法（方法二） 327 328 //声明json对象 329 var jason={ 330 "name":"王五", 331 "age":"18", 332 "height":"183" 333 } 334 console.log(jason.name); //第1种输出方法 335 console.log(jason["age"]); //第2种输出方法 336 var key="height"; 337 console.log(jason[key]); //第3种输出方法 338 339 //遍历json对象 340 for(var key in jason){ //因为json是无序的，所以不能用for(int i=0;i<...)这种方式遍历 341 console.log(key); 342 console.log(jason[key]); 343 } 344 345 //对象的方法 346 console.log(per2 instanceof(human)); //instanceof：per2是否属于human类，返回值是true/false 347 348 //Math对象：静态对象，无需创建 349 Math.PI; //获取PI值 350 Math.abs(-11); //11，获取绝对值 351 Math.max(10,20,50,70); //70，获取一组数据的最大值 352 Math.min(10,20,50,70); //10，获取一组数据的最小值 353 Math.random(); //获取随机数 354 Math.sqrt(); //获取平方根 355 356 //Date对象 357 var dt=new Date(); 358 console.log(dt); //输出当前时间 359 console.log(dt.getFullYear()); //获取年 360 console.log(dt.getMonth()+1); //获取月：因为国外是从0开始，所以我们要+1 361 console.log(dt.getDate()); //获取日 362 console.log(dt.getHours()); //获取小时 363 console.log(dt.getMinutes()); //获取分钟 364 console.log(dt.getSeconds()); //获取秒 365 console.log(dt.getDay()); //获取星期几，0代表周日 366 console.log(dt.toLocaleDateString()); //获取年月日 367 console.log(dt.toLocaleTimeString()); //获取时分秒 368 </script> 369 </head> 370 371 <body> 372 <div id="abc"></div> 373 <input type="button" value="点击" onclick="alert('hello world!')"></input> <!--按钮，值显示“点击”，点击事件：出现hello world弹出框--> 374 375 <!--引入外部JavaScript--> 376 <!--js的引用一般放在body的最后，因为js引入时，页面会停止加载。如果放在head里面，就会出现js引入完了，页面还没加载完成，导致报错--> 377 <script type="text/javascript" src="javascript.js"></script> 378 </body> 379 </html>
。
