Day5 js基础

01.js基础语法

02.变量的声明

03.运算符

04.分之结构

05.循环结构

06.函数

07.数据类型


01.js基础语法

1. js中的注释

  • //这是单行注释
  • /*
    这个是多行注释
    */

2.语句

  • 一条语句结束需要加分号(现在的js版本也可以不用写)
  • 一行写多条语句必须使用分号隔开

3.js没有缩进问题,用{}表示一个块

4.基本数据类型

Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)-- 列表、Object(对象)--字典、Function(函数)、null、undefined

  • 在控制台中打印括号中的内容,功能和python中的print一样
console.log('hello world');
console.log('你好,python');


5.字面量

  • 数字字面量
89;
100;
10.34;
3e8;

*字符串字面量

'abc';
"abc";
  • 布尔字面量
true;
false;
  • 数组字面量
[1,2,'ban',true];
[];
  • 对象的字面量(对象的key值又是属性,不用加引号)
var dict = {a:'abc', b:'hh'};

6.标识符
使用标识符来命名

a.由字母、数字、_和$组成,数字不能开头
var s8uu_$;

b.不能关键字
var for

c.大小写敏感,y和Y不一样
d.规范:见名知意

02.变量的声明

  • 在js中可以通过声明变量来保存数据
    1.语法
  • var 变量名;
  • var 变量名 = 初值;
  • 说明: var是关键字;
  • 变量名:标识符,不能随意使用_或者$开头;驼峰式命名规则(第一个单词首字母小写,后面每个单词的首字母大写)
//声明变量
var userName;
//给变量赋值
userName = 'Wang';
console.log(userName)

var score = 100
console.log(score)


//同时声明多个变量
var name, age, sex;
var name1='abc', age1 = 18, sex;  

//一个变量可以存储任意类型的值;声明变量的时候,变量没有赋值,默认是undefined
var a = 'abc'
a = 100

a = score

03.运算符

1.数学运算符:+, -, *, /, %, ++, --

  • a._,-,*, %和数学中的求和、求差以及求乘积,取余是一样的
var a = 10+20;
var b = 20 - 10;
var c = 10*20;
var d = 7 % 2
  • b./ 和数学中的除一样
var e = 5/2
console.log(e)
  • c.++,--(单目运算符)

语法: 变量++/变量-- ; ++变量/--变量
++: 自加一
--:自减一

var a1 = 10
var b1 = 10
a1++
++b1
console.log(a1,b1) 

a1--
--b1
console.log(a1, b1)

var c1 = a1++    // ++/--写到后面的时候,先赋值,再自加/自减
var c2 = ++b1    // ++/--写到前面的时候,先自加/自减,再赋值
console.log(c1, c2)


2.比较运算符: >,<,==(相等),!=, >=,<=, ===(完全相等), !==,>==, <==
结果都是布尔值

console.log(10 > 20)  // false
console.log(10<20) 

//==:判断值是否相等
console.log(5==5)   //true
console.log(5=='5')  //true

//===:判断值和类型是否相等
console.log(5===5)  //true
console.log(5==='5')  //false

console.log(5!=5, '5'!=5)  //false,false
console.log(5!==5, '5'!==5) //false,true


3.逻辑运算符:&&(与), ||(或), !(非)

console.log('与:',true && true, true && false)
console.log('或',true || false, false || false) 
console.log('非',!true, !false)  


4.赋值运算符: =, +=, -= , *=, /=, %=

  • 赋值运算符的左边必须是变量
  • 和python的语法一样
var a = 100;
a += 10  // a = a+10
a -= 10
a *= 10
a /= 10
a %= 10
console.log(a)

**5.三目运算符 **

  • a.格式:
  • 条件语句 ?值1 : 值2;
  • b.结果:
  • 判断条件语句的结果是否是true,如果是true,那么表达式的结果就是值1,否则是值2
var b = true ? 10:20;
console.log(b)

//求两个数之间的最大值
var a1 = 80
var a2 = 100
console.log(a1 > a2 ? a1:a2)

6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序

04.分之结构

js中的分之结构有两种:if语句,switch语句
1.if语句

  • a.if(条件语句){满足条件要执行的代码块}
var age = 18
if(age>=18){
   console.log('成年')
}
  • b.if(条件){语句块1}else{语句块2}
if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}
  • c.if - else if - else(相当于python中的if-elif-else)
if(age<18){
    Console.log('未成年')
}else if(age<40){
    console.log('青年')
}else{
    console.log('老年')
}

2.switch语句

 switch(变量){
    case 值1:
        语句1;
        break;
    case 值2:
        语句2;
        break;
    ...
    default:
        语句3;
        break;  
 }

执行过程:使用变量的值依次和后边每个case后面的值进行判断,看是否相等(是否完全相等)。
如果相等就执行那个case后面对应的语句。如果前面每个case后面的值都和变量的值不相等,就执行default后边的语句

var score = 10;
switch(score){
    case 1:
        console.log('F');
        break;
    case 10:
        console.log('A+')
        break;
    case 9:
        console.log('A');
        break;
    default:
        console.log('其他');
        break;      
}
console.log('======')

10分制分数:0-5:不及格,6-7:及格 8-9:良好 10:优秀

score = 9
switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格');
        break;
    case 6:
    case 7:
        console.log('及格');
        break;
    case 8:
    case 9:
        console.log('良好');
        break;   // switch中的break,可以让switch直接结束
    case 10:
        console.log('优秀');
        break;
}

0-6表示星期1到星期日

