js基础语法总结

基础语法 专栏收录该内容
1 篇文章 0 订阅

一、简介

1、组成
核心(ECMAScript):语言核心部分。
文档对象模型(Document Object Model,DOM):网页文档操作标准。
浏览器对象模型(BOM):客户端和浏览器窗口操作基础。

二、编程语言的组成部分:变量、数据类型、运算符、流程控制、函数、面向对象:c语言 / 面向对象:c#、js、java、py、php。

1、变量

例:var name="jack";

规则:变量由数据、字符串、下划线、美元符组成,不能以数据开头,不能包括标点符号特殊符号、关键字、空格,区分大小写。
2、数据类型
在js里所谓的数据类型,就是解析对输入数据的判断。
数据类型的分类:
**⑴基本数据类型:**字符串 string、数字 number、布尔 Boolean、null、undefined:没有返回值,Symbol是ES6 引入了一种新的原始数据类型,表示独一无二的值。
**(2)复杂数据类型:**对象 object、数组 array 对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

var person={firstname:"John", lastname:"Doe", id:5566};

js的注释
(1)、单行注释:// (2)、多行注释:/* / (3)、/*
*
*/
类型的转换
(1)、隐式转换(自动类型转换):系统自动转换。
在if判断语句里,空字符、0、0.0、false、null、undefined为false。
在这里插入图片描述

var age="23"; var name ="jack"; var str=age+name;
console.log(str);//输出23Jake

**(2)、显示转换(手动转换):**人为的调用函数去转换。 数据<—>字符串
转为数字:
parseInt();把其他的数据类型转化为int类型。
number();转为数字。

var name="jack";
var res=parseInt("name");
console.log(res);//NaN not a number 不是一个数字

parseFloat();转为浮点型。
tostring();转为字符串。

3、运算符
(1)、算术运算符

+ -  * / % ++ --

自增:++

var age =10;
var num=10+ ++age; //加加 20
console.log(num);//21

如果加加在前和加加在后不参与表达式运算,作为一个单独语句的时候是没有区别的,都是加1参与表达式运算时:
加加在前,会先执行自增运算,然后在参与表达式运算。
加加在后,会先参与表达式的运算,然后在进行自增运算。
(2)、赋值运算符
= += -= /= %=

var age=23;
age=age+2; 等价于 age+=2;

(3)、比较运算符
==;等于 =;全等于 ! > < >= <=

var num1="1234";
var unm2=1234;
unm1==num2; // == 比较的是指;===全等于;比较的是值和类型。

(4)、逻辑运算符:运用在流程控制里面
&& || !

var a =1;
var b=2;
var c=3;
var age=3;
var res=age>3? "上学":"不能上学";
console.log(res);
var res= a>b?a>c?a:c:b>c?b:c;
console.log(res);

4、流程控制
程序的三大基本结构:分支结构、顺序结构、循环结构
(1)、if语句

if(判断/条件表达式true/false)
{
//执行语句
}else{
//条件不成立时执行的语句
}

//判断年龄断所在的区间
var age=80; 
 if(age<18){
    console.log("未成年");
}
else if(age>=18&&age<30){
    console.log("青少年")
}
else if(30<=age&&age<45){
    console.log("中年")
}
else if(age>=45){
    console.log("老年");
}

//根据用户输入的成绩判断级别

var score =parseInt(prompt("请输入你的成绩:"));
//console.log(typeof score);
 if(!isNaN(score)){
    if(score >=90){
        console.log("你的成绩A")
    }
    else if(score>80){
        console.log("你的成绩B")
    }   
//……
    else{
     console.log("不及格");
    }
    }
else{
    console.log("输入有误");
}

//根据输入判断平闰年
闰年:能被4整除但不能被100整除,或能被400整除的年份。

year %4==0 && year%100 !=0 || year%400==0;

(2)、switch语句:使用在有精确值的场景,switch能实现的if else if都能实现

var score =parseInt(prompt("请输入成绩"))
switch(score){
case 100: //只能输入具体的值
console.log("满分");
break; //跳出整个循环
default://默认值
console.log("输入有误,请重新输入");
}

(3)、for循环(需要确定循环次数)
for(初始化表达式;判断表达式;自增表达式){
//循环体
}
注:只写判断表达式的话就是死循环,但分号必须写
例:打印1-100之间的所有数

for(var i=1;i<=100;i++){
console.log(i);
}

例:循环嵌套,打印正方形(外层控制行,内侧控制列)

