2020.12.3 上午4:00
es6==>基本概念、let、const、模板字符串、解构赋值、数组的扩展
01.基本概念
es6 指的是ECMAScript扩展
ES6 的第一个版本,在 2015 年 6 月发布,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)
ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等
02.let
let块级作用域:{就是代码块}向上寻找距离该变量最近的开始的函数的{,作用范围就是该{}之内
{
let a=10;
console.log(a);//10
}
console.log(a);//报错 a is not defined
//let不能重复声明
let m=100;
let m=1;
// 报错 'm' has already been declared 已经声明过
//没有变量提升的概念
console.log(k);//报错 不能在声明之前使用
let k=10;
let特点总结(区别于var):
1.块级作用域
2.不能重复声明
3.没有变量提升的概念
暂时性死区:在一个代码块内,如果有某个变量,会绑定该区域,不再受外界的影响,let没有变量提升的概念
//let声明变量之前,不能使用
let m=100;
{
//暂时性死区,m已经绑定该块级作用域,不受外界的影响,如果在声明前使用就会报错
console.log(m); //报错
let m=10;
console.log(m);//10
}
console.log(m);//100
易错情况
let a=10;
var a=10;
//报错 重复声明
let a=10;
{
var a=10;
}
//直接写{}不会限制var创建的变量,只有函数的{}可以限制
//报错 重复声明
var a=10;
{
let a=10;
}
//let绑定在{},不受外界的影响
//不会报错
let a=10;
(function add(){
var a=10;
})();
//var a=10的作用域限制在自调用函数内,不会影响外界
//不会报错
03.let的应用
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btns=document.getElementsByTagName('button');
// let将i的作用域限制在for的{}中
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
btns[i].style.background='lime';
}
}
</script>
</body>
2020.12.4
04.const
const声明的是常量,值是不可以改变的(不能重新赋值),其余语法和let一样
const a=5000;
a=100;
//报错 常量不能重新赋值
console.log(a);
const a=100;
//报错 a声明之前不能使用
const a=100;
const a=200;
//报错 重复声明
const特点总结:
1.不能重新赋值
2.块级作用域
3.不能重复声明
4.没有变量提升的概念
//针对对象的用法
const stu={
name:'zs'
}
//stu是对象,在内存中以地址的形式存在,修改了数据但是地址没变
stu.name='ls';//不会报错
//重新赋值会报错(地址改变)
stu={
name:'ls'
}
05.模板字符串
模板字符串 在变量和常量拼接的时候使用 整个字符串使用`${变量}`
标签模板 ``可以跟在一个函数后面,该函数将被调用来处理这个模板字符串。这被称为模板标签功能
function fn(x){
console.log(x);
}
//解析函数参数的时候,会把参数解析成一个数组形式(传很多参数也只会处理成一个)
//会将1和23解析成数组,[1,23]然后赋给x
fn`1,23`;
//模板字符串作为函数参数参数存在。会执行函数,自动解析参数 把所有常量拼接成一个数组。变量依次拼接到数组后面
function fn(x,y){
console.log(arguments);
};
var m=10;
var n=100;
fn`hello${m}zsh${n}m${m+n}n`;
//等价于
fn(['hello','zsh','m','n'],m,n,m+n);
输出:
06.解构赋值
解构:es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这称为解构
//数组的解构,按照数组顺序依次赋值
let [a,b,c]=[10,100,'h'];
//等价于
let a=10;
let b=100;
let c='h';
//如果变量多余,相当于声明不赋值。如果数据多余,对变量没有影响
//变量多余
let [a,b,c,d]=[10,100,'h'];
console.log(a,b,c,d);//10,100,'h',undefined
//数据多余
let [a,b,c,d]=[10,100,'h',12,3,4,5,5];
console.log(a,b,c,d);//10,100,'h',12
交换变量的值:
let m=12;
let n='my';
[n,m]=[m,n];
console.log(m,n);//my,12
对象的解构赋值
对象的解构赋值 使用的是{}
对象的解构与数组的解构有一个重要的不同,数组的元素是按次序排列的
数组解构中,变量的值由所处的位置决定。对象的属性没有次序,变量必须与属性同名才可以,才可以取到正确的值。
var stu={
name:'za',
age:112
};
//hobby相当于声明了没赋值
let {name,age,hobby}={stu};
console.log(name,age.hobby);//za,112,undefined
字符串的解构赋值
按照字符串的顺序依次赋值
let [x,y,z]='hello';
console.log(x,y,z);//h,e,l
类数组的对象的解构赋值
类似数组的对象都有一个length属性,可以对该属性进行解构赋值。
let {length:len}='zsh';
console.log(len);//3
函数的解构赋值
函数的解构赋值类似于数组的解构解构
function add([a,b]){
console.log(a+b);
}
add([3,4]);//7
//字符串拼接,相当于把字符串3赋给了a,字符串4赋给了b
add('34');//34
07.数组的扩展
es6中创建数组的新方式
var arr=new Array(10);
console.log(arr);//创建一个length为10的数组
//es6中创建数组的新方式
arr=Array.of(10);
console.log(arr);//创建一个length为1,值为10的数组
Array.of()对new Array()的扩展 。不论输入什么,都代表的是数组元素。
类数组
判断a否是类数组 a instanceof Array
var btns=document.getElementsByTagName('button');
console.log(btns instanceof Array);//false
//forEach只能遍历数组,不能遍历类数组
btns.forEach(function(item,index,arr){
console.log(arr);
});
//报错 btns.forEach is not a function
//通过es6中的Array.from()将类数组转为为数组
btns=Array.from(btns);
btns.forEach(function(item,index,arr){
console.log(arr);
});
Array.from()将类数组转为为数组
var stu={//类数组
0:'a',
1:'b',
2:'c',
length:3
}
stu=Array.from(stu);//将stu转为数组
stu.forEach(function(item,index,arr){
console.log(item);//a,b,c
});
类数组 一定要严格按照格式来写 属性名是0 1 2 并且一定要有length。如果转化为了数组,最终的长度是length的值
find和findIndex
数组.find(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的值
从左到右寻找 如果找不到结果是undefined
var score=[98,60,45,56];
var m=score.find(function(n){
return n<60;
});
console.log(m);//45
数组.findIndex(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的下标。从左到右寻找 如果找不到结果是-1。
var score=[98,60,45,56];
var x=score.findIndex(function(n){
return n<80;
});
console.log(x);//1