ES6学习记录(一)

tech2023-05-21  87

一、let 的使用

let的作用与var类似, 用于声明一个变量,主要有三个特点: 1、作用域在块内:{} 2、不能够重复声明 3、不会预处理(var会在编译时变量提升)

//console.log(age);// age is not defined let age = 12; //let age = 13;不能重复声明 console.log(age); let btns = document.getElementsByTagName('button'); for(let i = 0;i<btns.length;i++){//这里如果是var时,会导致alter出来的结果都是3 btns[i].onclick = function () { alert(i); } }

二、const的使用

const的作用是定义一个常量,过去定义常量时,用var声明,虽然全部大写,来表示常量,但是实际上是允许修改的,const声明的常量是不允许修改的。主要特点: 1、作用域在块内:{}, 2、不能够重复声明 3、不会预处理

const sex = '男'; console.log(sex); //sex = '女';//不能修改 console.log(sex);

三、变量的结构和赋值

可以用一条语句给多个变量赋值: 1、对象: let {n, a} = {n:‘tom’, a:12} 2、数组: let [a,b] = [1, ‘atguigu’];

let obj = {name : 'kobe', age : 39}; //对象的解构赋值 let {age} = obj; console.log(age); // let {name, age} = {name : 'kobe', age : 39}; // console.log(name, age); //3. 数组的解构赋值 不经常用 let arr = ['abc', 23, true,4581]; let [a, b, c, d] = arr; console.log(a, b, c, d); let [, , , e] = arr;//找第四个位置的变量 console.log(e); function person(p) {//不用解构赋值 console.log(p.name, p.age); } person(obj); function person1({name, age}) { console.log(name, age); } person1(obj);//可以直接传递对象

四、模板字符串的拼接

用来简化字符串的拼接,使用``内…${xxx}…

let obj = { name : 'anverson', age : 41 }; console.log('我叫:' + obj.name + ', 我的年龄是:' + obj.age); console.log(`我叫:${obj.name}, 我的年龄是:${obj.age}`);

五、对象的简化写法

1、可以省略的对象中的同名属性值 2、省略方法的function

let x = 3; let y = 5; //普通写法 // let obj = { // x : x, // y : y, // getPoint : function () { // return this.x + this.y // } // }; //简化的写法 let obj = { x, y, getPoint(){ return this.x } }; console.log(obj, obj.getPoint());

六、箭头函数

箭头函数主要的作用就是定义匿名函数,多用来定义回调函数。 基本语法: 1、没有参数: () => console.log(‘x’) 2、一个参数: i => i+8 3、大于一个参数: (i,j) => i+j 4、函数体不用大括号: 默认返回结果,可以省略return语句,打印时可以体现。 5、 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回

let fun = function () { console.log('fun()'); }; fun(); //没有形参,并且函数体只有一条语句,可以改写成 let fun1 = () => console.log('fun1()'); fun1(); console.log(fun1()); //一个形参,并且函数体只有一条语句 let fun2 = x => x; console.log(fun2(5)); //形参是一个以上 let fun3 = (x, y) => x + y; console.log(fun3(25, 39));//64 //函数体有多条语句 let fun4 = (x, y) => { console.log(x, y); return x + y; }; console.log(fun4(34, 48));//82,如果不return的话,打印的是没有结果的 //setTimeout会将当中的this指向window对象 setTimeout(() => { console.log(this); },1000) function Person() { this.obj = { showThis : () => { console.log(this); } } } let fun5 = new Person(); fun5.obj.showThis();//Person函数

箭头函数中最重要的就是this的指向问题 官方定义:箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this 判断方法:箭头函数的this看外层的是否有函数,如果有,外层函数的this就是内部箭头函数的this,如果没有,则this是window。

七、点点点运算符

arguments:主要是在函数内部获取形参的伪数组,内部并没有数组的遍历方法,提供了callee函数来指向函数本身(多用来迭代使用) 点点点运算符: 1、可变参数:用在函数内部,是真正的数组,可以调用数组相关的方法的。 2、扩展运算符:为了拼接数组更加的方便(暂时)

1、 function fun(...values) { console.log(arguments); // arguments.forEach(function (item, index) { // console.log(item, index);//是无法使用的 // }); console.log(values);//真正的数组,可以调用数组的方法 values.forEach(function (item, index) { console.log(item, index); }) } fun(1,2,3); 2、 let arr = [2,3,4,5,6]; let arr1 = ['abc',...arr, '123132']; console.log(arr1);

八、形参默认值

形参默认值是函数有形参的情况下,调用函数时未传参,使用的默认值

function Point(x=12, y=12) { //如果不传参的情况下,xy默认为12 this.x = x; this.y = y; } let point = new Point(25, 36); console.log(point); let p = new Point(); console.log(p);
最新回复(0)