js学习笔记记载一篇(非0基础)(基础篇)

最新推荐文章于 2024-06-02 21:27:33 发布

常怀百岁忧

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量55

点赞数

分类专栏： JS 文章标签： javascript 学习开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/changhuaiyou/article/details/129185812

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天比昨天有进步，明天比今天更优秀！共勉 || 使用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>