JavaScript学习笔记(第一天)

发布于 2022-08-08  133 次阅读


(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和200

if 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和55

switch条件分支结构

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
    }
}