javascript

Posted 2021-01-12 echo-up

javascipt

变量的定义:只能以数字字母下划线任意组合，不能以数字开头，不能使用关键字

1. 变量可以在声明时赋值，也可以先声明在赋值
   var x = 3,y=4;
   var n;
2. 数据类型
   • typeof打印数据类型
   • 数字类型 [number] 12,22
   • 布尔类型 [boolean] true,false
   • 字符串类型 [string] ‘xx‘,"ss"
   • 对象类型 [Object] {} null new Object function
   • undefined 声明未赋值或者未声明
3. 数据类型转换
   • Boolean() 转换成布尔值
   • 数字转布尔值 非零为true,零为fasle
   • 字符串转布尔 非空为true,空为false
   • parseInt()转换成整形
   • parseFloat()转换成浮点型
   • toString() String()转为字符串
4. 运算符

 

    1. + - * / %【求余】
    2. 赋值运算符 = += -= *= /= %=
    3. 前置后置运算符 ++ --
        前置运算符先自加一自减一，然后参与其它运算
        后置运算符先参与其它运算，然后自加一自减一
    4. 字符串连接符 + 如果运算的数据含有字符串，那么这个+就是连接符
    5. 关系运算符 > < == === >= <= !=
    6. 逻辑运算符 ! && ||
    7.三元运算符 (表达式)?a:b
    位运算符 &位与 |位或 ~取反 ^异或 <<左位移  >>右位移

5. 流程控制

 

1.
    var x=18;
    if(x>18){
        ....
    }else{
        ....
    }
2. 
    if(x>18){
        ...
    }else if(x=18){
        ...
    }else{
        ...
    }
3. 
    var age = 24
    switch(true){
        case age<18:
            console.log(‘未成年‘);
            break;
        case age>18:
            console.log(‘成年‘)
            break;
        default:
            console.log(‘其它‘)
    }

6. 循环控制

 

for循环
for(var i = 0;i<10;i++){
    document.write(i+‘&nbsp;‘)
}

for(var i=5;i>=0;i--){
    document.write(i+‘&nbsp‘)
}

for(var i=1;i<=3;i++){
    for(var j=1;j<=3;j++){
       document.write(i+j+‘&nbsp‘) 
    }
    document.write(‘<br/>‘)
}

for(var i=1;i<=3;i++){
    for(var j=1;j<=i;j++){
        document.write(i+j+‘&nbsp‘)
    }
    document.write(‘<br/>‘)
}

for(i=1;i<=9;i++){
    for(j=1;j<=i;j++){
        document.write(j+‘*‘+i+‘=‘+i*j+‘	‘)
    }
    document.write(‘<br/>‘)
}


while循环 
var i=0;
while(i<10){
    document.write(i+‘&nbsp‘);
    i+=2
}

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

break 一般用于跳出循环
for(var i=0;i<3;i++){
    for(var j=3;j>=1;j--){
        if(i==2){
            break;
        }
        document.write(j-i);
    }
}

continue 一般用于跳出本次循环
for(var i=1;i<6;i++){
    if(i==3){
        continue;
    }
    document.write(i);
}

return 在函数中用于返回值

7. 函数：代码块

 

function add(a,b){
    return a+b;
}
var result = add(3,4)
document.write(result)

function add(){
    console.log(typeof arguments)
    console.log(arguments.length)
    return arguments[0]+arguments[1]
}
var data = add(2,30)
document.write(data)
if(confirm(‘你确认关闭吗？‘)){
    document.write(‘true‘)
}

求1到100的质数 
function getData(){
    for(var i=2;i<=100;i++){
        bool = false
        for(var j=2;j<i;j++){
            if(i%j==0){
                bool = true
            }
        }
        if(!bool){
            document.write(i+‘&nbsp;‘)
        }
    }
}
getData()

function show(){
    for(var i=1;i<=4;i++){
        for(var k=3;k>=i;k--){
            document.write(‘&nbsp;‘)
        }
        for(var j=1;j<=2*i-1;j++){
            document.write(‘@‘)
        }
        document.write(‘<br/>‘)
    }
    for(var i=1;i<=3;i++){
        for(var k=1;k<=i;k++){
            document.write(‘&nbsp;‘)
        }    
        for(var j=5;j>=2*i-1;j--){
            document.write(‘@‘)
        }
        document.write(‘<br/>‘)
    }
    
}
show()

8. 作用域

 

