JavaScript学习笔记

最新推荐文章于 2024-08-17 12:54:01 发布

@xing@

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量1k

点赞数 21

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/x5634649464664/article/details/137462437

版权

Javascript基础（语法，关键字，变量数据类型，运算符）

数据类型

值类型（原始值）：字符串（string）、数字（number）、布尔（Boolean）、对空（null）、未定义（undefined）、symbol（ES6新引入的一种原始数据类型，表示独一无二的值）
引用数据类型（引用值）：对象（object）、数组（array）、函数（function）

<body>
    <script>
        var msg; //定义变量但是没有赋值 就是未定义undefined
        console.log(msg)

        console.log(msg1) //没有定义变量，报错
        var msg1='jarvis'
        msg1= null
        msg1=1 //Number
        msg1=true//Boolean
        msg1='true'//string
        msg1='1'
        msg="1"
        msg1=2+''
        var sum=msg+msg1
        console.log(sum )

        msg='lili'
        console.log("你好"+msg)//es5字符串拼接
        console.log(`你好${msg}`)//es6字符串拼接

        msg='123'
        prompt("输入数字")
        num=12
        var num=Number(msg)
             if(isNaN(num)){
            console.log("不是数字")
        }else{
            console.log("是数字")
        }
        console.log(num)

    </script>
</body>

2.类型判断

1）Typeof操作符

var li = "你好";
alert(typeof li)
alert(typeof 86)

2）Instanceof操作符：用于判断一个引用类型属于哪种类型

3类型转换

）Number：将变量转换为数字类型
）String：将变量转换为字符串类型
）Boolean：将变量转换为布尔值类型。Boolean会将非零的数字转为true,将零转为false
）parseFloat:将变量转化为浮点类型
）parseInt:将变量转化为整数类型

4运算符

1）赋值运算符

var s ='hello'//将hello字符串赋值给变量s

2）算术运算符

var a = 3+2 //加法
        var b = 3-2 //减法
        var c = 3*2 //乘法
        var d = 3/2 //除法
       var e = 3%2 //取余数

3）比较运算符

4）逻辑运算符

5）一元运算符

var i =3
    var a = i++
   document.write("a="+a+",i="+i)

6）二元运算符

7）三元运算符

8）运算优先级

算术运算级>比较运算级>逻辑运算级>赋值运算级

其他的一些知识点

1.提示框

alert("提示框")

2.确认框

// 定义变量
        var msg;
        // 确认框
        msg = confirm('确认信息')
        console.log("msg",msg)

确认信息就是true，取消则是false

3.用户输入框提示

msg = prompt("请输入内容")
       console.log("msg",msg)

4.交互操作，函数方法

<body>
    <p onclick="clickListener()">按钮</p>
<script>
// 定义变量
   var msg;
   document.write("aaaaa")
        // 如果是交互操作，原来内容则会删除掉原来内容。如果不是，则就是直接加内容。
   document.write("<p>aaaaa</p>")
        // 函数(方法)
   function clickListener() {
   console.log("-------------")
   document.write("<p>bbbbbbbbb</p>")
        }
</script>
</body>

点击按钮之后则会变成

// 函数(方法)
        function clickListener() {
            console.log("-------------")
            //document.write("<p>bbbbbbbbb</p>")
            var btn = document.getElementById("btn")
            btn.className='box1'
            // btn.style.color = "red"
            // btn.style.background = "blue"
            var list = document.getElementById("list")
            //获取网络数据
            for(let index = 0; index < 5; index++){
                //新增创建li标签节点
                var li = document.createElement("li")
                //给li标签添加内容
                li.innerHTML=index
                //将li标签添加到ul里
                list.append(li)
            }
        }

二、分支循环

1.if循环


var a = 9
        var b = 17
        if(a>b){
            console.log('a>b');
        }else if(a==b){
            console.log('a=b');
        }else{
            console.log('a<b');
        }

2.Switch语句

var day = new Date().getDay();
        switch(day)
        {
            case 0:
            x="今天是周日"
            break
            case 1:
            x="今天是周一"
            break
        }
        document.write(x)

3.for循环

//冒泡排序 从大到小排列
        //1
        var list = [2,28,66,36,59,89,99]
        for (var i =0;i<list.length;i++){
            for(var j=i+1;j<list.length;j++){
                if( list[i]<list[j]){
                    var msg=list[i]
                    list[i]=list[j]
                    list[j]=msg
                }
            }
        }
console.log(list)
//2
        for(var i=0;i<list.length;i++){
            for(var j=0;j<list.length-1;j++){
                if(list[j]>list[j+1]){
                    var msg=list[j]
                    list[j]=list[j+1]
                    list[j+1]=msg
                }
            }
        }
        console.log(list)

4.for in遍历

遍历对象的属性，多用于对象、数组等复合类型，以及遍历其中的属性和方法。

var Person = {id:1,name:"李四",age:20}
        for(key in Person){
            document.write(key+":"+Person[key])
            document.write('<br/>')
        }

