JavaScript细讲

Posted 2022-02-27 史小鹏

JavaScript（二）细讲

目录

• JavaScript（二）细讲
  • 数据类型
  • 数组Array
  • 对象
  • 流程控制
  • Map和Set
  • iterator迭代
  • 函数
    • 定义方式1
    • 定义方式2
    • 匿名函数
    • arguments
    • rest
  • 变量
  • 全局函数和变量
    • 方式1
    • 方式2（建议）
    • 常量
  • 方法
    • 定义方法
    • this
  • 内部对象
    • 标准对象
  • JSON
  • Ajax

数据类型

• 字符串：

  • 正常字符串用单引号或者双引号包裹

  • 注意转义字符\\

    • \\x41 Ascll字符
    • \\u...... Unicode字符

  • \'use strict\';
    let str="abcde"
    str.length//长度
    

  • 截取字符串

    str.substring(1)//从第一个字符串截取到最后一个字符串
    str.substring(1,3)//[1,3)
    

  • 字符串是不可变值

  • 大小写转换

    属性名.toUpperCase()
    属性名.toLowerCase()
    

  • 查找位置：

    属性名.indexOf(字符)
    student.indexOf(\'t\')
    

  • \'use strict\';
    let str="abcde"
    str.length//长度
    

数组Array

• 可以包含任意数据类型

• indexOf通过元素获得下标索引

• slice()截取Array的一部分，返回一个数组，类似于substring

• push()压入尾部，pop()弹出尾部

• unshift()压入头部,shift()弹出头部

• 排序：sort()

  数组名.sort()

• 元素反转：reverse()

• concat(a),在 数组中插入数组a并返回插入后的数组

• 连接：join

  arr=[\'c\',\'b\',\'a\']

  arr.join(-)

  "c-b-a"

• 多维数组

  arr=[[1,2],[0,5],["5","s"]]
  arr[1][1]//5
  

对象

•     var 对象名=
          属性名:属性值,
          属性名:属性值,
          属性名:属性值
      
  

• 对象赋值

• person.age=20
  

• //动态删除属性
  delete person.name
  //添加属性(和添加值)
  person.ss="123"
  

• //in属性值是否存在对象中（父类方法也算）
  \'age\' in person//true
  //判断属性是否在对象中
  person.hasOwnProperty(\'age\')
  

流程控制

• var age=3
  if(age>3)
      alert("1");
  else(age>0)
      alert("2");
  else
      alert("3");
  
  

• while(true)
      alert(3);
  
  for(let i=0;i<5;i++)
      alert(i);
  
  do
      age=age-10;
      alert(age);
  while(age<0);
  

• var age=[1,2,3,4,5,2,4,6]
  for(var num in age)
      if(age.hasOwnProperty(num)) 
          console.log("存在");
          console.log(num);
      
  
  

Map和Set

• var map=new Map([["张三",18],["李四",19],["王五",20]]);
  var name=map.get("李四")//通过key获取value
  map.set("赵六",30);//新增或修改
  map.delete("李四");//删除
  

• Set:无序不重复的集合

• Set可以去重

  var set=new Set([3,1,1,1,1,1]);
  set.add(2);//添加
  set.delete(1);//删除
  console.log(set.has(3));//是否包含某个元素
  

iterator迭代

var a=[3,4,5];
for(var x of a)
  console.log(x);

var map=new Map([["张三",18],["李四",19],["王五",20]]);
for(let x of map)
    console.log(x);//输出所有（包括键和值）

var set=new Set([5,6,7]);
for(let x of set)
    console.log(x);

函数

定义方式1

绝对值函数

 function abs(x)
     if(x>=0)
         return x;
     else
         return -x;
     
 

一旦执行到return代表函数结束

如果没有执行return，函数执行完也会返回结果（返回undefined）

定义方式2

//定义
var abs=function(x)
         if(x>=0)
         return x;
     else
         return -x;
     

匿名函数

• 没有函数名,但是可以把结果赋值给abs（像上面一样），通过abs就可以调用函数

• function(x)
  

• 如果不存在参数，可以手动抛出异常

  var abs=function(x)
      if(typeof x!="number")
          throw \'Not a Number\'
      
      if(x>=0)
          return x;
      else
          return -x;
      
  
  

arguments

代表传递进来的所有参数，是一个数组

rest

获取已经定义的参数之外的所有参数

function aaa(a,b,...rest) 
    console,log("a:"+a);
    console,log("b:"+b);
    console.log(rest)

rest参数只能写在最后面，必须用...标识

变量

var在函数体内声明，在函数体外不可使用

内部函数可以访问外部函数的成员

如果两个函数使用相同的变量名，只要在函数内部，就不冲突

function a1() 
    var x=1;
    x=x+1;

function a2() 
    var x=\'A\';
    x=x+1;

函数查找变量从自身函数开始，由内向外查找

在js里，所有的变量最好统一定义到最前面

全局函数和变量

//全局变量
var x=1;
function f() 
    console.log(x);

f();

alter()这个函数本身也是window变量，也可以被用来赋值

全局变量都绑定在window里面

方式1

将全局变量绑定到其他上面

把自己的代码全部放到自己定义的唯一空间中，降低全局命名冲突

        //全局变量，放到f里面
        var f=;
        f.name=1;
        //全局变量，函数也算
        f.add=function(a,b)
            return a+b;
        

方式2（建议）

使用let定义局部变量，解决局部作用域冲突的问题

常量

ES6之后：

const定义常量（建议）

const PI=3.14

ES6之前：

只有用全部大写字母命名的变量就是常量

方法

定义方法

把函数放在对象的里面，对象只有两个东西：属性和方法

调用方法一定要带括号

        var sxp=
            name:"sxp",
            bitrh:2020,
            //方法
            age:function () 
                var now=new Date().getFullYear();
                return now - this.bitrhh;
            
        
        //属性
        sxp.name
        //调用方法一定要带括号
        sxp.age()

this

在js中，可以控制this的指向

通过apply

//方法
function getAge()
    var now=new Date().getFullYear();
    return now - this.bitrhh;

var sxp=
    name:"sxp",
    bitrh:2020,
    age:getAge()

//将getAge()里面的this定向为sxp上面
getAge.apply(sxp,[]);//对象，参数（因为不用参数所以是[]）
//属性
sxp.name
//调用方法一定要带括号
sxp.age()

内部对象

标准对象

var now =new Date();
now.getFullYear();//获得年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳

JSON

• 一种轻量级数据交换的格式

• 格式：

  • 对象用
  • 数组用[]
  • 所有的键值对都是用key:value

• 转换

  var user=
      name:"sxp",
      age:3,
      sex:"男"
  
  //对象转化为json字符串name:"sxp",age:3,sex:"男"
  var jsonUser=JSON.stringify(user);
  //json转化为对象,参数为json字符串
  var obj=JSON.parse(\'name:"sxp",age:3,sex:"男"\');
  

• JSON和JS区别

  var obj=a:"hello",b:"hellob"//js
  var json="a":"hello","b":"hellob"//json
  

Ajax

• 原生js写法 xhr异步请求
• jQuey封装好的方法$("#name").ajax()
• axios请求