变量的作用域：变量的可见性，变量的生命期
    局部变量：在函数内部声明，只在函数内可见，函数调用结束后内存会被回收
    全局变量：在函数外部声明，可在全局调用
    function test(){
    var data = 10
    alert(data)
}
test()
alert(data)

作用域链
var data = 10;
function test(){
    data = 5;
}
test()
alert(data)

匿名函数
var fun = function(){
    alert(‘匿名函数‘)
}; 
fun()

var result = (function(datax,datay){
    return datax+datay;
})(3,5)
document.write(result)

闭包
function a(){
    var data = 10;
    return function(){
        alert(data+10)
    }
}
a()()

9. 引用类型

 

引用类型指由多个值构成的对象
什么是对象？客观存在的实体,或主观抽象的概念
对象特点:具有属性和行为或功能

数组：不同数据类型的集合
    var data = new Array(‘a‘,1)
    var data = [‘a‘,12,true]
    console.log(data.length)
    var arr = [
        [‘张三‘,18],
        [‘李四‘,20],
        [‘王五‘,58]
    ]
    console.log(arr)

数组常见属性与方法
    concat 连接两个或多个数组，返回结果
    var xyj = [‘唐僧‘,‘悟空‘]
    var sgyy = [‘曹操‘]
    var data = xyj.concat(sgyy)
    console.log(data)

    join 将数组转为字符串
    var arr = [‘张三‘,‘李四‘]
    console.log(arr.join(‘&‘)) 

    pop 删除数组最后一个元素,并返回
    shift 删除数组第一个元素,并返回
    push 把一个元素压入数组末尾
    unshift 把一个元素压入数组头部
    reverse 将数组元素反转
    sort 对数组的元素进行排序,按字符来排序
    slice 截取数组中的元素,顾头不顾尾
    splice 删除并替换

    var arr = [‘a‘,‘b‘,1]
    console.log(arr.pop())
    console.log(arr.shift())
    arr.push(‘f‘)
    arr.unshift(‘f‘)
    arr.reverse()
    var arr = [1,21,22,3,5]
    function paixu(a,b){
        return a-b;
    }
    arr.sort(paixu)
    console.log(arr.slice(2,4))
    arr.splice(2,3,‘a‘,‘b‘,‘c‘)
    console.log(arr)

    var data = [7,3,2,40,41]
    选择排序
    function sortArr(arr){
        for(var i=0;i<arr.length;i++){
            for(var j=i+1;j<=arr.length;j++){
                if(arr[i]>arr[j]){
                    var temp = arr[i]
                    arr[i] = arr[j]
                    arr[j] = temp
                }
            }
        }
        return arr
    }
    console.log(sortArr(data))

字符串对象
    charAt 返回指定位置的字符
    charCodeAt 返回指定位置的字符的unicode ascii码
    concat 连接字符
    indexof 检索字符串,如果找到返回字符的位置,否则返回-1
    substr(起始下标,字符个数) 从字符中截取一部分字符
    substring(起始下标,结束下标) 从字符串中截取一部分字符 不包含结束下标  
    toUpperCase 全部转换成大写
    toLowerCase 全部转换成小写
    
    var s = String(‘短数据‘);
    var s = ‘hello‘;
    
    console.log(s.charAt(1))
    console.log(s.charCodeAt(2))
    console.log(s.indexOf(‘f‘))
    var start = 0;
    var index;
    while((index=s.indexOf(‘l‘,start))!=-1){
        console.log(index)
        start = index+1
    }
    console.log(s.substr(s.indexOf(‘h‘),3))
    console.log(s.substring(s.indexOf(‘h‘),s.indexOf(‘l‘)+1))

数学对象 Math
    ceil 向上取整
    向下取整
    max 取多个数中的最大值
    min 取多个数中的最小值
    pow(x,y) 返回x的y次幂 
    random() 返回0到1之间的随机数
    round() 四舍五入 

    var num = 12.3
    console.log(Math.ceil(12.3))
    console.log(Math.floor(num))
    console.log(Math.max(1,2,30))
    console.log(Math.min(3,2,30))
    console.log(Math.pow(2,4))
    console.log(Math.floor(Math.random()*10+1))
    console.log(Math.round(num))
    function MeRandom(num,n){
        return Math.round(num*Math.pow(10,n))/Math.pow(10,n)
    }
    console.log(MeRandom(12.345,2))
    
    Date对象
        var date = new Date() //当前时间
        var date = new Date(2018,10,6,19,16,52)
        var date = new Date("Oct 1,2018")
        方法
            toLocaleString() 以本地格式显示
            toUTCString() 以世界时显示

            setFullYear() 设置年份
            setMonth() 设置月份
            setDate() 设置日期
            setDay() 设置星期
            setHours() 设置时间
            setMinutes() 设置分钟
            serSeconds() 设置秒数

            getFullYear()获取年份
            getMonth() 获取月份
            getDate() 获取日期
            getDay() 获取星期
            getHours() 获取时间
            getMinutes() 获取分钟
            gerSeconds() 获取秒数
            getTime() 获取1970到当前时间的秒数

        console.log(date.toLocaleString())
        console.log(date.toUTCString())
        console.log(date.getMonth()+1)
        date.setFullYear(2019)
        console.log(date.getFullYear())
        console.log(date.getTime())
        console.log(date.getDate())
        console.log(date.getDay())