5.while循环

var i = 1
var sum =0
while(i<101){
sum += i;
i++;
}
document.write(sum)

输出结果5050

6. do-while循环

do{

代码

}循环（表达式）

三、数组

数组定义

）使用new关键字创建一个Array对象，直接创建一个数组空间，向数组添加元素
）使用new关键字创建一个array的对象赋值n个初始值
）不用new，直接用[ ]声明一个数组，同时赋值初始值

// 定义数组
        //1
        var mycars = new Array();
        var mycars = new Array(3);
        //2
        var mycars = new Array("saab","wool","bmn")
        //3
        var mycars = ["saab","wool","bmn"]

2.数组操作

1）添加删除元素

// 直接为数组的下标赋值
        var mycars=new Array()
        mycars[0]="saab"
        mycars[1]="wool"
        mycars[2]="bmn"
        //追加数组
        var mycars=new Array()
        mycars.push("saab")
        mycars.push("wool")
        mycars.push("bmn")
        document.write(mycars)

2）遍历数组

//遍历数组
        //1 for循环遍历
        var mycars = ["saab","wool","bmn"]
        var len = mycars.length
        for(i =0;i<len;i++){
            document.write(mycars[i])
            document.write('<br/>')
        }
        //2 for in 遍历数组
        var mycars = ["saab","wool","bmn"]
        for(key in mycars){
            document.write(key+':'+mycars[keys])
            document.write('<br/>')
        }

3）删除元素

//删除元素
        //1 pop尾部删除
        var mycars = ["saab","wool","bmn"]
        var car = mycars.pop()
        document.write(mycars)
        document.write('<br/>')
    
        //2 shift头部删除
        var mycars = ["saab","wool","bmn"]
        var car = mycars.shift()
        document.write(mycars)
        document.write('<br/>')

        //3 指定位置删除元素
        var mycars = ["saab","wool","bmn"]
        var car = mycars.splice(1,2)
        document.write(mycars)

4）插入元素

unshift：从头部插入

splice：从指定位置插入

5）合并数组

//合并数组
        var arr=[1,6,5]
        var arr1=[11,6,5]
        var newArr = arr.concat(arr,arr1)
        document.write(newArr)

6）数组转化为字符串

数组提供join元素用指定分割符

7）数组元素倒叙

//数组元素倒叙
        var mycars = ["saab","wool","bmn"]
        mycars.reverse()
        document.write(mycars)

8）数组元素排序

var list = [2,28,66,36,59,89,99]
        for (var i =0;i<list.length;i++){
            for(var j=i+1;j<list.length;j++){
                if( list[i]<list[j]){
                    var msg=list[i]
                    list[i]=list[j]
                    list[j]=msg
                }
            }
        }
//输出结果从大到小

3.二维数组

//二维数组
        var arr =new Array()
        for(i =0;i<5;i++){
            arr[i]=new Array() //每个元素声明一个新数组
            for(j=0;j<8;j++){
                arr[i].push(i*j)
            }
        }
        var len=arr.length //获取arr长度
        var clen = arr[0].length //获取子数组长度
        for(i=0;i<len;i++){    //循环打印出二维数组
            for(j=0;j<clen;j++){
                document.write(arr[i][j])
                document.write(",")
            }
            document.write('<br/>')
        }

四、字符串

1.获取字符串长度

<script>
        var myname="xingjiahui,xjh"
        var Length=myname.length
        document.write(Length)
    </script>

输出结果14

2.字符串连接

var myname1 = "x"
        var myname2 = "nihao"
        var myname = myname1 + " " + myname2
        document.write(myname)  
//输出结果为x nihao

//concat函数
        var name1 = "xii"
        var name2 = "nihao"
        var name = myname1.concat(name2)
        document.write(name) 
 //输出结果为xiihao

3.字符串搜索

//indexOf 从前往后
        var str = 'abcdabcd'
        console.log(str.indexOf('a'))
//第二个数字不写则默认从零开始
        console.log(str.indexOf('a',2))
//从下标值为2的元素开始找
        console.log(str.indexOf('cd'))

//lastIndexOf 返回的是最后出现的位置
        var str = 'abcdabcd'
        console.log(str.lastIndexOf('a'))
        console.log(str.lastIndexOf('a',2))

输出结果 4

）//search 指定字符串，返回第一个匹配子字符串的起始位置，没有匹配，则返回-1
        var str = 'abcdabcd'
        console.log(str.search('a'))
        console.log(str.search('c'))
        console.log(str.search('e'))

//match
        var str = 'abcdabcd'
        console.log(str.match('a'))
        console.log(str.match(/a/))
        console.log(str.search('e'))

4.字符串截取

//substring 包前不包后，参数不能为负数
        var str = '13464888204'
        var length = str.length
        
        console.log(str.substring(0,3))
        console.log(str.substring(length-4))

//slice 可以是负数，则从尾部开始算起
        var str = '13464888204'
        console.log(str.slice(0,3))
        console.log(str.slice(-3,-2))

