javascript学习-CSDN博客

本文链接：https://blog.csdn.net/shan_zhi_jun/article/details/78362893

javaScript

1、javaScript中任何事物都是对象

2、‘\==’与‘===’的区别：

‘==’只判断数值是否相同；
‘===’判断数值同时判断类型是否相同;
var myNum1=3;
var myNum2=4;
var myNum3='3';
console.log(myNum1==myNum2);//false
console.log(myNum1==myNum3);//true
console.log(myNum1===myNum3);//false

3、‘!=’与‘!==’的区别:

‘!=’只判断数值是否相同；
‘!==’判断数值同时判断类型是否相同；
 var myNum1=3;
 var myNum2=4;
 var myNum3='3';
 console.log(myNum1!=myNum2);//true
 console.log(myNum1!=myNum3);//false
 console.log(myNum1!==myNum3);//true

4、’+’的特性：

两个数值类型相加，则得到相加后的结果；一个数值类型与一个字符类型进行'+'运算得到的结果为：将数值类型转为字符类型进行拼接。两个字符类型进行'+'运算得到的结果为两个字符类型拼接的结果。
var myNum1=3;
var myNum2=4;
var myNum3='3';
console.log(myNum1+myNum2);//7
console.log(myNum2+myNum3);//43
console.log(myNum3+myNum3);//33

5、点击事件定义

var img=document.querySelector('img');
img.onclick=function(){
 var imgSrc=img.getAttribute('src');
 if(imgSrc==='01.png'){
     img.setAttribute('src','02.png');
 }else{
      img.setAttribute('src','01.png');
 }
}

6、标签属性的设置和获取

html文件中：
<img src='01.png'/>

js文件中：
var imgSrc=img.getAttribute('src');
if(imgSrc==='01.png'){
     img.setAttribute('src','02.png');
}else{
      img.setAttribute('src','01.png');
}

7、数据类型（data-type）

Number
Math.sin(value)正弦
Math.cos(value) 余弦
parseInt(value) 转整型
parseFloat(value) 转浮点型
Infinity 正无穷
-Infinity 负无穷
NaN 不是数值
isNaN(value) 是否为数值类型
isFinity(value) 是否为无穷
String
字符串第i个位置的字符:“hello”.charAt(i);
字符串长度：”hello”.length;
字符串替换：”hello”.replace(‘hello’,”aa”);
字符串变为大写：”hello”.toUpperCase();
boolean
symbol
object
function
array
date
regExp
null
undefined
we declare a variable without assigning a value to it.

8、variables（变量）

let：声明变量
var：声明变量
const：声明常量

let与var的异同：
①作用范围不同
let的作用范围：
//myLetVariable is not visible out here

        for( let myLetVariable = 0; myLetVariable < 5; myLetVariable++ ) {
            //myLetVariable is only visible in here
        }

        //myLetVariable is *not* visible out here

        var的作用范围：
        //myVarVariable *is* visible out here 

          for( var myVarVariable = 0; myVarVariable < 5; myVarVariable++ ) { 
             //myVarVariable is visible to the whole function 
          } 

          //myVarVariable *is* visible out here
    ②在function中声明的变量只能作用在该function中。

9、control structure(控制结构)

(1)if-else
    var name = "kittens";
    if (name == "puppies") {
      name += "!";
    } else if (name == "kittens") {
      name += "!!";
    } else {
      name = "!" + name;
    }
    name == "kittens!!"
(2)while
(3)do-while
(4)for
(5)for-of ：用于取到数组中的值，不能用于取得对象中的属性
    for(let value of array) {
      // do something with value
    }
    例如：
        var aa=[1,2,3,4,5,6,8];
        for(let value of aa){//同样可以使用var来声明变量value
            console.log("let of log"+value);
        }
        输出结果：
            let of log1
            let of log2
            let of log3
            let of log4
            let of log5
            let of log6
            let of log8
        总结：for-of 方式是对aa进行遍历将aa中的值依次赋给value，并使用value
