本文深入探讨JavaScript中的数据类型，包括简单数据类型与复杂数据类型的特点，详细讲解了数值、字符串、布尔值等的转换与操作方法，以及函数、数组、对象的基本用法和常见数组、字符串操作。
js的数据类型：
- 简单数据类型：number,string,undefined,null,boolean
- 复杂数据类型：object，array
简单数据类型是没有属性和方法的，但是浏览器允许简单类型直接调用方法，会自动简单类型转换成复杂类型；但其中undefined和null没有对应的复杂类型，所以在调用方法时会报错
1.浮点数：
var num = 1.2;
浮点数精度丢失问题：
console.log(0.1+0.3) // 精度丢失，小数进行o运算的时候，有可能算不准，所以不要用小数进行比较
undefined和null
-
undefined表示一个没有赋值的变量
-
null表示一个空的对象
转换成字符串
toString() //将来所有的数据都会有toString()方法，除了null和undefined
String() //拼串，使用起来最方便
转换成数字类型
1.Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN
2.parseInt() //转整数
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
3.parseFloat() //转小数
转换成布尔类型
所有的值都可以转换成布尔类型
Boolean()
其中，""，NaN，undefined，null，0，false这几个值会转换成false，其他值都会转换成true
NaN
NaN: not a number, 表示一个非数字
在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN
NaN的注意事项：
-
NaN的类型是number类型的，表示一个非数字
-
NaN不等于任何值，包括NaN本身
-
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。
三元运算符
表达式1 ? 表达式2 : 表达式3
1. 三元运算符会得到一个结果，结果根据表达式1的值来确定。
2. 如果表达式1的值为true，会返回表达式2的值
3. 如果表达式1的值为false，会返回表示3的值
for循环里的break和continue
break表示结束整个循环
continue表示结束本次循环，下一次继续循环
//冒泡排序
var arr=[65,97,76,13,27,49,58];
for(var j=0;j<arr.length-1;j++){
var flag=true;
for(var i=0;i<arr.length-1-j;i++){
if(arr[i]>arr[i+1]){
flag=false;
var temp=arr[i];
arr[i]=arr[i+1];
arr[i+1]=temp;
}
}
//优化比较的次数
if(flag){
break;
}
}
console.log(arr)
//数组去重
new Set() filter reduce
var arr=[2,3,4,77,55,2,4,56,56,77];
var temp=[];
var flag=false;
for(var i=0;i<arr.length;i++){
for(var j=0;j<temp.length;j++){
if(arr[i]==temp[j]){
flag=true;
break;
}
}
if(flag===false){
temp.push(arr[i])
}
}
console.log(temp)
//es6
ar arr=[2,3,4,77,55,2,4,56,56,77];
[...new Set(arr)];
函数：
函数的三要素：函数名，参数，返回值；
//求三个数的最大值
function maxfet(n1,n2,n3){
var max =n1>n2 ? n1:n2;
return max>n3?max:n3;
}
var max=maxfet(4,6,1);
console.log(max)
//用函数的方式求一个数组的最大最小值
function getmaxmin (numValue){
var max=numValue[0];
var min=numValue[0];
for(var i=0; i<numValue.length;i++){
if(max<numValue[i]){
max=numValue[i]
}
if(min>numValue[i]){
min=numValue[i]
}
}
return [max,min];
}
var max=getmaxmin([3,4,6,7,8])
console.log(max[0])
console.log(max[1])
//翻转一个任意数组，返回一个新的数组
function reverseArray(arr){
var newArr=[];
for(var i=arr.length-1;i>=0;i--){
newArr.push(arr[i])
}
return newArr
}
console.log(reverseArray([1,2,3,4,56]))
//函数的冒泡排序
function babule(arr){
for(var i=0;i<arr.length-1;i++){
var flag=true;
for(j=0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
flag=false;
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
if(flag){
break;
}
}
}
return arr;
}
var newArr1=babule([1,3,5,7,9,2,4,6,8,10])
console.log(newArr1)
//分装一个函数，求阶乘的和 1!+2!+3!
//分装一个求5的阶乘的函数 1*2*3*4*5
var num=1;
function getProduct (n) {
for (var i=1;i<=n; i++) {
num =num*i;
}
return num;
};
//分装一个函数，求阶乘的和 1!+2!+3!
var pr=0;
function product (n) {
for (var i=1;i<=n;i++){
pr +=getProduct(i);
}
return pr;
}
var temp =product(3);
console.log(temp)
变量的作用域：变量起作用的区域；
全局作用域：在函数外面区域定义的变量叫全局变量；在任何地方都可以访问到
函数作用域：只有函数才能形成作用域，在函数内部的定义的变量就局部变量，局部变量只能在当前的函数内部可以访问到
没有用var声明的变量，叫隐式全局变量；
函数查找变量的时候，如果有局部变量，会优先使用局部变量，如果没有局部变量会使用全局变量；
var num =11;
function fn(){
var num =33;
num=44;
console.log(num)
}
console.log(num)
//打印结果
44,11
//原因:num=44会赋值给局部变量num=33；在函数外边打印num因获取不到局部变量，只能获取全局变量所以打印结果为11；
var num1 =11;
var num2 = 22;
function fn (){
var num1 = 33;
num1 = 44;
num2 = 55;
console.log(num1); //44
console.log(num2); //55
}
fn();
console.log(num1); //11
console.log(num2); //55
js的预解析：预解析在代码执行之前发生，会把所有的变量和函数的声明提前；只会提升声明，不会提升赋值
1.把所有的var声明提升到当前作用域的顶部，只会提升声明，不会提升赋值，如果有多个var重名，后面的var会忽略；
2.把所有的function声明提升到当前作用域的顶部，只会提升声明，不会提升调用，如果有多个同名的function，后面的会覆盖前面的；
function fn(){
console.log("哈哈");
}
fn();
function fn(){
console.log("呵呵");
}
fn()
//结果是“呵呵”
console.log(num)
var num =22;
console.log(num)
var num =33;
//结果是“undefind,22”
Math对象的random（随机数）
function getrandomColor(){
//随机3个0-255的随机数
var n1= parseInt(Math.random()*256);
var n2= parseInt(Math.random()*256);
var n3= parseInt(Math.random()*256);
var randomColor= "rgb(" +n1+","+n2+","+n3+")";
return randomColor
}
var color=getrandomColor();
document.body.style.backgroundColor=color
数组的方法：join();reverse();sort();
- push() //给数组的最后面增加一个或者多个元素
- pop() //最后面删除一个元素
- unshift() //在最前面增加一个元素
- shift() //在最前面删除y
- join() //吧数组的每一项按照分隔符拼接成一个字符串
- reverse() //翻转一个数组
- sort() //对数组进行排序
- concat() //合并多个数组
- slice() //数组的截取 ，slice(begin) //从begin开始截取，截取到最后；silce(begin，end) //从begin开始截取到end（但不包含end）
- splice(start，deletecount，add) //可以在数据的任意地方删除或者添加元素
- 参数1：开始删除的位置
- 参数2：删除几个元素
- 参数3：在删除的位置添加元素（如果不想删除，只想添加，让参数2等于0）
- 返回值：删除的元素组成的数组
- indexOf(); //获取到某个元素在数组中第一次出现的下标；其返回值：下标，如果找到了，就会返回对应的下标，如果没有这个元素，则会返回-1；
var arr=[1,2,3,4]
var str =arr.join("-");
arr.reverse()
arr.sort();
// splice
var arr=["张飞","张辽","张角","张宝","张毅"]
var newArr = arr.splice(2,1)
console.log(arr)
console.log(newArr)
var num =4;
var arr = [1,2,3,4,5,6,1,2,3,4,5];
if(arr.indexOf(num)==-1){
console.log("不包含")
}else{
console.log("包含")
}
var arr =["c","a","z","a","x","a","a","z","c","x","a","x"]
//1.找到数组中第一个a出现的位置
console.log(arr.indexOf("a"))
//2.找到数组中最后一个a出现的位置
console.log(arr.lastIndexOf("a"))
//3.找到数组中每一个a出现的位置
for(var i=0; i<arr.length;i++){
if(arr[i]=="a"){
console.log(i)
}
}
//4.数组去重，返回一个新数组
var obj=[];
for(var i=0;i<arr.length;i++){
if(obj.indexOf(arr[i])== -1){
obj.push(arr[i])
}
}
console.log(obj)
//5.获取数组中每个元素出现的次数
var obj={};
for(var i=0; i<arr.length;i++){
if(arr[i] in obj){
obj[arr[i]]++
}else{
obj[arr[i]]=1
}
}
console.log(obj)
//将"li-yan-he"转换成"LiYanHe"
var str="li-yan-he";
str=str.split("-")
var newstr=[];
for(var i=0;i<str.length;i++){
var str1=str[i][0].toUpperCase() + str[i].slice(1);
newstr.push(str1)
}
newstr=newstr.join("")
console.log(newstr)
String对象：(所有的字符串操作，原来的字符串都不会发生改变。都需要返回值)
- 字符串是可以遍历的 ，还可以通过下标来操作
-
indexOf() //查找字符第一次出现出现的位置，（从左往右查找）
-
lastIndexOf() //查找字符第一次出现出现的位置，（从右往左查找）
- trim() //可以把字符串两边的空格去掉
- toUpperCase() //将所有的字符变成大写
- toLowerCase() //将所有的字符变成小写
- concat() //字符串的拼接（基本不用）
- slice() //字符串截取
- substring() //跟slice()用法想同，不常用
- substr()//字符串截取
- split() // 把一个字符串切割成一个数组，与join()方法截然相反
- replace() //替换（只会查找第一个进行替换）
//indexOf和lastIndexOf
var str ="afgnasffdggghxvv";
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
//trim
var str1=" aa bb sss "
var st=str1.trim()
console.log(st)
//toUpperCase和toLowerCase
var str2= "hello World"
console.log(str2.toUpperCase())
console.log(str2.toLowerCase())
//split
var str3="a-b-a-v";
var arr=str3.split("-")
console.log(arr) //abav
//replace
//bb换成ee
var str4 ="aa bb cc dd bb";
varnewStr =str4.replace(/bb/g,"ee")
webAPI：DOM
DOM：文档对象模型
1.事件的三要素：
- 事件源：触发事件的元素；
- 事件名称：click点击事件
- 事件处理程序：事件出发后要执行的代码（函数形式）
2.document.getElementById() //获取元素的ID
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .cls{ width: 200px; height: 300px; } </style> </head> <body> <button id="btn">按钮</button> <img src="img/30.png" id="imgIcon" /> <script> var btn = document.getElementById("btn"); var img = document.getElementById("imgIcon"); btn.onclick = function () { img.src="img/30_01.png"; img.className="cls" } </script> </body> </html>
3.标签中的class对应了对象中的className
4.通过innerText属性修改标签的内容
5.document.getElementsByTagName() //通过标签名获取元素
- 参数：是字符串类型的标签名
- 返回值：类数组，伪数组不是数组，所以他不能使用数组的方法，但是能够跟数组一样遍历，并且可以通过下标操作
var btn = document.getElementById("btn"); var ps = document.getElementsByTagName("p"); btn.onClick = function () { for (var i=0;i<ps.length;i++){ ps[i].innerText="嘿嘿" } }通过arguments获取所有调用函数时传进来的参数
input表单元素
input里面的属性：disabled selected checked都是布尔类型
onfocus和onblur(获取焦点和失去焦点)
input全选案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script>
//功能1：点击全选的checkbox，控制所有的checkbox
//获取的全选input
var all = document.getElementById("j_cbAll");
//获取tbody
var tbody = document.getElementById("j_tb");
//获取tbody下所有的input
var inputs = tbody.getElementsByTagName("input");
//给all注册点击事件
all.onclick = function () {
for(var i=0; i<inputs.length;i++) {
inputs[i].checked = all.checked;
}
}
//功能2：点击下面的checkbox，控制全选的checkbox
//1. 给所有inputs注册点击事件
//2. 判断是否都选中了，如果都选中了，让all选中，否则让all不选中
for (var i=0; i<inputs.length; i++) {
inputs[i].onclick = function () {
var flag = true;
for( var j=0; j<inputs.length; j++) {
if(inputs[j].checked==false){
flag=false;
break;
}
}
if(flag==true){
all.checked = true;
}else{
all.checked = false;
}
}
}
</script>
</body>
</html>
attribute:属性（这三个方法。不管是股友属性还是自定义属性，只要写在标签上都可以获取）
- getAttribute(name) //获取属性
- setAttribute(name,value) //设置属性
- removeAttribute(name) //删除属性
innerText和innerHtml的区别：
innerText:不识别标签，对标签转义，当成文本（设置标签的内容，推荐使用innerText,防止xss攻击，保证标签不生效）
innerHTML:能够识别html标签，标签能生效
根据css选择器获取：
doucument.querySelector(); //只返回一个对象，如果要返回多个，会返回第一个
doucument.querySelectorAll(); // 会返回伪数组
获取所有的节点：
childNodes() //获取所有的子节点（包括文本节点，注释节点，标签）
children() //获取所有的孩子元素（不包含注释节点，文本节点）
获取兄弟节点：
previousSibling //获取前面的兄弟节点
previousElementSibling //获取前面的兄弟元素
nextSibling //获取后面的兄弟节点
nextElementSibling //获取后面的兄弟元素
父节点：
parentNode //获取父节点（没有兼容性）
克隆节点：
cloneNode //克隆节点（deep参数：false时表示浅复制，只复制标签不复制标签里面的内容，true：会复制所有内容）
创建节点：
createElement （参数是标签名；返回值：元素）
什么叫原型：
任何一个函数，都有一个属性，prototype,值是一个对象
把函数的prototype指向的这个对象就叫做原型。
原型内所有的属性和方法都可以被这个构造函数new出来的实例访问。
原型的作用： 存储一些所有实例需要共享的内容，比如方法。
2. __proto__： 属性
任何一个对象都有__proto__属性，通过这个属性可以访问到 构造函数的原型。
p.__proto__ == Person.prototype 正常情况
如果想要修改原型对象的内容，使用Person.prototype修改，不要用__proto__
3. constructor:属性
所有的原型对象，都有一个constructor属性，这个属性指向了构造函数
要求：能够画出原型的三角关系图 妈妈 爸爸 孩子
原型链： 每一个对象都会有自己的__proto__, 它的原型也会有自己的原型。最终到达了Object.prototype
属性搜索原则：
自己有，就用自己的，没有就找自己爸爸的，还有没，就找爷爷的，还没有，一直找到祖宗Object.prototype
如果自己有这个属性，直接用
如果没有，就访问p.__proto__这个对象
如果还没有，就访问p.__proto__.___proto__，知道Object.prototype
如果还没有，就undefined。
扫一扫
3422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
