开发效率高、工程性
变量
var:
1.可以重复声明
var a=1;var a=2; a
// 2
2.没有块级作用域
3.不能限制
var b=1;b=2;b
// 2
let 声明变量
const 声明常量
1.禁止重复声明
const c=1;const c=2;c
// VM926:1 Uncaught SyntaxError: Identifier 'c' has already been declared
2.控制修改 (常量不可重新赋值)
const d=1;d=2;d
//VM1053:1 Uncaught TypeError: Assignment to constant variable.
let e=1;e=2;e
// 2
3.支持块级作用域
作用域
1.传统
函数级(for里面的变量i的值是最后的值)
2.ES6
块级(for里面的变量i每次都不一样)
语法块{}
if(){}
for(){}
{}
解构赋值
{a: 12, b: 5, c: 33}
[12, 5, 8]
1.左右两边一样
let {a,b,c}={a: 12, b: 5, c: 33} // json
let [a,b,c]=[12, 5, 8] // array
2.右边得是个东西
函数
1.箭头函数
function (参数){
}
(参数)=>{}
//如果,有且仅有1个参数,()也可以省
let a=(k)=>{consloe.log(k)};
let a=k=>{consloe.log(k)};
//如果,有且仅有1条return语句,{}可以省
let a=(k,m)=>{return k+m};
let a=(k,m)=>k+m;
//{}省略后仍有{}(return json)需包()
let a=(k,m)=>{return {first:k,sec:m}};
let a=(k,m)=>({first:k,sec:m});
-
修复this
this的指向取决于定义它的对象,如果重新定义了就会变成新的。es6箭头函数的this绑定在定义它的对象上,不会被修改,这个对象必须在class内,如果不是就会在全局window上。
2.参数展开
- 2.1 剩余参数——必须是最后一个
function show(a, b, ...arr){
console.log(a, b, arr);
}
show(1,2,6,7,8,9,3);
//1 2 (5) [6, 7, 8, 9, 3]
- 2.2 展开数组——就跟把数组的东西写在那儿一样
let a=[6,7,8]; [...a]
// (3) [6, 7, 8]
系统对象
Array
- map 映射 1对1
let course=[88,99,56,23,16,90];
let res=course.map(val=>val>=60);
console.log(course,res);
// (6) [88, 99, 56, 23, 16, 90] (6) [true, true, false, false, false, true]
- forEach 遍历 循环一遍
let course=[88,99,56,23,16,90];
course.forEach((val,key)=>console.log(`第${key}个课程:${val}分`));//字符串模板,反单引号
第0个课程:88分
// 第1个课程:99分
// 第2个课程:56分
//第3个课程:23分
//第4个课程:16分
//第5个课程:90分
- filter 过滤 =>后是条件
let course=[88,99,56,23,16,90];
course.filter(item=>item>=60 && item<100);
// (3) [88, 99, 90]
reduce 减少 多对1
let arr=[1,2,3,7,8,9];
let res=arr.reduce((tmp, item, index)=>{
console.log(`第${index}个${tmp}+${item}`);
return tmp+item;
});
console.log(res);
// 第1个1+2
//第2个3+3
// 第3个6+7
//第4个13+8
// 第5个21+9
// 30
let avarage=arr.reduce((tmp, item, index)=>{
if(index<arr.length-1){
return tmp+item;
}else{
return (tmp+item)/arr.length;
}
});
console.log(avarage);
//5
String
- 字符串模板
- startsWith
let url='http://www.bing.com/a';
if(url.startsWith('http://') || url.startsWith('https://')){
alert('是网址');
}else{
alert('非网址');
}
- endsWith
JSON
1.标准写法
{"key": "aaa", "key2": 12}
json->字符串
字符串->json
2.JSON对象
stringify:前端传到后台(json->字符串)
let json={a: 12, b: 5, c: 'blue'};
let str=JSON.stringify(json);// json->字符串 & 标准化处理
console.log(str);
// {"a":12,"b":5,"c":"blue"}
parse:后台获取到前台(字符串->json)
let str='{"a":12,"b":5,"c":"blue"}';
let json=JSON.parse(str);// 数据要符合标准,一般获取到都是标准的
console.log(json);
//{a: 12, b: 5, c: "blue"}
异步处理
Promise
async/await
异步操作?
异步——多个操作可以一起进行,互不干扰
同步——操作一个个进行
//异步-依次加载三个json,<ajax相对于外部异步,三个ajax之间同步1执行成功再执行2>
$.ajax({
url: 'data/1.json',
dataType: 'json',
success(data1){
$.ajax({
url: 'data/2.json',
dataType: 'json',
success(data2){
$.ajax({
url: 'data/3.json',
dataType: 'json',
success(data3){
console.log(data1, data2, data3);
}
});
}
});
}
});
//同步操作伪代码<三个ajax同步一个接个进行>
let data1=$.ajax('data/1.json');
let data2=$.ajax('data/2.json');
let data3=$.ajax('data/3.json');
Promise:对异步处理封装,<三个ajax之间异步>
Promise.all([
p1,
p2,
p3
]).then();
// 三个无逻辑,<三个ajax之间异步一起执行谁快谁先结束>
Promise.all([
$.ajax({url: 'data/1.json', dataType: 'json'}),
$.ajax({url: 'data/2.json', dataType: 'json'}),
$.ajax({url: 'data/3.json', dataType: 'json'}),
]).then(([data1, data2, data3])=>{ //参数可以直接解构赋值
console.log(data1, data2, data3);
}, (res)=>{
alert('错了');
});
async/await //有逻辑,同步方式写异步代码
async function xxx(){
let a=12;
let b=5;
let data=await promise;
...
alert(a+b);
}
let xxx=async ()=>{
}
async function show(){
let data1=await $.ajax({url: 'data/1.json', dataType: 'json'});
if(data1.a<10){
let data2=await $.ajax({url: 'data/2.json', dataType: 'json'});
alert('a');
}else{
let data3=await $.ajax({url: 'data/3.json', dataType: 'json'});
alert('b');
}
}
show();
兼容性
babel:
1.在线
type="text/babel"
2.编译
- node.js
- npm i @babel/core @babel/cli @babel/preset-env
- 添加脚本
- 添加.babelrc——声明preset
ES6(ECMA 2015)
ES7(ECMA 2016)
- 求幂: **
- Array.includes()
ES8(ECMA 2017)
- await/async
ES9(ECMA 2018) 预览版
- rest/spread :替代await/async
- 异步迭代 :for循环异步化
- Promise.finally() :所有操作结束后清理工作
- 正则:增加一些模式