美文网首页
Day26 - js基础语法

Day26 - js基础语法

作者: 莫名ypc | 来源:发表于2018-11-02 19:15 被阅读0次

1 js基础语法

1.单行注释

/*多行注释
多行注释
*/

2.标识符

标识符就是用来命名的(给变量、函数、对象命名)
js中要求标识符是由字母、数字、下划线和$组成的,数字不能开头
js中大小写敏感

console.log():在控制台打印括号中的内容

3.常用的数据类型

数字类型(Number)、布尔(Boolean)、字符串(String)
数组(array)、对象(Object)、函数(function)
typeof(数据):获取数据类型

数字类型(Number):包含所有的数字(整数和小数),支持科学计数法,不支持复数

布尔(Boolean):true和false

字符串(String):用双引号或者单引号括起来的

数组(Array):相当于python中的列表

对象(Object):相当于python中对象和字典的结合

函数(Function)

typeof(数据):虎丘数据类型

var 变量名 = new 类型名(数据):将数据转换成指定的类型

常用的特殊值:undefined,null(一般用来清空变量)

2 变量

语法:
var 变量名
变量名 = 值

说明:
var :是js的关键字,声明变量的时候用。var可以省略,省略的时候变量名后面必须赋值
不省略的时候变量名后可以赋值,也可以不赋值,不赋值的时候默认值是undefined

变量名:标识符,不能是关键字。驼峰式命名规范

3 运算符

js中支持 数学运算符、比较运算符、逻辑运算符、赋值运算符、位运算符

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

js中不支持整除

2.比较运算符:>, <, ==, !=, >=, <=, ===, !==

比较返回的结果都是布尔值
==(相等):判断值是否相等
===(完全相等):判断值和类型是是否相等

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

运算规则和python中的and、or、not一样

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

5.位运算符:&、|、^、~ 、 >>、<<

6.复合运算:数学、比较、逻辑、赋值

<script type="text/javascript">
    console.log(5==5)
    console.log(5=='5')
    console.log(5===5)
    console.log(5==='5')
</script>

4 分支结构

js中的分支结构有两个,分别是if和switch语句

1.if语句
结构:
if(条件语句){
代码块1
}else if(条件语句){
代码块2
}else{
代码块3
}

2.switch语句

switch(变量/表达式){
case 值1:{
代码段1
}
case 值2:{
代码段2
}
case 值3:{
代码段3
}
default:{
代码段4
}
}

<script type="text/javascript">
    var num
    num = 3
    switch(num){
        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('erro')
    }
    
    var score
    switch(score){
        case 0:
            console.log('不及格')
            break
        case 1:
        case 2:
        case 3:
            console.log('及格')
            break
        case 4:
        case 5:
            console.log('优秀')
            break
        default:
            console.log('输入有误')
        
    }
    
</script>

5 循环结构

js中的循环有for循环和while循环

1.for循环

a.for循环
for-in:和python的for循环的执行过程一样
for(变量 in 序列){
循环体
}
注意:取出来的是元素的下标或者key(属性名)
序列可以是字符串、数组和对象

b.C的for循环结构:
for(表达式1;表达式2;表达式3){
循环体
}

2.while循环

1.while循环:和python的while循环一样
while(条件语句){
循环体
}

先判断,后执行

2.do-while循环
do{
循环体
}while(条件语句)

执行过程:先执行一次再判断

3.break和continue

和python一样

<script type="text/javascript">
    str1 = 'abc'
    for(x in str1){
        console.log(str1[x])
    }
    
    arr = [10, 20, 30]
    for(x in arr){
        console.log(x, arr[x])
    }
    
    obj1 = {name:'xiaoming', age:'20'}
    for(x in obj1){
        console.log(x, obj1[x])
    }
</script>

6 函数

函数分为声明和调用,声明的时候不会执行函数体,只有调用才会执行函数体

1.函数的声明

a.和python相同的声明方式
function 函数名(参数列表){
函数体
return 返回值
}

说明:function是声明函数的关键字
函数名:驼峰式命名,见名知义
参数列表:参数如果设置默认值,相当于设置默认值undefined

b.以声明变量的形式声明函数
函数名 = function(参数列表){
函数体
return 返回值
}

2.函数的调用

函数名(实参列表)

调用的时候,保证每个参数都有值
只能通过位置参数传参
js中不支持不定长参数
返回值:没有return返回值是undefined

<script type="text/javascript">
    
    function sum(num1, num2){
        return num1 + num2
    }
    
    console.log(sum(1, 2))
    
    mul = function(num1, num2){
        return num1 * num2
    }
    
    console.log(mul(2, 3))
    
