JavaScript学习

基础篇

抛出异常 : thow '内容';

1. 控制台的使用

F12进入代码审查

  • console : 可以调试JavaScript代码
  • Sources : 查看文件结构 也可以进行断点调试
  • NetWork : 网络请求

2. 基本语法入门

可以不用写分号 严格区分大小写
//定义变量
var name = "张三";

//打印
console.log(naem);

//弹窗
alet(name);

3. 数据类型

数值 文本 图形 音频 视频 ......

获取 变量类型关键字 : typeof

当声明变量类型时用 new

var carname = new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

3.1 number

js中不区分小数整数,统称number

123   //整数
123.123   //浮点数
-999   //负数
NaN   // not a number  不是一个数
Infinity   //表示无限大        

3.2 字符串

'abc'  "abc"

3.3 布尔值

true   false

3.4 数组

数组中可以包含任意的数据类型

var person = new Array("Sam" , "Amy" , "Long");   //预定义数组,在创建时初始化
//或者
var person = new Array();
person[0] = "Sam";
person[1] = "Amy";
person[2]  ="Long";
//或者
var person =["Sam" , "Amy" , "Long"];   //最简洁  也是在创建时初始化
  • person.length属性

    ​ 获取数组长度

  • sort()方法

    ​ 进行数组排序

  • reverse()方法

    ​ 进行数组反转

  • concat()方法

    ​ 数组拼接

  • join()方法

    ​ 打印时使用给定的连接符连接

  • person.indexof()方法

    ​ 通过下标获取元素值

    person.indexof(1)
  • person.slice()方法

    ​ 通过下标截取数组

    person.slice(1)     person.slice(1,3) 
  • 尾部方法

    push() pop()方法
    //push : 添加元素到尾部
    person.push(1)
    person.push("a","b",1)
    //pop : 从尾部删除一个元素
    person.pop()
  • 头部方法

    ​ unshift() shift()方法
    //unshift : 添加元素到头部
    person.unshift("a",'b',1)
    //shift : 删除头部元素
    person.shift()

3.5 对象

对象由花括号分隔 , 对象以键值对的形式 name : value 来定义

所有的键是字符串 值是任意对象

// 例如
<script>
var person = {firstname : "Sam" , lastname : "Oe    " , id : "0001"};

//跨行
var person ={
    firstname : "Sam" , 
    lastname : "Oe    " ,
    id : "0001"      //最后一个不用加符号
}
document.write(person.firstname + "<br>");
document.write(person["lastname"] + "<br>");
</script>
  • 动态删减属性

    delete person.firstname
    //name对象firstname属性就会被删除
  • 动态添加属性

    person.age = 20
    //age属性就会被添加
  • 判断属性是否在对象中

    'age' in person

3.6 null 和 undefinded

  • null : 空
  • undefined : 未定义

3.7 流程控制

条件语句与java大差不差 主要看 for 循环语句

  • 循环

    for (var i=0;i<cars.length;i++)
    { 
        document.write(cars[i] + "<br>");
    }
  • for / in 循环

    var size=[1,2,3,4,5,6,7] //申明一个数组
    
    //for循环
    for(x in size){ 
        //通过这样可以打印下标
        document.write(x);
        //通过这样可以遍历数组元素
        document.write(size[i] + " ");
    }
    
  • for /each

    var age = [1 , 2 , 3 , 4];
    age.foreach(function (value){
            console.log(value);
    })
  • for / of

    ES6新特性
    let iterable = [10, 20, 30];
    for (let value of iterable) {
      console.log(value);   //跟for/in不一样这样直接打印元素
    }
    
    //循环访问map
    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    for (let [key, value] of iterable) {
      console.log(value);
    }
    // 1 2 3
    
    for (let entry of iterable) {
      console.log(entry);
    }
    // [a, 1] [b , 2] [c , 3]
    
    //循环访问Set
    let iterable = new Set([1, 1, 2, 2, 3, 3]);
    
    for (let value of iterable) {
      console.log(value);
    }  //  1  2  3

3.8 Map 和 Set

  • Map

    var map = new Map[["A" , 1] , ["B" , 2] , ["c" , 3]];
    map.set('D' , 4);
    map.delete("A");
  • Set

    无序不重复集合

    var    set = new Set([1 , 2 , 3 , 3 , 2]);
    console.log(set);
    set.add(1);
    set.delete(2);
    console.log(set.has(3));   //判断是否包含3这个元素 返回值为布尔类型

4. 函数

4.1 函数的定义

//方式 一
var age = function(x){
        if(x>=18)
            {
                return 1;
            }
        else{
                return 0;
        }
}
//方式二
function age(x){
        if(x>=18)
            {
                return 1;
            }
        else{
                return 0;
        }
}

4.2 变量的作用域

大差不差的都差不多

var 定义变量是有作用域的

//会报没有定义 , 用闭包可以解决
function ascope()
{
    var a = 1;
    a = a+1;
}
console.log(a);

//函数体嵌套
function ascope(){
    var a = 1;
    function son(){
        var y = a+1;
    }
    var z = y+1;    //这样报 , 因为y是局部变量,提高作用域后才可以
}

局部作用域 let

//使用var定义不会报错
function()
{
    for(var i =0 ; i < 100 ; i++)
        {
            console.log( i );
        }
    console.log( i + 1 );
}
//使用let会报错
function()
{
    for(let i =0 ; i < 100 ; i++)
        {
            console.log( i );
        }
    console.log( i + 1 );
}

4.3 方法

方法就是放在对象里 , 对象里只有两个东西 : 属性 和方法
  • 方法的定义

    // 属性
    person.name;
    person.birth
    
    //方法
    person.age(); 
    
    
    var person  ={
            name : 'Atanycosts' ,
            birth : 2002 ,
            age: function(){
                    var now = new Data().getFullYear();
                    return now - this.birth;
            }
    }
    //上面是法一
    //法二
    function getAge(){
            var now = new Data().getFullYear();
            return now - this.birth;
    }
    var person  ={
            name : "Atanycosts" ,
            birth : 2002 ,
            age: getAge  //这样写也可以
    }
    person.age();  //这样调用
  • apply() 方法

    //apply可以改变this的指向
    getAge.apply(person,[]);   // 指向对象    需要传参可以为空  

5. Date 和 JSON

  • Date

    var now = new Date();
    console.log(now);  //Sat May 07 2022 21:13:29 GMT+0800 (中国标准时间)
    now.getFullYear();
    now.getMonth();
    now.getDate();
    now.getDay();  // 星期几
    now.getTime();   //时间戳(统一)
  • JSON

    在JS中一切皆为对象

    • 对象用 : {}
    • 数组用 : []
    • 键值对用 : key : value
    //对象转JSON
    var person ={
        firstname : "Sam" , 
        lastname : "Oe    " ,
        id : "0001"
    }
    var json =  JSON.stringify(person);   //通过Stringify()方法
    
    //将JSON转化为对象 , 通过parse方法
    var json2 = JSON.parse('{"firstname":"Sam","lastname":"Oe","id":"0001"}');
    

后面在补

最后修改:2022 年 10 月 08 日
如果觉得我的文章对你有用,请随意赞赏