JavaScript基础详细

JavaScript基础详细

注释：// 单行；/* */ 多行

结束符： ；可省略。风格统一

书写位置：

内联

内部：</body>上方

外部：<script>标签不要写内容，被忽略。

输出：

1.文档输出：向body内输出内容；如果输出内容写的是标签，也会被解析成网页元素

document.write('要输出的内容') 

网页：要输出的内容

document.write('<h1>我是标题</h1>')

网页展示：我是标题

2.对话框输出：页面弹出警告对话框

alert('你好!') 网页：你好！（上方弹出）

3.控制台输出：控制台输出语法，程序员调试使用

console.log('控制台打印')

输入：

prompt('请输入你的姓名：')

显示一个对话框，对话框中包含一条文字信息，提示用户输入文字

代码执行顺序

按文档流执行；alert（）和prompt（）会先被执行

定义变量：

let，const，var 变量名

let 不允许再次声明。

//错误
let age = 18
let age = 19
//正确
let age0 = 17,num = 18 //不提倡
age0 = 18
num = 19
let age1 = 18
let age2 = 19

const 声明常量，固定不变，不允许重新赋值

声明时必须赋值

const PI = 3.14
PI = 3.15 //错误

console.log(变量名)

let num = 20
console.log(num)
//控制台打印 20

数组

let arr = [10,20,30,'123','中国']
console.log(arr[0]) //输出10
console.log(arr[3]) //输出123
console.log(arr.length) //计算数组长度，输出5

可存储任意类型的数据

数据类型

基本数据类型

数字型 number （不分整数小数）

字符串类型 string （"",'',``)、（+可以连接两个字符串）

布尔型 boolean （true，false）

未定义型 undefined （只声明未赋值则值为undefined，只有一个值）

空类型 null (null)

console.log(undefined+1) //NaN
console.log(null+1) //1

引用数据类型

对象 object

模板字符串

语法：``（反引号）

document.write(`大家好，我叫${name},今年${age}岁`)

检测数据类型 typeof

1.作为运算符 typeof x

2.作为函数 typeof（x）

类型转换

隐式转换

系统内部自动转换

规则：+ 两边只要有一个字符串，都会把另一个转成字符串

除了+以外的算数运算符，比如 - * / 等都会把数据转为数字类型

显示转换

自己告诉系统转换为什么类型

let str = '123'
console.log(Number(str))//数字123
let num = Number(prompt('输入年龄')) //输入18
//prompt默认是字符串类型
console.log(num) //输出数字18
console.log(parseInt('12px')) //12
console.log(parseInt('12.95px')) //12
console.log(parseFloat('12.55px')) //12.55
console.log(parseInt('a12px'))//错误
console.log(parseFloat('b12.3px')) //错误

运算符

赋值运算符：=、+=、-=、/=、*=、%=

一元运算符：正负号、自增、自减

比较运算符：>、<、>=、<=、==、===、!== 比较结果为boolean类型（尽量不要比较小数，有精度问题）

=赋值，==判断，===全等（数和类型都一样），!==不全等

推荐用===

逻辑运算符：&&，||，！

运算符优先级：（），一元，算数，关系（比较），相等，逻辑，赋值，逗号

语句

分支语句

if语句

单分支

if(true)
    {
        console.log('执行语句')
    }//输出：执行语句
if(0) //除了0其他都为真，负数也是真
    {
        console.log('执行')
    }//没有输出
if(''){
    console('执行')//除了空字符，所有的字符串都为真
}//没有输出

双分支

let num = prompt('请输入数字')
if(num==='123'){
    alert('true')
}
else{
    alert('false')
}

多分支

let num = prompt('请输入数字')
if(num==='1234'){
    alert('true1')
}
else if(num === '123'){
    alert('true2')
}
else{
    alert('false')
}

三元运算符

条件？满足：不满足

一般用来取值

3<5?alert('true'):alert('false')//true
let num=3<5?3:5
console.log(num)//3

switch语句

let num = +prompt('输入数字')
switch(num)
    {
        case 1:
            alert('一')
            break
        case 2:
            alert('二')
            break
        default:
            alert('no')
    }

循环语句

while循环

let i=0
while(i<3){
    document.write(`循环${i}次`)
    i++
}

循环退出

continue退出本次循环，继续下一轮

break退出循环

for循环

for(let i=0;i<3;i++)
    {
        document.write(`第${i}次`)
    }

遍历数组

let arr = ['1','2','3','4']
for(let i=0;i<arr.length;i++)
    {
        document.write(arr[i])
    }

数组

声明

let num=['1','2','3']

操作

