【jJavaScript】基础知识梳理

js基础知识总结

js的应用方式

    <!-- 方式1 -->
    <h1 onclick="alert('helloworld')">JS的应用方式</h1>
    
    
    <!-- 方式2 -->
    <div>我是一个div</div>
    <script>
        window.onload = function() {
            var div = document.querySelector('div');
            
            div.onclick = function() {
                console.log(100);
            };
        };
    </script>

    <!-- 
    <script>
        console.log('ok');
        console.log('123');
    </script> 
    -->


    <!-- 方式3 -->
    <script src="test.js">
        console.log(400);//不要再写其它的JS代码，因为执行不到
    </script>
    <!-- 
    JS的应用方式
    1.将JS代码嵌入到开始标签中，通常结合事件
    2.在HTML文档中嵌入script标签，在script标签间写JS代码，script的位置通常在被操作元素的后面，如果要放在前面，可以结合window.onload使用
    3.将JS代码写在一个独立的js文件中，文件的后缀为.js，然后使用script的src属性将js文件加载到当前页面
 -->

js注释

单行注释(//内容)
多行注释(/*内容*/)

js的输出方式

    <!-- 
        信息的输出方式
        1.console.log方法
        2.alert方法
        3.document.write方法
        4.innerHTML属性
     -->

     <script>
        console.log('hello\nworld');
        console.log(100);
        console.log(true);

        alert('hello\nworld');
        // alert(100);

        document.write('hello<br>world');
        // document.write(100);
     </script>

使用Dom属性输出

     <!-- innerHTML属性属于DOM操作，作用是设置或者获取页面中元素的内容 -->
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li id="box">我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>

    <script>
        // 获取id为box的li
        var li = document.getElementById('box');

        // 获取li中的内容
        console.log(li.innerHTML);

        // 设置li中的内容
        li.innerHTML = 'helloworld';
    </script>

变量和常量

1.变量

// 变量可以先声明后赋值
var a;
a=1;

2.常量

// 常量必须声明同时赋值
const a=1;

3.作用域

// 在块内定义的作用域为当前块
// var变量没有块作用域,只能使用let定义快变量
{
    let a=1
}
// 块外定义的则在当前js代码内可用
var a=1
// 不带关键字的变量声明将作为Wingdown对象的属性
a=1;

4.命名规则

// 可以由数字、美元符号、下划线、字母组成
// 不能以数字开头

数据类型

js是弱类型语言，数据类型取决于实际的数据类型,也就是说动态数据类型

// 1)数字类型
var a=1;
// 2)字符类型
var b="b";
var c='c';
// 3)布尔类型
var d=true;
var e=false;
// 4)undefind
var f;  // 未赋值的变量类型为undefined
// 5)数组类型
var g=[1,2,3];
// 6)Object类型
var h={name:'admin',age:18};    //所有对象为Object类型  数组也是Object类型
//对象有两种寻址方式
h.name;
h["name"]
// 7)null
// 代表啥也没有
// 8)Symbol
// 代表独一无二的值

类型转换

// 转为数值类型
var a=(Number)'123';    //结果为123类型为数字
var b=parseInt('13.13');    // 转为整数
var c=parseFloat('3.14aaa');    // 转为浮点数 结果为3.14
// 转为字符串
var str=1+'';
var num=1;
var str2=num.toString();
//转为布尔类型
var date=10;
var res=(Boolean)date;  //true
// 除了NaN,0,'',undefined,null以外转为布尔类型都为false;

选择结构及循环结构

基本与Java相同

// 1.条件结构    同Java
// 2.循环结构  同Java
// for-in结构js特有的用于遍历数组和对象的结构
var a=[1,2,3]
for(y in a){
    console.log(a[y]);
}

运算符

1.位运算符
<<,>>,>>>,&,|
2.算术运算符
+,-,*,/,%
3.关系运算符
==,===,>,>=,<,<=,!=
4.逻辑运算符
&&,||,!
5.赋值运算符
=,*=,+=,/=,-=,%=
6.条件运算符
?:
7.字符串运算符
+

对象

1.自定义对象

// 对象的创建
var a={
    a:1,        
    b:2,
    c:function(a,b){
        return a+b;
    }
}
// 对象属性的使用
var k=a.a;   // 点方法
var j=a['b'];    // 中括号法
var g=a.c(1,2);     // 点方法调用对象方法
var h=a['c'](1,2)   // 中括号法调用对象方法
// 数组中对象的排序
var arr=[
    {
        name:'jack',
        age:18
    },
    {
        name:'sily',
        age:21
    },
    {
        name:'kola',
        age:19
    }
];
// 按对象年龄排序
arr.sort(function(a,b){
    return a.age-b.age;
})

var cat={name:'tom',age:31}
var flag='name' in cat;     // in关键字可以判断字段是否属于对象的属性

2.内置 Math 对象

// ceil(num) 向上取整 floor() 向下取整
var a=Math.ceil(3.14);  // 4
var b=Math.floor(3.14); // 3
// round(num) 四舍五人省略最后一位小数
var c=Math.round(3.14);  // 3.1
var d=Math.round(2.58); //2.6
// pow(num,index) 求一个数的幂  
var e=Math.pow(2,3);    //2的3次方  8
// min(a,b,c,...)最小值  max(a,b,c,...)最大值
var f=Math.min(1,3,4,5);    // 1
var g=Math.max(3,8,7,9);    // 9
// abs()求绝对值 sqrt()求算术平方根
var h=Math.abs(-3); //3
var j=Math.sqrt(4); //2
// random() 返回[0,1)的随机小数   
var s=Math.random(); //[0,1)的任意小数
// 利用random生成n-m的数
var m=5,n=1;
var res=parseInt(Math.random()(m+1-n)+n);   生成1-5的整数

3.内置日期时间对象

// 创建日期时间对象
var date=new Date() // 创建当前时间的日期时间对象
// 创建指定时间的日期时间对象   传入指定格式的字符串
var myDate=new Date('2001-01-21 1:00:00')   
// 根据毫秒数创建日期时间对象   从1970年开始
var myDate2=new Date(1000)  //1970-1-1  8:00:01

// 常用方法
// getFullYear()    获取年份
var a=date.getFullYear();   // 2023
// getYear()    返回距离1900年的年份
// getMonth()   获取月份    返回值是0-11    0代表1月
// gatDate()    获取天
// getDay() 获取星期    返回0-6，0代表星期日    
// getHour()    获取小时
// getMinute()  获取分钟
// getSecond()  获取秒
// getTime()    返回距离1970年的时间毫秒值
//转为字符串形式
// toLocaleString()     //包含日期时间
// toLocaleDateString() //只包含日期
// toLocaleTimeString() //只包含时间

函数

1.函数创建方式

// 方式1
function a(){
    代码块
}
// 方式二
var a=function(){
    代码块
}

2.return 关键字
用于在方法中返回值

function cacl(){
    代码块;
    return 要返回的值或参数;
}

3.函数调用

// 定义函数
function a(){
   代码块 
}
// 通过名称调用函数
a();

4.递归函数
函数内部调用自己称为递归,一般要有递归头
5.匿名函数
省略函数名的函数称为匿名函数
6.函数中调用全局变量及内部对象argument

var a=1;
function f(){
    var a=2;
    // 如果要使用全局变量a  使用this.或windown.
    a=this.a;
}
// argument对象是函数内部的一个对象，用于管理函数的形式参数
// 这个函数可以计算两个数的和
function f1(){
    return argument[0]+argument[1];
}
// 利用argument对象的属性length能够做到在参数个数未知时对形式参数进行操作
function f1(){
    int count=0;
    for(var i=0;i<argument.length;i++>){
        count+=argument[i];
    }
    return count;
}

7.回调函数
作为其他函数的参数的匿名函数称为回调函数
8.匿名自执行函数
一种无需调用的函数

(function(a,b){
    return a+b;
})(a+b);