Java全栈大数据学习笔记NO.10（JavaScript提升1）

一、数组

由于 JavaScript 是弱类型语言，所以在数组的赋值中不做类型区分，各种类型的变量都可以放到同一个数组中，定义方法有以下几种，并且可以用 .length 来获取数组长度：

var arr1 = [99,98,"hello","world",true];
var arr2 = new Array(11,22,"张三",false,0,33);
var arr3 = new Array(10); //创建了一个10长度的数组
console.log(arr1.length); //打印数组 arr1 长度

给原有的元素赋值不会改变数组长度，但给数组中没有的位置赋值会改变数组长度，如：

var arr4 = new Array(10);
arr4[12]=22;
console.log(arr3[12]);
console.log(arr4.length);

arr4的长度就变成了13。

二、数组常用的方法

首先定义一个数组

var arr=new Array("a","b","c","d","e");

• push（元素）向数组尾部追加元素

  arr.push("f");
  arr.push("g");
  console.log(arr);
  

  

• pop()删除数组的最后一个元素，并返回该元素

  var n = arr.pop();
  console.log(n);
  console.log(arr);
  

  

• unshift() 向数组首部添加元素；

  arr.unshift("firsh");
  console.log(arr);
  

  

• 删除数组首部元素，并返回

  var n = arr.shift();
  console.log(n);
  console.log(arr);
  

  

• concat() 拼接 返回数组

  var arr1=["f","g"];
  console.log(arr.concat(arr1));
  

  

• indexOf() 返回元素的下标，从0开始，若数组中不存在该字符则返回-1

  console.log(arr.indexOf("c"));
  console.log(arr.indexOf("q"));
  

  

• join() 元素拼接，用括号中的字符将数组中所有元素依次拼接在一起，并返回字符串

  var a=arr.join("#");
  console.log(a);
  console.log(typeof a);
  

  

• splice(下标,个数); 删除，返回删除的数组

  var n = arr.splice(1,2);
  console.log(n);
  console.log(arr);
  

  

• slice(开始下标,结束下标); 左闭右开，返回原数组截取的内容成为新的数组
  slice(1) 从起始位置到最后

  console.log(arr.slice(1,4));
  console.log(arr.slice(1));
  

  

• toString() 将数组变为字符串，有逗号

  console.log(arr.toString());
  

  

• sort() 排序，升序排列，按照ASCII码排列

  var arr1=["e","a","t","b"];
  arr1.sort();
  console.log(arr1);
  

  

• reverse() 翻转

  arr.reverse();
  console.log(arr);
  

  

• includes() 数组中是否包含该元素，包含返回true，不包含false

  console.log(arr.includes("a"));
  

  

• forEach 循环

  forEach(function(currentValue,index,arr)){	}
  

  currentValue 必须，每次循环的当前元素；
  index可选，代表当前元素的索引；
  arr可选，代表元素所属的数组对象；

  var arr=["a","b","c","d"];
  arr.forEach(function(el,index){ //el只是指代，随便取
  	 console.log(el+"====="+index);
  });
  

  

三、类和对象

类：具有相同属性和行为（方法）的集合，类是一个逻辑模板。
属性：描述事物特征。
方法：实现某种特定功能。
对象：万物皆对象，对象就是类的具体表现，类是对象抽象出来的。

创建对象的方式有三种：

1. 构造函数方式
2. 工厂模式
3. 字面量形式创建

• 构造函数方式
  如定义一个车类，类的首字母大写(参数列表)(logo,price,color)
  参数列表：logo,price,color 形式参数，“丰田”,“300000”,“黑色” 实际参数

  function Car(logo,price,color){	//创建一个类
  	 // this关键字表示当前对象
  	 // 等号左边的logo代表对象中的logo属性
  	 // 等号右边是传来的参数
  	 this.logo = logo;
  	 this.price = price;
  	 this.color = color;
  	 // 定义方法 run方法名(多为动词);
  	 this.run = function(){
  		 console.log("car run!!!");
  	 }
  }
  

  实例化对象，创建一辆车：

  // var声明  car是对象名(自定)  new创建  Car(实参)说明了创建的类型和属性
  var car = new Car("丰田","300000","黑色");
  // 获取对象中的属性
  // 1.对象名.属性
  console.log(car.color);
  // 2.对象名['属性']
  console.log(car['price']);
  // 给属性赋值
  car.color = "红色";
  console.log(car.color);
  // 调用方法  对象名.方法名
  car.run();
  console.log(car);
  

  
  想要增加一个返回值用return，用法与java中相同，如创建一个两数相加方法：

  function add(num1,num2){
  	var result = num1+num2;
  	// 把得到的结果返回
  	return result;
  }
  

