推荐广东中山网站建设,个人博客响应式模板,要怎样建立自己的网站,网站做外链的方式let和const命令ES6中新增了let命令#xff0c;用来声明变量#xff0c;用法类似与varlet和var的不同#xff1a;1、不存在变量提升 console.log(a); //Cannot access a before initializationlet a 100;2、同一个作用域不能重复定义同一个名称var c 20;let c 30;c…let和const命令ES6中新增了let命令用来声明变量用法类似与varlet和var的不同
1、不存在变量提升 console.log(a); //Cannot access a before initialization let a 100;2、同一个作用域不能重复定义同一个名称 var c 20; let c 30; console.log(c);//Identifier c has already been declared3、有严格的作用域 function fn() { var a a; if (true) { var a b; } console.log(a);//b } fn(); function fn() { var a a; //ES6中引入了块级作用域var a 和let a不在一个作用域中 if (true) { let a b; } console.log(a);//a } fn();4、块级作用域的重要性 //for循环的i会提升为全局变量 for (var i 0; i 5; i) {} console.log(i); //5 for (let i 0; i 5; i) {} //i的作用域范围只能在for循环的过程中 console.log(i); //i is not defined
const的使用const 声明一个只读的常量。一旦声明常量的值就不能改变。保持let的不存在变量提升同一个作用域内不能重复定义同一个名称有着严格的作用域常量obj储存的是一个地址这个地址指向一个对象。不可变的只是这个地址即不能把obj指向另一个地址 但对象本身是可变的所以依然可以为其添加新属性
const x 10;//如果声明的是常量则不能修改 x 100; //Assignment to constant variable. console.log(x); const y;//Missing initializer in const declaration const声明变量时需要立即初始化 console.log(y); //const声明引用类型可以对值进行修改 const arr [1,2,3,4]; arr[0] 100; console.log(arr); const obj {}; obj.id 1; console.log(obj);
解构ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构Destructuring解构是ES6的新特性, 比ES5代码简洁清晰减少代码量数组解构左边模式匹配定义变量右边是定义的数组或者对象
let [a, b, c] [1, 2, 3];let [a2, b2, c2, d2] [red, blue, green];let [x, [y1, y2], z] [1, [2, 3], 4];let arr [100, 200];var x arr[0] || 1;//默认值写法let [x 1] arr; //arr[0]存在在解构成x,如果不存在则赋值为1//当值是undefined的时候才会触发默认值机制let [x 1] [undefined, undefined];console.log(x);//1var [y 1, z] [100, null];
console.log(y,z);//100 null//默认值如果是表达式【函数】值在用到的时候才会执行惰性求值var [y 1, z f()] [100, 200];console.log(y,z);//100,200
对象解构对象的解构与数组有一个重要的不同。数组的元素是按次序排列的变量的取值由它的位置决定而对 象的属性没有次序变量必须与属性同名才能取到正确的值对象解构的写法let { id, name } { id: 1, name: jack };如果没有对应的属性名则返回undefined
//id:_id 别名let { id:_id, name:_name } { id: 1, name: jack };//i为undefined则返回1let { id: _id, name: _name, i 1 } { id: 1, name: jack };let { x 10 } {};console.log(x);//10let { x:a 10 } {};console.log(x);//x is not defined,x是匹配模式真正的变量是a//解构用于方法入参const fn ({ count, num }) num count;
var obj { count: 100, num: 99 };
let sumcount fn(obj);
console.log(sumcount);//累加解构let obj { id: 1, msg: error, arr: [5, 6, 7, 8] };const sum ({ id, arr }) arr.reduce((total, current) total current, id);
console.log(sum(obj));
如果要将一个已经声明的变量用于解构赋值必须非常小心
//报错的原因因为 JavaScript 引擎会将{x}理解成一个代码块从而发生语法错误。只有不将大括号写在 行首避免 JavaScript 将其解释为代码块才能解决这个问题let x;
{x} {x:1};//编译错误
console.log(x);正确写法let x;
({x} {x: 1});
将整个解构赋值语句放在一个圆括号里面就可以正确执行
函数参数解构
//数组参数解构function sum([x 0, y 0][]) {return x y;
}函数参数 [x 0, y 0] [] 表示参数是一个数组默认值为空数组 []如果传入的数组没有第一个元素x默认为0如果传入的数组没有第二个元素y默认为0sum();//000sum([1]);//101;sum([1,2]);//对象参数解构function fn2({ x 1, y 2 } {}) { console.log(x y);}var obj { x: 10, y: 20 };fn2(obj);扩展字符串扩展
includes() 返回布尔值表示是否找到了参数字符串。startsWith() 返回布尔值表示参数字符串是否在原字符串的头部。endsWith() 返回布尔值表示参数字符串是否在原字符串的尾部repeat() 返回一个新字符串,表示将原字符串重复n次。padStart() 用于头部补全padEnd() 用于尾部补全
数值扩展
Number.parseInt(100);Number.parseFloat(100.01);//用来判断数字是否是一个整数返回boolNumber.isInteger(100.01);Math.ceil() 返回大于或等于一个给定数字的最小整数ES5Math.floor() 返回小于或等于一个给定数字的最大整数ES5Math.round() 返回一个数字四舍五入后最接近的整数ES5//ES6Math.trunc() 用于去除一个数的小数部分返回整数部分Math.sign() 方法用来判断一个数到底是正数、负数、还是零。对于非数值会先将其转换为数 值//运算符**指数运算符2**3 8
数组扩展
//用于将一组值转换为数组var v Array.of(); //[]var v Array.of(1, 2, 3); //[1,2,3]//ES6 var v Array.of(); //[]var v Array.of(1, 2, 3); //[1,2,3]//创建指定长度的数组ES5var v new Array(3);//参数是数字则是数组长度console.log(v.length);//创建一个数组数组内的元素是字符3ES5var v1 new Array(3);console.log(v1);//find()用于找出第一个符合条件的数组成员//find方法的回调函数可以接受三个参数依次为当前的值、当前的位置和原数组var arr [3, 4, 7, 9];var a arr.find((value, index, arr) { return value 5;});//findIndex方法的用法与find方法非常类似返回第一个符合条件的数组成员的位置// 如果所有成员都不符合条件则返回-1var arr [3, 4, 7, 9];var a arr.find(function (item, index, arr) { //返回第一个符合条件的数组成员的位置 return item 5;});//用于将一个固定值替换数组的元素var arr [blue, Orange, red, green];arr.fill(abc, 2, 4); //[blue, Orange, abc, abc]//方法返回一个布尔值表示某个数组是否包含给定的值与字符串的 includes 方法类似[1, 2, 3].includes(2); // true[(1, 2, 3)].includes(4); // falsevar arr [blue, Orange, red, green];arr.includes(blue); //true//用于将嵌套的数组“拉平”变成一维的数组var v [1, 2, [3, 4], 5, [6, 7, 8]].flat(); //[1, 2, 3, 4, 5, 6, 7, 8]
对象扩展//对象属性2种定义方式 var o {}; o.name xp; let v age; o[v] 20; //这种定义v指的是变量 console.log(o); //对象属性定义方式 let age age1; o { [age]: 22, }; console.log(o);//链判断运算符let firstName message.body.user.firstName; //可以这样写但是不规范没有对数据的存在进行校验firstName (message message.body message.body.user message.body.user.firstName) || default;//这样的层层判断非常麻烦引入了“链判断运算符” ?.简化上面的写法firstName message?.body?.user?.firstName || default;//空值合并运算符let info aaaa;let b info ?? bbbb;//如果info为null或者undefined则取很后面的值
函数扩展函数默认参数/****************ES5*************** */function fun(x, y) {y y || 20;console.log(y);}fun(123);/****************ES6********************* */function fun(x, y 10) {console.log(y);}fun(234);rest参数/****************arguments******************* *///方法的参数是动态的,使用arguments参数集合类似与数组function fn() {console.log(arguments); //类似数组}fn(1, 2, 3);////rest动态参数function fn(...values) {console.log(values);let filterNum values.filter((value, index, values) {return value 20;});console.log(filterNum); //[ 222, 333 ]}fn(11, 222, 333, 13); //结果是一个标准的数组//报错function fun(a,...b,c){}fun(1,2,3,4)箭头函数var f (n1, n2) n1 n2;//定义一个方法返回一个对象var f function (n1, n2) {return { n1, n2 };};//箭头函数写法---写法错误var f (n1, n2) {n1, n2;};//正确写法var f (n1, n2) {return { n1, n2 };};var a f(1, 2);console.log(a); //{ n1: 1, n2: 2 }//正确写法返回对象需要使用()把对象包起来var f (n1, n2) ({ n1, n2 });var a f(1, 2);console.log(a); //{ n1: 1, n2: 2 }///方法入参解构let f ({ x 0, y 0 } {}) {return [x, y];};f({ x: 3, y: 3 });箭头函数的坑1、箭头函数不能当成构造函数也就是不能使用new关键字 //箭头函数不能当成构造函数也就是不能使用new关键字var p_fn (name, age) {this.name name;this.age age;};var pfn new p_fn(aaa, 30); //p_fn is not a constructor2、箭头函数没有原型对象3、不可以使用arguments对象 该对象在函数体内不存在 替代 restvar f () {console.log(arguments[2]);};f(); //Uncaught ReferenceError: arguments is not defined//使用rest代替var f (...rest) {console.log(rest);};f(1, 2, 3, 4);function fn3() {console.log(arguments[1]);}fn3(1, 2, 3, 4); //24、this指向 由于箭头函数不绑定this,它会捕获其所在上下文的this的值作为自己的this值let x x;let y y;let obj {x: x2,y: y2,getX: function () {console.log(this.x);},getY: () {console.log(this); //this指向Windowconsole.log(this.y);},};obj.getX(); //this指向objobj.getY(); //undefined//箭头函数中this指向//箭头函数中没有this但是箭头函数会捕获所在定义的位置上下文的this的值。//这里的getY在obj对象中obj对象定义在Window里。尽量不要在对象的方法里写箭头函数【不确定就在箭头函数中打印this】扩展运算符扩展运算符是三个点...它好比rest参数的逆运算。扩展运算符将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。//合并两个数组let arr2 [1, 2, 3];let arr3 [4, 5];let arr4 [...arr2, ...arr3];console.log(arr4);function sum(x, y) {return x y;}const item [1, 2];sum(...item);/***************************************************///第一种写法var a [];function f(x, y) {a.push(...y);}f(a, [1, 2, 3, 4]);console.log(a); //[ 1, 2, 3, 4 ]//第二种写法var a [];function f(x, ...y) {//这的...y是可变参数会将参数变成数组也就是[[1, 2, 3, 4]]a.push(...y);//这的...y是扩展运算符会将[[1, 2, 3, 4]]分解成[ 1, 2, 3, 4 ]}f(a, [1, 2, 3, 4]);console.log(a); //[[ 1, 2, 3, 4 ]]/**********************扩展************************ */let array [{ id: 1, name: a },{ id: 3, name: a },{ id: 10, name: a },{ id: 4, name: a },{ id: 27, name: a },{ id: 50, name: a50 },];//求id最大的对象let maxId Math.max(...array.map((v) v.id));console.log(maxId);
扩展运算符可以和解构结合起来使用let [first, ...rest] [1, 2, 3, 4, 5];console.log(first);//1console.log(rest);//[ 2, 3, 4, 5 ]扩展运算符在对象中的使用let o1 { id: 1 };let o2 { name: o2 };let o3 { ...o1, ...o2 };console.log(o3);//{ id: 1, name: o2 }
