前端js基础语法

一.认识JS

1.什么是js

js是JavaScript的缩写，是一门专门用来控制前端页面的编程语言（属于脚本语言）
js是web标准中的行为标准 - 主要负责网页中内容的修改

2.js代码写在哪儿

内联js - 将js代码写标签的事件属性中
内部js - 将js代码写在script标签
外部js - 将js代码写在js文件中，然后在html中用script标签导入
注意：同一个script标签只能在导入外部js和写内部js两个功能中选一个

3.js能干什么

a.修改/获取标签内容
b.修改/获取标签属性
c.修改标签样式
d.在网页中插入html代码

4.js怎么写（语法）

大小写敏感
一行语句结束一般不需要分号, 箭头函数之前需要加分号
命名采用驼峰式命名(第一个单词首字母小写,后面其他单词首字母大写)
js中的标识符：由字母、数字、下划线和$组成，数字不能开头

二.变量

1.定义变量

1)语法：
变量名 = 值
var 变量名 = 值
let 变量名 = 值
const 变量名 = 值
2）四种方法的区别
a.前三种方式定义的变量，变量的值可以修改；用const定义的变量的值不能修改
b.不同的作用域
变量名 = 值 - 这儿的变量是全局变量(不管在哪儿定义)
var 变量名 = 值 - 在函数中定义是局部变量，没有定义在函数中就是全局
let 变量名 = 值 - 在{}中定义的是局部变量，没有定义在{}中的是全局的

2.同时定义多个变量

变量名1=变量名2=变量名3=… = 值
var/let/const 变量1=值,变量2=值,变量3=值,…
注意：比较下面的代码。

var a1,b1,c1 = 20
   console.log(a1, b1, c1)    
   // undefined undefined 20
   
   var b1,b2,b3   
   console.log(b1, b2, b3)   
    // undefined undefined undefined
   
   var c1=100, c2=200, c3=300
   console.log(c1, c2, c3)
   // 100  200  300

三.运算

1.数学运算：

+、-、*、/、%、++、–
注：++(自增1)、–(自减1)，++/–放在前面和后面的时候的不同

2.比较运算运算符

例如：>、<、>=、<=，，!=、=、!==
结果都是布尔值
注意: js中的比较运算符，不支持连写表示范围

3.逻辑运算符:

&&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)与python一样。

 console.log(true && true)
    console.log(true && false)
    console.log(false && true)
    console.log(false && false)
    console.log(true || true)
    console.log(true || false)
    console.log(false || true)
    console.log(false || false)
    console.log(!true)

4.赋值运算符:

=、+=、-=、*=、/=、%=

5.三目运算符：?:

表达式?值1:值2 - 判断表达式的结果是否为true，如果是，整个运算表达式的结果是值1否则是值2

注意：不同运算符的优先级和python一样

四.分支结构

1. 1. if分支结构

if(条件语句){
代码块
}

if(条件语句){
满足条件要执行的代码块
}else{
条件不满足要执行的代码块
}

if(条件语句1){
代码块1
}else if(条件语句2){
代码块2
}else if(条件语句3){
代码块3
}
…
else{
代码块N
}

执行过程和应用和python一样

2.switch

• 语法：
  switch(表达式){
  case 值1:{
  代码块1
  }
  case 值2:{
  代码块2
  }
  case 值3:{
  代码块3
  }
  …
  defualt:{
  代码块N
  }

  }

  • 说明：
  1. switch和case、defualt是关键字
  2. case语句后面的{}可以省略
  3. 表达式可以是任何有结果的表达式
  4. 值也必须是有结果的表达式，通常会直接写一个固定的数据
  • 执行过程：
    先计算表达式的值，然后让表达式的值依次和每个case后面的值进行比较，哪个case后面的值和表达式的值相等，
    就将这个case作为入口，依次执行和这个case以及它后面所有的代码块，直接执行完或者遇到break就结束。
    如果没有哪个case后面的值和表达式的值相等，就将defualt作为入口（注意：defualt不是一定要放在最后）

五.循环结构

1.while循环

• 1）while
  while(条件语句){
  循环体
  }
• 2 ) do-while(保证循环至少执行一次)
  do{
  循环体
  }while(条件语句)

2.for循环

• 1 ) for-in
  for(变量 in 序列){
  循环体
  }
  注意：变量取的不是元素而是下标或者key

• 2 ) 标准for
  for(表达式1;表达式2;表达式3){
  循环体
  }

  表达式1
  while(表达式2){
  循环体
  表达式3
  }

执行过程: 先执行表达式1, 然后判断表达式2的结果是否为true，如果为true是执行循环体，执行完循环体再执行表达式3；
再判断表达式2是否为true,为true又执行循环体，执行完循环体再执行表达式3;
以此类推，如果表达式2的结果是false整个循环就结束

3.continue和break

• 和python一样

六 .函数

1.函数的定义

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

注意：

• js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参

• 有默认值的参数可以放在没有默认值参数的前面

function func2(a=10, b, c=20){
       console.log(`a:${a} b:${b} c:${c}`)
   }
   //a可以放在b的前面

2.函数的调用

• 方法：
  函数名(实参列表)
• 注意:
  js中使用关键字参数传参无效, 只能使用位置参数
  调用函数的如果不给没有默认值的参数传参，不会报错，这个参数的值会是undefined

3.arguments

js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参

 function func4(x){
       console.log('x:', x)
       console.log(arguments)
       for(i in arguments){
           console.log('i:', i, arguments[i])
       }
   }
   func4()
   func4(100, 200)
   func4(1, 4, 9, 19, 80)

4.匿名函数

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

函数名 = lambda 参数列表: 返回值

5.箭头函数

(参数列表)=>{函数体}

sum3 = (x,y)=>{
     console.log(`x+y: ${x+y}`)
     return x+y
 }
 sum3(100, 200)