</script>

7 数据类型

1.字符串:由单引号或者双引号括起来的
a.转义字符:和python一样
b.字符串长度:字符串.length
c.获取单个字符:字符串[下标]
注意:下标取值范围0~长度-1;超出范围取到的是undefined
js中没有切片语法
d.相关运算
+ - 将两个字符串拼接在一起产生一个新的字符串
(注意如果是一个字符串加上其他的数据类型,会先将其他数据类型转换成字符串再相加)
比较运算(>,<,==,!=,===,!==)
>,<:和python一样,比较字符编码值的大小
e.相关方法
match(正则表达式):根据正则表达式匹配结果
正则表达式写在/ /之间

<script type="text/javascript">
    str1 = 'dg26ff656jkjasn545mnxcnvija'
    re = str1.match(/\d+/)
    console.log(re)
    
    
</script>

8 数组

数组就是python中的列表

1.数组是有序的,可变的,里面的元素可以是任意类型的数据

2.增删改查

a.查(获取数组中的元素)
数组[下标]
数组.slice(开始下标, 个数):切片
b.增(添加元素)
数组.push():将元素添加到数组的最后
c.删(删除元素)
数组.pop():将数组的最后元素删除
数组.splice(开始下标, 指定个数):删除
d.改(修改元素)
数组[下标] = 新值:修改指定下标的元素
数组.splice(开始下标,个数,多个其他参数):用其他参数替换开始下标开始后的指定个数的元素

<script type="text/javascript">
    arr1 = [1, 2, 'abc']
    console.log(arr1[2])
    
    arr1.push('hello')
    console.log(arr1)
    
    arr2 = [1, 2, 'abc']
    arr2.pop()
    console.log(arr2)
</script>

9 对象

js中没有python的类,只有对象和构造方法

1.对象的字面量

对象名 = {属性名:属性值,属性名2:属性值2...}

2.使用对象属性

对象[属性名]
对象.属性

3.构造方法

function 类名(参数列表){
this.属性1 = 属性值1
this.属性1 = 属性值1
...
return this
}
这里的this类似python中的self,表示当前对象

<script type="text/javascript">
    p1 = {
        name:'xiaoming',
        age:20,
        tel:'1548555511',
        eat:function(){
            console.log('吃饭')
        }
    }
    
    console.log(p1.name)
    
    function Person(name, age){
        this.name = name
        this.age = age
        this.sex = '男'
        this.tel = ''
        
        this.eat = function(food){
            console.log(this.name + ' eat ' + food)
        }
        
        return this
    }
    
    p2 = Person('xiaoming', 20)
    p2.tel = '1545225634'
    p2.eat('fruit')
    
    function Dog(color, age, kind){
        this.color = color
        this.age = age
        this.kind = kind
        
        this.eat = function(){
            console.log('eat')
        }
        
        this.bark = function(){
            console.log('wangwang')
        }
        
        return this
    }
    
    dog1 = Dog('red', 2)
    dog1.eat()
    console.log(dog1.color)
    
    dog2 = Dog('yellow', 3)
    dog2.bark()
    dog2.kind = 'Huskie'
    console.log(dog2.kind)
</script>

相关文章

  • Day26 - js基础语法

    1 js基础语法 1.单行注释 /*多行注释多行注释*/ 2.标识符 标识符就是用来命名的(给变量、函数、对象命名...

  • JS基础和WebAPIs的关联性

    学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...

  • 4/07day28_js基础

    day28_js基础 回顾 JS基础语法 JS运算符 JS流程控制语句 条件语句 JS的条件语句和Java语法基本...

  • -----Web APIs-----

    JS学习ECMAScript基础语法是为后面做铺垫,Web APIs才是JS的应用,大量使用JS基础语法做交互效果...

  • React-Native 随笔

    学习基础: js的基础知识, rect.js基础 JSX语法基础 FlexBox布局 安装 安装node.js下载...

  • web前端 -- Day23 js高级

    js基础 JavaScript简称:JS JS分三个部分: ECMAScript标准---基础的语法 DOM D...

  • 022 JS操作

    JS基础操作 一、分支结构 1、if语句 if 基础语法 if 复杂语法 if 嵌套 2、switch语句 二、循...

  • Dom

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • DOM

    JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • JS基础操作

    JS基础操作 [TOC] 一、分支结构 1、if语句 if 基础语法 >>>阅读全文

网友评论

      本文标题:Day26 - js基础语法

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