• 工厂模式
  定义一个创建对象的接口，让其子类自己决定实例化哪一个工厂类，工厂模式使其创建过程延迟到子类进行。

  function creatCar(logo,price,color){
  	var car=new Object();
  	car.logo=logo;
  	car.price=price;
  	car.color=color;
  	car.show=function(){
  		console.log("汽车驾驶");
  	}
  	return car;
  }
  // 调用工厂方法，返回对象
  var car=creatCar("本田","200000","red");
  console.log(car);
  

  
  后续在javaSE中会详细记录。

• 字面量形式创建
  定义方法为：var 对象名={属性:值,属性:值,属性:值,…}

  var book={
  	bookId:"book001",
  	bookName:"西游记",
  	bookPrice:58,
  	show:function(){
  		console.log("展示图书内容");
  	}
  }
  console.log(book.bookName);
  console.log(book['bookPrice']);
  book.show();
  

  
  也可以动态的进行属性的添加和删除

  // 添加
  book.bookAuthor="吴承恩";
  console.log(book.bookAuthor);
  // 删除
  delete book.bookId;
  console.log(book);
  

  
  还可以复杂的字面量形式创建：

  var phone={
  	 name:"华为",
  	 type:"mate30",
  	 price:4999,
  	 screen:{
  		 logo:"三星",
  		 price:1200,
  		 width:5,
  		 height:5
  	 }
  }
  console.log(phone);
  console.log(phone.name);
  console.log(phone.screen.logo);
  

  
  也可以把多个对象放到数组中

  var phone1={
  	 name:"华为",
  	 type:"mate30",
  	 price:4999,
  	 color:"黑色",
  }
  var phone2={
  	 name:"华为",
  	 type:"mate30",
  	 price:4999,
  	 color:"黑色",
  }
  var phone3={
  	 name:"华为",
  	 type:"mate30",
  	 price:4999,
  	 color:"黑色",
  }
  var arr=[phone1,phone2,phone3] //都放到 arr 数组中
  

四、String常用方法和属性

首先创建一个string变量

var str="Hello World";

• length返回字符串长度，包括空格

  console.log(str.length);
  

  

• indexOf返回字符第一个所在位置，从0开始,没有的话返回 -1

  console.log(str.indexOf("e"));
  console.log(str.indexOf("h"));
  

  

• charAt() 返回指定位置的字符

  console.log(str.charAt(7));
  

  

• concat() 拼接字符串

  console.log(str.concat(" abc"));
  

  

• replace() 字符替换，可以替换多个连续的字符串，没有的话不替换

  console.log(str.replace("he","1"));
  

  

• substr(截取位置，截取个数)，若没加个数，则直接截取到最后，左闭右闭，截取个数取负数则是倒着取，也可以从右往左截取

  console.log(str.substr(1,4));
  console.log(str.substr(4));
  console.log(str.substr(-2));
  console.log(str.substr(-5,3));
  

  

• substring(开始的位置，结束的位置) 截取一段，左闭右开

  console.log(str.substring(1,4)); //[1,4)
  

  

• slice(开始的位置，结束的位置) 也是截取一段，左闭右开

  console.log(str.slice(1,4)); //[1,4)
  

  

• 大小写转换，toUpperCase()转换成大写，toLowerCase()转换成小写

  console.log(str.toUpperCase());
  console.log(str.toLowerCase());
  

  

• trim() 去掉首尾的空格

  console.log(" ab c ".trim());
  

  

• startsWith() 判断是否以()中的字符开始，返回值true或false

  console.log(" ab c ".startsWith(" "));
  

  

• String.fromCharCode() 将对应的 ASCII 码赋值给变量.

  m=String.fromCharCode(65,66,67,68,69);
  n=String.fromCharCode(97,98,99,100,101);
  console.log(m,n);
  

  

五、Math类的常用方法

• 常量

  console.log(Math.PI); //圆周率
  console.log(Math.E); //自然对数
  

  

• 随机数，左闭右开

  console.log(Math.random());  //[0,1)
  

  

• 向下舍

  console.log(Math.floor(2.9));
  

  

