# JavaScript基础入门 ## ECMAScript发展： ECMA-计算机联盟协会欧洲计算机协会标准 ECMAScript是一种语言标准，JavaScript是对ECMAScript的一种实现 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1. 1999.12：增加正则，更好的文字处理、新的控制语句，try/catch异常处理、更加明确的错误定义，数字输出格式等等 2. 2009.12：完善ECMAScript 3版本、增加"strict mode"(严格模式)、以及新的功能，如getter和setter、JSON库支持和完善更完整的对象属性 3. 2011.6：ES5 4. 2015.6：ES6（ES2015） 5. 2016.06：ECMAScript2016，包括两个新的功能：求幂运算符（*）和array.prototype.includes方法 6. 2017.06：增加新的功能，如并发、原子操作、Object.values/Object.entries，字符串填充、promises、await/asy等等 ------ ## Javascript内核： 1. 核心（ECMAscript）;[变量,测试语句,数据类型,运算符,数据类型转换,流程控制,常用内置对象（Array,String,Date,Math内置对象，Function函数）] 2. 文档对象模型（DOM）;[DOM节点,获取DOM的三种方式,值的操作,样式操作,属性操作,DOM操作] 3. 浏览器对象模型（BOM） ## Javascript语法 ### Javascript变量：变量初始化 ``` var x =30; ``` 声明变量 ``` var y; var name = 'nini'; ``` 变量赋值 ``` y=50; ``` [^规则： 1.必须使用字母、下划线(_)开始；2. 多个英文字母驼峰 myName；3.不能使用js中的关键字和保留字来进行命名； 4.严格区分大小写]: ### Javascript变量类型： 1. 变量类型 2. 基本的数据类型 3. Number String Boolean underfined null 4. 引用数据类型 5. Object Array Function ------ typeof 来检查当前变量的数据类型： ``` var a = 3;alert(typeof a); ``` ### Javascript运算符：算数运算符： ``` var x = 10; var y = 2; var sum = x + y; var en = x - y; var or = x * y; var op = x % y; ``` 比较运算符： ``` === 等同于和!== ``` 逻辑运算符： ``` var weather = 'sunny'; var temp = 32; if(weather === 'sunny'){ if(temp > 30){ console.log('温度有点高'); }else{ console.log('天气非常好'); } 等同于： if(weather === 'sunny' && temp > 30){ console.log('温度有点高'); }else if(weather === 'sunny' && temp <= 30){ console.log('天气非常好'); } ``` 赋值运算符： 1.隐式转换，数值转字符串 ``` var num = 234; var myStr = num + ""; alert(typeof myStr); ``` 2.toString()数值转字符串 ``` var myStr2 = num.toString(); alert(typeof myStr2); ``` 3.字符串转数值 ``` var myNumber = Number(num); alert(typeof myNumber); ``` 4.数值转字符串 ``` var n = '2424jjj'; var a = Number(n); alert(typeof a);//NaN Not a Number ``` ## Javascript字符串和数值间相互转换： ``` var str = '1212121212.0232'; //字符串转换整型 console.log(parseInt(str));//1212121212 数字 var str2 = '1212xxx.000'; console.log(parseFloat(str));//1212121212.0232 数字 console.log(typeof parseFloat(str));//number console.log(Number(str2));//NaN not a number var a = Number(str2); console.log(isNaN(a));//true //数字转换字符串 var num = 1212.789; //强制转换 console.log(num.toString());//1212.789 字符串 console.log(typeof num.toString());//string console.log(String(num));//1212.789 字符串 //隐式转换 var num2 = '' + 111111; console.log(num2);//111111 字符串 console.log(''.concat(num));//1212.789 字符串 //按照位数四舍五入输出数字默认是保留整数 console.log(Number(num.toFixed(1)));//字符串 1212.8 数字 ``` ### Javascript字符串： ``` var name = 'would you eat an apple?' var name2 = "would you eat an 'apple'?" var name3 = 'would you eat an "apple"?' alert(name); alert(name2); alert(name3); var name4 = "I'm \'liujing\'"// 转义字符 alert(name4); ``` ### JavaScript中强大的数组Array： ``` var shopping = ['香蕉','苹果','牛奶','红牛']; console.log(shopping); var rand = ['tree',123,shopping]; console.log(rand); console.log(typeof rand[1]); var a =rand[2][2]; console.log('数组的长度是:'+rand.length);//数组的长度 for循环遍历 ``` ### Javascript语句：条件判断语句： switch语句： ``` var weather = 'sunny'; switch(weather){ case 'sunny': alert(1); break; case 'rainy': alert(2); break; case 'snowing': alert(3); break; default: alert(4); break; } ``` 三元运算: ``` // （条件）?真的:假的 var isresult = 1<2 ? '真的' : '假的'; alert(isresult); ``` for循环语句： ``` var arr = [1,2,3,4]; for(var i=0;i 0){ sum = sum + n; n = n - 2; } alert(sum); ``` do-while循环语句： ``` var sum = 0; var i = 1; do{ sum = sum + i; i++; // console.log(sum); }while(i <= 10); ``` ### Javascript中的函数：函数：封装重复性的代码 ``` //addition(加法) subtraction(减法) multiplication(乘法) division(除法) function addition(a,b){ return a + b; } function subtraction(a,b){ return a - b; } function multiplication(a,b){ return a * b; } /* function division(a,b){ return a / b; } */ //函数表达式匿名函数 var division = function(a,b){ return a / b; } var r = addition(3,2); console.log(r); console.log(division(3,2)); ``` 函数作用域： ``` /* var a = 1; console.log(a); function add(){ var b = 3; } console.log(b); */ //全局污染的问题 //(function(){})/*匿名函数 */();/*自执行 */ //var a = 3; //相当于window.a = 3;相当于a挂载在window对象，相当于全局 console.log(window); first(); second(); ------------------------------------------------------------------------------------------------------------first.js代码如下： (function(){ var name = 'mjj'; var hello = function (){ alert('hello ' + name); } window.first = hello; })(); //(function(){})/*匿名函数 */();/*自执行 */ ------------------------------------------------------------------------------------------------------------ second.js代码如下： (function(){ var name = 'jack'; var hello = function(){ alert('hello ' + name); } window.second = hello; })(); ``` ### Javascript中的对象和数组：对象object讲解： ``` //对象字面量创建姓名，年龄，性别，爱好 var person = { name : 'liujing', age : 18, sex : '女', fav : function(a){ alert('aihao'); return 'nini'+a; } } console.log(person); console.log(person.sex); console.log(person.fav(18)); ``` 内置对象Array： ``` //内置对象native object对象:属性和方法 // document.write('hhhh'); // alert(typeof arr); // js提供构造函数 var colors = new Array(); var colors2 = []; if(Array.isArray(colors)){ colors[0] = 'red'; colors[1] = 'red'; var a = colors.toString(); console.log(a); console.log(colors); }else{ console.log('hh'); } ``` [^isArray();判断是否为数组类型]: 数组的堆方法、队列方法和排序方法： ``` //分割字符串 var colors = ['red','blue','pink']; var a = colors.join('|'); console.log(a); //栈方法(last-in-first-out)push() pop() 队列方法 var newlength = colors.push('purple'); console.log(newlength); console.log(colors); //pop()从数组删除最后一项 var lastItem = colors.pop(); console.log(lastItem); console.log(colors); //队列先进先出shift() unshift() newlength = colors.unshift('yellow'); console.log(newlength); console.log(colors); var firstItem = colors.shift(); console.log(firstItem); console.log(colors); //降序排列 var values = [0,5,2,10,98]; // values.reverse(); 数组倒序 // console.log(values); //sort升序排列 values.sort();//会调用toString ASII码 console.log(values);// [0, 10, 2, 5, 98] var c = '10'; var d = '3'; c.charCodeAt();//查询ASII码值如果ASII码值相等，则先比较高位再比较低位 console.log(c); function compare1(a,b){ //a位于b之前 a小于b // if(a < b){ // return -1; // }else if(a > b){ // return 1; // }else{ // return 0; // } return a - b; } function compare2(a,b){ //a位于b之前 // if(a < b){ // return 1; // }else if(a > b){ // return -1; // }else{ // return 0; // } return b - a; } /* values.sort(compare1);//s升序 console.log(values); */ values.sort(compare1);//s升序 console.log(values); values.sort(compare2);//s降序 console.log(values); ``` 数组的操作方法（增、删、改）： ``` //操作方法 concat() slice() splice() // 1.concat() 数组合并 var colors = ['red','green']; // var newColors = colors.concat('pink'); newColors = colors.concat({name:'zhangsan'}); console.log(newColors); var newColors2 = colors.concat({name:"liujing"},[1,2,3,4]); console.log(newColors2); //2.slice()将当前数组中的一个或者多个项创建一个新数组 newColors2 = newColors2.slice(1,2); newColors2 = newColors2.slice(-4,-3);//7-2;7-1 console.log(newColors2); //3. splice()删除插入替换 //3.1 删除 var names = ['张三','李四','lili','nini']; // names.splice(0,2); // console.log(names); //3.2 插入 // names.splice(1,0,'dada','jack'); // console.log(names); //3.3 替换 names.splice(1,1,'xiaoxiao'); console.log(names); ``` 数组的迭代方法： ``` //迭代方法 //1.filter() s数组过滤方法 var numbers = [1,23,4,5,12,78] var filterResult = numbers.filter(function(item,index,array){ console.log('item: '+item); console.log('index: '+index); console.log('array: '+array); return item>10; }) //将数组内容每一个和10相比较 console.log(filterResult); //2. map()方法 var mapResult = numbers.map(function(item,index,array){ return item*2; }) console.log(mapResult); for(var i=0;i-1){ //找到当前e字符对应的位置; arr.push(pos); pos = str.indexOf('e',pos+1); } console.log(arr); ``` ## Javascript中Date日期对象： ``` //UTC 1970.1.1保留毫秒日期的到285616年 //Date日期对象 // var now = new Date();//Mon Aug 17 2020 23:40:35 GMT+0800 (中国标准时间) // console.log(now); // var xma = new Date('December 25,1995 13:30:00');//Mon Dec 25 1995 13:30:00 GMT+0800 (中国标准时间) // console.log(xma); // var xmas = new Date(1995,11,25); // console.log(xmas); // var xmas = new Date(1995,11,25,14,30,00); // console.log(xmas); var now = new Date(); //常用方法 console.log(now.getDate());//获取月份的第几天(1-31) console.log(now.getMonth());//获取月份(0-11) console.log(now.getFullYear());//获取年份 console.log(now.getDay());//获取一星期的第几天(0-6)0星期天 console.log(now.getHours());//获取小时(0-23) console.log(now.getMinutes());//获取分钟(0-59) console.log(now.getSeconds());//获取秒(0-59) //2018-09-10 日期格式化 console.log(now.toDateString());//星期日月日年 Tue Aug 18 2020 console.log(now.toTimeString());//时分秒时区 09:25:24 GMT+0800 (中国标准时间) console.log(now.toLocaleDateString());//2020/8/18 常用 console.log(now.toLocaleTimeString());//上午12:08:21 常用 console.log(now.toLocaleString());//2020/8/18 上午12:08:21 常用 console.log(now.toUTCString());//Mon, 17 Aug 2020 16:10:05 GMT //UTC 国际标准时间 ``` 如何显示数字时钟的格式时间应用： ``` function nowTime(){ //0-23; //6:27:35 P.M. //6:30:01 P.M. //6:04:01 A.M. var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //18>12?(18-12):8 var temp ='' + (hour > 12 ? hour - 12 : hour); if(hour === 0){ temp = '12'; }else if(hour < 10 && hour != 10){ temp = '0' + temp; } temp = temp + (minute < 10 ? ':0' : ":") + minute; temp = temp + (second < 10 ? ':0' : ":") + second; temp = temp + (hour >= 12 ? ' P.M.' : ' A.M.'); return temp; } console.log(nowTime()); ``` ## global对象的编码和解码方法： URI 统一通用资源标识符： ``` // console.log(global); // console.log(Globle); //URI 统一通用资源标识符 encodeURIComponent() var uri = 'http://www.apeland.cn/web index.html?name=zhangsan'; console.log(encodeURI(uri));//只能识别空格 console.log(encodeURIComponent(uri));//既能识别空格，也能识别所有常用 var encodeuri = 'http://www.apeland.cn/web%20index.html?name=zhangsan'; var encodeuri2 = 'http%3A%2F%2Fwww.apeland.cn%2Fweb%20index.html%3Fname%3Dzhangsan'; //解码 decodeURIComponent() console.log(decodeURI(encodeuri)); console.log(decodeURIComponent(encodeuri2));//常用解码函数 ``` ## window对象： ``` //window对象相当于globle var a = 3; console.log(window.a); function hello(){ alert(window.a); } window.hello(); console.log(global); ``` ## Math属性对象： Math常用方法： ``` // Math var a =Math.E; console.log(a); var b = Math.LN10; console.log(b); var c = Math.LN2; console.log(c); var d = Math.LOG2E; console.log(d); var e = Math.PI; console.log(e); var f = Math.SQRT2;//2的平方根 console.log(f); var f2 = Math.SQRT1_2//1/2的平方根 console.log(f2); //方法 min() max() var max = Math.max(2,56,11,56); console.log(max); var min = Math.min(2,56,11,56); console.log(min); var arr = [2,56,11,77]; QQ = Math.max.apply(null,arr);//js高级语句 console.log(QQ); var max2 = Math.max(arr[0],arr[1],arr[2],arr[3]); console.log(max2); //ceil() floor() round() var num = 24.36; console.log(Math.ceil(num));//天花板函数,1-9都往前进以，向上取整 console.log(Math.floor(num));//地板函数向下取整 console.log(Math.round(num));//标准四舍五入取整 //随机数 random() 0=${rndcode}`); ```