es6(1)
1.var let const
var---变量，重复定义不报错，没有块级作用域，不能限制修改
if(12>5){
var a=12;
}
alert(a); //弹出12 let---变量，重复定义报错，有块级作用域，可以限制修改 if(12>5){
let a=12;
}
alert(a); //报错，let有块级作用域的概念，只在if代码段内有效 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input'); for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
}
}
}
</script>
</head>
<body>
<input type="button" name="" value="a">
<input type="button" name="" value="b">
<input type="button" name="" value="c">
</body>
</html>
三个按钮分别输出0,1,2 const---常量,重复定义报错，有块级作用域，可以限制修改 const a=12;
a=5;
alert(a); //报错，const是常量，不能修改
2.箭头函数
只有一个参数，()可以省
只有一个语句，还是return，{}可以省 一、把function去掉，加上=>
function (a,b,c){
//代码
} (a,b,c)=>{
//代码
}
二、示例
function show(fn){
fn(12,5);
} show((a,b)=>{
alert(a*b);
})
三、只有一个参数，()可以省
let show=a=>{
alert(a)
}
show(5);
四、只有一个语句，还是return，{}可以省
let sum=(a,b)=>a+b;
alert(sum(1,2));
五、实现排序
let arr=[2,5,4,1,9,6];
arr.sort((a,b)=>a-b);
alert(arr);
3.参数扩展（...arg）
function show(a,b,...arg){
alert(arg);
} show(1,2,3,4,5,6); ///3,4,5,6 注意：...arg只能放在参数的最后一个
function show(a,b,...arg,c){
alert(arg);
} show(1,2,3,4,5,6); //报错，...arg没有放在参数的最后一个
4.展开数组
一、采用...arg，数组展开为1,2,3
let arr=[1,2,3];
function sum(a,b,c){
alert(a+b+c);
} sum(...arr); //6
二、展开数组，并连接数组
let arr1=[1,2,3];
let arr2=[4,5,6]; let arr=[...arr1,...arr2];
alert(arr); //1,2,3,4,5,6
5.数组map方法(映射)
let arr=[1,2,3,4];
let result=arr.map(item=>item*2);
alert(result); //2,4,6,8
6.数组filter方法（过滤）
let arr=[1,2,3,4,5,6,7,8];
let result=arr.filter(item=>item%2);
alert(result); //1,3,5,7
7.数组forEach方法（遍历）
let arr=[1,2,3,4,5,6,7,8];
let result=arr.forEach((item,index)=>{
alert(`第${index+1}是${item}`)
})
8.数组reduce方法(汇总)
//求平均数
let arr=[1,2,3,4,5,6];
let result=arr.reduce((tamp,item,index)=>{
if(index<arr.length-1){
return tamp+item;
}else{
return (tamp+item)/arr.length;
}
})
alert(result);
9.字符串模板(``)
//可以换行
let str=`ab
c`;
alert(str);
10.面向对象（class、super、extends）
class User{
constructor(name,pass){
this.name=name;
this.pass=pass;
} login(){
alert('登录成功')
}
} class VIPUser extends User{
constructor(name,pass,level){
super(name,pass);
this.level=level;
} download(){
alert('下载成功')
}
} let p=new VIPUser('blue',123,8);
p.login();
p.download();
alert(p.name);
alert(p.pass);
alert(p.level);
11.解构赋值
//数组，一一对应
let [a,b,c]=[1,2,3];
alert(a);
alert(b);
alert(c);
//对象，一一对应
let {a,b,c}={'a':'1','b':'2','c':'3'};
alert(a);
alert(b);
alert(c);
12.promise
一、
let p=new Promise(function(resolve,reject){
$.ajax({
url:'data/1.txt',
dataType:'json',
success(arr){
resolve(arr)
},
error(err){
reject(err)
}
})
}) p.then(arr=>{
alert('成功了'+arr)
},err=>{
alert('失败了')
})
二、
let p1=new Promise(function(resolve,reject){
$.ajax({
url:'data/1.txt',
dataType:"json",
success(arr){
resolve(arr)
},
error(err){
reject(err)
}
})
}); let p2=new Promise(function(resolve,reject){
$.ajax({
url:'data/2.txt',
dataType:'json',
success(arr){
resolve(arr)
},
erros(err){
reject(err)
}
})
}); let p3=new Promise(function(resolve,reject){
$.ajax({
url:'data/3.txt',
dataType:'json',
success(arr){
resolve(arr)
},
error(err){
reject(err)
}
})
}); Promise.all([p1,p2,p3]).then(function(arr){
let [r1,r2,r3]=arr;
alert(r1);
alert(r2);
alert(r3);
},function(){
alert('失败了')
})
1.var let const var---变量，重复定义不报错，没有块级作用域，不能限制修改 if(12>5){ var a=12; } alert(a); //弹出12
let---变量，重复定义报错，有块级作用域，可以限制修改
if(12>5){ let a=12; } alert(a); //报错，let有块级作用域的概念，只在if代码段内有效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var aBtn=document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++){ aBtn[i].onclick=function(){ alert(i); } } } </script> </head> <body> <input type="button" name="" value="a"> <input type="button" name="" value="b"> <input type="button" name="" value="c"> </body> </html> 三个按钮分别输出0,1,2
const---常量,重复定义报错，有块级作用域，可以限制修改
const a=12; a=5; alert(a); //报错，const是常量，不能修改 2.箭头函数 只有一个参数，()可以省 只有一个语句，还是return，{}可以省
一、把function去掉，加上=> function (a,b,c){ //代码 }
(a,b,c)=>{ //代码 } 二、示例 function show(fn){ fn(12,5); }
show((a,b)=>{ alert(a*b); }) 三、只有一个参数，()可以省 let show=a=>{ alert(a) } show(5); 四、只有一个语句，还是return，{}可以省 let sum=(a,b)=>a+b; alert(sum(1,2)); 五、实现排序 let arr=[2,5,4,1,9,6]; arr.sort((a,b)=>a-b); alert(arr); 3.参数扩展（...arg） function show(a,b,...arg){ alert(arg); }
show(1,2,3,4,5,6); ///3,4,5,6
注意：...arg只能放在参数的最后一个 function show(a,b,...arg,c){ alert(arg); }
show(1,2,3,4,5,6); //报错，...arg没有放在参数的最后一个 4.展开数组 一、采用...arg，数组展开为1,2,3 let arr=[1,2,3]; function sum(a,b,c){ alert(a+b+c); }
sum(...arr); //6 二、展开数组，并连接数组 let arr1=[1,2,3]; let arr2=[4,5,6];
let arr=[...arr1,...arr2]; alert(arr); //1,2,3,4,5,6 5.数组map方法(映射) let arr=[1,2,3,4]; let result=arr.map(item=>item*2); alert(result); //2,4,6,8 6.数组filter方法（过滤） let arr=[1,2,3,4,5,6,7,8]; let result=arr.filter(item=>item%2); alert(result); //1,3,5,7 7.数组forEach方法（遍历） let arr=[1,2,3,4,5,6,7,8]; let result=arr.forEach((item,index)=>{ alert(`第${index+1}是${item}`) }) 8.数组reduce方法(汇总) //求平均数 let arr=[1,2,3,4,5,6]; let result=arr.reduce((tamp,item,index)=>{ if(index<arr.length-1){ return tamp+item; }else{ return (tamp+item)/arr.length; } }) alert(result); 9.字符串模板(``) //可以换行 let str=`ab c`; alert(str); 10.面向对象（class、super、extends） class User{ constructor(name,pass){ this.name=name; this.pass=pass; }
login(){ alert('登录成功') } }
class VIPUser extends User{ constructor(name,pass,level){ super(name,pass); this.level=level; }
download(){ alert('下载成功') } }
let p=new VIPUser('blue',123,8); p.login(); p.download(); alert(p.name); alert(p.pass); alert(p.level); 11.解构赋值 //数组，一一对应 let [a,b,c]=[1,2,3]; alert(a); alert(b); alert(c); //对象，一一对应 let {a,b,c}={'a':'1','b':'2','c':'3'}; alert(a); alert(b); alert(c); 12.promise 一、 let p=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:'json', success(arr){ resolve(arr) }, error(err){ reject(err) } }) })
p.then(arr=>{ alert('成功了'+arr) },err=>{ alert('失败了') }) 二、 let p1=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:"json", success(arr){ resolve(arr) }, error(err){ reject(err) } }) });
let p2=new Promise(function(resolve,reject){ $.ajax({ url:'data/2.txt', dataType:'json', success(arr){ resolve(arr) }, erros(err){ reject(err) } }) });
let p3=new Promise(function(resolve,reject){ $.ajax({ url:'data/3.txt', dataType:'json', success(arr){ resolve(arr) }, error(err){ reject(err) } }) });
Promise.all([p1,p2,p3]).then(function(arr){ let [r1,r2,r3]=arr; alert(r1); alert(r2); alert(r3); },function(){ alert('失败了') })
es6(1)的更多相关文章
- ES6模块import细节
写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- ES6（块级作用域）
我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...
- es6小白学习笔记(一)
1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...
- ES6之变量常量字符串数值
ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...
- ES6之let命令详解
let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...
- ES6 箭头函数中的 this？你可能想多了（翻译）
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...
- ES6+ 现在就用系列（二)：let 命令
系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...
- ES6+ 现在就用系列（一)：为什么使用ES6+
系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...
随机推荐
- 基于JavaFX的扫雷游戏实现（一）——整体概述
我在不要更新挑战中坚持了一年,你也来试试吧(咕咕咕)! 好言归正传,本次更新带来的是经典游戏扫雷,基于JavaFX实现.篇幅有限,文章主要介绍核心操作实现,不会列出所有代码.需要完整源码或是想预览 ...
- 从头学Java17-Stream API（二）结合Record、Optional
Stream API Stream API 是按照map/filter/reduce方法处理内存中数据的最佳工具. 本系列教程由Record讲起,然后结合Optional,讨论collector的设计 ...
- Djiango 创建迁移项报错query = query.decode(errors='replace') AttributeError: 'str' object has no attribute 'decode'
在终端命令行创建迁移项 输入(python manage.py makemigrations) 或(python manage.py migrate)时出现报错信息:Traceback (most r ...
- iOS 循环引用的问题总结
原因: self -> Timer -> target(self), 造成循环引用 导致控制器不会销毁,不会调用dealloc 方法,内存泄漏 - (void)dealloc{ [_tim ...
- Java 调用gdal API(二)——栅格裁剪
gdal可以说是GIS数据处理比较好的工具之一,虽然也提供了Java API,但是官方文档确实太过简单,用起来确实太难受,每次都需要去参考对应的C++api,然后在对应使用. 因此小编决定从这篇文章开 ...
- Proxmox VE软件防火墙的配置
1 软件防火墙的基本概念 防火墙是计算机网络中用于保护网络安全的关键技术.防火墙可以是硬件设备部署在网络出口,也可以是软件部署在终端设备出口.本文主要介绍软件防火墙. 软件防火墙可以根据网络流量的方向 ...
- [nginx]日志中记录自定义请求头
前言 假设在请求中自定义了一个请求头,key为"version",参数值为"1.2.3",需要在日志中捕获这个请求头. nginx日志配置 只需要用变量http ...
- SpringBoot如何整合spring-retry来实现接口请求重试
一.重试机制 由于网络不稳定或网络抖动经常会造成接口请求失败的情况,当我们再去尝试就成功了,这就是重试机制. 其主要目的就是要尽可能地提高请求成功的概率,但一般情况下,我们请求第一次失败,代码运行就抛 ...
- [ABC128D] equeue
2023-01-14 题目 题目传送门 翻译 翻译 难度&重要性(1~10):4 题目来源 AtCoder 题目算法 暴力,贪心 解题思路 由题意可以得出,数据只有 \(n \leq 50,k ...
- AI绘画关键词Prompt：分享一些质量比较高的StableDiffusion(SD)关键词网站
今天向大家推荐一些SD(StableDiffusion)高质量的 关键词 网站.这些网站的质量可靠,能为大家在创建 AI 绘画时提供有效的参考.以下是六个推荐的网站,优缺点分析. 有几个质量还算是挺高 ...