//substr 包括开始的数，结束的数
        var str = '13464888204'
        console.log(str.substr(0,3))
        console.log(str.substr(1,3))

5.字符串替换

6.字符串的切割

//  字符串的切割
        var str ="123123@qq.com"
        var newList=[]
        var list =["123123@qq.com","456456@qq.com","789789@qq.com"]
             for(let index = 0;index < list.length; index++){
                var item = list[index];
                var arr=item.split("@")
                console.log(arr)
                newList.push(arr[0])
                console.log(newList)
             }

五、正则表达式

正则表达式：有普通字符以及特殊字符组成的文字模式。字符串方法，正则对象方法。

//正则表达式
        var str="a123123_qq"
        var s=/^[a-zA-Z]\w{5,17}$/
        var b=s.test(str)
        console.log("b:",b)
//输出结果为true

六、对象

声明一个对象两种方法：赋值new object（）和{ }实现

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

//对象 以键值对
        var obj={  
//声明一个对象
            name:'xjh',   
//为对象添加属性值
            age:21
        }
        var str='name'
        // console.log(obj.age)
        console.log(obj[str])
        for(var key in obj){
            console.log('key:',key)
            console.log('value:',key)
        }

var obj={  
            name:'xjh',   
            age:21,
            list:[1,2,3,4,5,6],
            list1:[
                {
                    name:'li',
                    age:23
                }
            ]
        }
        obj.id=1
        // console.log(obj.age)
        console.log(obj.list[1].name)
        for(var key in obj){
            console.log('key:',key)
            console.log('value:',key)
        }

注习题练习知识点：item 列表项

数组[ ] 对象{ }

DOM 对象方法

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

七、函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

大括号{ }

function 函数名（参数可有可无）{

参数

return 返回值可有可无；

}

<script>
        fun1() //调用fun1 可以提前调用
        function fun1(){
            console.log('---------')
        }
        
        var fun2 = function(){ //匿名函数(定义一个函数，给函数赋值)
            console.log('=========')
        }
        fun2() //匿名函数不能提前调用

        var obj={
            name:'xjh',
            age:20,
            sayHi:function(){
                console.log('hello---------')
            }
        }
        obj.sayHi()
    </script>

八、Es6新特性

新增的两个重要的JavaScript关键字let,const

1.let 声明的变量只在 let 命令所在的代码块内有效。

let是在代码块内有效，var 是在全局范围内有效

2.let 只能声明一次 var 可以声明多次

3.for 循环计数器很适合用 let

//取数字大于3的数字
        var list = [1, 2, 3, 4, 5, 6, 7, 8, ]
        var newList = []
        //1
        for (let index = 0; index < list.length; index++) {
            const item = list[index];
            if (item > 3) {
                newList.push(item)
            }
        }

2.const 声明一个只读的常量，一旦声明，常量的值就不能改变。一旦声明必须初始化，否则会报错

3.symbol:表示独一无二的值，用来定义对象的唯一属性名

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。

Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。
Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

let syObject = {};

syObject[sy] = "kk";

syObject[sy]; // "kk"

syObject.sy; // undefined

4.解构赋值

var list = [1, 2, 3, 4, 5, 6, 7, 8, ]
        var newList = []
        //上面所有值乘以2
        //map()方法定义在JavaScript的Array中，
        //它返回一个新的数组，新返回数组中的每个元素为原始数组
        //的每一个元素分别调用map中的回调函数处理后的值。
        newList=list.map(function(n){
            console.log(n)
            return n*2
        })
        console.log(newList)

5.promise

）同步函数：同步是指函数执行完毕后,能够理解得到想要的结果，或者说是能得到一个定的返回

console.log("abc")

2.）异步函数：异步是函数执行完毕后，结果必须在未来经过某种手段才能获得（如回调函数）等等

settimeout(() => {
            console.log("哈哈哈")
        }, 5000)。//5000=5s
        console.log("now")

3）promise

<script>
        //promise
        //pending 初始状态也叫等待状态
        //resolved 成功状态
        //rejected 失败状态
        function test(a) {
            return new Promise((resolve, reject) => {
                // console.log('111111111')
                //一系列代码操作后执行
                //resolve('a')'
                setTimeout(() => {
                    if (a===1) {
                        resolve('a')
                    } else {
                        reject("b")
                    }
                },1000)

            })
        }
        test(1)
            .then((res) => { //then代表reslove的成功状态
                console.log('res:',res)
            })
            .catch((err) => {
                console.log("err:", err)
            })
    </script>

@xing@

关注

21
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

值类型（原始值）：字符串（string）、数字（number）、布尔（Boolean）、对空（null）、未定义（undefined）、symbol（ES6新引入的一种原始数据类型，表示独一无二的值）因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。引用数据类型（引用值）：对象（object）、数组（array）、函数（function）字符串方法，正则对象方法。遍历对象的属性，多用于对象、数组等复合类型，以及遍历其中的属性和方法。
复制链接

扫一扫