let arr = []
arr[0]=0
arr[1]=1
arr[2]=2
//arr['1','2','3']
arr[0]=4                    //修改元素
//arr['4','2','3']
arr.push(5)                 //末尾添加元素,并返回一个值,数组长度
//arr['4','2','3','5']
console.log(arr.push(6))    //5
//arr['4','2','3','5','6']
arr.unshift(7)              //开头添加元素,并返回一个值,数组长度
//arr['7','4','2','3','5','6']
arr.pop()                   //去掉末尾一个元素，并返回一个值,数组长度
//arr['7','4','2','3','5']
arr.shift()                 //去掉开头一个元素，并返回一个值,数组长度
//arr['4','2','3','5']
arr.splice(start,deleteCount)//删除指定元素
//start起始位置：指定修改的开始位置（从零计数）
//deleteCount：表示要移除的数组元素个数。可选的，若省略则默认从指定位置删到最后

函数

//声明
function sayHi(){
    alert('hi')
}
//调用
sayHi()
sayHi()//函数可多次调用，每次调用执行一次

函数传参

更灵活

//声明
function getSum(num=0){         //num赋值0是为了防止用户未给实参
    document.write(num*2)
}                       
//调用
getSum(3)       //6
getSum()        //0

函数返回值

function num(){
    return 1
}
console.log(num()) //1

作用域

局部性，减少名字冲突

全局（script内或js文件内），局部（当前函数内）

 <script>
        let num = 10        //全局
        function Sum(){
            console.log(num)
        }
        Sum()
        function Num(){
            let age=18      //局部
            console.log(age)
        }
        Num()
        console.log(age)//错误
  </script>

变量访问规则

在能够访问到的情况下，先局部，局部没有再全局

匿名函数

函数表达式

 let fn=function(){
            console.log('我是匿名函数');
        }
        fn()    //我是匿名函数
        //匿名函数必须先声明后调用，具名函数调用可以写到任何位置

立即执行函数

避免全局变量污染

(function(){
    let num=10
})();       //此处必须加分号
(function(){
    let num=20
})();
(function(x,y){
    console.log(x+y)
})(1,2);    //3,不用调用
​
(function(){console.log(11)}());    //第二种写法，调用括号写到里面了

逻辑中断

存在于&&和||中

function fn(x,y){
    x=x||0
    y=y||0
    console.log(x+y)
}
fn()        //0
fn(1,2)     //3

转换为布尔型

显示转换

Boolean（内容）

''、0、undefined、null、false、NaN转换为布尔后值都为false，其余均为true

对象

object，无序的数据集合，详细地描述某事物

//声明
let object={}   //方法1（推荐）
let object=new Object()     //方法2
//对象由属性（信息或特征）和方法（功能或行为）组成
let obj={
    uname:'蓝色的海',
    age:18,
    gender:'男',
    'name-qq':'switch'
}//不含方法
​
//对象使用
//查 对象名.属性名
console.log(obj.age)    //18
console.log(obj['name-qq'])//switch
//改 对象名.属性名=新值
obj.age=19
//增 对象名.属性名=新值
obj.hobby='画画'
//obj={uname:'蓝色的海',age:19,gender:'男','name-qq':'switch',hobby='画画'}
//删 delete 对象名.属性
delete obj.gender
//obj={uname:'蓝色的海',age:19,'name-qq':'switch',hobby='画画'}
​
let person={
    name='蓝海'
    //方法
    sayHi function(){
        document.write('hi')
    },
    sayBye function(){
        document.write('bye')
    }
}
//方法调用
person.sayHi()  //hi

遍历对象

let obj={
    uname:'蓝色的海',
    age:18,
    gender:'男',
    'name-qq':'switch'
}
for(let k in obj){
    console.log(k) //属性名，’uname','age','gender'
    console.log(obj[k]) //obj.k不行，因为k是字符串
} 

内置对象

//举例
//document.write()
//console.log()
​
//Math，常用对象
console.log(Math.ceil(1.1)) //2
console.log(Math.floor(1.1))//1
console.log(Math.round(2.5))//3
console.log(Math.round(-20.5))//-20
console.log(Math.round(-20.51))//-21
console.log(Math.max(1.2.3))//3
console.log(Math.min(1.2.3))//1
​
//生成随机数
console.log(Math.floor(Math.random()*(10+1)))   //0-10随机数
​
//生成N-M间的随机数
Math.floor(Math.random()*(M-N+1))+N

Math对象

属性	作用
random	生成0-1之间的随机数（包含0不包含1）
ceil	向上取整
floor	向下取整
max	找最大数
min	找最小数
pow	幂运算
abs	绝对值
round	四舍五入