定时器
    setInterval(函数,豪秒数) 以指定毫秒数为周期进行函数的调用
    setInterval(function(){
        var obj = new Date();
        var strData = obj.getFullYear()+‘年‘;
        strData += obj.getMonth()+‘月‘;
        strData += obj.getDate()+‘日‘;
        strData += obj.getHours()+‘时‘;
        strData += obj.getMinutes()+‘分‘;
        strData += obj.getSeconds()+‘秒‘;
        document.getElementById(‘show‘).innerhtml = strData
    },1000)

距离2018年10月8日还剩多少时间
    setInterval(function(){
        var obj1 = new Date(2018,9,8,0,0,0);
        var obj2 = new Date();
        var obj3 = obj1-obj2;
        var day = Math.floor(obj3/1000/60/60/24);
        var hours = Math.floor(obj3/1000/60/60%24);
        var minutes = Math.floor(obj3/1000/60%60);
        var seconds = Math.floor(obj3/1000%60);
        strData = day+‘天‘+hours+‘时‘+minutes+‘分‘+seconds+‘秒‘;
        document.getElementById(‘show‘).innerHTML = strData
    },1000)

10. 自定义引用类型

 

    var dog = new Object();
    dog.name = ‘小黑‘;
    dog.age = 13;
    dog.say = function(){
        return ‘汪汪汪‘
    }    
    console.log(dog.name+dog.say())

函数对象
    函数内对象 arguments 参数对象
    this对象 函数赖以执行的环境

函数的属性
    length 指的是参数的个数
    prototype 函数的原型

函数的方法
    call(对象,参数)
    apply(对象,参数数组)
    用于设置函数在特定的作用域下执行

    var data = 12
    function add(){
        // alert(arguments[0])
        // console.log(this)
        console.log(this == window)
    } 
    add(2)   

    function add(data1,data2,data3){
        return data1+data2+data3;
    }
    alert(add.length)
    alert(add.prototype)

    var age = 10;
    var person = new Object();
    person.age = 30;

    var dog = new Object();
    dog.age = 8

    function getData(color){
        alert(this.age+color);
    }
    getData.call(person) //改变了getData函数的执行环境
    getData.call(person,‘黑色‘) //改变了getData函数的执行环境
    getData.apply(dog,[‘黄色‘]) //改变了getData函数的执行环境


