ES6基础入门
ES6是JavaScript的版本标准,目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。ES6的学习是在JS基础学习之后进行的。
推荐用书:《ES6标准入门》
学习目录:
一、let与const
ES6中增加了两个声明的关键字,let和const。
学习这两个命令前要理解两个概念:
块级作用域,即在一对大括号内声明的变量只在大括号内有效
变量提升:JS 代码执行之前,浏览器会默认把带有 var 声明的变量在内存中进行提前声明或者定义
1.let命令
let最突出的特点就是声明的变量只在代码块内有效。
经典例题:
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };} a[6](); // 打印10 //变量i是全局的,函数执行时输出的都是全局作用域下的i值 --------------------------------------- let a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); };} a[6](); // 打印6 //每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的i值.
let还有一个特点就是声明的变量不存在变量提升,所以一定要在声明后使用,否则报错。
// var 的情况 console.log(a); // 输出undefined var a = 2; // let 的情况 console.log(b); // 报错ReferenceError let b = 2;
2.const命令
const关键字用于声明常量,声明时必须初始化(如果声明不赋值会报错),声明后常量的值不可更改。
3.let、const、var区别
var | let | const |
函数级作用域 | 块级作用域 | 块级作用域 |
变量提升 | 变量不提升 | 变量不提升 |
可重新赋值和重复定义 | 同一作用域不可重复声明但可重新赋值 | 同一不可重复声明且不可重新赋值 |
声明变量 | 声明变量 | 声明常量 |
二、解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。如果解构不成功,变量的值为undefined。
数组解构: let [x, , y] = [1, 2, 3]; x // 1 y // 3 对象解构: let person = { name: 'zhangsan', age: 20 }; let {name: myName, age: myAge} = person; // myName myAge 属于别名 console.log(myName); // 'zhangsan' console.log(myAge); // 20 字符串解构 const [x,y,z] = 'sea'; x// "s" y // "e" z // "a"
解构赋值的使用:
交换变量值:
[x, y] = [y, x];
函数参数的定义并且从函数返回多个值
//参数
function f([x, y, z]) { ... } f([1, 2, 3]); //返回值 function example() { return [1, 2, 3]; } let [a, b, c] = example();
提取json数据
let jsonData = { id: 42, status: "OK", data: [867, 5309]}; let { id, status, data: number } = jsonData;
解构赋值的好处在于使代码更简洁,语义更清晰,更方便获取数据字段。
三、字符串扩展
模板字符串:
es6中增强字符串,用反引号表示
模板字符串特点:
-
可以表示多行字符串,所有的空格缩进都保留
-
可以在字符串中嵌入变量
-
可以调用函数
let person={
name:'hl',
age:18,
}
let html=`<div>
<span>${person.name}</span>//空格和换行被保留,变量写在${ }中,变量不声明会报错
<span>${person.sge}</span>
</div>`;
//调用函数
function fn() { return "Hello World";
}
let str=`${fn()}`//${ }中对函数调用
console.log(str);
四、数组扩展
扩展运算符:(...),可以将一个数组转为用逗号分隔的参数序列
应用:
-
合并数组
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; // ES5 的合并数组 arr1.concat(arr2, arr3); // ES6 的合并数组 [...arr1, ...arr2, ...arr3]
-
与解构赋值结合
注:扩展运算符用于数组赋值,只能将其放在参数最后一位,否则报错
//数组解构赋值,
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5]
-
函数返回值
-
字符串
五、函数扩展
1.函数默认值
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。在声明函数的时候给参数设定一个默认值,如果函数调用时参数不赋值,参数就等于默认值,赋值则为新的值。非尾部参数函数调用时不可以忽略不复制(会error报错),可以使用undefined代替。
function fun(x=2,y=5){//x默认值使2,y默认值是5 let z= x+y; console.log(z); } fun();//打印7,函数参数等于默认值 fun(1,1);//2 函数参数为传递的值 fun( ,4);//error 第一个参数不能忽略,报错 fun(undefined,4)//6 第一个参数为默认值,第二个参数为传递值 fun(1,);//6 第二个参数未赋值为默认值
2.箭头函数
ES6中新增的定义函数的方式。 允许使用“箭头”(=>)定义函数。
函数定义格式:
const fn = () => {}
在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略.
//ES5函数定义 var sum = function(num1, num2) { return num1 + num2; }; //箭头函数形式 var sum = (num1, num2) => num1 + num2;
如果形参只有一个,可以省略小括号
function fn (v) { return v; } //箭头函数,省略参数括号 const fn = v => v;
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
let fun = (x,y) => { console.log(x,y); return x+y; //必须加return才有返回值 }
如果要返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了,正确写法
let fun = ()=>({ name: hl })