01、JS

01、基本语法

01-01、定义变量&常量

var 定义的变量可以修改；const 定义的变量不可以修改，且必须初始化；let可定义一个块级作用域的本地变量。

<script>
    var name;
	var name1 = "hello";
    //有空格，加分号

	//变量定义 不推荐，有歧义
	var age,sex;
	
	//常量定义
	var PI = Math.PI;//(es5)
	const PI = Math.PI;// 常量必须要赋值，且不能更改

	//变量穿透
	for(var i = 0;i<5;i++){
        console.log(i);
    }
	console.log(1)//5 外面的i可以调用局部的i  这个是不对的。因此在ES6中有 let
	
	
	

</script>

01-02 严格模式和非严格模式

默认为非严格模式

<script>
    //"use strict " //严格模式
	x = 100;
	
	function test(){
        y = 100;
        console.log(y)
    }
	test() // 100 
	console.log(y) //在非严格模式下 100 而在严格模式下 报错 y 没有定义
</script>

01-03注释

//行注释 ctrl + /
/*
多行注释 
*/

02、JS的数据类型

值类型（基本数据类型或原类型）：Srting(字符串)，Number(数字)，Boblean(布尔)，Undefined(未定义)，Symbol(ES6).
引用数据类型：Object(对象)

02-01、原始数据类型

02-02、引用数据类型

对象定义时，包含属性和值（key:value）
对象的属性是无序列表，一定是字符串类型string.
如果一个属性的值是反函数，就称之为方法。
对象的值，可以是任意数据类型。

创建对象

    <script>
      //直接定义
      var person = {};

      //使用es6方式定义
      var person2 = Object.create(null); // 括号里一定不能写空的 会报错

      //复制
      var person3 = Object.create({});

      //赋初始值
      var person4 = { 
          name: "MJ", 
          age: 25 
        };

      // name age 都是字符串类型
      var person5 = { 
          "name": "MJ", 
          "age": 25 
        };  

      console.log(person);
      console.log(person2);
      console.log(person3);
    </script>

添加删除属性

    <script>
	      //赋初始值
      var person4 = { 
          name: "MJ", 
          age: 25 
        };
        
       //添加属性和删除属性
       person4.address = "南京"; 

       //打印属性和执行方法
       console.log(person4.name)
       console.log(person4.address)

       //删除属性
       delete person.age
 


    </script>

属性探测

    <script>
        var person = {
            name : "MF",
            age : 20,

        }; // ==== extends Object 下面会继承Object 默认  ---内建方法

        //检测一个属性是否不是属于对象,会存在falsy问题
        // undefinde  
        if(person.address){
            console.log("属于")
        } 

        //2 in
        console.log("name" in person);
        console.log("addres" in person);
        console.log("hasOwnProperty" in person);
        console.log("toString" in person);

        console.log(person)

        //3 hasOwnProperty 只能判别属于person 自己的。
        console.log(person.hasOwnProperty("name"));
        console.log(person.hasOwnProperty("age"));
        console.log(person.hasOwnProperty("address"));

    </script>

对象循环

    <script>
        var person = {
            name:"mJ",
            age : 20,
            address:"南京",
            sayHello:function(){
                console.log(this.name);
            },
        };

        //1. for in
        for(key in person){
            console.log(key,person[key]);
        };

        //2.es6  for of   循环对象
        for(var key in Object.keys(person)){
            console.log(key);
        };

        	//循环key
        for(var key of Object.keys(person)){
            console.log(key);
        }; //name age,address,sayHello
		

        	//循环value
        for(var value of Object.values(person)){
            console.log(value);
        };
    </script>

引用数据类型关于拷贝问题

对象取值[]和.场景的差异

[ ]和 . 都可以对象取值，但[ ] 可用于动态对象取值

    <script>
        var person1 = {name:"MJ"};
        person.age = 20;
        console.log(person.name);
        console.log(person.age);

        var person2 = {name:"MJ"};
        person2["age"] = 20;
        console.log(person2["name"]);
        console.log(person2["age"]);

        var person3 = {
            name:"mJ",
            age : 20,
            address:"南京",
            sayHello:function(){
                console.log(this.name);
            },
        };

        for(key in person3){
            console.log(key,person3[key]);
        };
    </script>

对象的key为啥是string

    <script>

        var num = 1
        var person1 = {name:"MJ"};
        person1["age"] = 20;

        person1[num] = 100;
    
        for(var key in person1){
            console.log(key.valueOf())
        }

        //底层调用toString

         


    </script>