var str="";
for(var i=1;i<=6;i++){
    for(var j=1;j<=6;j++){
        str+="*";}
    str+="\n";    
}
console.log(str);

例如:打印倒三角形,如果打印正三角的话第二层循环改为(var j=1;j<=i;j++)

var str="";
for(var i=1;i<=6;i++){
    for(var j=i;j<=6;j++){
        str+="*";
    }
    str+="\n";
}
console.log(str);

continue:跳出当前循环、使用在if语句
breack:跳出整个循环、switch语句、if语句
continue:
求1-100中不能被7整除的数的和;

var sum=0;
    for(vr i=1;i<=100;i++){
        if(i%7==0){
            continue;
        }
        sum+=i;
    }
    console.log(sum);

breack:求200-300中第一个能被7整除的数

for (var i=200;i<=300;i++){
    if(i%7==0){
        console.log(i);
        break;
    }
}

(4)、while和do while:不知道循环次数时使用
注:能用for做的while就能做

while (循环条件){
    //循环体
}

应用场景:只要循环条件不成立,则循环体一直执行

//do while
do{
    //循环体 
}
while();//循环条件

例题:

//1.while
//验证账号密码输入是否正确
var username=prompt("请输入你的账号");
var userpwd=prompt("请输入你的密码");
while (username!="admin"&&userpwd!="123456")
{
    username=prompt("请输入你的账号");
    userpwd=prompt("请输入你的密码");
}
alert("登录成功");

2、do while

var i=1;
var sum=0;
do {//循环体
    sum+=i;
    i++;
}
while(i<=100);//循环条件
console.log(sum);
//注意:不管条件是否成立都先执行一次循环体。

5、函数
1、提高代码的重用性;
2、提升代码的可维护性;

function printStar(num){
    var str="";
    for(var i=1;i<=num;i++){
        for(var j=1;j<=i;j++){
            str+="*";
        }
        str+="\n";
    }
    console.log(str);
}
printStar(8);
printStar(9);

①函数的定义/语法
a、声明的方式来定义函数,常用
fuction funcname(参数1,参数 2,参数3……){
//函数体,干具体事情的
}

例:

function add(arg1,arg2){
    var res=arg1+arg2;
    return res;//返回值
}
res =add(3,3);
console.log(res);

b、函数的表达式定义函数,常用

var add=function(arg1,arg2){
    var res=arg1+arg2;
    return res;
};
// console.log(add);
var r=add(3,3);
console.log(r);

c、构造函数的方式来定义一个函数、不常用

var add=new Function("arg1",'arg2','return arg1+arg2');//函数体
var res =add(1,2);
console.log(res);

d、Es6里,箭头函数

var add =(arg1,arg2)=>{
    return arg1+arg2;
};
var res=add(1,1);
console.log(res);

②、函数的参数

function foo(a,b=true){
    console.log(a);
    console.log(b);
}
foo(1);
//注意:如果b没传值,则给默认值:undefined。
//传和不传值

//传一组数据过来,个数不确定,把最大的值找出来

//argumens参数不确定时使用
function findMax(){
    var max=arguments[0];//假设arguments[0]的值为最大值
    if(arguments.length<2){
        return;
    }
    for(var i=1,len=arguments.length;i<len;i++){
        if(arguments[i]>max){
            max=arguments[i];
        }
    }
    return max;
}
var res=findMax(1,5,2,8,4);
console.log(res);

③函数的调用(call)
1、作为一个函数调用

function foo(){
    
}
foo();

2、作为对象方法的调用

var obj={
    name:"jack",
    age:23,
    run:function(){
        console.log("ren……");
    }
};
obj.run();

3、作为一个构造方法调用

function Foo (){
    this.name="jack";
    this.age=23;
    this.run=function(){
        console.log("run……");
    }
}
var f =new Foo();
console.log(f.run());

4、作为一个参数传递另一个函数,然后再函数里面调用

var arr=[1,2,5];
function cus_map(func,arr){
    var a=[];
    for (var i=0,len=arr.length;i<=len;i++){
        var r=func(arr[i]);
        a.push(r);
    }
    return a;
}
var res=cus_map(function (arg) {
    return arg+1;
},arr);
console.log(res);

④闭包

function counter(){
    var count=0;
    var f =function(){
        count++;
        return count;
    }
    return f;
}
var res=counter();
console.log(res());
console.log(res());
console.log(res());
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏作者

杨码

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值