前端学习小白打卡9 js基础完结

最新推荐文章于 2024-09-14 17:14:08 发布

白潏

最新推荐文章于 2024-09-14 17:14:08 发布

阅读量65

点赞数

分类专栏：前端文章标签：前端学习 javascript css3 html5

本文链接：https://blog.csdn.net/qq_65719034/article/details/131841929

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

添加数组
arr.pusn(元素1，元素2，。。)----将一个或多个添加到末尾，并返回数组的新长度
arr.unshift(新增内容) -----将一个或多个添加到开头，并返回数组的新长度
删除数组
arr.pop()---删除最后一个元素，并返回该元素值
arr.shift()
arr.splice(操作的下标，删除的个数)---默认0

arr.sort() 排序默认升序
升序
arr.sort(function(a,b){
return a-b
})
降序
arr.sort(function(a,b){
return b-a
})

函数
function ，
先声明后调用
语法
function 函数名(参数)//这里的参数不需要声明let 同形参规则
{

}
函数名命名尽量小驼峰
调用
函数名（）
参数默认值，若不输入实参，又没有默认就是NaN
数组默认arr=【】

返回
return 数据
return 后面代码不会再被执行，会立即结束
若返回多个数据就用数组
return[1,2]

函数重复调用后面的
全局作用域局部作用域就近原则

匿名函数
没名字的函数，无法直接使用
使用方式：
函数表达式 let fn=function()
必须先声明后使用
//具名函数调用可以写到任何位置

立即执行函数
防止变量污染
（function(形参){}）（实参）;必须加分号

逻辑中断
短路：只存在与&&（一假则假）和||（一真则真）中可以让右边的代码不运行（都是从左往右）
&&都是真则返回最后一个真值
||都是假则返回最后一个假值
x=x||0

转换为boolean型
显示转换
Boolean（内容）
'' 0 undefined null false NaN转换成布尔值后都是false 其余为true

隐式转换
有字符串的加法 ''+1,结果是'1'
减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串''转换成0
null经过数字转换之后变为0
undefined经过数字转换之后会变为NaN

对象
let 对象名={}
let 对象名=new Object()

let 对象名={
属性名：属性值，
方法名：函数
}
属性名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格，中横线等
对象名.新属性名=新值
delete 对象名.属性名

let i={
'o-o':'123'
}
特殊查找
对象名['属性名'](可以访问字符串属性)

对象中的方法
let person={
name:'ad',
sayhi:function(){
document.write('hi--')
}
}
数组一般用for
遍历对象
for in
for（let k in obj）
{
console.log(k)//为属性名
//k 索引号是字符串
//obj.k->相当与obj.'属性名'报错
//obj['属性名']这样可以调用
console.log(obj[k])
}

数组对象
let s=[
{},{},
]

内置对象
Math对象是js提供的一个数学对象
有：
random:生成0-1之间的随机数（包括0不包括1）
cell：向上取整
floor：向下取整
max：最大数
min：最小数
pow：幂运算
abs：绝对值
round：四舍五入

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>
    <script src="./js/my.js">
        // let arr=[]
        // for(let i=1;i<=4;i++){
        //     arr.push(prompt(`请输入第${i}个季度的数据`))
        // }
        // document.write(`<div class="box">`)
        //     for(let i=0;i<arr.length;i++)
        //     {
        //          document.write(`
        //          <div style="height:${arr[i]}px">
        //             <span>${arr[i]}</span>
        //             <h4>第${i+1}季度</h4>
        //         </div>
        //          `)
        //     }
        // document.write(`</div>`)
    </script>
</body>
</html>

css

/* *{
  margin: 0;
  padding: 0;
} */
/*.box{
  display: flex;
  width: 700px;
  height: 300px;
  border-left: 1px solid pink;
  border-bottom: 1px solid pink;
  margin:50px auto;
  text-align: center;
  align-items: flex-end;
  justify-content: space-around;
  --flex弹性 相等间距 
  }*/
/* .box>div{
  display: flex;
  background-color: #5b1414;
  width: 50px;
  flex-direction: column;
  justify-content: space-between;
}
.box div span{
  margin-top: -20px;
}
.box div h4{
  margin-bottom: -35px;
  width: 70px;
  margin-left: -10px;
} */

let second=+prompt(`请输入秒数：`)
function getTime(t)
{
    h=parseInt(t/60/60%24)
    m=parseInt(t/60%60)
    s=parseInt(t%60)
    h=h<10?'0'+h:h
    m=m<10?'0'+m:m
    s=s<10?'0'+s:s
    return `${h}小时${m}分${s}秒`
}
let str=getTime(second)
document.write(str)

let person={
    name:'ad',
    sayhi:function(){
        document.write('hi--')
    }   
}
for(let k in obj)
{
    console.log(k)//为属性名
    //k 索引号  是字符串
    //obj.k->相当与obj.'属性名'报错
    //obj['属性名']这样可以调用
    console.log(obj[k])

}