02-03、鉴别数据类型 typeof

数据类型不匹配时

<script>
    var num1 = 100;
	var flag = true;
	var arr = [];
	var obj = {};
	var str = "MJ";
	
	console.log(typeof num1);
	console.log(typeof flag);
	console.log(typeof arr);

</script>

    <script>
        function delay(func,time){
            if(typeof time === "string"){
                time = parseInt(time);
            }
            setTimeout(func,time);
        }

        delay(function(){

        },"1000");
    </script>

02-04、底型

底型是用于指示递归函数结构结尾的特殊值，也可以用于表示值不存在，在一般编程中都以：nil、null、nothing、none等。

但在Javascript中有三个底型：

null
undefined
NaN 主要用于表示不存在的数值

    <script>
        //变量
        var a; //不是null，是undefined

        //函数参数
        function test(x,y){ //默认赋值 x =undefined,y = undefined

        }
        test(110);

        //对象
        var person = {};
        console.log(person.name); // undefined  默认为 

        //没有赋值 就不能判断为 什么类型，故默认为undefined


    </script>

<script>
    var person = null
</script>

03、分支控制&循环

03-01分支控制

单分支

if(条件){
   
   }

双分子

if(){
   
}else{
    
}

多分支结构

if(条件1){
    
}else if{
    
}else{
    
}

多条件判断

if(){
   
}
if(){
   
}
if(){
   
}

switch语句

switch(变量){
        case 值1：
        	语句1;
        	break;
        case 值2：
        	语句2;
        	break;        
        case 值3：
        	语句3;
        	break;
        ...
    default:
        
}

03-02循环结构

while

do while

for

循环控制

break

直接跳出当前循环体

continue（插队的出去）

跳出当前的一次

return

停止函数·

04、函数

04-01、函数定义和调用

在JavaScript中定义函数有两种方式：

函数声明，以function关键字开头，后面跟着函数名字，函数的内容放在大括号里
函数表达式，function关键字词不需要加上函数的名字，这种函数称为匿名函数，因为函数本身没有名字，取而代之的函数表达式通常被另一个变量或者属性引用。

01、函数声明

以function关键字开头，后面跟着函数名字，函数的内容放在大括号里：

<script>
    function add1(num1,num2){
    	return num1+num2; 
}
</script>

02、函数表达式

结尾一定要加分号

<script>
	var add2 = function(num1,num2){
        return num1+num2;
    }; //结尾一定要加分号
</script>

03、函数的执行

<script>
	var r1 = add1(10,10);
	var r2 = add2(20,20);
</script>

04、函数的返回值

return ：函数里的东西可通过return返回出来，在外部接收

<script>
    function add(num1,num2){
    	return num1+num2; 
}
</script>

05、函数声明与函数表达式的区别

<script>
   
	var r1 = add1(10,10);
	var r2 = add2(20,20);

    function add(num1,num2){
    	return num1+num2; 
}


</script>

可行的

<script>
   
	var r1 = add1(10,10);
	var r2 = add2(20,20);

	var add2 = function(num1,num2){
        return num1+num2;
    };


</script>

报错

在用函数表达式时，函数的执行要放在其下面

04-02、函数就是值

函数当成变量赋值

        //01，函数当成变量赋值
        function sey(){
            console.log("Hello!");

        }
        sey();

        var sey2 = sey;
        sey2();

        //相当于
        var oje1 = {name:"hailan"};
        var obj2 = oje1;

函数当成参数传递

        var arr = [19,39,28,9,-92];
        arr.sort(function(a,b){
            return b-a;
        })
        console.log(arr);

04-03、参数

参数命名

function add(num1,num2){
    return num1+num2;
}
add(10,29)

如果在业务中能确定参数和个数，最好的方式一定使用具体名的方式。js是一种不严格的参数传递方式。

04-04、函数重载

重载：在一个类或者域下，具有相同的方法名和不同的参数列表类型

//固定参数
function sum(num1,num3 ){
    return num1-num2;
}

因num1和num2没有强制定义数据类型，就没有重载。js中代码执行：

sum(); //num1=undefined num2= undefined  NaN
sum(10);// num1=10 num2=undefined
sum(19,89);//num1=19 num2=89
sun(10,10,10);//

把参数放入到argunments列表中

底层 arguments---参数列表---动态参数---类数组

