概述
JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，JavaScript已经从单纯实现前端互动，发展到可以全栈实现整个应用。尤其是在移动互联网蓬勃发展以及应用追求极致用户体验的今天，JavaScript更是必须要重视和掌握的。
变量
使用var关键字进行变量的声明，声明的同时也可以进行赋值。变量的声明只能有一次，但赋值可以有多次。如果只声明变量，但是变量没有被赋值，此时变量的值为undefined。
JavaScript变量的类型取决于右侧的对象。
var variable_name1 = 5;
var variable_name2 = 5.3;
var variable_name3 = false;
var variable_name4 = 'zhangsan';
变量的作用域
JavaScript没有块级作用域
java:
if(true) { int a = 1; } System.out.println(a); // 编译错误，超出作用域
javascript:
if(true){ var a = 1; } console.log(a); // 1 JavaScript没有块级作用域
JS中的六大数据类型
js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和3种引用数据类型（Object,Function,Array）。
基本数据类型
1.Number类型
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
2.String类型
单引号或双引号扩起来的字符集合
3.Boolean类型
该类型只有两个值，true和false
4.Undefined类型
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。
5.Null类型
Null类型被看做空对象指针，Null类型也是空的对象引用。
三大引用类型
1.Object类型
我们看到的大多数类型值都是Object类型的实例，创建Object实例的方式有两种。
第一种是使用new操作符后跟Object构造函数，如下所示
var person = new Object();
person.name = "Micheal";
person.age = 24;
第二种方式是使用对象字面量表示法，如下所示
var person = {
name : "Micheal",
age : 24
};
alert(person.name);
2.Array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象....另外，数组的大小是可以动态调整的。
创建数组的基本方式有两种
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow");
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
3 Function类型
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。函数通常是使用函数声明语法定义的，如下所示
function sum(num1,num2){
return num1 + num2;
};
这和使用函数表达式定义函数的方式相差无几。
var sum = function (num1,num2){
return num1 + num2;
};
var result = sum(5,8);
alert(result);
typeof 操作符
由于js中的变量是弱类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.
typeof 123 //Number
typeof 'abc' //String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
js的三种输出方式
/* * 控制浏览器弹出一个提示框 */ alert("Hello JavaScript"); /* * 控制浏览器在页面中输出一个内容 * document.write()向body中写一个内容 */ document.write("看我出来不？？？"); /* 向控制台输出一个内容 * */ console.log("你看我在哪出来~~~");
js编写的位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--可以将JS代码编写到script标签中--> <!--<script type="text/javascript"> alert("hello"); </script>--> <!-- 还可以将JS代码编写到外部的js文件中，然后通过script标签来引入外部的文件 将JS代码编写到外部文件中，可以在不同的页面中引入相同的JS代码， 方便后期的维护，并且写在外部文件中可以使用浏览器的缓存，加快访问速度提高用户体验 如果使用script来引入外部文件，则它就不能在编写任何的JS代码了 ， 如果还需要编写则需要创建一个新的script标签 --> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript"> alert("我是内部的JS代码"); </script> </head> <body> <!-- 将JS代码编写到标签的属性中，属于结构与行为耦合，不方便后期的维护，不推荐使用 --> <!-- 可以将JS代码编写到标签的指定属性中 --> <button onclick="alert('你点我干嘛~~~~');">点我一下</button> <!-- 可以将JS代码编写到超链接的href中 --> <a href="javascript:alert('讨厌！！！');">你也点我一下</a> <br /><br /> <a href="javascript:;">你也点我一下</a> </body> </html>
练习
求100以内的偶数和
js字符串
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * * 在解析器的底层，保存字符串时，实际上是以字符数组的形式保存的 * 所以字符串的操作方法和数组都是非常相似的 * */ var str = "Hello neusoft"; //console.log(str.length); //console.log(str[6]); /* * length可以用来获取一个字符串的长度 */ /* * charAt() * - 可以根据索引来获取指定位置的字符 * * charCodeAt() * - 可以根据索引来获取指定位置的字符的字符编码 * * String.fromCharCode() * - 可以根据字符编码来获取字符 */ str = "中AaHello neusoft"; var result = str.charAt(0); result = str.charCodeAt(0); result = String.fromCharCode(20013); //console.log(result); /* * concat() * - 可以用来连接两个或多个字符串 * - 作用+ 一样 */ str = "hello"; var str2 = "world"; result = str.concat(str2,"你好","天气好","吃的好"); /* * indexOf() * - 检索指定字符串在当前字符串中的位置 * - 参数： * 第一个参数，要查询的字符串 * 第二个参数，查找开始的位置 * * - 返回值： * 默认会返回字符串第一次出现的位置的索引 * 如果没有找到该内容，则返回-1 * * lastIndexOf() * - 检索指定字符串在当前字符串中的位置 * - 该方法和indexOf()一样，不同的是indexOf()是从前往后找 * 而lastIndexOf()是从后往前找 */ str = "Helo neusoft"; //result = str.indexOf("a"); //result = str.indexOf("l",3); result = str.lastIndexOf("l",5); /* * slice() * - 可以用来截取一个字符中的内容 * - 参数： * 第一个参数，截取开始位置的索引（包括开始位置） * 第二个参数，截取结束位置的索引（不包括结束位置） * - 可以接收一个负值作为参数，如果是负值，则从后往前数 * - 也可以省略第二个参数，如果省略则一直截取到最后 */ str = "Hello neusoft"; result = str.slice(0,5); result = str.slice(5); /* * substring() * - 用来截取字符串的 * - 参数： * 第一个参数，截取开始位置的索引（包括开始位置） * 第二个参数，截取结束位置的索引（不包括结束位置） * - 该方法不接收负值，如果传递了一个负值，则默认会设置为0 * - 该方法中如果第二个参数小于第一个，则会调整参数的位置 * */ str = "Hello neusoft"; result = str.substring(6,0); /* * substr() * - 用来截取字符串 * - 参数： * 第一个参数，截取开始位置的索引 * - 可以是负值，如果是负值从后往前数 * 第二个参数，截取的个数 */ str = "Hello neusoft"; result = str.substr(-3,2); //console.log(result); /* * split() * - 可以将一个字符串拆分为一个数组 * - 它需要一个字符串作为参数，将会根据该字符串对字符串进行拆分 * 并且将拆分的后的值保存到一个数组中返回 */ str = "孙悟空@猪八戒@沙和尚@唐僧"; result = str.split("@"); //console.log(Array.isArray(result)); //console.log(result); /* * toLowerCase() * - 将一个字符串转换为小写 * toUpperCase() * - 将一个字符串转换为大写 */ str = "abcdefg"; result = str.toUpperCase(); str = "ABCDEFG"; result = str.toLowerCase(); console.log(result); var myStr = "I,love,you,Do,you,love,me"; var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me"; //replace默认只替换第一次查找到的，想要全局替换，需要置上正则全局标识，如 var myStr = "I,love,you,Do,you,love,me"; var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me" </script> </head> <body> </body> </html>
字符串练习
编写一个程序，将某个字符串反转
数组
数组简介
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 数组（Array） * - 数组也是一个对象，功能和普通对象（Object）的功能类似的 * - 数组中也可以保存不同的元素，不同的是普通对象是通过一个字符串作为属性名来操作属性的， * 而数组是通过索引来操作元素的。 * - 索引（index） * - 索引就是从0开始的整数 * - 数组比普通对象的存储效率要高，在开发中我们经常使用数组来存储一些数据 */ //创建一个数组对象 var arr = new Array(); //使用typeof检查一个数组对象时会返回object //console.log(typeof arr); /* * 向数组中添加元素 * - 语法： * 数组[索引] = 值; */ arr[0] = 10; arr[1] = 20; arr[2] = 30; arr[3] = 40; arr[4] = 30; /* * 读取数组中的元素 * - 语法： * 数组[索引] */ //如果读取一个数组中没有的元素，会返回undefined //console.log(arr[4]); //获取数组的长度 /* * length * - length属性可以获取或设置数组的长度 * - 对于连续的数组通过length属性获取到的就是数组中元素的个数 */ //console.log(arr.length);//获取数组的长度 //修改数组的length属性 //如果将长度修改为小于之前的长度的值，则多余的部分会被删除 arr.length = 5; //如果将长度修改为大于之前的长度的值，则会数组中会创建出空的元素 //arr.length = 10; //向数组的最后添加一个元素 //语法：数组[数组.length] = 值; arr[arr.length] = 55; arr[arr.length] = 75; arr[arr.length] = 85; console.log(arr); </script> </head> <body> </body> </html>
数组字面量表达方式（推荐）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 数组的字面量 */ //var arr = new Arry(); var arr = [] ; /* * 使用字面量，可以在创建数组的同时，向数组中添加元素 * 语法： * var 数组 = [元素1,元素2...元素N]; */ arr = [1,2,3,4,5,6,7]; //console.log(arr[6]); arr = new Array(1,2,3,4,5,6,7); arr = [10];//创建一个数组并向数组中添加一个元素 arr = new Array(10);//创建一个长度为10的数组 //console.log(arr.length); /* * 在数组中可以保存任意类型的元素 */ arr = [1,"hello",true,null,undefined,{name:"孙悟空"},function(){}]; //console.log(arr[5].name); //console.log(arr[6]); //数组中也可以保存数组，如果数组中保存的依然是数组，则我们称这个数组为二维数组 arr = [ [1,2,3], [4,5,6], [5,6,7] ]; console.log(arr[0][1]); </script> </head> <body> </body> </html>
数组的常用方法
push(),pop(),unshift(),shift()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建一个数组 */ var arr = ["孙悟空","猪八戒","沙和尚"]; /* * push() * - 该方法可以用来向数组的末尾添加新的元素,并返回数组的新的长度 */ //console.log(arr); var result = arr.push("唐僧","白骨精","蜘蛛精"); //console.log(arr); //console.log("result = "+result); /* * pop() * - 用来删除并返回数组的最后一个元素 * - 元素删除以后，会自动修正数组的长度 */ result = arr.pop(); result = arr.pop(); //console.log(arr); //console.log("result = "+result); /* * unshift() * - 向数组的最前边添加元素，并返回新的长度 */ result = arr.unshift("牛魔王","铁扇公主"); console.log(arr); //console.log("result = "+result); /* * shift() * - 删除数组最前边的元素，并返回被删除的元素 * - 删除完元素以后，会自动调整数组的长度 */ result = arr.shift(); result = arr.shift(); console.log(arr); console.log("result = "+result); console.log(arr.length); </script> </head> <body> </body> </html>
遍历数组方式一
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建一个数组 */ var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精","蜘蛛精"]; /* * 遍历数组 * - 遍历数组就是指将数组中的每一个元素都获取到 * - 一般情况下遍历数组都是使用for循环来遍历 */ for(var i = 0 ; i < arr.length ; i++ ){ console.log(arr[i]); } </script> </head> <body> </body> </html>
遍历数组方式二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; /* * 也可以使用forEach()来遍历数组 * forEach()中需要一个函数作为参数 * - 像这种由我们定义而不由我们调用的函数，我们称为回调函数 * - forEach()中的回调函数，由浏览器调用， * 数组中有几个元素函数就会被调用几次， * 每次遍历到一个元素都会调用一次函数，浏览器会通过实参的形式来将遍历到内容传递进函数 * - 浏览器在调用回调函数传递了三个实参： * 第一个参数：正在遍历的元素 * 第二个参数：正在遍历的元素的索引 * 第三个参数：正在遍历的数组对象 * * - forEach()方法不支持IE8及以下的浏览器，所以如果需要兼容IE8则不要使用 * */ arr.forEach(function(value , index , obj){ console.log("value = "+value + " index = "+index+" obj = "+obj); }); </script> </head> <body> </body> </html>
数组方法：slice（），splice（）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; /* * slice() * - 可以用来截取数组中的指定元素 * - 参数： * 第一个参数，截取开始的位置(包括开始的位置) * 第二个参数，截取结束的位置(不包括结束的位置) * - 该方法不会影响到原数组，而是将截取到的内容封装为一个新的数组返回 * - 可以传递一个负数作为参数，如果是负数，则从后往前数 * -1 表示 倒数第一 * -2 表示 倒数第二 * - 如果省略第二个参数，则从开始位置一直截取到最后 */ var result = arr.slice(1,3); result = arr.slice(1,-2); result = arr.slice(1); //console.log(result); /* * splice() * - 可以用来删除数组中的元素，并添加新元素 * - 它会影响到原数组，一旦执行原数组中的元素将会被删除 * - 参数： * 第一个参数，开始位置的索引 * 第二个参数，表示删除的个数 * 第三个参数，这个方法还可以传递多个参数 * 在第三个参数以后，可以跟多个元素作为参数， * 这些元素将会被插入到开始位置之前的位置 * - 它会将被删除的元素作为返回值返回 * */ arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; //result = arr.splice(0,1); //牛魔王替换 索引为0的元素 //result = arr.splice(0,1,"牛魔王"); //arr.splice(2,1,"牛魔王","红孩儿","二郎神"); arr.splice(2,0,"牛魔王","红孩儿","二郎神"); console.log(arr); </script> </head> <body> </body> </html>
练习 去除调用数组中重复的数字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 var arr = [1,2,3,1,1,1,4,2,3,5]; //去除调用数组中重复的数字 //获取数组中的数字 for(var i=0 ; i<arr.length ; i++){ //console.log(arr[i]); //再次遍历数组 for(var j=i+1 ; j<arr.length ; j++){ //console.log("----->" + arr[j]); //比较两个数字是否相等 if(arr[i] == arr[j]){ //进入判断，证明两个数字重复，则删除arr[j] arr.splice(j,1); //需要在此位置在比较一次 j--; } } } console.log(arr); </script> </head> <body> </body> </html>
数组的其他方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var arr = ["孙悟空","猪八戒"]; var arr2 = ["白骨精","蜘蛛精"]; var arr3 = ["太上老君","如来佛祖"]; /* * concat() * - 可以用来连接两个或多个数组 * - 不会影响原数组，而是将新的数组的返回 * - 可以将多个数组作为concat参数传递，也可以传递单个的元素 */ var result = arr.concat(arr2 , arr3 , "唐僧"); //console.log(result); /* * join() * - 可以将数组中的所有的元素连接为一个字符串 * - 该方法可以接收一个字符串作为参数，这个字符串将会将会作为连接符来连接元素 * 如果不传，默认使用, */ arr = ["孙悟空","猪八戒","沙和尚"]; result = arr.join("@-@"); //console.log(result); /* * reverse() * - 该方法可以用来反转数组 * - 前边的去后边，后边的去前边 * - 它会影响到原数组，直接在原数组上反转 */ //arr.reverse(); //console.log(arr); /* * sort() * - 可以用来对数组中的元素进行排序 * - sort()会影响到原数组 * - 默认它会按照元素的Unicode编码进行排序 * - 如果希望使用sort对一个数字型的数组进行排序可能会得到不可预期的结果 * 因为它同样也会按照数字的Unicode编码进行排序 * - 我们也可以自己来指定排序的规则 * */ var arr4 = ["a","c","b","e","d","f"]; arr4.sort(); //arr4 = [2,3,10,5,4,6]; /* * 如果需要自定义排序规则，需要将一个函数作为参数传递给sort()方法 * 函数的结构：function(a , b){} * * 浏览器会多次以数组中的元素作为实参来调用该函数， * a和b具体是谁不确定，但是a一定是在b前边 * 浏览器将会根据函数的返回值，来决定两个元素是否交互位置 * 如果返回一个大于0的值，则两个元素互相交换位置 * 如果返回一个等于0的值，则证明两个元素相等，位置不变 * 如果返回一个小于0的值，两个元素的位置也不变 * */ arr4 = [10,4,3,5,2]; arr4.sort(function(a,b){ /*//升序 小 ---> 大 if(a > b){ //交换位置 return 1; }else if(a == b){ return 0; }else{ return -1; }*/ //降序 大 ---> 小 /*if(a > b){ //交换位置 return -1; }else if(a == b){ return 0; }else{ return 1; }*/ //如果希望升序排列，则 返回 a-b //return a - b; //如果希望降序排列，则 返回 b-a return b - a; }); console.log(arr4); </script> </head> <body> </body> </html>