面向对象
    1.New Object或对象字面量
    var 对象 = {属性:属性值,属性:属性值,属性:function(){}}
    缺点：创建多个对象，会产生大量重复代码
    var dog = {
        name:‘小黑‘,
        age:3,
        say:function(){
            return ‘汪汪‘
        }
    } 
    console.log(dog.name+dog.say())

    2.工厂模式
    缺点：对象没法区别，就是不知道对象的类型，都为Object
    instanceof 用来检测对象是否由指定函数所构建
    function 函数名(){
       var obj = new Object();
       obj.属性 = 值,
       .....
       obj.属性 = function(){
    
         }
       return = obj
    } 
    function factory(name,age){
        var dog = new Object();
        dog.name = name;
        dog.age = age;
        dog.say = function(){
            return ‘汪汪‘;
        }
        return dog;
    }
    var dog1 = factory(‘小黄‘,5);
    var dog2 = factory(‘小黑‘,2);
    console.log(dog1.name+dog2.name)
    alert(dog1 instanceof Object)
    alert(dog2 instanceof Object)

    3.构造函数模式
    缺点：每个对象都包含了一个相同的行为方法，相同的行为不共用
    function 函数名(参数){
        this.属性 = 值;
        this.属性 = 值;
        this.属性 = function(){
    
        }
    }
    var 变量 = new 函数名()
    function Dog(name,age){
        this.name = name,
        this.age = age,
        this.say = function(){
            return ‘汪汪‘;
        }
    }
    var dog1 = new Dog(‘小黄‘,5)
    console.log(dog1.name+dog1.say())
    alert(dog1 instanceof Dog)

    4.原型模式
    原型里的属性与方法供所有对象共享
    缺点：所有对象都取得相同的属性值，属性为引用类型时共享不太合适
    function 函数名(){

    }
    函数名.prototype.属性 = 值;
    函数名.prototype.属性 = function(){}
    var dog1 = new 函数名() 
    function Dog(){

    }
    Dog.prototype.name = ‘小花‘,
    Dog.prototype.age = 5,
    Dog.prototype.friends = [‘小黑‘,‘大白‘]
    Dog.prototype.say = function(){
        return ‘汪汪‘;
    }
    var dog1 = new Dog();
    dog1.friends.push(‘糯米‘)
    document.write(dog1.name+‘---‘+dog1.say()) 
    var dog2 = new Dog();
    document.write(dog2.name+‘---‘+dog1.say()) 
    alert(dog1.say == dog2.say)
    alert(dog2.friends)

    5.组合模式(混合模式)
    有oop经验的人，感觉不到封装性
    function Dog(name,age,friends){
        this.name = name;
        this.age = age;
        this.friends = friends;
    }
    Dog.prototype.say = function(){
        return ‘汪汪‘;
    }
    var dog1 = new Dog(‘小黑‘,2,[‘小花‘]);
    var dog2 = new Dog(‘大黑‘,2,[‘大花‘]);
    document.write(dog1.friends)
    document.write(dog2.friends)
    alert(dog1.say==dog2.say)

    6.动态原型模式
    把原型放进构造函数里面进行初始化
    function Dog(name,age,friends){
        this.name = name;
        this.age = age;
        this.friends = friends;
        if(typeof this.say!= ‘function‘){
            Dog.prototype.say = function(){
                return ‘汪汪‘;
            }
        }
    }
    var dog1 = new Dog(‘小黑‘,2,[‘小花‘]);
    var dog2 = new Dog(‘大黑‘,2,[‘大花‘]);
    document.write(dog1.friends)
    document.write(dog2.friends)
    alert(dog1.say==dog2.say)

对象继承
    原型链：访问一个对象的属性时，先在基本属性中查找，如果没有，
    再沿着__proto__向上找，这就是原型链
    引用共享
    不能给父构造函数传参数

    原型链继承
    function Animal(){
        this.name = ‘小白‘;
        this.say = function(){
            return ‘千奇百怪‘;
        }
    }

    function Tiger(){}
    Tiger.prototype = new Animal()//把实例对象赋值给Tiger的原型
    var tiger1 = new Tiger()
    document.write(tiger1.name)

    借用构造函数法(也叫对象冒充)
    缺点：原型中的方法不能继承
    function Person(name,age,friends){
        this.name = name;
        this.age = age;
        this.friends = friends;
    }
    
    Person.prototype.say = function(){
        return ‘xxx‘;
    }

    function Worker(job,name,age,friends){
        this.job = job;
        Person.call(this,name,age,friends);
    }

    var p1 = new Worker(‘学生‘,‘小王‘,25,[‘大王‘])
    p1.friends.push(‘刘某‘)
    document.write(p1.name+‘---‘+p1.friends)  
    document.write(‘<hr/>‘)
    var p2 = new Worker(‘老师‘,‘老王‘,60,[‘小李‘])
    document.write(p2.name+‘---‘+p2.friends)  
    document.write(p2.say())  
    
    组合继承
    将原型链与借用构造函数结合
    思路：通过使用原型链实现原型上的方法继承
          借用构造函数实现属性继承
    function Person(name,age,friends){
        this.name = name;
        this.age = age;
        this.friends = friends;
    }
    
    Person.prototype.say = function(){
        return ‘xxx‘;
    }

    function Worker(job,name,age,friends){
        this.job = job;
        Person.call(this,name,age,friends);
    }

    Worker.prototype = new Person()

    var p1 = new Worker(‘学生‘,‘小王‘,25,[‘大王‘])
    p1.friends.push(‘刘某‘)
    document.write(p1.name+‘---‘+p1.friends)  
    document.write(‘<hr/>‘)
    var p2 = new Worker(‘老师‘,‘老王‘,60,[‘小李‘])
    document.write(p2.name+‘---‘+p2.friends)  
    document.write(p2.say())