需求：参数可变，不是固定的无论传多少个参数，都能接收到

        function sum2(){
            var args = arguments;
            var result = 0;
            console.log(args,Array.isArray(args))
            for(var i = 0;i<args.length;i++){
                result += args[i]
            }
            return result;
        }
        console.log(sum2(1,2,3));
        console.log(sum2(1,2,3,6,7,8));

输出

Arguments { 0: 1, 1: 2, 2: 3, … }false 
6
Arguments { 0: 1, 1: 2, 2: 3, 3: 6, 4: 7, 5: 8, … }false 
27

arguments不是数组，但有数组的能力

在es6中可以有：

function sum2(...args){
       var result = 0;
       for(var i = 0;i<args.length;i++){
             result += args[i]
       	}
       return result;
  }

05、常用对象API

05-01、数组

数组:有一连续的数据类型构成的序列，可以装任何数据类型。

//定义数组
var arr = [];
var arr = new Array();//底层

//数组的初始化
var arr1  = [1,4,5,6];
var arr2  = ["月白"];
var arr3 = [{name:"蓝月"},{age:20}]

//数组的获取 --下标 从0开始
arr1[1]//4
arr3[0]
console.log(typeof arr);//object
console.log(Array.isArray(arr))//true

//修改
arr1[1]=5;

//数组的长度
arr2.length

//数组的循环
for(let i = 0;i<arr3.length;i++){
    console.log(arr3[i]);
}

for(var value of arr3 ){
    console.log(value);
}

常见API

标题	描述
push	添加元素（往数组的右边追加元素）改变数组长度
unshift	添加元素（往数组的左边追加元素）改变数组长度
concat	两个数组拼接，改变数组长度
filter	数组过滤，不改变数组长度
splice	替换，删除数组的元素，改变数组长度
pop	弹（tan）出第一个元素，改变数组长度
shift	弹出最后一个元素，改变数组长度
sort	数组排序，不改变数组长度
Arrays.isArray	静态方法，判断是否是数组

05-02、Date

创建时间

时间API

修改时间

日期格式化

05-03、JSON

JSON字符串（string）转对象（object/Array）
对象object/Array）转JSON字符串（string）

对象与json

     <script>
         //定义对象
         var user = {
             username:"海澜",
             age:20,

         };
         //对象转JSON-string
         var userJsonStr = JSON.stringify(user);
         console.log(userJsonStr);
         console.log(typeof userJsonStr);

         //JSON-string转对象
         var userobj = JSON.parse(userJsonStr);
         console.log(userobj);
         console.log(typeof userobj);
     </script>

输出

{"username":"海澜","age":20}
 string
{username: '海澜', age: 20}
object

06、BOM&DOM

BOM

1、浏览器

2、window

alter()
window.confirm() //确认框

3、navigator

4、screen

5、location

6、document

7、history

8、完整代码

9、定时任务

DOM

07、Ajax

<body>
    <div id="myDiv">
        <h2>
            AJAX
        </h2>
    </div>

    
        <button type="button" onclick="loadData()">加载</button>
</body>
</html>
<script>
    function loadData(){
        //1，创建异步请求对象
        var xmlhttp = null;
        // var xmlhttp = new XMLHttpRequest();
        
        if(window.XMLHttpRequest){ //判断支不支持 如果支持 返回一个对象
            //浏览器内建 XMLHttpRequest对象
            xmlhttp = new XMLHttpRequest();

        } else{
            //兼容ie5 ie6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        };

        //2,监听请求的状态
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status ==200){
                console.log(xmlhttp);
                document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
            }
        };

        //3 设置异步请求的方式地址
        xmlhttp.open("GET","/mock/data.json",true);
        //4 发送异步请求
        xmlhttp.send();
    }
</script>

关于fasly

fasly值（虚值)在Boolean上下文中认定为false值

值	备注
false	false关键字
0	数值零
-0	数值负零
0n	当BigInt作为布尔值使用时，遵从其作为数值的规则，0n是falsy值。
"",''	这是一个空字符串（字符串的长度为零），JavaScript中的字符串可用双引号""，单引号'',或模板字面量``定义。
null	nul
undefined	undefined
NaN	NaN

    <script>
        //falsy: 0，"" ，undefied,null,false,NaN
        var flag = 0;
        if(!flag){
            console.log("OK!");
        };

        var username;
        if(!username){ // 校验 有值就是true，无值就是 null、undefied、"" ----false    小心0   判断不要做任何类型的转换，转换在最后
            alert("请输入用户名")
            
        }

    </script>

posted @ 2023-02-25 13:37 千里云与月阅读(48) 评论(0) 收藏举报

刷新页面返回顶部

universe-mg