ES6系列---【ES6新语法】
1、ES6与JavaScript的区别
ES6仅仅是⼀种语法规范。JavaScript只是ES6的⼀种实现，具体实现到多少看浏览器⼚家执⾏规范的程度。javascirpt 还包括DOM、BOM，另外JavaScript还可以应⽤与后台开发环境例如node。
2、let 与 const
ES6新增⽤于声明变量的语法。
2.1 let与var的区别
a) var 是函数作⽤域，let是块作⽤域
let与var ⽤法是⼀样的
let在 if、for循环等语句中声明的变量也是局部变量
优点：et声明的变量可以防⽌全局污染。容易产⽣bug
b) var 有变量提升，let不存在变量提升
let变量声明必须先声明，再使⽤，否则报错；
优点：对于开发者来说，代码更严谨，报错更加⼀⽬了然，容易排除。
c) var 可以重复声明的，let在同⼀作⽤域下不能重复声明
函数的形参let 也不允许重复声明。
优点：在复杂的项⽬开发中，程序员重复声明变量在所难免，var的情况不报错，不易觉察，容易产⽣bug。let直接报错，⽐较直观容易排除
2.2 let变量在for循环中的应⽤
let变量在for循环中，分为⽗作⽤域和⼦作⽤域。for循环的圆括号中的变量是⽗作⽤域中，for循环的⼤括号实际为⼦作⽤域。
var btns = ElementsByTagName("button");
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert(i + 1);
}
}
3、const 常量
const常量⽤于项⽬中不经常会改变的内容。例如：地址，数据库账号，密码、圆周率PI
const特征：
⼀旦被声明并赋值后不可再改动
声明和赋值必须同时进⾏
其他特征和let⼀样
约定俗称：常量名称⼤写
特殊说明：
const常量对于复杂类型来说，只能保证保存地址的不能被更改，⾄于地址指向的内容是可以修改的。
4、et变量与顶级对象（window）解绑
var 声明的全局变量，实际上是window对象的属性，这是JavaScript遗留的设计败笔
从ES6开始，let 声明的变量与window对象不再绑定
let a = "ok";
console.log( window.a ); //undefined
4、解构赋值
解构赋值： ES6按照⼀定的模式，将结构化的数据（数组、对象）中的数据提取出来，赋值给变量总结特征:
必须有赋值运算符(等号)
等号的前⾯是模式和变量
等号的后⾯是数组或对象
数组解构赋值的⼏种情况
要解构的数据和变量⼀⼀对应
要解构的数据⽐变量多，没有影响
要解构的数据⽐变量少，解构失败变量的值为undefined
解构赋值允许使⽤空的逗号实现缺省
解构赋值的默认值（当解构赋值失败时或者严格等于undefined时默认值⽣效）
let [x=1,y=x] = []; // x=1 y=1
let [x=1,y=x] = [2]; //x=2, y=2
let [x=1,y=x] = [1,2]; //x=1 y=2
let [x=y,y=1] = []; //报错，变量y未声明即使⽤了
对象解构赋值的情况
对象的解构赋值，因为对象中的属性没有次序，因此对象必须依靠键的匹配实现解构赋值。
对象解构赋值的默认值（当解构赋值失败时或者严格等于undefined时默认值⽣效）
// let {name:xxx,sex:yyy,age:zzz} = {name:"张三",age:20,sex:"男"}
// console.log( xxx, yyy,zzz);
// 实际可能写为：
// let {name:name,sex:sex,age:age} = {name:"张三",age:20,sex:"男"}
// console.log( name,sex,age);
// ES6允许简化为：
let {name,sex,age} = {name:"张三",age:20,sex:"男"}
console.log( name,sex,age);
函数形参的解构赋值
可利⽤数组实现解构赋值。注意声明函数时的形参此时不是数组，是模式和变量 function fn([a,b,c]){
console.log( a+b+c );
}
fn([2,3,4]); */
// 相当于
// let [a,b,c] =  [2,3,4]
利⽤对象实现函数解构赋值。注意，声明函数时的形参不是对象，是模式和变量\ function demo({x,y}){
return x*y
}
console.log( demo({x:2,y:2}) ); */
// 相当于
// let {x,y} = {x:2,y:2}
函数形参解构赋值时的默认值
function fn({x=0,y=0}){
return x*y
} */
// console.log( fn({x:1}) )
5、解构赋值应⽤场景
1）交换变量的值
2）获取函数的多个返回值
3）利⽤解构赋值实现ajax封装函数
// 利⽤解构赋值实现ajax封装函数。可灵活使⽤解构赋值的默认值，这样调⽤函数时只需要传递必要的参数即可
function sendAjax({type="get",url,data=null,dataType="json",timeout="5000"}) {
$.ajax({
type: type, //请求的⽅法 get post
url: url,  //请求的地址
data: data, // 请求时发送的数据
dataType: dataType, //期望返回的数据类型
// ajax成功后的回调函数
success: function (response) {
console.log(respnse);
},
// 失败时的回调函数
error: function (err) {
console.log(err);
}
});
}
// 函数调⽤时传递实参为⼀个对象
sendAjax({url:"baidu/01.json"});
sendAjax({url:"baidu/02.json"});
以上代码进⼀步优化为：
将封装函数保存为外部js, 需要时引⽤：
// 利⽤解构赋值实现ajax封装函数。可灵活使⽤解构赋值的默认值，这样调⽤函数时只需要传递必要的参数即可
function sendAjax({type="get",url,data=null,dataType="json",timeOut="5000"},callback) {
$.ajax({
type: type, //请求的⽅法 get post
url: url,  //请求的地址
data: data, // 请求时发送的数据
dataType: dataType, //期望返回的数据类型
// ajax成功后的回调函数
success: function (response) {
// console.log(respnse);
callback(response)
},
/
/ 失败时的回调函数
error: function (err) {
console.log(err);
}
});
}
<script src="./sendAjax.js"></script>
<script>
sendAjax({type:"post",url:"api.shenzhou888/v2/ecapi.banner.list"},function(data){
// 渲染页⾯代码
console.log( data );
});
</script>
6、字符串扩展--模板字符串
ES6可以使⽤模板字符串(``) 代替原来的繁琐的拼字符串渲染页⾯的⽅式。可以使⽤ ${ } 来嵌套变量或js表达式。  let str = `<ul>
<li><span class="name">姓名:</span><span class="uname">${student.name}</span></li>
<ul>
<li>${ "语⽂:"+ student.score[0]}</li>
<li>${ "数学:"+ student.score[1]}</li>
<li>${ student.score[2]}</li>
</ul>
<li>性别:${ student.sex }</li>
</ul>`;
let box = ElementById("box");
box.innerHTML = str;
7、ES6对象扩展
允许属性名简写
let name = "jack";
let sex = "男"
let obj = {
name,
sex,
say(){
console.log( name );
}
}
ES6⽀持对象的键为表达式
let city = {};
for(let i=0;i<26;i++){
console.log( String.fromCharCode(i+65) );
let key = String.fromCharCode(i+65);
city[key] = [];
}
⼏个静态⽅法
Object.assign() 对象的合并
Object.keys() 获取对象上所有的键，以数组的形式返回
Object.values() 获取对象上所有的值，以数组的形式返回
// 对象的合并，第⼀个参数为合并的⽬标对象
let obj1 ={ name:"jack"};
let obj2 = { sex:"男"};
Object.assign(obj1, obj2);
console.log( obj1 );
8、数组扩展
Array.from() 将类数组对象转换为真正的数组
// nodelist, htmlCollection, argument 类数组对象
/
/ 典型的类数组对象的形式：
let obj = {
"0":"hello",
"1":"world",
"length":2
}
javascript全局数组console.log( obj );
console.log( Array.from(obj) );
includes()
⽤来查数组中是否存在指定的值，有就返回true, 没有返回false。与indexOf的功能类似。  // includes() ⽤来查数组中是否存在指定的值，有就返回true, 没有返回false。解决了indexOf()对NaN⽆效的bug  let arr = [2,3,4,5,NaN];
/*  if( arr.indexOf(NaN) != -1 ){
console.log("到了");
}else{
console.log("没到");
} */
if( arr.includes(NaN) ){
console.log("到了");
}else{
console.log("没到");
}
9、函数扩展
ES6可以使⽤箭头（=>）来简化函数的声明。
特征：⽤ => 替换了 function
=>的后⾯：
如果函数体内只有⼀⾏代码，⼤括号可省略
如果只有⼀⾏代码⽽且是return语句，return 也可省略
如果只有⼀⾏代码⽽且是retrun⼀个对象，为了避免歧义，要使⽤圆括号包起来=>的前⾯:
如果只有⼀个形参，圆括号也可以省略
如果有多个或者没有形参，圆括号不能省略
箭头函数中的this指向规律
ES6之前的普通函数中this指向规律：
1）在全局函数或定时器的回调函数中this指向 window
2）在事件处理函数中this指向事件源
3）在对象的⽅法中this指向对象本⾝
4）可使⽤call/apply/bind 改变this指向
ES6中箭头函数的this指向规律：
1）定义好箭头函数后，this的指向就确定了，与call/apply等没有关系
2）永远指向其上层环境（环境指的的是函数内或全局下，只有这两种情况，其他的⼤括号不能称为环境）  function Person(){
let fn1 = ()=>{
console.log( this );
}
fn1();
}
// 1、Person当普通函数调⽤时
// Person();
// 2、Person当构造函数使⽤时，构造函数中的this发⽣了改变，指向创建的新对象。那么箭头函数中的this也指向新创建的对象。
new Person();
箭头函数的不适应⽤的情况：
1）事件处理函数中；
2）对象的⽅法中；
3）构造函数中
函数形参的默认值
// 函数形参的默认值
function fn(name="杨营"){
// if(!name){
//  name = "杨营";
// }
// name = name || "杨颖";  //短路语法
console.log(`我是:${name}` );
}
fn("刘⼦琪")
rest剩余参数运算符和 spread 扩展运算符
rest 剩余参数，⽤于获取多余（全部）的实参并放⼊⼀个数组中。
// rest剩余参数运算符(...)，只出现在函数形参声明处，作⽤可代替arguments，实现将实参转换为数组
function fn(...c){
console.log( Array.from(arguments)  );
console.log( c );
}
fn(1,2,3,4,5,6)
spread扩展运算符(...)，作⽤是将结构化的参数（数组，对象）转换为逗号分隔的参数序列。类似rest的逆运算。/*  let arr = [2,3,4,5]
console.log( ...arr );
*/
// 应⽤场景1 -- 函数传参
/*  let arr = [2,5,0,9];
console.log( Math.min(...arr) );  */
// 应⽤场景2--数组合并
let arr1 = [2,3,4,5];
let arr2 = ["hello","ok"];
let arr3 = [...arr1,...arr2];
// 对象合并
let obj1 = {
name:"jack"
}
let obj2 = {
age:20
}
let obj3 = {
.
..obj1,
...obj2
}
console.log( obj3 );
10、symbol 类型
symbol是ES6新增的数据类型，string、number、boolean、null、undefined、object、symbol。
// symbol类型，作⽤是产⽣⼀个永不和其他symbol相同的独⼀⽆⼆的值。
// 创建symbol时可添加⼀个参数，起到在控制台输出时的区分作⽤，类似于程序中的注释，对程序的执⾏没有任何影响
let s1 = Symbol("⽼⼤");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。