美文网首页
2018-08-18 day05 js基础

2018-08-18 day05 js基础

作者: Kris_Shin | 来源:发表于2018-08-18 10:02 被阅读0次

    JS基础语法

    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'};
//console.log(dict.a, dict['b']);

    6.标识符

    使用标识符来命名

    • a.由字母、数字、_和$组成，数字不能开头
        var s8uu_$;
    • b.不能关键字
        //var for
    • c.大小写敏感，y和Y不一样
    • d.规范:见名知意

    变量声明

    • js声明变量保存数据

    1.语法

    var 变量名
var 变量名=初值
说明 var是关键字:
    变量名:标识符,不能随意使用_或者$开头;驼峰式命名规则
    • 函数没有返回值时 函数返回的是undefined字符串只支持+操作,与任何数据类型+操作后面类型会自动转换成字符串

    运算符

    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) // 11, 11

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

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基本一样。可以通过括号来改变运算顺序

    分支结构

    • 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('其他情况')
    
}

    循环结构

    • 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一样
    • 执行过程:先判断条件语句是否为true,如果是,则执行函数体,执行完之后再次判断条件是否为true,直到条件为false为止
    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一样)

    • break:跳出当前循环
    • continue:结束本次循环,执行下次循环

    函数

    1.函数的声明

    • function 函数名(参数列表){函数体}

    • a.function - 关键字

    • b.函数名 - 驼峰式；见名知义

    • c.参数：参数可以有默认值，有默认值的参数要写在后面。调用函数传参的时候，是按实参的位置来传参。

    保证每个参数都有值

    • d.函数体: 实现函数的功能。只有在调用的时候才执行

    function sum1(num2, num1=1){
    console.log('求两个数的和')
    return num1 + num2
}

console.log(sum1(10,20))
console.log(sum1(10))
//console.log(9/0)

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

    2.函数的调用

    • 函数名(实参列表)
    • 调用过程和python一样
    1.回到函数声明为止
2.传参
3.执行函数体
4.返回结果
5.返回函数调用位置

    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不支持

    数据类型

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

    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:'YuTing', 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))

    相关文章

      网友评论

          本文标题：2018-08-18 day05 js基础

          本文链接：https://www.haomeiwen.com/subject/zanxiftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2018-08-18 day05 js基础|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！