ES6一

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
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页