ES6
1.什么是es6
ES6 类似于 HTML5 CSS3
HTML1.0 2.0 3.0 4.0 5.0
CSS3
ES6是简写
ES6 => ECMAscript 6.0
ECMA 是一个标准 这个组织就是ECMA 它制定的标准就是 ECMAscript
ECMA 标准 => 升级 ES1.0(1996) -> ......ES6.0 .. ES7 ES8
ES4 版本 由于过于激进,导致没有存储太久
2. es6的使用技巧
例如:
js中声明变量的时候 var
原生的js中 var 关键字 可以声明变量 var关键字可以重复使用,过于灵活,就是不严谨
var a = 10;
var a = 20;
var a = 30;
我们无法控制 变量的修改,声明完后,可以随便更改
js不能让量不能随便更改的方法:
变量:就是可以变化的量
常量:不可以被改变的量
var host = '192.168.17.23';
..... 3000行代码
var host = 'admin'
原生js没有块级作用域
块级:{}
作用域 变量的作用域 由于函数的存在,导致变量的作用域,发生改变
块级作用域:
{}
if(){
}
function 函数(){
}
if(true){
var b = 20;
}
console.log(b);//20
3. ES6中的语法格式
ES6 声明变量
var => let
let 特点: 1.不能重复声明 let a = 10 let a=20 X 2.可以改 3.支持块级作用域
ES6 声明常量
const 特点:1.不能重写 2.不能重复定义 3.支持块级作用于域
常见的块级作用域
例如: function(){ } if(){ } for(){ } 不仅仅上边的是 直接写 {} 也是块级作用域
案例:
let b = 10;
console.log(b);
{
let b =40;
console.log(b);
}
console.log(b);
注意:在不同的作用域内声明的变量,没有影响,在{}中声明的变量只能在{}中使用
案例2:
var name = "张三";
{
console.log(name);
}
注意:在块级作用域外声明的变量,在{}中可以使用
4.函数的使用之 箭头函数
函数:
function 函数名(形参,形参2){
函数体
return 特点:1.终止程序函数执行 2.将函数的执行结果返回到调用处
}
函数需要调用才能执行
函数名(实参,实参)
箭头函数:
(形参)=>{函数体}
使用:
function show(a){
return a*2;
}
console.log(show(5));
等价于es6中的箭头函数写法
let show=(a)=>{
return a*2;
}
console.log(show(5));
等价于:
let show = a=>a*2;
console.log(show(5));
1.变量的声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// var a=10;
// a=20;
// console.log(a);//20
// var b=10;
// if(true){
// console.log(b);//10
// }
// if(true){
// var b=20;
// }
// console.log(b);//20
// var a=10;
// a=20;
// console.log(a);
// let b=20;
// let b=30;//Uncaught SyntaxError: Identifier 'b' has already been declared
// console.log(b);
// let c=20;
// c=40;
// console.log(c);//40
// const a=20;
// a=30;//Uncaught TypeError: Assignment to constant variable.
// console.log(a);
// if(true){
// let a=20;
// console.log(a);
// }
// console.log(a);// Uncaught ReferenceError: a is not defined
//============================================================================================
// let b=10;
// console.log(b);//10
// {
// let b=40;
// console.log(b);//40
// }
// console.log(b);//10
//============================================================================================
let name='张三'
{
let name='李四'
console.log(name);//李四
}
function fun(){
return 'hahahha'
}
console.log(fun());//hahahha
</script>
</html>
2.箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// window.onload 页面加载完成后执行的内容
// 原来的
// window.onload=function(){
// alert(123)
// }
// ES6
// window.onload=()=>{
// alert(123)
// }
// 有名字的函数
// function fun(){
// alert(123)
// }
// fun()
// ES6中有名字的函数
// let show=(a)=>{
// return a*2;
// }
// 使用的时候变量名()
// console.log(show(10));//20
// 上边的案例的另外一种写法
// 箭头函数：如果只有一个参数，()可以省略
// 如果直接一个return{} 可以省略
// let show2=a=>a*2;
// alert(show2(5))
</script>
</html>
3.参数的收集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
参数的扩展
1、收集参数
只要在接收的形参位置使用 ...ages 进行收集实参
...ages 作为形参，返回的结果是数组
*/
// function show(...ages){
// console.log((ages[1]));
// }
// show(10,20,30,40)//20
// function show(a,b,...ages){
// console.log((ages));//[3, 4]
// console.log(a);//1
// }
// show(1,2,3,4)
// let arr=[1,2,3,4]
// function show(a,...ages){
// console.log(ages);//[2,3,4]
// console.log(a);//1
// }
// show(...arr) // 相当于是 show(1,2,3,4) 因为 ...arr==1,2,3,4
// 展开数组
// let arr1 = [1, 2, 3, 4];
// let arr2 = [5, 6, 7, 8];
// let arr3 = [...arr1, ...arr2]
// console.log(arr3); //[1,2,3,4,5,6,7,8]
// console.log(arr3[0]); //1
/*
// 一维数组
[1, 2, 3, 4, 5, 6]
// 二维数组
[
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5, 6]
]
// 多维数组
[
[
[1, 2, 3], 2, 3, 4, 5, [1, 2, 3]
],
[
[1, 2, 3], 2, 3, 4, 5, [1, 2, 3]
],
[
[1, 2, 3], 2, 3, 4, 5, [1, 2, 3]
]
]
*/
// // 1,3
// function show4(...ages){
// return fun(...ages); fun(1,3)
// // console.log(...ages);1,3
// }
// function fun(n,m){
// return n+m;//4
// }
// console.log(show4(1,3)); //4
</script>
</html>
4.解构赋值、映射、汇总
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 解构赋值：
// 1.左右两边的结构必须
// let arr=[1,2,3];
// // 把 1 2 3 分别放到变量 a b c中
// let a=arr[0]
// let b=arr[1]
// let c=arr[2]
// console.log(a);//1
// let [a,b,c]=[1,2,3];
// console.log(a);//1
// let [a,b,c]='bbc';
// console.log(a);//b (字符串类型)
// JSON字符串
// let {a,b,c}={a:10,b:20,c:30}
// console.log(a,b,c);
// let[json,arr,num,str]=[{a:10,b:20},[1,2,3],100,'hahaha'];
// console.log(num);//100
// let [[c,d]]=[[10,20]]
// console.log(c);//10
//=======================================================================
// let [{c,d}]=[[10,20]]
// console.log(c);//undefined 因为两边结构不一样
// 在给json结构赋值的时候，如果在json给定了键 在赋值的时候，也要使用健明
// let [{a,b},[n1,n2,n3],num,str]=[{a:10,b:20},[1,2,3],100,'hahaha'];
// console.log(a,b,n1,n2,n3,num,str); //10 20 1 2 3 100 "hahaha"
//=============================== map() 映射 一对一的进入 经过加工 再都出来
// 返回的结果是加工后的结果
// var arr=[10,20,30]
// let res=arr.map(function(item){
// console.log(item);//分别打印10 20 30
// return item*2;
// })
// console.log(res);// [20, 40, 60]
// 使用箭头函数
// var arr=[10,20,30]
// let res=arr.map((item)=>{
// return item*2;
// })
// let res=arr.map(item=>item*2)
// console.log(res);//[20, 40, 60]
// 声明一些成绩
// let cj=[78,96,85,65,21,54,45,62,35]
// let res=cj.map(function(item){
// if(item>60){
// return '及格'
// }else{
// return '不及格'
// }
// })
// console.log(res);
//["及格", "及格", "及格", "及格", "不及格", "不及格", "不及格", "及格", "不及格"]
// let cj=[78,86,89,45,73,34,56,90,84];
// let a=cj.map(b=>{if(b>60){return '及格'}else{return '不及格'}})
// console.log(a);// ["及格", "及格", "及格", "不及格", "及格", "不及格", "不及格", "及格", "及格"]
// reduce 汇总 可以使用汇总进行对n个数据进行求和
// let arr=[1,2,3,4]
// let res=arr.reduce(function(tmp,item,index){
// console.log(tmp);
// console.log(item);
// console.log(index);
// console.log('------------------------------');
/*
第一次执行
tpm 装的是前一个数加后一个数的和
如果第一个tmp中装的是第一数
item 2 item默认是下标为1对象的值 它是受到了index的影响
index中默认是从1 控制item起始位置
temp 1
item 2
index 1
第二次执行
temp undefined(如果没有return)
item 3
index 2
第三次执行
temp undefined(如果没有return)
item 4
index 5
*/
// 求和 1+2+3+4=>1+2=3+3=6+4=10
// console.log(tmp+item);
// return tmp+item;
// })
// console.log(res);//10
// 用reduce求数组平均数
let arr = [1, 2, 3, 4]
let res = arr.reduce(function (tmp, item, index) {
if (index != arr.length - 1) {
return tmp + item;
} else {
return (tmp + item) / arr.length
}
})
console.log(res);
</script>
</html>
5.startsWith和endWith
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
字符串
startsWith()
是否为xxx开头， 返回结果是 true 或 false
endsWith()
判断是否是xxx结尾
*/
// let str = 'file://www.baidu.com'
// if (str.startsWith('http://')) {
// alert('http协议')
// } else if (str.startsWith('https://')) {
// alert('加密协议')
// } else if (str.startsWith('git://')) {
// alert('git地址')
// } else {
// alert('其他协议')
// }
let str2='./1.mp3';
if(str2.endsWith('.txt')){
alert('文本文档')
}else if(str2.endsWith('.mp4')){
alert('视频资源')
}else{
alert('其他')
}
</script>
</html>
6.字符串模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 字符串模板
// let a=10;
// let str='a'+a+'bc'
// let stu=`a${a}asdfjafjdaf`;
// console.log(str);//a10bc
// console.log(stu);//a10asdfjafjdaf
// let title='标题'
// let content='内容'
// 字符串拼接方法
// let str="<div><h1>"+title+"</h1><p>"+content+"</p></div>"
// console.log(str);//<div><h1>标题</h1><p>内容</p></div>
// 反引号拼接方法
let title='标题'
let content='内容'
let str=`<div><h1>${title}</h1><p>${content}</p></div>`
console.log(str);//<div><h1>标题</h1><p>内容</p></div>
</script>
</html>
本文详细介绍了ES6（ECMAScript 6）的基本概念，包括其与HTML5、CSS3的关系，以及版本发展历程。重点讲解了ES6中变量声明的变革，如var到let和const的转换，强调了块级作用域的重要性。此外，还深入探讨了箭头函数的使用，参数收集的扩展，解构赋值、映射和汇总操作，并提到了字符串处理的新方法，如startsWith和endsWith。文章通过实例代码展示了这些特性的实际应用。
扫一扫
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
