ES6
什么是ES6?
ES全称ECMAScript,一项脚本语言的标准化规范。
为什么用ES6
- 变量提升特性怎额国家了程序运行的不可预测性
- 语法过于松散,实现不同功能。不同人代码不同。
let
ES6中新增的用于声明变量的关键字。
- let声明的变量只在所处块级有效,块外访问不到,且报错a is not define。(块级作用域,括号里的作用域)。
if(true) {
let a=10;
}
console.log(a)
- 不存在变量提升(先输出后定义)
console.let(a)
let a=10;
- 暂时性死区。t和if语句绑定。外面定义var没有用。会报错先输出后定义。t is not define。
var t=123;
if(true) {
t='abc'
let t;
}
let习题
输出几?
<script>
var arr=[];
for(var i=0;i<2;i++) {
arr[i]=function(){
console.log(i);
}
}
arr[0]();
arr[1]();
</script>
输出的都为2。
题解:
- 变量i是全局的,函数执行时输出的都是全局作用域下i的值。
- 就是数组里存的是console(i)。现在i=2,所以都输出2。
```javascript
<script>
var arr=[];
for(var i=0;i<2;i++) {
arr[i]=function(){
console.log(i);
}
}
arr[0]();
arr[1]();
</script>
输出0和1
题解:
- let声明是块级作用域。
- 每个循环产生一个块级作用域。每个块级作用域中变量是不同的,函数执行时输出的是循环产生的块级作用域下的值。
常量const
const作用
声明常量,常量就是值(内存地址)不能变化的量。
- 具有块级作用域。
if(true) {
const a=10;
}
console.log(a) //报错 a is not define
-
必须赋初始值。否则Missing initializer in const declaration
-
声明常量赋值后,值(内存地址)不能变化。复杂数据类型,如数组值可以改变,地址不能变。否则报错assignment to constant variable。
<script>
const p=3.14
p=100;//改变了值,报错。
const a=[100,200];
arr[0]='a';//不报错
arr[1]='b';//不报错
ary['a','b'] //改变了地址,报错
</script>
let、const、var的区别
- 使用var声明的变量,作用域为该语句所在函数,且存在变量提升现象。
- 使用let声明变量,作用域为所在代码块,不存在变量提升。
- 使用const声明的是常量,作用域为所在代码块,不存在变量提升。在后面代码块中不能修改该常量的值。
解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。
数组解构
:允许我们按照一对一对应的关系从数组中提取值并赋值于变量。
let [a,b,c]=[1,2,3];
console.log(a);
console.log(b);
console.log(c);
如果变量数量和数字长度不能一对一对应,超出部分是undefine的。
对象解构
<script>
let person={name:'zhangsan',age:20}
//ES6之前
var age=preson.age;
var name=person.name;
//ES6 1.
let {name,age}=person;
console.log(name);//zhangsan
console.log(age); //20
//ES6 2.
let {name:myname,age:myage}=person
console.log(myage);
console.log(myname);
</script>
箭头函数
新增定义函数方法。
- 并且代码的执行结果就是函数的返回值 函数体大括号可以省略。
- 如果形参只有一个,形参外侧小括号可以省略。
<script>
const fn=()=>{
console.log(123);
}
fn();
//传统函数和箭头函数,如果函数体中只有一句代码。
//并且代码的执行结果就是函数的返回值 函数体大括号可以省略。
function sum(a,b){
return a+b;
}
const sum=(a,b)=>{
return a+b;
}
const sum=(a,b)=>a+b;
//如果形参只有一个,形参外侧小括号可以省略
function fn(v){
return v;
}
const fn=v=>{
alert(v);//浏览器弹出
}
fn(20);
</script>
箭头函数不绑定this关键字,箭头函数中的this,指的是函数位置的上下文this。
function fn{
console.log(this);
return()=> {
console.log(this);
}
}
const obj ={name:'Zhangsan'};
const res=fn.call(obj);
res();
箭头函数this不指向window。而是指向fn的this,就是obj。
练习题
- obj是个对象,不是函数,不产生作用域。实际箭头函数定义在全局作用域下,指向window,window没有age值,所以是undefine。
- 若在全局里设置对象,则输出全局下100。
<script>
var obj={
age:20,
say:() => {
alert(this.age);//undefine
}
}
obj.say();
=================
var age=100;
var obj={
age:20,
say:() => {
alert(this.age);//100
}
}
obj.say();
</script>
剩余参数
什么是剩余参数?
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
<script type="text/javascript">
const sum=(...args)=>{
let total=0;
//只要一个形参,省略了item的括号
args.forEach(item=>total+=item);
return total;
};
console.log(sum(10,20));
console.log(sum(10,20,30));
</script>
剩余参数和解构配合使用。
解决了数组解构必须一对一的问题。
let a=['张三','李四','王五'];
let [s1,...s2]=a;
console.log(s1);
console.log(s2);