• 向上舍

  console.log(Math.ceil(2.3));
  

  

• 四舍五入

  console.log(Math.round(4.3));
  console.log(Math.round(4.6));
  

  

• 取绝对值

  console.log(Math.abs(-6));
  

  

• 取一组数字的最大最小值

  console.log(Math.min(1,2,3,4,5,6));
  console.log(Math.max(1,2,3,4,5,6));
  

  

六、Date类型

Date是时间类型，可通过下面方式直接获取系统时间，但此方式获取的是英文形式

var date = new Date();
console.log(date);

也可以单独获取年、月、日、星期、时、分、秒、毫秒

// 获取年
console.log(date.getFullYear());
// 获取月，从0开始，0-11
console.log(date.getMonth());
// 获取日
console.log(date.getDate());
// 获取星期 0-6，0代表星期日
console.log(date.getDay());
// 时
console.log(date.getHours());
// 分
console.log(date.getMinutes());
// 秒
console.log(date.getSeconds());
// 毫秒
console.log(date.getMilliseconds());

toLocaleString() 直接获取中文形式的时间

console.log(date.toLocaleString());

七、Dom对象

Dom(document object model)：文档对象模型，之前的数据都是显示在控制台上，而Dom对象的应用主要就是在页面上对各种显示进行操控。

• getElementById() 通过控件id获取对象
  首先创建一个文本框：

  <input type="text" id="tid" value="admin" size="10" class="red"/><!-- html中写 -->
  

  用 getElementById() 获取控件进行读取和操作属性值

  var txt=document.getElementById("tid"); //javascript中写
  console.log(txt);// 打印获取到的控件
  console.log(txt.value); //打印控件的属性
  console.log(txt.type);
  // 操作属性值
  txt.value="test";
  txt.readOnly=true;
  

  
  

  可以看到获取的属性值和改变之后的属性值。

• getElementsByName(); 通过name属性获取对象，获取到的是数组
  首先创建几个多选按钮

  <input type="checkbox" name="hobby" id="hobby1" value="1" />足球<!-- html中写 -->
  <input type="checkbox" name="hobby" id="hobby2" value="2" />篮球
  <input type="checkbox" name="hobby" id="hobby3" value="3" />排球
  <input type="checkbox" name="hobby" id="hobby4" value="4" />台球
  

  

  用 getElementsByName(); 获取控件进行读取和操作属性值，读取到 name=“hobby” 的标签，并把这些标签放到一个数组中。

  var arrHobby=document.getElementsByName("hobby"); //javascript中写
  console.log(arrHobby);
  // 获取所有复选框中的value值
  for(var i=0;i<arrHobby.length;i++){
  	// 每次循环或得到的是name对象
  	// 再通过.value获取到每一个值
  	console.log(arrHobby[i].value);
  }
  

  

• getElementsByTagName(); 通过标签名字获取对象，获取到的是数组
  在前两点的 input 标签都创建完的基础上

  var arrInput=document.getElementsByTagName("input"); //javascript中写
  console.log(arrInput);
  console.log(arrInput[3].value);
  

  
  可以看到把第一点和第二点共5个 input 标签都获取到了并放在了一个数组中，打印坐标为3的 value 值。

• getElementsByClassName(); 通过类名获取，class属性，获取到的是数组
  首先创建一个文本框和一个文字标签，两者都写一个 class=“red” 属性

  <input type="text" id="tid" value="admin" size="10" class="red"/><!-- html中写 -->
  <p class="red">段落标签</p>
  

  var arrRed=document.getElementsByClassName("red"); //javascript中写
  for(var i=0;i<arrRed.length;i++){
  	console.log(arrRed[i].value);
  }
  

  用 getElementsByClassName(); 获取控件进行读取和操作属性值，读取到 class=“red” 的标签，并把这些标签放到一个数组中。
  
  可以看到打印了第一个 class=“red” 标签的value属性值，而第二个 class=“red” 标签由于没有设置value属性值，所以输出undefined。

