一 数据类型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>数据类型</title> 6 </head> 7 <body> 8 <script> 9 10 ????var a=123;11 ????console.log(typeof a);12 ????//string13 ????var b=‘123‘;14 ????console.log(typeof b);15 ????//boolean16 ????var c=false;17 ????console.log(typeof c);18 ????//null19 ????var d=null;20 ????console.log(d);21 ????//undefined未定义22 ?????var d1;23 ?????console.log(typeof d1)24 25 </script>26 27 </body>28 </html>
二 数据类型转换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>数据类型转换</title> 6 </head> 7 <body> 8 <script> 9 ????//隐式转换10 ????// var n1=123;11 ????// var n2=‘123‘;12 ????// var n3=n1+n2;13 ????// console.log(typeof n3);//字符串类型14 ????//强制类型转换15 ????// var str1=String(n1);16 ????// console.log(str1,typeof str1);//强制转换成字符串17 ????// var num=234;18 ????// console.log(num.toString());//转成字符串19 ????//将字符串类型转换成数值类型20 ????// var stringNum=‘789.12113kjk‘;21 ????// var num2=Number(stringNum);22 ????// console.log(num2,typeof num2);//NaN "number"23 ????// console.log(parseInt(stringNum));//789 只保留整数部分24 ????// console.log(parseFloat(stringNum));//789.123 保留数字部分25 ????//转换成boolean类型26 ????var b1=‘123‘;27 ????var b2=0;28 ????var b3=-123;29 ????var b4=Infinity;30 ????console.log(typeof b1);31 ????console.log(typeof b2);32 ????console.log(typeof b3);33 ????console.log(typeof b4);//number34 ????console.log(typeof b5);//mumber35 ????console.log(typeof b7);//object36 ????console.log(Boolean(b7));//false37 38 ????console.log(Boolean(b4));//true39 ????//下面三个都是为false40 ????var b5 = NaN;41 42 ????var b6; //undefined43 ????var b7 = null;44 45 46 </script>47 48 </body>49 </html>
三 常用内置对象
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>常用内置对象</title> ?6 </head> ?7 <body> ?8 <script> ?9 ????//---------- 数组array创建--------------------------------- 10 ????// var arr=[1,2,3]; 11 ????// console.log(arr); 12 ????// 数组赋值 13 ????// arr[0]=1234; 14 ????// arr[1]=‘呵呵‘; 15 ????// arr[2]=‘嘿嘿‘; 16 ????// -----数组的常用方法------ 17 ????// concat合并数组 18 ????// ????????var north = [‘北京‘,‘山东‘,‘天津‘]; 19 ????// ????????var south = [‘东莞‘,‘深圳‘,‘上海‘]; 20 ????// ????????var newCity = north.concat(south); 21 ????// ????????console.log(newCity); // ["北京", "山东", "天津", "东莞", "深圳", "上海"] 22 ????// join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串 23 ????????????// var score = [98,78,76,100,0]; 24 ????????????// var str = score.join(‘|‘); 25 ????????????// console.log(str);//98|78|76|100|0 26 ????// 将数组转换成字符串 toString() 27 ????// ????????var score = [98,78,76,100,0]; 28 ????????????//toString() 直接转换为字符串 ?每个元素之间使用逗号隔开 29 ????????????// var str = score.toString(); 30 ????????????// console.log(str);//98,78,76,100,0 31 ?????// slice(start,end); 返回数组的一段，顾头不顾尾 32 ????????????// var list= [‘1‘,‘2‘,‘3‘,‘4‘]; ?//list不能写成name,不知道是什么原因 33 ????????????// var newArr ?= list.slice(1,3); 34 ????????????// console.log(newArr); 35 ?36 ?37 ????// pop 移除数组的最后一个元素 38 ????????????// var arr = [‘张三‘,‘李四‘,‘王文‘,‘赵六‘]; 39 ????????????// var newArr ?= arr.pop(); 40 ????????????// console.log(arr);//["张三", "李四"，"王文"] 41 ?42 ????// push() 向数组最后添加一个元素 43 ????????????// var arr = [‘张三‘,‘李四‘,‘王文‘,‘赵六‘]; 44 ????????????// var newArr ?= arr.push(‘张三丰‘); 45 ????????????// console.log(arr);//["张三", "李四", "王文", "赵六", "张三丰"] 46 ?47 ????// ---reverse()翻转数组------ 48 ????????????// var arr1 = [‘张三‘,‘李四‘,‘王文‘,‘赵六‘]; 49 ????????????// arr1.reverse(); 50 ????????????// console.log(arr1);//["赵六", "王文", "李四", "张三"] 51 ?52 ????// sort对数组排序 53 ????????????// var names = [‘alex‘,‘xiaoma‘,‘tanhuang‘,‘abngel‘]; 54 ????????????// names.sort(); 55 ????????????// console.log(names);// ["abngel", "alex", "tanhuang", "xiaoma"] 56 ?57 ????//isarray()判断是否是数组 58 ????????????// var arr1 = [‘张三‘,‘李四‘,‘王文‘,‘赵六‘]; 59 ????????????// console.log(Array.isArray(arr1)); //true 60 ????????????// 61 ????????????// var a=3; 62 ????????????// console.log(Array.isArray(a)); //false 63 ????// --------------字符串---------------------- 64 ????// chartAt() 返回指定索引的位置的字符 65 ????????????// var str=‘alex‘; 66 ????????????// var charset=str.charAt(3); 67 ????????????// console.log(charset); 68 ????// concat 返回字符串值，表示两个或多个字符串的拼接 69 ????????????var str1 = ‘al‘; 70 ????????????var str2 ?= ‘ex‘; 71 ????????????console.log(str1.concat(str2,str2));//alexex 72 ?????// replace(a,b) 将字符串a替换成字符串b 73 ????????????// ?var a = ‘1234567755‘; 74 ????????????// var newStr = a.replace("4567","****");//把4567替换成**** 75 ????????????// console.log(newStr);//123****755 76 ????// indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样 77 ????????????// var str = ‘alex‘; 78 ????????????// console.log(str.indexOf(‘e‘));//2 79 ????????????// console.log(str.indexOf(‘p‘));//-1 80 ????// slice(start，end) 左闭右开 分割字符串 81 ????????????var aa=‘你是谁‘; 82 ????????????console.log(aa.slice(1,2));//是 83 ????// split(‘a‘,1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度 84 ????// ????????var ?str = ?‘我的天呢,a是嘛,你在说什么呢?a哈哈哈‘; 85 ????// ????????console.log(str.split(‘a‘,2)); 86 ????// substr(statr,end) 左闭右开，可以显示从那到哪，顾头不顾尾 87 ????// ????????var ?str = ?‘我的天呢,a是嘛,你在说什么呢?a哈哈哈‘; 88 ????// ????????console.log(str.substr(0,6));//我的天呢 89 ????// ?toLowerCase()转小写 90 ????// ????????????var str = ‘XIAOMAGE‘; 91 ????// ????????????console.log(str.toLowerCase());//xiaomage 92 ????// toUpperCase()转大写 93 ????// ????????????var str4 = ‘xiaomage‘; 94 ????// ????????????console.log(str4.toUpperCase()); 95 ????// 数字转换字符串 96 ????// ????var num = 132.32522; 97 ????// ????var numStr = num.toString(); 98 ????// ????console.log(typeof numStr);//string 99 ????// 四舍五入100 ????// ????var newNum = num.toFixed(2);101 ????// ????console.log(newNum);102 103 ????// #####################data日期对象##############################104 ????var mydate=new Date();105 ????console.log(mydate); //Tue Jul 10 2018 15:58:05 GMT+0800 (中国标准时间)106 ????console.log(mydate.getDate());//获取当前日期具体是哪天107 ????//返回本地时间108 ????????????console.log(mydate.toLocaleDateString());//2018/7/10109 ????console.log(mydate.getFullYear());//只获取年份110 ????console.log(mydate.getMonth()+1);//获取当前月份，必须加1111 112 ????// ################math内置对象##############113 ????// ?Math.ceil() 向上取整，‘天花板函数‘114 ????????????var x = 1.234;115 ????????????//天花板函数 ?表示大于等于 x，并且与它最接近的整数是2116 ????????????var a = Math.ceil(x);117 ????????????console.log(a);//2118 ????// Math.floor 向下取整，‘地板函数‘119 ????????????var y = 1.234;120 ????????????// 小于等于 x，并且与它最接近的整数 1121 ????????????var b = Math.floor(y);122 ????????????console.log(b);//1123 ????// 求两个数的最大值和最小值124 ????????????console.log(Math.max(2,5));//5125 ????????????console.log(Math.min(2,5));//2126 ????// 随机数 Math.random()127 ????????????var ran = Math.random();128 ????????????console.log(ran);//0.3176434165181341129 ????// 求100-200之间的随机数130 ?????????????//min+Math.random()*(max-min)公式背过131 ????????????console.log(Math.floor(100+Math.random()*(100)));132 133 134 </script>135 136 137 </body>138 </html>四运算符
赋值运算符
算数运算符
比较运算符
实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>运算符</title> 6 </head> 7 <body> 8 <script> 9 ????// 赋值运算符10 ????// var x=12;11 ????// var y=5;12 ????// // x+=y;13 ????// // x=x+y;14 ????// x=x*y;15 ????// console.log(x)16 ????// 算数运算符17 ????// var a=5,b=2;18 ????// var c =a+b;19 ????// console.log(c)20 ????// var x=a++;21 ????// console.log(x);//522 ????// console.log(a);//623 ????// var d=a--;24 ????// console.log(d);//525 ????// console.log(a);//426 ????// 比较运算符27 ????// var x=5;28 ????// console.log(x===‘5‘);//false29 ????// var a1=‘1‘;30 ????// var a2=‘2‘;31 ????// console.log(a1+a2);//1232 ????// var n1=133;33 ????// var str1=String(n1);34 ????// console.log(typeof str1);//字符串35 ????var ?stringNum = ‘1233.33yudasdiusaudsaugd‘;36 ????var num2=Number(stringNum);37 ????console.log(num2);//NaN38 ????console.log(parseInt(stringNum));//123339 ????console.log(parseFloat(stringNum));//1233.3340 41 42 43 44 45 46 </script>47 48 </body>49 </html>
五 流程控制
实例：
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>流程控制</title> ?6 </head> ?7 <body> ?8 <script> ?9 // ????判断语句 10 // ????var ji=20; 11 // ????if(ji>20){ 12 // ????????console.log(‘吃鸡成功‘) 13 // ????} 14 // ????else if(ji=20){ 15 // ????????console.log(‘差一点吃到‘) 16 // ????} 17 // ????else{ 18 // ????????console.log(‘吃鸡失败‘) 19 // ????} 20 // ????逻辑与和逻辑或 21 // ????sum=300; 22 // ????math=99; 23 // ????// &&两个条件都要满足 24 // ????if(sum>400 && math>90){ 25 // ????????console.log(‘录取成功‘) 26 // ????} 27 // ????else{ 28 // ????????console.log(‘高考失利‘) 29 // ????} 30 // ????// ||或只满足一个条件即可 31 // 32 // ????if(sum>400 ||math>90){ 33 // ????????console.log(‘录取成功‘) 34 // ????} 35 // ????else{ 36 // ????????console.log(‘高考失利‘) 37 // ????} 38 // ????switch语法 39 // ????var gameScore = ‘good‘; 40 // 41 // ????switch(gameScore){ 42 // 43 // ????//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break， 44 // ????// 那么直到该程序遇到下一个break停止 45 // ????????case ‘good‘: 46 // ????????console.log(‘玩的很好‘); 47 // ????????//break表示退出 48 // ????????break; 49 // ????????case ?‘better‘: 50 // ????????console.log(‘玩的老牛逼了‘); 51 // ????????break; 52 // ????????case ‘best‘: 53 // ????????console.log(‘恭喜你 吃鸡成功‘); 54 // ????????break; 55 // 56 // ????????default: 57 // ????????console.log(‘很遗憾‘); 58 // 59 // } 60 // ????while循环 61 // ????var i =1; 62 // ????while(i<=9){ 63 // ????????console.log(i); 64 // ????????i=i+1; 65 // ????} 66 // ????打印出1-100内的偶数 67 // ????var a=0; 68 // ????while (a<100){ 69 // ????????a=a+1; 70 // ????????if (a%2==0){ 71 // ????????????console.log(a); 72 // ????????} 73 // ????} 74 // ????do while语法 不管有没有满足while中的条件do里面的代码都会走一次 75 // ????var i=13; 76 // ????do{ 77 // ????????console.log(i); 78 // ????????i++ 79 // ????}while (i<10) 80 // 81 // ????for 循环 82 // ????for (var i=1;i<10;i++){ 83 // ????????console.log(i) 84 // ????} 85 // ????for (var i=1;i<100;i++){ 86 // ????????if (i%2==0){ 87 // ????????????console.log(i) 88 // ????????????document.write(i) 89 // ????????} 90 // ????????document.write(‘<br>‘) 91 // ????} 92 // ????#求1-100直接的之和 93 // ????var sum=0; 94 // ????for (var j=1;j<=100;j++){ 95 // ????????sum=sum+j; 96 // ????} 97 // ????console.log(sum) 98 // 99 // ????双重for循环100 // ????for(var i=1;i<=3;i++){101 // ????????for (var j=0;j<6;j++){102 // ????????????document.write(‘*‘)103 // ????????}104 // ????????document.write(‘<br>‘)105 // ????}106 </script>107 108 109 </body>110 </html>六 函数和伪数组arguments
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>函数</title> 6 </head> 7 <body> 8 <script> 9 ????sayHello(); ????//调用函数 .js调用的时候顺序可以随便写10 ????//定义函数：11 ????function sayHello(){12 ????????console.log("hello world");13 ????}14 15 ????// 函数的形参和实参16 ????// ????????sum(3,4);//717 ????// ????????sum("3",4);//3418 ????// ????????sum("Hello","World");//helloworld19 ????//20 ????// ????????//函数：求和21 ????// ????????function sum(a, b) {22 ????// ????????????console.log(a + b);23 ????// ????????}24 ????// 函数的返回值25 ????// ????????function sum(a,b) {26 ????// ????????????return a+b;27 ????// ????????}28 ????// ????????console.log(sum(3,0));29 ????//#########伪数组arguments############30 ????????// ????arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。31 ????????// （1）返回函数实参的个数：arguments.length32 ????????// ????fn(2,4);33 ????????// ????fn(2,4,6);34 ????????// ????fn(2,4,6,8);35 ????????//36 ????????// ????function fn(a,b,c) {37 ????????// ????????// console.log(arguments);38 ????????// ????????console.log(fn.length); ????????//获取形参的个数39 ????????// ????????console.log(arguments.length); ?//获取实参的个数40 ????????//41 ????????// ????????console.log("----------------");42 ????????// ????}43 44 ????// arguments可以修改元素，但不能改变数组的长短45 ????// ????????????fn(2,4);46 ????// ????????????fn(2,4,6);47 ????// ????????????fn(2,4,6,8);48 ????//49 ????// ????????????function fn(a,b) {50 ????// ????????????????console.log(arguments)51 ????// ????????????????arguments[0] = 99; ?//将实参的第一个数改为9952 ????// ????????????????// arguments.push(8); ?//此方法不通过，因为无法增加元素53 ????// ????????????}54 55 ????// 清空数组的几种方式56 ????// ????????var array = [1,2,3,4,5,6];57 ????// ????????console.log(array);58 ????//59 ????// ????????// array.splice(0); ?????//方式1：删除数组中所有项目60 ????// ????????// array.length = 0; ????//方式1：length属性可以赋值，在其它语言中length是只读61 ????// ?????????array = []; ??????????//方式3：推荐62 63 ????// function add() {64 ????// ????console.log(arguments);65 ????// ????for(var i=0; i<arguments.length;i++){66 ????// ????????console.log(arguments[i]);67 ????// ????}68 ????// }69 ????// add(‘1‘,2,3);70 ????console.log(window);71 ????????console.log(document);72 ????????console.log(document.documentElement);73 ????????console.log(document.body);74 75 </script>76 77 </body>78 </html>12-2 js基础
原文地址：https://www.cnblogs.com/huningfei/p/9294718.html