一、简介
ES6 -> ECMA 规范
ES6 -> 2015年6月 ES6.0
每一年6月份,宣布一个版本
ES6环境:
webpack3.x
Traceur
二、let、const
2.1 关于定义(声明)变量
- var a=12; 之前
- let let a=12 相当于之前的 var
- const 常量, 定义好了不能转变
2.2 作用域:
- 全局作用域
- 函数作用域
2.3 let注重
1.没有预剖析
,不存在变量提拔
在代码块内,只需let定义变量,在之前运用,都是报错
先定义完,再运用
<script>
let a = 12;
function fn(){
alert(a); //TDZ最先 暂时性死区
alert(b)
let a = 5; //TDZ 完毕
let b = 12;
}
fn();
</script>
2.同一个作用域里, 不能反复定义变量
,能够赋值
3.for轮回,for轮回内里是父级作用域
,内里又一个
for(let i = 0; i<3; i++){
let i = 'abc';
console.log(i);
}
2.4 块级作用域:
{
//块级作用域
}
{{{{let a = 12}}}}
if(){xx}
for(){}
while(){}
2.5 const: 特征和let一样
const定义变量不能修正
const定义完变量,必需有值,不能后赋值,不能修正,
平常定义配置文件
。
然则对象是能够修正的,由于它是援用
凝结:Object.freeze
(对象),就能够不被修正。
const config={
host:
username:
password:
version:
}
{
//TODO
}
IIFE,马上实行匿名函数
(function(){
//TODO
})()
发起:
今后 就用 let 不要在运用var
const http = require('http');
三、解构赋值(主要,经常使用
)
* 异常有效,迥殊在做数据交互 ajax
3.1 花样
let [a,b,c] =[12,5, 6];
注重: 摆布双方,组织花样要保持一致
json:
let {name,age, job} = {
name:'Strive',
age:18,
job:'码畜'
};
别号:
let {name:n,age:g, job:a} = json;
3.2 解构时刻能够给默许值
let [a,b, c="默许值"] = ['aaa','bbb'];
注重:null和undefined,null是一个对象,
有值
let a = 12;
let b = 5;
import {a,b,c} from './mod'
四、字符串模板(经常使用
)
4.1 字符串模板:“
长处: 能够随便换行
`${变量名字}`
字符串衔接(之前用:+
),要死人的。
如今:${变量名字}
let name ='Strive';
let age = 18;
let str = `这个人叫${name}, 岁数是 ${age}岁`;
4.2 关于字符串一些东西
字符串查找:
str.indexOf(要找的东西) 返回索引(位置) ,没找到返回-1
str.includes(要找的东西) 返回值 true/false
推断浏览器: includes
<script>
if(navigator.userAgent.includes('Chrome')){
alert('是chrome')
}else{
alert('!是chrome')
}
</script>
字符串是不是以谁开首:
str.startsWith(检测东西)
检测地点
字符串是不是以谁末端:
str.endsWith(检测东西)
.png
反复字符串:
str.repeat(次数);
添补字符串:
str.padStart(全部字符串长度, 添补东西) 往前添补
str.padEnd(全部字符串长度, 添补东西) 今后添补
str.padStart(str.length+padStr.length, padStr)
五、函数(主要
)
5.1 函数变化
1. 函数默许参数
function show({x=0,y=0}={}){
console.log(x,y);
}
show()
2. 函数参数默许已定义了,不能再运用let,const声明
function show(a=18){
let a = 101; //毛病
console.log(a);
}
show()
5.2 扩大运算符、Rest运算符:
扩大运算符:...
睁开数组:
<script>
let arr = ['apple','banana','orange'];
console.log(arr);
console.log(...arr);
</script>
... :
[1,2,3,4] -> ... [1,2,3,4] -> 1,2,3,4,5
...:
1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
盈余参数: 必需放到末了
function show(a,b,...c){
console.log(a,b);
console.log(c);
}
show(1,2,3,4,5)
5.3 箭头函数:(主要,经常使用
)
=>
let show = () => 1;
花样:
() => return东西
或许
() =>{
语句
return
}
例子:
var f = v => v;
//等同于
var f = function(v){
return v;
}
var sum = (num1,num2) => num1 + num2;
//等同于
var sum = function(num1,num2){
return num1 + num2;
}
[1,2,3].map(function (x) {
return x * x;
});
//箭头函数写法
[1,2,3].map(x => x *x); //简约了很多
从例子我们能够看出,省略了function,花括号{}
用=>
替代了。这类写法更简约了。
注重:
-
this
题目, - 箭头函数内里没有
arguments
, 用 ‘...
’ - 箭头函数不能当组织函数