现在项目中用到ES6的地方越来越多,这边就一起来学习下。
声明变量
let str = “hello world”
不能重复声明
let a = "sdf";
let a = "sdd";
报错信息:
Uncaught SyntaxError: Identifier ‘a’ has already been declared
只在当前代码块内有效
{
// 只能在局部访问到他 而es5中var声明可以全局访问
let names = "zyc";
}
name;
报错信息:
Uncaught ReferenceError: names is not defined
实例一:
for(var i = 0 ; i< 10 ; i++){
console.log(i)
}
console.log(" 最后的i:", i); //循环之外可以得到 i为10 (坏处是可能造成全局变量的污染)
for(let j=0; j<10; j++){
console.log(j);
}
console.log("let",j) // 访问不到
实例二:
var arr = [];
for(var i=0;i<10;i++){
arr[i] = function() {
console.log(i);
} // 没有执行
arr.push(arr[i]);
}
console.log("输出结果是:",arr[3]()) //都是输出10
var arr = [];
for(let i=0;i<10;i++){
arr[i] = function() {
console.log(i);
}
arr.push(arr[i]);
}
console.log("输出结果是:",arr[3]()) // 3 值是多少 输出多少
不存在变量提升
es6规定变量必须先定义在使用;否则报错:
xxx not defined
es5中不会报错,只会显示undefined
实例:
var foo = "myname";
if(true){
// 在let声明变量foo之前都是其暂时性死区
typeof foo;
let foo = 123;
}
报错:
Uncaught ReferenceError: foo is not defined
- 只要后面有let声明,不管使用什么引用foo变量都会报错
- ES6规范明确规定,如果代码块出现let、const声明,那么一旦形成了封闭作用域,在声明之前使用就会报错
- 不允许全局访问局部声明的变量/对象
const
const NUMBERS = 112233;
- 使用它声明之后,必须在声明的时候同时赋值
- 声明之后“不允许”更改存在的值,简而言之就是不允许修改内存地址
实例:
const arr = [];
arr.push("hahahaha");
arr.push("lalalal");
console.log(arr);
// ["hahahaha", "lalalal"]
const arrs = [];
arrs.push("hahahaha");
arrs.push("lalalal");
arrs = [];
报错:
// Uncaught TypeError: Assignment to constant variable.
- const 的作用域同let;
解构赋值
let a = 1;
let b = 2;
let c = 3;
// 你可以直接:
let [d,e,f] = [4,5,6]; //一一对应
let [o, p, q] = [, 23, 34] // 还是一一对应
let [, , [a,b]] = [, , [1,2]]
let [name, ...ect] = ["zyy", 12, 23, 43]
ect // [12, 23, 43]
函数
可以像这样指定默认值;
function abc(name = 1, age= 34){
console.log(name, age)
}
箭头函数:
name = (val) => val;
// name 函数名 (val)接受的变量,一个变量可以不用括号 =>val 函数体,返回val
//可以写成
my = (name, age) => { console.log("do something") }
Set
数组去重:
var s =new Set(); //es6提供的新的数据解构 Set
[1,2,3,4,5,3,2,5].forEach(x=> s.add(x));
// {1, 2, 3, 4, 5}
Map
字符串的扩展
1、字符串扩展方法
传统上,JavaScript中只有indexOf方法可以来确定一个字符串是否包含在另一个字符串中;
ES6新增三种:
- includes():返回布尔值表示是否找到了参数字符串
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部
这三个方法都支持第二个参数 表示开始搜索的位置
let t = "hello world";
t.includes("e",4);//false
2、repeat()
repeat方法返回一个新的字符串,表示将原字符串重复n次。
"hello".repeat(3); //hellohellohello
"hello".repeat(0); //""
如果是小数,会取整
"hello".repeat(2.7); //hellohello
如果是负数或者Infinity,会报错
"hello".repeat(-2);//Uncaught RangeError: Invalid count value
"hello".repeat(Infinity); //Uncaught RangeError: Invalid count value
如果是0到-1之间的小数,则等同于0,因为先进行取整计算,0到-1取整是-0,repeat视为0
"hello".repeat(-0.8); //""
参数NaN等同于0
"hello".repeat(NaN); //""
如果repeat参数是字符串,则会先转换成数字
"hello".repeat("he"); //""
"hello".repeat("2"); //"hellohello"
3、字符串补全
padStart用于头部补全
padEnd用于尾部补全
x.padStart(5,"ab");//ababx
x.padStart(4,"ab");//abax
x.padEnd(5,"ab");//xabab
x.padEnd(4,"ab");//xaba
第一个参数指定字符串长度,第二个参数是用来补全的字符串
如果源字符串长度大于指定的最小长度,则返回源字符串
xxx.padEnd(2,"ab");//xxx
如果第二个参数省略,则用空格补全
x.padEnd(3);//' x'
x.padEnd(3);//'x '
4、模版字符串
模版字符串是增强版的字符串,用反引号(`)标识;他可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
let name="Tom",time="today";
`hello ${name},how arw your ${time}`
大括号里面可以放任意的JavaScript表达式,可以进行运算,以及引用对象属性。
let x = 1;
let y = 2;
`${x}+${y}=${x+y}`//1+2=3
let obj = {x:1,y:3};
`${obj.x+obj.y}`
// 4
模版字符串中还能调用函数
function fn(){
return "hehe";
}
`test ${fn()}`
// test hehe
如果模版字符串中的变量没有声明,会报错