一个月从0转战前端 - 3 - JS基础

铁头娃wawa
105 阅读5分钟

学习四部曲：
1.HTML是结构骨架。
2.CSS是装饰。
3.JS是交互、逻辑。
4.vue前端常用框架。

只梳理个人认为常用的可以快速上手写项目的知识。不含介绍历史、弃用、废话

参考资料：github.com/qianguyihao…

工具

webstorm (idea的web版)； 用惯了AS/idea界面一样，直接可以上手
常规：vscode
必装插件：Chinese、auto remake tag、open in browser(右键预览)、live service、easy less

变量常量

变量：var/let
常量：const
js甚至可以直接 a=100（不用写var a=100）

栈内存和堆内存

跟jvm一样。
基础类型存在栈上。变量引用存在栈上。对象存在堆上。

String

同java

Boolean

同java

Number

Number = int + double
Infinity、-Infinity：超过正负阈值会返回这个
NaN：not a number，非数值时返回NaN

隐式转换(不建议用)
-、*、/、%会将String自动转为数字。
"5"+2 = String 52
"5"-2 = int 3
image.png

精度问题
js中小数精度是有问题的。

var a = 0.1 + 0.2;
console.log(a); //打印结果十分意外：0.30000000000000004

解决进度问题，第三方库（decimal.js）
引入: <script src="https://cdn.bootcdn.net/ajax/libs/decimal.js/10.2.0/decimal.min.js"></script>

使用：new Decimal(a).add(new Decimal(b)).toNumber()

null

js中的null 是object类型的，表示地址为空（空对象）

undefined

1.为定义的类型
var name 此时name为undefined

2.null==undefined true
undefined是null的一种

3.null===undefined false
区别：10 + null = 10
10 + undefined = NaN

数据转换

toString()
null 和 undefined不能toString（）

坑：连续6个0 就会变为科学计数法

const num2 = 0.0000001; // 小数点后面紧跟六个零
console.log(num2.toString()); // 【重点关注】打印结果："1e-7"

Number

const result = Number(变量/常量);

1.String转数字，如果非法则返回NaN
2.空或者空格 -> 0
3.null -> 0,undefined -> NaN
4.true ->1 ,false -> 0

parseInt()/parseFloat()
1.可以转成数字就转，不能就NaN（null -> NaN,false -> NaN）

Boolean()
1.数字->Boolean（同C）：0和NaN = false,其余为true
2.String->Boolean："0"和空格 = false,其余为true
3.null->Boolean：false
4.对象->Boolean：true，包括[],{}

运算符

== 和 ===
==值相等，隐式转换后。如：6=="6" true
===值和类型全相等。如：6==="6" false

String

同java，略

Number

toFixed保留num位小数,四舍五入，返回String，不改变原值

字符串 = myNum.toFixed(num);

Math同java

Array数组

别区java：
1.内存不是连续的
2.可以存不同类型的值
3.会自动扩容

容易误导的点

image.png

增删改查

增：push()
列表尾部新增一个元素，返回长度

删：pop()
列表尾部删除一个元素，返回被删除元素

查：find() findIndex()
返回第一个符合要求的元素。没有返回undefined

some()
返回有一个符合要求就true。同any

清空数组
arr = [];

遍历foreach()

image.png

如果要改变数据源的值，需要使用index取到item后更改。否则无法更改。

image.png

map（）、filter（）等

函数

函数也是对象

写法1：

function fn1() {
	console.log('我是函数体里面的内容1');
}

写法2：

var obj = {
	fn2: function() {
		console.log('千古壹号，永不止步!');
	},
};

obj.fn2(); // 调用函数

写法3：立即执行的函数

(function() {
	console.log('我是立即执行函数');
})();

点击事件

    <script>
            var btn = document.getElementById('btn');
            //2.绑定事件
            btn.onclick = function() {
                console.log('点击按钮后，要做的事情');
            };
        </script>
参数

参数：js中，方法的参数个数，可以和传入的不一致。后面多余的舍去、不足的为undefined

function sum(a, b) {
		console.log(a + b);
	}
        
	sum(1, 2);
	sum(1, 2, 3);
	sum(1);

arguments
因为js中的参数，没有过多的限制。所以可以用arguments列表来获取、操作参数。

image.png

事件

1.（findViewById）：var dev= document.getElementById(“box”);
2.绑定事件：div.onclick = function () { }
3.常见事件：

  • 点击事件onclick
  • 获得焦点onfocus
  • 失去焦点onblur
  • 加载完毕onload
捕获与冒泡

写法2：
addEventListener（监听比如点击、滚动、键盘按下等）

button.addEventListener('click', function() {
  console.log('按钮被点击了');
});

（类似于android中的事件传递）
由父层传递在底层（target），处理完后在向上传递
（比如点击了一下，事件会）向下传递，也就是会触发父的onclick image.png

image.png

image.png

阻止冒泡（类似消费事件）

兼容写法

 box3.onclick = function (event) {
 alert("child");

        //阻止冒泡
        event = event || window.event;

        if (event && event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

DOM（文档对象模型）

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树。（类比与android的View树）
注意：加载整个页面是自上而下的。所以如果将js写在上放，DOM是获取不到节点的。得放入window.onload 等到页面加载完毕。

DOM树下，每一个都是节点。（类比于View）

image.png

节点（View）

获取（findViewById）
常用：var div1 = document.getElementById("box1");
其余（获取符合要求的数组）：getElementsByTagName、getElementsByClassName

通过兄弟、父子获取 image.png

创建（new View）
新的标签(元素节点) = document.createElement("标签名");

插入（addView）
父节点.appendChild(新的子节点);//在最后插入
父节点.insertBefore(新的子节点,作为参考的子节点)//在某节点前，插入

删除（removeView）
父节点.removeChild(子节点);

克隆
要复制的节点.cloneNode();

获取/修改属性
myNode.src = "http://" 或 myNode.getAttribute("src") myNode.setAttribute("src","http://")

删除属性
myNode.removeAttribute("id");

获取CSS属性

1.获取标签上的CSS，style属性，需要.style就可以取到。 image.png

2.通过js方法获取属性，无限制。（推荐！）
getComputedStyle image.png

动画（略）

scroll

获取控件的宽高
ScrollWidth 和 scrollHeight

获取滚动距离
scrollLeft 和 scrollTop
兼容性写法：
window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

实际工作中使用 image.png

滚动一些距离
window.scrollTo(0, leader);

获取可见区域
clientWidth、clientHeight、clientTop、clientLeft（距离父盒子的距离）

BOM（浏览器对象模型）

window代表整个窗口
Navigator代表浏览器信息

用于获取浏览器信息

History浏览器历史

因为隐私关系，只能前后翻，无法获取浏览记录了。

返回finish
history.back();

下一页
history.forward();

跳到前后几页，0当前页刷新
history.go( 0 );

location地址信息

跳转页面
location.assign(str);
location.href

reload
location.reload();

获取地址 location.href

var let const

var会挂载在window下面，所以是全局的。（类似于静态）
let const（常量）局部的

所以引发问题
1.var全局的，会覆盖同名系统的变量。
2.var在方法块，外面也可以调用
3.var可以多次声明
4.var可以先用在赋值（有名字，没有值）
5.const声明以后必须赋值

avatar
文章
阅读
粉丝