北熙宝宝@Hikurn_Xi
2024-08-11 17:33
@广树：（╯‵□′）╯︵┴─┴
导航
遇见美好的明天，书写最棒的故事~
侧边栏
JavaScript学习笔记（第一天）
作者：北熙宝宝@Hikurn_Xi时间：2022-08-08 20:35:43
(1) Js的书写形式
行内式
<buttom onclick="alert('hello world')">点我</buttom>
<a href="javascript:alert('hello world')">点我</a>内嵌式
<script>
// alert("hello world")
///document.write("hello world")
console.log("hello world")
</script>外链式
<head>
<script src="js/hello.js"></script>
<script src="js/index.js"></script>
</head>(2) 变量
使用
第一种
var x = 100 //定义了一个x变量，赋值100
console.log(x+2000) //计算加2000输出到console
第二种
var x = 100 //定义了一个x变量，赋值100
var y = 1000+x //定义了一个y变量，赋值是x+1000
console.log(y) //输出y到console
第三种
var x //表示定义好变量x但是不赋值
var x,y,z //表示定义好变量x y z但是不赋值
var a=1,b=2,c=3 //表示定义好变量abc并赋值注意变量不能和Html已有的名字重复。
命名规范与规范
规则（必须遵守）
1. 一个变量名称可以由数字、字母、英文下划线（_）、美元符号（￥）组成
2. 严格区分大小写
3. 不能由数字开头
4. 不能是保留字或者是关键字
5. 不要出现空格
规范（建议遵守）
1. 变量名尽量有意义（语义化）
2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
3. 尽量不使用中文
var goodNumber
var good_number //这个虽然老师不推荐使用，但是看上去很常见？(3)数据类型
基本类型
1. Number 18,12.5（浮点数），2e3，十进制，十六进制，八进制，二进制，NaN
2. String 字符串类型
3. Boolean（布尔）
4. Undefined
5. Null
6. Symbol
var a = 0x99 //16进制写法（16代表1-9 abcdef）
var b = 077 //8进制写法
var c = 0b11 //2进制写法
var d = "20"
var isChecked = true //布尔值
var which //声明了，但是未赋值
var whichObject = null //知道会有对象，先写null
whichObject = {name:"beixi"}
console.log(a) //输出是9*16+9
console.log(b) //输出是7*8+7
console.log(c) //输出是1*2+1
console.log(c+d) //输出是320
console.log(isChecked) //输出是true
console.log(which) //输出是undefined
console.log(whichObject) //输出是{name:"beixi"}判断数据类型
var a = "aaaaaaaaa"
console.log(typeof a) //输出是String
console.log(tyepof(a)) //稍微规范一点的写法，结果和上面一样其他数据类型转成数值
1. Number（变量），可以把一个变量强制转换为数值类型的；如果转换前是true/false则出处1/0；如果转换前是null则输出0；如果转换前是其他的非数值（包含undefined），则输出NaN
2. parseTnt（变量），解析成int类型的，注意它识别不了小数
3. parseFloat（变量），解析成Float类型，可以识别小数
4. 非加号以外的数学运算
var a = "100"
var b = Number(a)
var c = "100.5abc"
var d = parseInt(c)
var e = parseFloat(c)
var f = a-0
console.log(a,b) //输出的第一个是字符串100，第二个输出的数值100
console.log(d) //输出的是100
console.log(e) //输出是100.5
console.log(f) //输出就是100（数值）其他数据类型转成字符串
1. String（），所有类型都能转成字符串
2. toString()，null和undefined是转换不了的
3. 用+号
var a = 100
var b = String(a)
var c = a.toString()
var d = a+""
console.log(a,b) //前面是数值100，后面是字符串'100'
console.log(a,c) //前面是数值100，后面是字符串'100'
console.log(a,d) //前面是数值100，后面是字符串'100'其他数据类型转成布尔值
1.Boolean（变量），在js中，只有'',0,null,undefined,NaN,这些是false，其余都是true
var a = 100
var b = Boolean(a)
console.log(a,b) //前面是数值100，后面是true(4)运算符
数学运算符
var a =10
var b = true
var c = 3
var d = 1000
var e = parseInt（d/60） //取1000/60的整数为小时
var f = d%60 //取1000/60的余数为分
console.log(a+b) //输出是11
console.log(a%b) //输出是1（原因是10整除3余1，所以%是取余的意思）
console.log(e+":"+f) //输出是10:20赋值运算符
var a = 1
a = 2
console.log(a) //输出答案是2
var b = 3
var c
c = a
a = b
b = c
console.log(a,b) //输出答案是3,1，借助c来互换
var e = a+1
console.log(e) //输出答案是2
e+=1
console.log(e) //输出答案是3比较运算符
var sum = 100
console.log(sum>=200) //输出为false
var a = '100'
console.log(sum==a) //输出结果为true，因为都是100（不看类型）
console.log(sum===a) //输出结果为false，因为虽然都是100，但是类型不一样，所以不一样
console.log（parseInt(a)===a） //输出结果为true，因为a经过parseInt来转换，所以一样都是数值且类型一样了
console.log（sum!=a） //输出结果为false，因为这里是判断是否不相等（只判断数值）
console.log（sum!==a） //输出结果为true，因为这里是判断是否不相等，要判断类型逻辑运算符
正常情况
var a = true
var b = true
console.loh(a && b) //输出是true
var category = "衣服"
var price = 300
console.log(category"家电" && price>200) //输出是false（“与”，也就是都必须满足）
var day = 5
console.log(day===5 || day===6) //输出为true（“或”，也就是只要有一个判断满足即可）
var length = 5
console.log(length===0) //输出为false
console.log(!length) //输出为false，因为10是数值在布尔里面是true，！是取反特殊情况
1. !!a ==>转换成布尔值
2. && || 短路 用发
&&的用法
var y
console.log（y.toString()） //这样就会报错
console.log（y && y.toString()） //改用这个，这样的话即使后面出错了，也不会报错，后面正常就用后面正常的
||的用法
var z = ""
console.log(z || "这个家伙很懒，什么都没留下" ) //如果z没有，就用后面的，如果z有就用z自增自减运算符
n++ 先返回，再加
++n 先加，再返回
n-- 先返回，再减
--n 先减，再返回
var n = 10
var res = ++n + n++ + ++n
console.log(n,res) //输出为13 35（11+11+13）三元运算符
10<20?console.log(1111):console.log(22222) //输出为1111
//满200-10
var sum = 210
var youhuisum = sum>200? sum-10 : sum
console.log(sum,youhuisum) //输出是210,200
//满200-10，满100-5
var sum = 190
var youhuisum = sum>200?
sum-10 :
(sum>100? sum-5 : sum)
console.log(sum,youhuisum) //输出是190,185(5)分支结构
if条件分支结构
if else
满200-10的实现
var sum = 210
var youhuisum
if（sum>200）{
youhuisum = sum-10
}else{
youhuisum = sum
}
console.log(sum,youhuisum) //输出是210和200if else-if else
满200-10，100-5，50-3的实现
var sum = 60
var youhuisum
if（sum>200）{
youhuisum = sum-10
}else if（sum>100）{
youhuisum = sum-5
}else if（sum>50）{
youhuisum = sum-3
}else{
youhuisum = sum
}
console.log(sum,youhuisum) //输出是60h和55switch条件分支结构
var code = 1
switch（code）{
case 1 ：
document.write("未付款")
break;
case 2 :
document.write("已付款")
break;
case 3 :
document.write("已发货")
break;
case 4 :
document.write("已完成")
break;
default：
document.write("出错了")
}特殊案例A：
(满200-10 100-5 50-3)，推荐还是if语句
var sum = 220
var youhuisum
switch（true）{
case sum>=200 ：
youhuisum = sum-10
break;
case sum>=100 && sum<200:
youhuisum = sum-5
break;
case sum>=50 && sum<100:
youhuisum = sum-3
break;
default：
document.write("出错了")
}
console.log(sum,youhuisum)特殊案例B：
(输出1-12月的天数不考虑闰年)
var sum = 12
switch（month）{
case 1：
case 3：
case 5：
case 7：
case 8：
case 10：
case 12：
console.log("31天")
break;
case 2:
console.log("28天")
break;
case 4:
case 6:
case 9:
case 11:
console.log("30天")
break;
default：
console.log("出错了")
}特殊案例C
成绩处理
var score = 12
var flagScore =parseInt(source/10)
switch（flagScore）{
case 10：
case 9:
console.log("A")
break;
case 8：
console.log("B")
break;
case 7:
console.log("C")
break;
case 6:
console.log("D")
break;
default：
console.log("E")
}(6)循环结构
While循环(先判断再执行)
var num = 0
while (num<10){
console.log("当前的num值是"+num)
num = num + 1 //或者可以写 num++
}do while循环（先执行再判断）
var num = 10
do{
console.log('我执行了一次')
num = num + 1
}while(num < 10)for循环
for(var i = 1;i <= 10; i++){
console.log(i)
}（上面的案例，在i <= 10 检查结束后立刻输出，才会执行i++）
break终止循环
break就是不满足就结束了，不再往下走。
continue
continue就是不满足本次就跳过去，然后继续执行
(7)function
//声明式（定义前后都可以调用）
function test(1){
console.log("我是套餐1")
}
test1()
//赋值式（定义后可以调用）
var test2 = function(){
cosole.log("我是套餐2")
}
test2()函数的参数
function test(a,b){
var yinliao = a==1?'可乐':'雪碧'
var yinliao = b==1?'薯条':'鸡米花'
var zhushi = 鸡腿堡
console.log("我是套餐A，里面有：",yinliao,xiaoshi,zhushi)
}
test(1,2)//输出是 我是套餐A，里面有：可乐，鸡米花，鸡腿堡
这里的ab就是形参，（1,2）是实参
可以传参，也可以不传参
形参默认前看下只能在函数内部去使用函数的返回值
return
function add(x,y,z){
var result = x+y+z
return result
}
var res = add(1,2,3)
//代码执行到这里，res已经是6了
function test(a){
console.log("传给后端用"，a)
test(res)
}有return之后，函数后面的就不会执行了（前提是要执行那个return）
函数的预解析（变量声明提升）
var会把var xxx提到前面去
function会把整个function函数给提到前面去
所以调用的在var前面，就会undefined
(8)对象
什么是对象？
字面量方式创建一个对象
var obj = {
name:"beixi",
age:3;
location:"China"
}
内置构造函数的方式创建对象
var obj2 = new Object()
ojb2.name = "beixi"
obj2.age = 3
obj2.location = China对象的使用
//增加
var obj = new Object()
ojb.name = "beixi"
obj.age = 3
obj.location = China
//读
document.write("姓名是："+obj.name)
//改
obj.age = 2000
//删
delete obj.name
//增加第二个方式
var obj2 = {}
obj2["name"] = "beixi"
//查2
console.log（obj2["name"]）
//改2
obj2["name"] = "hikurn"
//删2
delete obj2["name"]对象的遍历
var obj = new Object()
ojb.name = "beixi"
obj.age = 3
obj.location = China
for(var i in obj){
console.loh(obj[i])
document.write(i+":"+obj[i])
document.write("<br>")
}不同数据类型的储存
var obj = {
name:"beixi",
age:3
}
var obj2 = obj
obj2.name = "hikurn"
console.log(obj,obj2) //此时输出的是“hikurn”，“hikurn”
var obj2 = {
name:"beixi"
}
var obj3 = {
name:"beixi"
}
console.log(obj2===obj3) //输出是false（==也是false）此时的obj的对象，obj是在栈区，值是在堆区用 地址{name:"beixi"}，所以obj2和obj3的地址不一样
var obj = {
name:"beixi",
age:3
}
var obj2 = {}
for(var i in obj){
obj2[i] = obj[i]
}
obj2.name = "hikurn"
console.log(obj,obj2) //此时输出的才是“beixi”，“hikurn”(9)数组
什么是数组？
//字面量
var ageArr = [3,4,5,6]
var nameArr = ["caixukun","lihua","beixi","heimao"]
var studentArr = [{
name:"hikurn",
age:5
},{
name:"beixi",
age:5
}]
//内置构造函数
var arr1 = new Array(3,4,5,6) //放4个数值
var arr2 = new Array(3) //暂用3个内存格子数组的基本操作
var arry1 = [1,2,3,4,5]
console.log(arr1,length)
arr1.length = 3
console.log(arr1) //打印结果是1,2,3
//清空数组
arr1.length = 0
console.log(arr1) //打印结果是为空{}
//索引
var arr2 = ["hikurn","tongbao","tangbao"]
console.log(arr2[0]) //取出了hikurn，数字开始是0
arr2[0] = "beixi"
arr2[3] = "mingbao"
console.log(arr2[0],arr2[3]) //取出了beixi和mingbao，数字开始是0,修改的时候如果没有就增加一个，中间空的就是empty
//遍历
var arr3 = [3,4,5,6,7,8]
for(var i=0;i<arr3.length;i++){
console.log(arr3[i])
}
var arr4 = []
for(var i=0;i<arr3.length;i++){
arr4[i] = arr3[i]
}
console.log(arr4)冒泡排序
var arr = [4,3]
var temp = arr[0]
arr[0] = arr[1]
arr[1] = temp
或
for(var m = 0;m<arr.length-1;m++){
for(var i =0;i<arr.length-1-m;i++){
var temp = arr[i]
arr[i] = arr[i+1]
arr[i+1] = temp
}
}选择排序
var arr = [4,3,2,1]
for(var m = 0;m<arr.length-1,m++){
var minIndex = 0
for(var i=1+m;i<arr.length;i++){
if(arr[i]<arr[minIndex]){
minIndex = i
}
}
if(minIndex !== m ){
var temp = arr[m]
arr[m] = arr[minIndex]
arr[minIndex] = temp
}
}
Powered by wikimoeBlog