JS的ES6
1.let
let age = 12;
（1）. 作用:
-
与var类似, 用于声明一个变量
（2）. 特点:
-
在块作用域内有效
-
不能重复声明
-
不会预处理, 不存在提升
（3）. 应用:
-
循环遍历加监听
-
使用let取代var是趋势
2.const
const sex = ‘男‘;
（1）. 作用:
-
定义一个常量
（2）. 特点:
-
不能修改
-
其它特点同let
（3）. 应用:
-
保存不用改变的数据
3.解构赋值
（1）对象的解构赋值：从对象的属性中取到想要的属性值
1 let obj = {name : ‘kobe‘, age : 39};
2 //对象的解构赋值
3 let {name,age,xxx} = obj; //定义的变量要与属性key相同,使用大括号{}
4 console.log(age,name,xxx); //39 "kobe" undefined
（2）数组的解构赋值
1 let arr = [‘abc‘, 23, true]; 2 let [, b, c, d] = arr; //使用中括号[],可以使用占位空的，还是按顺序获得数组下标对应的值 3 console.log(b, c, d); //23 true undefined
用处：简化传参
1 let obj = {name : ‘kobe‘, age : 39};
2
3 function person1({name, age}) {
4 console.log(name, age);
5 }
6 person1(obj);
4.模版字符串
模板字符串必须用 `` 包含，变量用${xxx}
1 let obj = {
2 name : ‘anverson‘,
3 age : 41
4 };
5 console.log(‘我叫:‘ + obj.name + ‘, 我的年龄是：‘ + obj.age); //我叫:anverson, 我的年龄是：41
6
7 console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`); //我叫:anverson, 我的年龄是：41
5.简写的对象写法：
-
省略同名的属性
-
省略方法function以及前面的：
1 let x = 3;
2 let y = 5;
3 //普通额写法
4 // let obj = {
5 // x : x,
6 // y : y,
7 // getPoint : function () {
8 // return this.x + this.y
9 // }
10 // };
11 //简化的写法
12 let obj = {
13 x, //为外部的x
14 y, //为外部的y
15 getPoint(){ //省略：function
16 return this.x
17 }
18 };
19 console.log(obj, obj.getPoint()); //Object 3
6.三点运算符
又称：rest参数
作用：用来取代arguments 但比arguments灵活
限制：
-
只能是最后部分形参参数。
-
只能遍历数组，不能遍历对象。
1 //作为形参，是真实的数组可以遍历
2 function fun(...values) {
3 console.log(arguments);
4 // arguments.forEach(function (item, index) {
5 // console.log(item, index); //报错，arguments是伪数组不能遍历
6 // });
7 console.log(values);
8 values.forEach(function (item, index) {
9 console.log(item, index);
10 })
11 }
12 fun(1,2,3);
13
14 //将一个数组插入到另一个数组
15 let arr = [2,3,4,5,6];
16 let arr1 = [‘abc‘,...arr, ‘fg‘];
17 console.log(arr1); //‘abc‘ 2 3 4 5 6 ‘fg‘
7.形参的默认值
作用：当不传入参数的时候默认使用形参里的默认值
1 //定义一个点的坐标
2 function Point(x=12, y=12) {
3 this.x = x;
4 this.y = y;
5 }
6 let point = new Point(25, 36);
7 console.log(point); //25 36
8 let point2 = new Point();
9 console.log(point2); // 12 12
8.箭头函数
又称：lambda表达式[和Java的差不多,但符号是=>]
1 //1.普通写法
2 let fun = function () {
3 console.log(‘fun()‘);
4 };
5 fun();
6 //2.没有形参，并且函数体只有一条语句
7 let fun1 = () => console.log(‘fun1()‘);
8 fun1();
9 console.log(fun1());
10 //3.一个形参，并且函数体只有一条语句
11 let fun2 = x => x;
12 console.log(fun2(5));
13 //4.形参是一个以上
14 let fun3 = (x, y) => x + y;
15 console.log(fun3(25, 39)); //64
16
17 //5.函数体有多条语句
18 let fun4 = (x, y) => {
19 console.log(x, y);
20 return x + y;
21 };
22 console.log(fun4(34, 48)); //82
特殊点在this:
箭头函数的this看外层的是否有函数，
- 如果有，外层函数的this就是内部箭头函数的this.
- 如果没有，则this是window。
箭头函数在定义时就确定了！！！使用call，apply，bind都不能绑定this。
一般函数得看谁调用他，this就是谁，可以使用call，apply，bind。
1 <button id="btn">测试箭头函数this_1</button> 2 <button id="btn2">测试箭头函数this_2</button>
1 setTimeout(() => {
2 console.log(this); //window
3 }, 1000)
4
5 let btn = document.getElementById(‘btn‘);
6 //没有箭头函数
7 btn.onclick = function () {
8 console.log(this); //btn
9 };
10 //箭头函数
11 let btn2 = document.getElementById(‘btn2‘);
12
13 let obj = {
14 name: ‘kobe‘,
15 age: 39,
16 getName: () => {
17 btn2.onclick = () => {
18 console.log(this);
19 };
20 }
21 };
22 obj.getName(); //window
23
24
25 function Person() {
26 this.obj = {
27 showThis: () => {
28 console.log(this);
29 }
30 }
31 }
32 let fun5 = new Person();
33 fun5.obj.showThis(); //Person
1 var name = "windowname";
2 var oo = {
3 name:"outname",
4 ll :{
5 inname : "inname",
6 f : () => console.log(this),
7 ff(){
8 console.log(this);
9 }
10 }
11 }
12
13 var obj4 = {
14 name : "name"
15 }
16
17 oo.ll.f(); //window
18 oo.ll.ff(); //调用它的ll ==> Object {inname: "inname"}
19 oo.ll.ff.call(obj4); //obj4 ==>Object {name: "name"}
20 oo.ll.f.call(obj4); //绑定不了还是window
原文地址：https://www.cnblogs.com/zhihaospace/p/12008776.html
时间： 2024-09-30 00:14:00