今天比昨天有进步,明天比今天更优秀!共勉 || 使用XMind制作思维导图 || 查询资料在Mdn(较权威)查询
成年人的浪漫就是情谊和体面
学习路线:基础 -- 应用 -- 进阶【javaScript基础-5天 => webApi - 7天 => javaScript进阶-4天】
使用vsCode作为工具,代码编写错误提示插件:Error lens
js基础 (变量、常量、数据类型[数组]、数据类型转换、算数运算符、对象、案例)
js简介:javascript(简写js)是一门运行在客户端(浏览器)的编程语言,实现人机交互。html/css是标记语言,不是编程语言
js构成:javascript遵循ECMAScript语法基础 && WebApis; WebApis又由两部分组成:DOM && BOM
DOM:操作文档
BOM:操作浏览器
js书写位置:
【内部js】:写在</body>的上面; <script>...</script>
【外部js】:写在</body>的上面; <script src="js文件相对路径(*.js)"></script>
【内联js: VUE会用这种模式,js不多用】<body><button onlick="alter('嘿嘿嘿')">请点击我</button></body>
输入输出语法:
弹窗输出:alert || window.alert
页面输出:document.write("汉字||标签") 【document.write("<h1>我是一级标题</h1>")】
控制台打印输出:console.log('') -- 程序员调试使用
输入:prompt("请输入您的姓名")
变量
定义:变量是一个装东西的容器,它不是数据本身
变量关键字:let ,var已经被let取代了,var成为了过去式
变量的本质:在内存中开辟一个小空间来存储数据
常量: const
数据类型(js是弱类型语言)--基本数据类型【算数运算符】 || 引用数据类型
基本数据类型:boolean/number/string/undefined/null
引用数据类型:数组/对象object/函数function()
数组
操作-新增:
arr.push('','') /*推末尾,返回的是数组的长度*/
arr.unshift('','') /*追加开头,返回的是数组的长度*/
操作-删除:
arr.pop() /*删末尾*/
arr.shift() /*删开头*/
arr.splice(start,删几个数据) /*起始位置,起始位置从0开始,删几个数据*/
检测数据类型typeof
数据类型转换【隐式转换||强类型转换】
隐式转换: 某些运算符被执行时,系统内部自动转换数据类型,这种被称为数据类型转换
只要“+”的两边有一边为字符串,就会把另一个自动转换为字符串类型
除去“+”以外的算数运算符,都会把数据自动转换为数字类型
“+”作为正号解析可以将数据转化为数据类型,例console.log(+'123') --> 数字123
null经过数字转换以后会变为0,
undefined经过数字转换以后会变为NaN
-减号只用于数据类型,他会将空字符串转化为0
强类型转换
number: 转换为数字数据类型--number(变量) || +'123' || +prompt("请输入你的薪资"),NaN也是数字类型,代表非数据类型【+在这里也可以完成数字类型,但是它属于隐式转换】
parseInt: 只保留整数(数据类型)
parseFloat: 可以保留小数(数据类型)
boolean数据类型转换
''/null/undefined/false/NaN/0 转换为boolean都是false,其他的都是true
boolean("pink") ==>true
运算符
算数运算符 + - * / %
比较运算符 < > <= >= == != === 【==要求值相等, === 要求值和数据类型都相等】
逻辑运算符
图形:柱状图、折线图...
echarts:是一款javascript可视化图表库,兼容当前绝大部分浏览器
冒泡排序 == arr.sort()
升序:arr.sort(function(a,b){return a-b})
降序:arr.sort(function(a,b){return b-a})
函数
function(){} //参数不需要明确标明数据类型,js是弱语言类型,给他什么类型的数据,他就会自动变成什么类型
具名函数、匿名函数
具名函数:function fn(x,y){}
匿名函数:function(){} ; let fn = function(x,y){}
立即执行函数:
(function(){})() || (function(){}()); --防止变量污染,例: (function(x,y){console.log(x+y)})(1,2);
与立即执行相关的面试题
<body>
<ul id="list">
<li>公司简介</li>
<li>联系我们</li>
<li>营销网络</li>
</ul>
<script>
var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
li[i].onclick=function(){
alert(i); // 结果总是3.而不是0,1,2
}
}
</script>
</body>
为什么alert总是3? 因为i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件使异步,用户一定是在for运行完了以后,才点击,此时i已经变成3了。
那么怎么解决这个问题呢,可以用立即执行函数,给每个li创建一个独立的作用域,在立即执行函数执行的时候,i的值从0到2,对应三个立即执行函数,这3个立即执行函数里边的j分别是0,1,2所以就能正常输出了,看下边例子:
<body>
<ul id="list">
<li>公司简介</li>
<li>联系我们</li>
<li>营销网络</li>
</ul>
<script>
var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
( function(j){
li[j].onclick = function(){
alert(j);
})(i); 把实参i赋值给形参j
}
}
</script>
</body>
逻辑中断
x = 1 || 0 x = 1 && 0
undefined 等价于 false
对象
对象是一个无序的数据类型
对象的创建let obj = {} || let obj = new object()
增删改查
查:对象.属性
改:就是重新赋值-对象.属性 = 新值
增:对象.新属性=新值
删:delete 对象.属性
方法:song : function(){}
对象的遍历for(let k in 对象){console.log(对象[k])}
数学内置对象:math
math.random() //[0,1)
math.pi()
math.ceil() //向上取整
math.floor() //向下取整
math.abs() //取绝对值
math.round() //四舍五入