var week = 0;
switch(week){
    case 0:
        console.log('周一');
        break
    case 1:
        console.log('周二');
        break;
    case 2:
        console.log('周三');
        break;
    case 3:
        console.log('周四');
        break;
    case 4:
        console.log('周五');
        break;
    case 5:
        console.log('周六');
        break;
    case 6:
        console.log('周日');
        break;
    default:
        console.log('其他情况')
    
}

05.循环结构

js中的循环分为for循环和while循环

1.for循环

  • a.for- in (和python中的for循环一样)
  • for(变量 in 数组/对象){函数体}
var arr1 =  [1, 2, 'abc']
//x取的是下标
for(var x in arr1){
    console.log(arr1[x])
}
var obj1 = {name:'张三', age:30}
//key拿到的是属性名
for(var key in obj1){
    console.log(key, obj1[key])
}
var str1 = 'abcdef'
for(var x in str1){
    console.log(x, str1[x])
}
  • b.for(表达式1;表达式2;表达式3){循环体}
    执行过程:
  • 先执行表达式1,然后再判断表达式2的结果是否是true,如果是true就执行循环体;执行完循环体,再执行表达式3;
  • 执行完表达式3,再判断表达式2的结果是否是true,如果是true又执行循环体;执行完循环体,再执行表达式3;依次类推,
  • 直到表达式2的结果是false,循环就结束
//计算1+2+3+...+100
var sum = 0
for (var i = 1; i < 101 ; i++) {
//  console.log(i)
    sum += i
}
console.log(sum)

var sum1 = 0
var i = 0
for (; i < 101; ) {
    sum1 += i
//  i++;
    i += 1
}
console.log(sum1)

2.while循环

  • a.while(条件语句){循环体} -- 和python一样
var sum2 = 0
var i = 1
while(i <= 100){
    sum2 += i;
    i++;
}
console.log(sum2) 
  • b.do-while循环: do{循环体}while(条件语句);

执行过程,先执行循环体,然后判断条件是否成立。如果成立再执行循环体。。。
依次类推,直到条件不成立,循环结束

var sum2 = 0
var i = 1
do{
    sum2 += i;
    i ++;
    
}while(i <= 100);
console.log(sum2) 

3.break和continue(和python一样)

06.函数

1.函数的声明

  • function 函数名(参数列表){函数体}
  • a.function - 关键字
  • b.函数名 - 驼峰式;见名知义
  • c.参数:参数可以有默认值,有默认值的参数要写在后面。调用函数传参的时候,是按实参的位置来传参。保证每个参数都有值
  • d.函数体: 实现函数的功能。只有在调用的时候才执行
unction sum1(num2, num1=1){
    console.log('求两个数的和')
    return num1 + num2
}

console.log(sum1(10,20))
console.log(sum1(10))
//函数没有return的时候,函数的返回值是undefined
function func1(){
    console.log('我是函数1')
}
console.log(func1()) 


2.函数的调用

  • 函数名(实参列表)
  • 调用过程和python一样

3.作用域

  • 全局变量:声明在函数外面的变量(从变量声明到文件结束)
  • 局部变量:声明在函数里面的变量 (从变量声明到函数结束;函数的参数也是局部变量)
//aaa就是全局变量
var aaa = 10

function func2(){
    //bbb就是局部变量
    var bbb = 100
    console.log(bbb, aaa)
    //函数中可以修改全局变量的值
    aaa = 200
    
    //函数中可以声明函数
    function func22(){
        bbb = 1.1
        console.log(bbb)
    }
}

func2()
//console.log(bbb)
console.log(aaa)

//可以将函数作为变量
var a = func2
a()

//个数不定参数,js不支持

07.数据类型

  • 数字、字符串、布尔、列表、对象

1.数字:包含整数和小数(支持科学计数法)

var num1 = 10
var num2 = new Number()
console.log(num2+10)  


2.字符串

  • a.' '和" "括起来的字符集
  • b.转义字符(和python一样)
  • c.字符编码是unicode编码
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'
  • e.获取字符串长度: 字符串.length
console.log(str1.length)
  • f.获取单个字符:字符串[下标]

下标:1.范围是0 ~ 长度-1 2.如果越界,不报错,但是结果是undefined
js中的字符串不能切片

console.log(str1[0])
  • g.运算符

js中字符串只支持+,不支持*
字符串1 + 字符串2 -- 拼接两个字符串
js中字符串可以和其他任何数据进行加操作,其效果都是字符串连接(会将其他数据转换成字符串)

console.log('123'+'abc', 'abc'+100) 
  • h.字符串相关方法(查)
var strstr = 'abc123'
var re = strstr.replace(/\d+/i,'ooo')
console.log(re)


3.对象,构造方法(类)

var obj1 = {name:'Zzk', age:18}
console.log(obj1.name, obj1['name']) 

//声明构造方法
function Person(name='', age=0, sex=''){
    this.name = name
    this.age = age
    this.sex = sex
}

var p1 = new Person()
p1.name = 'mmm'
p1.age = 20
console.log(p1, typeof(p1))
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,132评论 0 13
  • 一、快捷键 ctr+b 执行ctr+/ 单行注释ctr+c ...
    o_8319阅读 5,793评论 2 16
  • 如果足够坦诚 我愿为一颗心拜遍世间神魔 有一天与你相遇,我希望是在冬天 你将把玩无数个盛放的 繁忙的时节 我不在意...
    千秋_阅读 190评论 0 3
  • HB 刚才,对,就是刚才我用自己的手机给自己录一分钟的演讲视频,知道什么感觉吗,算了,难受,不想说。反正我自己立下...
    暖和的猪阅读 1,214评论 0 2
  • 今天早上起来后,你准备开始已经拖延多年的计划,你给自己打气,激励自己,准备走出第一步。 你开始准备享受胜利的果实。...
    雷鸣_a869阅读 167评论 0 0