• innerText 与 innerHTML
  两者都是获取每个标签之间的内容，但 innerHTML 会获取到对象标签中所有的内置元素(可以获取到标签元素等)，但 innerText 只获取对象标签中的文本内容(过滤掉标签，获取纯文本)。举例说明：首先创建两个p标签，并获取到所有的p标签对象

  <p><font color="red">段落1</font></p> <!-- html中写 -->
  

  var arrP=document.getElementsByTagName("p"); //javascript中写
  console.log(arrP[0].innerHTML);
  console.log(arrP[0].innerText);
  

  
  可以看到 innerHTML 中把 font 标签也获取到了，而 innerText 只获取到了纯文本。也可以通过这种方式这种里面的内容：

  // 将段落4的文字变为蓝色，注意属性值双引号要改为单引号
  arrP[0].innerHTML="<font color='blue'>段落1</font>" //javascript中写
  arrP[1].innerText="<font color='blue'>段落2</font>"
  

  
  可以看到当使用 innerText 改写网页中显示效果，值无论写什么都会原模原样的显示在要改动的标签中，而当使用 innerHTML 改写网页中效果时，会解析标签语言再显示在网页中。

• 点击按钮实现函数功能
  创建一个按钮，之后再javascript中写一个对应的函数，即可实现点击按钮实现相应功能

  <input type="checkbox" id="checkbox-1" onclick="changeDisabled()"/>点击后按钮有效<!-- html中写 -->
  

  function changeDisabled(){ //javascript中写
  	var btn_1=document.getElementById("btn-1");
  	var checkbox_1=document.getElementById("checkbox-1");
  	btn_1.disabled = !checkbox_1.checked;
  }
  

  οnclick=“changeDisabled()” 实现了点击后跳转到对应函数，函数内容不做解释，这里只表示跳转方式，往后所有的点击都可以用这种方式，在函数中获取dom对象标签，在做自己想要的操作。

• setAttribute(“属性名”,属性值); dom对象自定义属性
  首先创建一个超链接标签，并获取a标签对象：

  <a href="index.html">打开登录成功页面</a><br><!-- html中写 -->
  

  var a = document.getElementsByTagName("a")[0];//javascript中写
  

  设置原生属性：

  a.setAttribute("href","http://www.baidu.com");//javascript中写
  console.log(a.href);
  

  

  设置自定义属性：a标签没有index属性，自己定义并赋值，自定义属性不能直接用a.获得

  a.setAttribute("index","text");//javascript中写
  console.log(a.getAttribute("index"));
  

  

• dom操作css样式
  首先新建一个空的div，不给它任何属性，并且所有属性都在javascript中用dom写。

  <div>div区域</div><!-- html中写 -->
  

  var div1 = document.getElementsByTagName("div")[0]; //javascript中写
  div1.style.background = "red";
  div1.style.width ="100px";
  div1.style.height = "100px";
  

  
  可以看到效果都体现了出来。

• createElement(); 创建节点
  appendChild(); 追加子元素 子节点

  如下面程序，每点击一次按钮出现一个文本框

  <div>
  	<p>
  		<input type="button" value="添加电话号" onclick="add()"/>
  	</p>
  </div>
  <script type="text/javascript">
  	function add(){
  		// 创建文本框
  		var txt = document.createElement("input");
  		// 对属性赋值 操作属性
  		txt.type = "text";
  		txt.placeholder = "请输入电话号";
  		// 把创建的对象追加到div中
  		// 获取div对象
  		var div = document.getElementsByTagName("div")[0];
  		// 向div中追加子元素 子节点
  		div.appendChild(txt);
  		// 创建br
  		var br = document.createElement("br");
  		div.appendChild(br);
  	}
  </script>
  

  

• removeChild(); 删除节点
  如下面程序，每点击一次按钮删除一个p标签

  <div id="div1">
  	<p>段落1</p>
  	<p>段落2</p>
  	<p>段落3</p>
  	<p>段落4</p>
  	<p>段落5</p>
  </div>
  <input type="button" value="删除节点" onclick="deleteChild()" />
  <script type="text/javascript">
  	function deleteChild(){
  		// 正着删
  		// var p0 = document.getElementsByTagName("p")[0];
  		// var div1 = document.getElementById("div1");
  		// div1.removeChild(p0);
  		
  		// 倒着删
  		var pArr = document.getElementsByTagName("p");
  		var div1 = document.getElementById("div1");
  		div1.removeChild(pArr[pArr.length-1]);
  	}
  </script>
  

  

• 控件的id可以直接当dom对象使用
  如下面程序，点击按钮后会将按钮赋值，程序中就是直接用id来修改value值

  <input type="button" id="in1" onclick="btn1()" />
  <script type="text/javascript">
  	// 控件的id可以直接当dom对象使用
  	function btn1(){
  		in1.value = "按钮";
  	}
  </script>