这里写目录标题
1.变量和属性的区别
一个对象的属性名只有两个格式:数字或者字符串
var name = 10;
var obj = {
name: '培训',
};
console.log(obj.name); //获取OBJ这个对象的NAME属性对应的值
console.log(obj['name']); //获取OBJ这个对象的NAME属性对应的值
/*--------------*/
console.log(obj[name]);// obj[name变量代表的值] 此时name变量是10 输出undefined
var name = '培训';
var obj = {
//name:'培训' (放的是变量也是把变量存储的值拿过来做属性值)
name: name
name//=>ES6的简化和 name: name 一模一样
};
2.for…in循环
用来循环遍历对象中的键值对的(continue和break同样适用)
var obj = {
name: '春亮',
age: 52,
friends: '王鹏,志刚',
1: 20,
2: 149,
3: 140
};
console.log(obj.friends);
console.log(obj['friends']);
//for(var变量(key) in 对象) for in在遍历的时候,优先循环数字属性名(从小到大)
//对象中有多少组键值对,循环就执行几次(除非break结束)
for (var key in obj) {
//每一次循环key变量存储的值是当前对象的属性名
console.log(key + ':' + obj[key]);
//console.log(obj.key); undefined
1:20
2:149
3:140
name:春亮
age:52
friends:王鹏,志刚
}
3.for…in循环实现隔行变色+自定义属性
自定义属性前期保存,后期用
自定义属性编程思想:前期把一些值存储到元素的自定义属性上,后期需要用到的时候,直接从属性上获取到这些值即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量和属性的区别</title>
</head>
<body>
<script>
</script>
<style>
li {
list-style: none;
}
ul>li {
line-height: 30px;
}
#box li {
width: 200px;
}
</style>
// ## 3.for...in循环实现隔行变色
<ul id="box">
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
<li>第8个</li>
</ul>
<script>
var box = document.getElementById('box');
var lis = box.getElementsByTagName('li');
init();
for (var key in lis) {
console.log(key);
lis[key].onmouseover = function () {
this.style.backgroundColor = 'white';
}
//自定义属性前期保存,后期用
//自定义属性编程思想:前期把一些值存储到元素的自定义属性上,后期需要用到的时候,直接从属性上获取到这些值即可
lis[key].onmouseout = function () {
this.style.backgroundColor = this.myOriginBg;
}
}
function init() {//初始化函数
var bg;
for (var i = 0; i < lis.length; i++) {
var bg = i % 2 === 0 ? 'green' : 'red ';
lis[i].style.backgroundColor = bg;
//设置自定义属性myOriginBg用来存储每一个LI的背景
lis[i].myOriginBg = bg;
}
}
</script>
</body>
</html>
4.函数的底层运行机制
问题:(选项卡案例,堆栈)
以下代码的功能是要实现为5个input按钮循环绑定click点击事件,绑定完成后点击五个按钮分别会输出0、1、2、3、4五个字符。请问如下代码是否能实现?如果不能实现那么现在的效果是什么样的?应该做怎样的修改才能达到我们想要的效果,并说明原理?
解决方法1:自定义属性
<button value="按钮1">1</button>
<button value="按钮2">2</button>
<button value="按钮3">3</button>
<button value="按钮4">4</button>
<button value="按钮5">5</button>
<script>
var btnList = document.getElementsByTagName('button');
for (var i = 0; i < btnList.length; i++) {
btnList[i].myid = i; 自定义属性myid
//循环了5次,创建了5个function()函数
btnList[i].onclick = function () {
console.log(this.myid);
//console.log(btnList[i-1].myid); 都可以输出
}
}
</script>
5.函数内置的实参集合arguements(任意数求和)
任意数求和
1.传递实参的个数不定
2.传递的值是否为有效数字不定
=>把传递的有效数字进行相加求和
arguments: 函数内置的实参集合
1.类数组集合,集合中存储着所有函数执行时,传递的实参信息
2.不论是否设置形参,arguments都存在
3.不论是否传递实参,arguments也都存在
arguments.callee:存储的是当前函数本身(一般不用的,JS严格模式下禁止使用这些属性)
function sum() {
var val = 0
for (var i = 0; i < arguments.length; i++) {
if (typeof (arguments[i]) != 'number') {
console.log('请输入正确的数字');
return;
}
val = val + arguments[i];
}
return val;
//console.log(arguments);
}
let total = sum(10, 20, 30, 40);
console.log('结果是' + total);
total = sum(10, 20);
console.log('结果是' + total);
total = sum(10, 20, '30');
console.log('结果是' + total);
total = sum(10, 'AA');
console.log('结果是' + total);
6.ES6箭头函数(初步学习)
arrow function箭头函数