(6)for-in：用于取到对象中的属性，array是一个对象，其属性为下标
        for(let property in object) {
          // do something with object property
        }
        例如：
            var aa=[1,2,3,4,5,6,8];
            for(let value in aa){
                console.log("let in log"+aa[value]);
            }
             输出结果：
                let in log1
                let in log2
                let in log3
                let in log4
                let in log5
                let in log6
                let in log8
            总结：for-of 方式是对aa进行遍历将aa的下标值依次赋给value，并使用value
            function Person(name,age){
                    this.name=name;
                    this.age=age;
                }
                var ff=new Person("ff",12);

                for(let a in ff){
                    console.log(a);//输出属性名称
                   // console.log(ff[a]);//输出对象中属性的值
                }
                输出结果：
                    name
                    age

(7)&&（and）

(8)||（or）
(9) 三目运算
    条件 ? value1：value2
(10)swich-case
     case:的值可以为字符串和数值类型
        switch(action) {
          case 'draw':
            drawIt();
            break;
          case 'eat':
            eatIt();
            break;
          default:
            doNothing();
        }

10、function

function定义的方法中传递参数，我们在使用的时候可以不传递参数，或者传递的参数个数大于需要的个数，这样方法同样可以使用。
    function add(x,y){
        var a=1;
        var b=2;
        return x+y;
    }
    console.log(add());//undefined
    console.log(add("s",2));//s2
    console.log(add("s",2,3));//s2
对于function定义的方法没有参数的，我们同样可以传递参数但是通过arguments来获取传递的参数
        function addAll(){
            var total=0;
            for(let i=0;i<arguments.length;i++){
                total+=arguments[i];
            }
            return total;
        }
        console.log(addAll(1,2));//3
        console.log(addAll(1,2,3));//6
        console.log(addAll(1,2,3,4));//10
function方法中的参数为不定长参数：
            function avg(...args) {
                  var sum = 0;
                  for (let value of args) {
                    sum += value;
                  }
                  return sum / args.length;
                }
                avg(2, 3, 4, 5); // 3.5

11、(function foo() {…})();的理解：

(function foo() {...})();  

    这就等价于：

    var foo = function () {...};
    foo();

12、使用对象的属性

    方式一：
         function People(firstName,lastName){
             this.firstName=firstName;
             this.lastName=lastName;
         }

        function fullName(people){
           console.log(people.firstName+'  '+people.lastName);
        }
        var people=new People("aa","bb");
        fullName(people);

    方式二：
        function People(firstName,lastName){
             this.firstName=firstName;
             this.lastName=lastName;
             this.fullName=function(){
                console.log(this.firstName+'  '+this.lastName);
             };
         }
         var people=new People("aa","bb");
         people.fullName();

    方式三：
         function People(firstName,lastName){
            return {
                firstName:firstName,
                lastName:lastName,
                fullName:function(){
                    return this.firstName+'  '+this.lastName;
                }
            }   
         }  
         var people=new People("aa","bb");
         console.log(people.fullName());
    方式四：建议使用

        function People(firstName,lastName){
             this.firstName=firstName;
             this.lastName=lastName;
         }
        People.prototype.fullName=function(){
            return this.firstName+'  '+this.lastName;
        }
         var people=new People("aa1","bb");
         console.log(people.fullName());

13、数值的取整运算

◎Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
◎Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
◎Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；
    ceil()：将小数部分一律向整数部分进位。
        如：

        Math.ceil(12.2)//返回13
        Math.ceil(12.7)//返回13
        Math.ceil(12.0)// 返回12

    floor()：一律舍去，仅保留整数。
        如：

        Math.floor(12.2)// 返回12
        Math.floor(12.7)//返回12
        Math.floor(12.0)//返回12

    round()：进行四舍五入
        如：

        Math.round(12.2)// 返回12
        Math.round(12.7)//返回13
        Math.round(12.0)//返回12