JS：ES6，const，箭头函数，解构，...操作符Spread，Rest，for...of循环【诗书画唱】
查找关键词：
学习记录
ES6语法完成：
1、给页面中的所有按钮绑定点击事件，当点击这些按钮时弹出“这个页面的第几个按钮”。
2、分别定义无参无返回，有参无返回，无参有返回和有参有返回的箭头函数，并且调用它。
3、定义三个变量snum,name,classroom三个变量，通过解构将这三个变量合并成一个对象。
4、var dog = {n:"旺财",weight:2,color:"黑色"};通过解构取出旺财的所有属性值。
5、定义一个学生对象，包含一个eat方法，通过解构取出这个方法并调用它。
6、定义一个没有参数个数限制的函数，打印出输入的参数个数。
课堂里的知识面覆盖丰富的值得一看的代码例子
const
...操作符：Spread和Rest
箭头函数
...进行的是Spread操作
...进行的是Rest操作
for...of循环
推荐：
想整个对象等等都修改不了，可用“设置访问器的属性”的方法
单词：
学习记录
flex view:actionscript
ES6和JS可以互换
解构：拆分一个普通对象或者数组，将对象的属性或者数组元素赋值给指定的变量
以后常常使用let来定义变量，比较严格点，用var定义变量。容易成为全局变量，全局变量多了，有时会出现问题。
箭头函数中有参有返的情况内容比其他情况用得更多。
ES6语法完成：
1、给页面中的所有按钮绑定点击事件，当点击这些按钮时弹出“这个页面的第几个按钮”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload=function(){
var b=document.querySelectorAll('input[type="button"]');
// alert(b[0].value)
for (let i=0;i<b.length;i++) {
b[i].onclick=function(){
alert("这个页面的第"+(i+1)+"个按钮")
}
}
}
</script>
<body>
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
</body>
</html>
2、分别定义无参无返回，有参无返回，无参有返回和有参有返回的箭头函数，并且调用它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//--------------
//无参无返回的箭头函数的声明:
let f1 = () => {
console.log('给诗书画唱三连');
};
//无参无返回的箭头函数的调用:
f1();
//--------------
//有参无返回的箭头函数的声明:
let f2 = s => console.log(s + 2+"个硬币给诗书画唱");
//有参无返回的箭头函数的调用:
f2("投了");
//--------------
//无参有返回的箭头函数的声明:
let f3 = () => '点了赞';
//无参有返回的箭头函数的调用:
console.log(f3());
//--------------
//有参有返回的箭头函数的声明:
let f4 = s => s+"三连！谢谢！好的！不用谢！";
//有参有返回的箭头函数的调用:
console.log(f4("给诗书画唱"));
//-------------
</script>
<body>
</body>
</html>
3、定义三个变量snum,name,classroom三个变量，通过解构将这三个变量合并成一个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function heBing(snum,name,classroom) {
console.log({snum,name,classroom});
}
var o= ["学号：666","姓名：诗书画唱","教室：三连教室"];
heBing(...o);//...进行的是Spread操作
</script>
<body>
</body>
</html>
4、var dog = {n:"旺财",weight:2,color:"黑色"};通过解构取出旺财的所有属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var dog = {n:"旺财",weight:2,color:"黑色"}
let {n,weight,color} = dog;
console.log(n,weight,color);
</script>
<body>
</body>
</html>
5、定义一个学生对象，包含一个eat方法，通过解构取出这个方法并调用它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var student = {
name: '诗书画唱',
age: 20,
sex: '男',
eat:function(){
return "看到这句话说明成功调用eat方法";
}
};
let {eat} = student;
console.log(eat());
</script>
<body>
</body>
</html>
6、定义一个没有参数个数限制的函数，打印出输入的参数个数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function f(...o) {
console.log(o.length);
}
f("诗书画唱",'创作的作品',666,"好棒",true);
</script>
<body>
</body>
</html>
课堂里的知识面覆盖丰富的值得一看的代码例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入ES6转码器 -->
<script type="text/javascript" srcc="js/browser.js" ></script>
<script>
//let和const关键字:都是用来声明变量
{
var a = 3;
let b = 4;
//console.log(a,b);
}
//用let关键字声明的变量当出了作用域以后会被自动销毁
//console.log(a,b);//报错
for(let i = 0;i < 5;i ++){
//执行代码
//console.log(i);
}
//console.log(i);//报错
//解决闭包的问题
let arr = [];
for(let i = 0;i < 5;i ++) {
arr[i] = function(){
console.log(i);
}
}
//arr[2]();
//const用来声明变量,一旦使用const声明变量,必须给这个变量赋值
//一旦这个变量被赋值,就再也不能够被修改了
const PI = 3.14;
const TEST = true;
const MSG = 'Hello world';
//PI = 4;//没有办法再次修改一个const变量值
const STU = {name:'Tom',age:18};
STU.name = 'Kite';
STU.age = 20;
STU.sex = '男';
//console.log(STU);
//无参数无返回值的函数
// function fn1(){
// console.log('Hello world');
// }
let fn1 = () => {
console.log('Hello world');
};
fn1();
//有参数没有返回值的函数
// function fn2(a){
// console.log(a + 1);
// }
//箭头函数只有一个参数时,可以将括号省略掉
let fn2 = a => console.log(a + 1);
fn2(2);
//没有参数有返回值的函数
// function fn3(){
// return 'Kitty';
// }
//如果函数只有一个return语句的话,return关键字可以省略
let fn3 = () => 'Kitty';
console.log(fn3());
//有返回值有参数的函数
// function fn4(num) {
// return num * 2;
// }
let fn4 = num => num * 2;
console.log(fn4(3));
// (function(){
// console.log('Hello world');
// })();
// + function(){
// console.log('Hello world');
// }();
// function fn5(){
// return {
// name: '张三'
// };
// }
//如果箭头函数返回的是一个对象时，那么这个对象必须用()括起来
let fn5 = () => ({name: '张三'});
console.log(fn5().name);
//...操作符：Spread和Rest
function foo(x,y,z) {
console.log(x + y + z);
}
//foo(1,2,3);
var ay = [1,2,3,4];
foo(...ay);//...进行的是Spread操作
function bar(...ar) {//...进行的是Rest操作
console.log(ar);
}
bar(true,'test',47);
var stu = {
sname: '李四',
sage: 20,
ssex: '女'
};
// let sname = stu.sname;
// let sage = stu.sage;
// let ssex = stu.ssex;
//通过解构的语法来获取属性值
//被赋值的变量名跟属性名是一致的
let {sage,ssex,sname} = stu;
console.log(sname,sage,ssex);
let arr1 = ['mee',true,23,'txt'];
// let x = arr1[0];
// let y = arr1[1];
//通过解构的语法来获取数组的元素
let [x,y,z,w] = arr1;
console.log(x,y,z,w);
let pname = '德芙巧克力';
let price = '8.5';
// let pro = {};
// pro.pname = pname;
// pro.price = price;
let pro = {
pname,
price
};
console.log(pro);
//循环方式：for循环，for...in,for...of
//for...of不能对对象进行循环
//for...in可以对对象进行循环
let nums = ['one','two','three','four'];
Array.prototype.fn = function(){
console.log('testing...');
}
// for(let i = 0;i < nums.length;i ++) {
// //console.log(nums[i]);
// }
// for(let attr in nums) {
// console.log(attr);
// }
//for...of循环中不会出现数组的下标
// for(let num of nums) {
// console.log(num);
// }
let pros = [{name: '辣条',price:3.5},
{name: '脆皮',price:3},
{name: '鸡腿肉',price:18},
{name: '薯片',price:10}]
// for(let i = 0;i < pros.length;i ++) {
// let p = pros[i];
// console.log(p.name,p.price);
// }
for(let p of pros) {
console.log(p.name,p.price);
}
</script>
</head>
<body>
</body>
</html>
