JavaScript知识点-周2.md
一、for in 遍历对象
遍历对象
语法: for(var key in obj){ // 循环体}
obj —> 要遍历的对象
for(var key in obj){ // key --> 变量console.log(key); // 键值对中的键console.log(obj[key]); // 对象变量名[key]: 对应键的值if(key == 'name'){alert(obj[key]);}// 对象的取值: 对象变量名.key 对象变量名['key'] 对象变量名[变量]}
二、while循环
结构
1. 初始化变量: var i = 0;
while(2 循环结束的条件){
3 循环体;
4 变量更新;
}
执行顺序: 12342342
for和while区别： for循环能做的while都能做, while能做的for也可以;
for: 循环次数已知
while: 循环次数未知
var sum = 0;var i = 1;while(i < 101){sum += i;i++;}console.log(sum);var arr = [];// 循环给数组中添加数据 arr.push(要添加的数据);for(var i = 0; i <= 20; i++){if(i % 5 == 0 ){arr.push(i);}}// 如果数组长度到了20, 停止循环var i = 0;while(arr.length <= 20){if(i % 5 == 0 ){arr.push(i);}i++;}console.log(arr);
do while
结构：
1. 初始化变量;
do{
2. 循环体;
3. 变量更新;
}while(4. 循环结束的条件);
执行顺序: 1234234234
var i = 0;do{console.log(i);i++;} while( i < 5);- while与do while的区别：第一次执行判断条件就不符合的时候, while循环一次都不会执行, do while会先执行一次
var i = 10;// i < 10的时候输出iwhile(i < 10){console.log(i);i++;}do{console.log(i);i++;}while(i < 10);三、break与continue
break: 防止穿透; 退出整个循环, 终止循环
continue: 退出本次循环, 下一次循环还要继续执行, 单次排除情况
for(var i = 0; i < 10; i++){if(i == 5){// break; // 结束整个循环continue; // 结束本次循环}console.log(i);}
四、this
this存在于全页面, 在不同的地方有不同的含义; 虽然body属于html中的，但是window是祖宗, 直接在全页面中能直接使用的方法，都属于window, 把window省略掉
普通函数中: this —> window
事件函数中: this指向触发源(事件绑定对象)—> 点谁就是谁
// 点击每个li让他背景色改变, 变成红色// 1. 获取元素var lis = document.getElementsByTagName('li');// 2. 添加事件：每一个li添加一个点击事件for(var i = 0; i < lis.length; i++){ // 执行非常快, i最后保持成循环结束的条件console.log(lis[i]);lis[i].onclick = function(){console.log(i); // 点击事件中得不到正确的iconsole.log(this); // li// 3. 做具体的事情this.style.background = 'red';}}// 普通函数function sum(){console.log(this); // window}sum();
五、自定义属性和自定义索引
1、自定义属性
自定义属性: 自己定义的写给标签的属性
属性: 写在标签上的不是标签名的, src, value, className, id, style…
获取： 元素.属性名
设置： 元素.属性名 = 值;
注意:
- 拿不到写在标签上的自定义的属性的值
<div class="box" tag="1"></div>console.log(div.tag); // undefined
- 设置的自定义属性在标签上看不到, 但是可以正常获取到通过js设置的自定义属性
div.flag = 1;console.log(div.flag); // 1
2、自定义索引
- 将正确的下标存在属性上, index—>自定义索引
var arr = ['html', 'css', 'js'];// 实现点击第一个弹出arr中对应的下标的科目// 实现点击第二个弹出arr中对应的下标的科目// 1. 获取元素var btns = document.getElementsByTagName('button');// 2. 给每一个按钮添加点击事件for(var i = 0; i < btns.length; i++){// 将正确的下标存在属性上, index--->自定义索引btns[i].index = i;btns[i].onclick = function(){// 3. 具体要做的事情, 弹出arr中对应的下标的科目// console.log(i); // 3console.log(this.index);alert(arr[this.index]);}}
六、函数
1、函数基础
概念: 函数是由事件驱动的或者当他被调用时可以重复执行的代码块
作用: 用来保存代码, 在需要的时候调用
声明方式
- 函数声明: function 函数名(){ // 代码块 }
getTip();function getTip(){console.log('学的是函数');}
- 表达式声明: var 变量名 = function (){ // 代码块}
var getNewTip = function(){console.log('这是新的提示');}getNewTip();
- 区别: 函数声明的方式，调用可以在函数之前也可以在函数之后, 表达式声明的方式, 调用只能在函数之后
- 函数使用: 1. 声明 2. 调用: 函数名();
2、 使用情况
- 功能性代码: 有目的性的封装, 用来专门实现某个特定的功能
function sum(){var s = 0;for(var i = 0; i < 101; i++){s += i;}console.log(s);}sum();
- 事件处理函数
document.body.onclick = function(){console.log(1);}- 对象的方法
var str = '1234567890';console.log(str.charAt(4)); // charAt--> 方法var obj = {'name': '彭于晏','money': function(){console.log('挣钱');}}console.log(obj.money);obj.money();
存储重复性的代码
创建一个空函数
放入重复代码
将函数调用放在原代码处, 验证是否可用
<body><div class="box"><div class="main"><div class="center"><div class="left"><</div> <img src="./img/1.jpg" alt=""><div class="right">></div></div></div></div><script>// 点击右箭头 1 - 2 - 3 - 4 - 1// 点击左箭头 4 - 3 - 2 - 1 - 4// 1. 获取var leftBtn = document.getElementsByClassName('left')[0];var rightBtn = document.getElementsByClassName('right')[0];var img = document.getElementsByTagName('img')[0];var n = 1;// console.log(leftBtn, rightBtn, img);// 右箭头点击切换图片rightBtn.onclick = function () {// 3. 具体的代码n++;imgTab();}leftBtn.onclick = function () {// 3. 具体的代码n--;imgTab();}// 重复代码封装// 1. 创建一个空函数// 2. 放入重复代码// 3. 将函数调用放在原代码处, 验证是否可用 // 判断图片是否赋值function imgTab() {if (n < 1) {n = 4;}if (n > 4) {n = 1;}img.src = './img/' + n + '.jpg';}</script></body>
3、函数参数
什么时候用参数:函数中出现了不确定的值, 就用参数
分类
形参: 形式参数, 用来占位的, 函数声明时, 函数名后面的()里, 形参接收实参传递过来的值, a,b就是形参
实参: 实际的参数, 函数调用时, 函数名后面的()里,sum(1, 101), 1\101就是实参
arguments: 每一函数中都存在arguments, 是实参的集合, 类数组
// 1-100的和 50-80 100-1000function sum(a, b){ // a--起始值 b----结束值console.log(a, b);var s = 0;for(var i = a; i < b; i++){s += i;}console.log(s);}sum(1, 101);sum(50, 81);function sum(){// 实际参数的长度不确定// arguments: 每一函数中都存在arguments, 是实参的集合, 类数组console.log(arguments);var s = 0;for(var i = 0; i < arguments.length; i++){// console.log(arguments[i]);s += arguments[i];}console.log(s);}sum(10,20,30,40);sum(1,2);sum(5);sum(1000000, 10000000);
形参和arguments: 是同一个东西, 形参和实参要一一对应, arguments存储所有的实参,是一个集合
函数的参数类型: js中所有的数据类型, null与undefined 没有实际意义，所以一般情况下不用做参数
function getData(a){ // a---形参console.log(a);}getData(10); // 10 ---- 实参var str = 'a1234567';getData(str);// 写一个函数, 得到字符串的第一个字符var str1 = '今天是高兴的一天呀';getFirst(str1);var nu = 'mnbvfghklqywuie';getFirst(nu);// 1. 空函数// 2. 重复代码放入// 3. 在原来代码位置上调用调试// 4. 抽取形参// 5. 传参再次调用function getFirst(a){ // a--->传入的字符console.log(a.charAt(0));}var bo = false;function hasWork(a){if(a){console.log('原来真的有作业');} else {console.log('原来还是有作业的');}}hasWork(bo);// null与undefined 没有实际意义，所以一般情况下不用做参数getData(null);getData(undefined);hasWork(null);// objectvar obj = {'name': '彭于晏','money': function(){console.log('挣钱');}};getData(obj);// arrvar arr = [10, 'true', true];getData(arr);// functionfunction b(){alert(1);}function c(){alert(2);}// getData(b);function getFun(a) { //a=b||a=c||a=函数名console.log(a);a(); //用a调用 传过来的实参函数 --用形参名调用// b();不用}getFun(b); //实参为一个函数getFun(c);
4、函数的问题
函数名和函数名重复时, 后面的会覆盖前面
函数名和变量名重复时, 变量会覆盖函数
形参个数多余实参个数时, 多余的形参会赋值为undefined
形参个数小于实参个数时, 多余的实参没法通过形参来获取, 实参可以通过arguments来获取
function fun(a, b){console.log(a, b);}fun(10, 20); //10 20fun(10); //10 undefined ---->形参个数多余实参时,多余的形参会赋值为undefined fun(10, 20, 30); //多余实参可以通过arguments来获取--Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]// console.log(arguments[2]);获取多余的实参
七、作用域
函数和变量可以被读写的区域(函数和变量的有效作用范围)
区域, 指变量或者函数作用范围
作用: 读、写
作用域表示变量或者函数他们可以再什么样的上下文中去执行
作用域的划分由function(函数)划分出来的
js作用域：
局部作用域: function (){ // 局部作用域 }
全局作用域: 在script双标签里
局部变量\函数: 在局部作用域中声明的函数或变量只在局部作用域中去起作用, 出了{}就会被销毁
全局变量\函数: 在全页面中(函数外面声明的变量或者是函数)的任何位置去读写
作用域链: js中的一种查找机制;先查找自身所在的局部作用域, 找不到的时候, 往外一层作用域去查找,直到去全局作用域中去查找, 再找不到返回is not defined; 如果在任何一个层级找到，那就结束查找。
var m = 20;function a(){m = 10;function c(){console.log(m);}c();}a();console.log(m);
八、预解析
找: 找var和function, 用var声明的变量, 只声明不赋值(变量存储的就是undefined), 用function声明的函数, 将整个函数直接存在内存中
逐行解析: 从上到下一行行的解析代码
变量只有在逐行解析中遇到+\-\*\/\++\--\=等操作之后才会去改变变量的值, 函数遇到调用的时候再去执行
console.log(a);var a = 10;b();function b() {a = 20;//没有var ,是全局变量console.log(a);}console.log(a);// --------解析步骤--------var a;function b() {a = 20;console.log(a);}console.log(a); // 找距离当前代码最近的变量 a ,声明未赋值;undefineda = 10;b(); // a = 20; console.log(a); 20console.log(a); // 20
九、函数返回值
每个函数在调用以后本身就有一个返回值;
如果没有指定返回值, 返回undefined;
如果要设置返回值, 用return来设置;
作用: 可以将函数内部变量或函数在函数外面也可以使用;
- 语法: return 值;
注意:
return 一次只能返回一个值, 写了多个也只返回第一个;
return 结束函数的执行; 函数中只要遇到return, 函数就会直接结束, 后面代码都不执行;
return 一次性返回多个值, 只会返回最后一个
十、获取元素样式
只能获取到行内：元素.style.属性名 — 得到对应的样式
获取非行间样式:
标准: getComputedStyle(要获取的元素).属性名
ie678: 要获取的元素.currentStyle.属性名
var w = getStyle(div, 'width'); //字符不加''就是变量，属性名都是字符串console.log(w);// 获取非行间样式的封装function getStyle(elem, attr) { //形参一定意义上属于变量不能用.方式获取用[]// elem: element, 元素// attr: attribute, 属性if (window.getComputedStyle) {// 标准浏览器return window.getComputedStyle(elem)[attr];} else {// ie678return elem.currentStyle[attr];}}
十一、定时器
| 延迟定时器 | 间隔定时器 |
|---|---|
| setTimeout(函数, 时间-ms) | setInterval(函数, 时间-ms) |
| 延时执行: 只执行一次的定时函数 | 定时执行: 每隔一段时间就执行一次的定时函数 |
定时器: 定时或者是延时去执行一些代码
用途: 广告\咨询\轮播图\倒计时
注意: 定时器一旦开启，不会自动关闭, 需要手动清除定时器
定时器开启之后, 会返回唯一标识
清除定时器:
延迟定时器: clearTimeout(timerId); timerId----定时器的唯一标识
间隔定时器: clearInterval(timerId); timerId----定时器的唯一标识
// 打开页面2秒之后，弹出1var t1 = setTimeout(function(){alert(1);}, 2000);clearTimeout(t1);//每隔1s打印1var t = setInterval(function(){console.log(1);clearInterval(t);}, 1000);console.log(t, 'asd------');
- 定时器传参: setTimeout(函数, 时间, 参数1, 参数2, …, 参数n);
setInterval(函数, 时间, 参数1, 参数2, …, 参数n);
function sum(a, b){console.log(a, b);console.log(a + b);}// sum(10, 20);// 定时器: setTimeout(函数, 时间, 参数1, 参数2, ...., 参数n);setTimeout(sum, 2000, 30, 40);
十二、Math数学对象
console.log(Math);console.log(Math.floor(3.99999999999)); // 向下取整, 无论小数点后面多少位都直接省掉console.log(Math.ceil(3.0000000001)); // 向上取整, 无论小数点后面多小, 都向上加1console.log(Math.round(3.999999)); // 四舍五入console.log(Math.round(3.44444449)); // 四舍五入console.log(Math.abs(-1)); // 绝对值console.log(Math.sqrt(81)); // 对某个数开根号console.log(Math.sqrt(2)); // 对某个数开根号console.log(Math.pow(2, 10)); // 2 的 10 次方console.log(Math.min(12,43,12,56,78,3)); // 求最小值console.log(Math.max(12,43,12,56,78,3)); // 求最大值// 随机数: 得到的小数位数很多, 用向上、下、四舍五入去取整Math.random() 0-1之间的随机数Math.random() * 数 0-数之间的随机数Math.random() * (y - x) + x 求x-y之间的随机数
JavaScript知识点-周2.md相关推荐
- JavaScript知识点-周4.md
一.操作表单 1.快速获取表单元素 form.name值 <form action="#">请输入姓名: <input type="text" ...
- HTML5+CSS3知识点-周5.md
HTML5 一.HTML5简介 HTML5是html的最新的标准(版本) 浏览器支持:ie9+对html5新特性部分支持,新的主流浏览器(chrome.火狐\safari) 向前向后兼容,语法变化: ...
- 呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！
呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!! ✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货 ✴️如果对你 ...
- JavaScript知识点4
文章目录 一.数组 1.数组API(方法) 2.二维数组 3.截取字符串 二.math对象 三.Date对象 四.数学 1.计算平方 3.计算阶乘 五.正则表达式 六.网络和谐语 七.jQuery选择 ...
- JavaScript知识点9-案例大全
文章目录 1.购物车综合案例JQuery版本 2.购物车综合案例JavaScript版本 3.学子商城 public.css index.css 主页面 4.猜数字 篇章 1.购物车综合案例JQuer ...
- 小白学小程序需要的JavaScript知识点
小白学微信小程序需要的JavaScript知识点 文章目录 小白学微信小程序需要的JavaScript知识点 1 js数据类型 Number 字符串 布尔值 数组 对象 null和undefined ...
- javascript知识点_一点点JavaScript知识是第1部分很危险的事情
javascript知识点 几乎是一个数据库的奇怪故事 (The Strange Tale of the Almost-a-Database) 这不是教程,这是一个警告性的故事. (This is n ...
- JavaScript知识点8
文章目录 1.事件绑定 2.事件 3.查找3个div 4.使用hover 5.百度一下 6.jQuery动画函数--显示隐藏动画 7.精简显示品牌 8.框架/js库 篇章 1.事件绑定 <!DO ...
- JavaScript知识点归纳之简介
简介: 参照学习菜鸟教程上例子所做本JavaScript知识点归纳之XXX. 1.JavaScript直接写入HTML输出流: <script> document.write(" ...
最新文章
- 要求学生从事教学科研无关内容，把学生当廉价劳动力的导师将被严肃处理！...
- 如何购买指定配置的ECS服务器【新手小白攻略】...
- linux 调用 fudanNLP
- GHOST_XP详细制作过程
- （原）ubuntu14.04中安装gcc4.9和g++4.9
- spring-beans模块分析
- ASP.NET Core分布式项目实战（详解oauth2授权码流程）--学习笔记
- 【语音识别】基于matlab GUI HMM 0~9数字和汉字语音识别（带面板）【含Matlab源码 1716期】
- 基于SSM的运动会管理系统
- 安鑫 十年资产翻十倍 普通人是怎么做到的
- 服务器能不能用普通硬盘,服务器硬盘与普通硬盘之间的区别
- Android流媒体播放器介绍
- 阿里云Ubuntu 18.04安装图形界面
- 大写日期(大写日期10月前要写0吗)
- 可盈可乐研究院 | 2019：区块链+跨境支付”新旧”势力的新一轮角力
- RFID资产管理系统解决方案
- 时间转换 MJDUTC
- 计算机应用基础终极性,计算机应用基础z终结性考核（8页）-原创力文档
- 星际密码———递归式
- 不敲代码用ChatGPT开发一个App