电子商务网站的建设的原理,项目策划书模板范文,网站运营包括哪些,wordpress 分享到插件课程介绍 ES6新特性ReactJS入门学习 1、ES6 新特性 1.2、let 和 const 命令 var 之前#xff0c;我们写js定义变量的时候#xff0c;只有一个关键字#xff1a; var var 有一个问题#xff0c;变量作用域的问题#xff0c;作用域不可控#xff0c;就是定义的变量有时会…课程介绍 ES6新特性ReactJS入门学习 1、ES6 新特性 1.2、let 和 const 命令 var 之前我们写js定义变量的时候只有一个关键字 var var 有一个问题变量作用域的问题作用域不可控就是定义的变量有时会莫名奇妙的成为全局变量。 例如这样的一段代码 scriptfor (var i 0; i 5; i) {console.log(i);}console.log(循环外i) /script 运行打印的结果是如下 可以看出在循环外部也可以获取到变量i的值显然变量i的作用域范围太大了在做复杂页面时会带来很大的问题  let let 所声明的变量只在 let 命令所在的代码块内有效。我们把刚才的 var 改成 let 试试  scriptfor (let i 0; i 5; i) {console.log(i);}console.log(循环外i) /script 这样就把变量的i的作用域控制在了循环内部。 const const 声明的变量是常量不能被修改类似于java中final关键字  scriptconst a 1;console.log(a , a);//给a重新赋值a 2;console.log(a , a); /script 可以看到变量a的值是不能修改的。 1.3、字符串扩展 在ES6中为字符串扩展了几个新的API includes() 返回布尔值表示是否找到了参数字符串。startsWith() 返回布尔值表示参数字符串是否在原字符串的头部。endsWith() 返回布尔值表示参数字符串是否在原字符串的尾部。 实验一下 scriptlet str hello word;console.log(str, 中是否包含了word , str.includes(word));console.log(str, 中是否包含了baima , str.includes(baima));console.log(str, 中是否以h开头 , str.startsWith(h));console.log(str, 中是否以a开头 , str.startsWith(a));console.log(str, 中是否以a结束 , str.endsWith(a));console.log(str, 中是否以h结束 , str.endsWith(h)); /script 字符串模板 ES6中提供了来作为字符串模板标记。我们可以这么玩 scriptlet str helloitheimaitcast;console.log(str); /script 在两个之间的部分都会被作为字符串的值可以任意换行。 1.3、解构表达式 什么是解构 -- ES6中允许按照一定模式从数组和对象中提取值然后对变量进行赋值这被称为解构 (Destructuring)。 1.3.1、数组解构 比如有一个数组 let arr [1,2,3] 之前我想获取其中的值只能通过角标。ES6可以这样 scriptlet arr [1,2,3]const [x,y,z] arr;// xyz将与arr中的每个位置对应来取值// 然后打印console.log(x,y,z);const [a] arr; //只匹配1个参数console.log(a) /script 结果 1.3.2、对象解构 例如有个person对象 const person {name:jack,age:21,language: [java,js,css]} 我们可以这么做 // 解构表达式获取值const {name,age,language} person;// 打印console.log(name);console.log(age);console.log(language); 结果 如过想要用其它变量接收需要额外指定别名 {name:n} name是person中的属性名冒号后面的n是解构后要赋值给的变量。  1.4、函数优化 在ES6中对函数的操作做了优化使得我们在操作函数时更加的便捷。 1.4.1 函数参数默认值 在ES6以前我们无法给一个函数参数设置默认值只能采用变通写法 function add(a , b) { // 判断b是否为空为空就给默认值1 b b || 1; return a b; } // 传一个参数 console.log(add(10));现在可以这么写 function add(a , b 1) { return a b; } // 传一个参数 console.log(add(10));1.4.2 箭头函数 箭头函数 - JavaScript | MDN ES6中定义函数的简写方式 一个参数时 var print function (obj) { console.log(obj);// 简写为 var print2 obj console.log(obj);多个参数 // 两个参数的情况 var sum function (a , b) { return a b; } // 简写为 var sum2 (a,b) ab;没有参数 // 没有参数时需要通过()进行占位代表参数部分 let sayHello () console.log(hello!); sayHello();代码不止一行可以用 {} 括起来。 var sum3 (a,b) { return a b;// 多行没有返回值 let sayHello () { console.log(hello!); console.log(world!); }sayHello();1.4.3 对象的函数属性简写 比如一个Person对象里面有eat方法 let person {name: jack,// 以前eat: function (food) {5console.log(this.name 在吃 food);},// 箭头函数版eat2: food console.log(person.name 在吃 food),// 这里拿不到this// 简写版1eat3(food){console.log(this.name 在吃 food);} }1.4.4 箭头函数结合解构表达式 比如有一个函数 const person {name:jack,age:21,language: [java,js,css] }function hello(person) {console.log(hello, person.name) }//如果用箭头函数和解构表达式 var hi ({name}) console.log(hello, name); hi(person)1.5 map和reduce ES6中数组新增了map和reduce方法。 1.5.1 map map()接收一个函数将原数组中的所有元素用这个函数处理后放入新数组返回。 举例有一个字符串数组我们希望转为int数组 let arr [1,20,-5,3]; console.log(arr) let newArr arr.map(s parseInt(s)); console.log(newArr)