ES6 常用语法
let和const
在JavaScript中,之前用var来定义变量,在EC6中增加定义了两种定义变量的方法let和const
let
对于变量来说,在ES5中var定义的变量会提升到作用域中所有的函数与语句前面,而ES6中let定义的变量则不会
//let声明的变量代码运行时不会发生提升
function f(){
console.log(a); // a is not defined
console.log(m); // Invalid or unexpected token 格式错误
let m = 456;
var a = 123;
}
const
声明常量,一旦声明,不可更改,而且常量必须初始化赋值。
const虽然是常量,不允许修改默认赋值,但如果定义的是对象Object,那么可以修改对象内部的属性值。
const obj{
a:1;
}
obj.a = 2; //没有直接修改type的值,修改其的属性,这是允许的。
console.log(obj); //{a:2}
const和let的异同点
相同点:const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升,不能重复声明。
不同点:const不能再赋值,let声明的变量可以重复赋值。
let与const和{}一起使用,能够生成一个块级作用域
字符串
ES6为js新增了很多方法,包括遍历、查询、替换等等,可以很简洁的替换ES5中的类似方法.
for of
可以用来遍历字符串;
let str = "wojfu";
for(lets of str){
console.log(s); // w o j f u
}
includes
includes(str, index):如果在字符串中检测到指定文本,返回true,否则false。第一个参数为要查询的字符串,第二个参数为查询开始的位置
let str = "hello you"
str.includes("llo"); //值为true
str.includes("you"); //值为true
str.includes("h",1); //值为false
str.includes("e",1); //值为true
starsWith
startsWith(str, index):如果在字符串起始部分检测到指定文本,返回true,否则返回false。
let str = "hello you"
str.startsWith("he"); //值为true
str.startsWith("ou"); //值为false
endsWith
endsWith(str, index):如果在字符串的结束部分检测到指定文本,返回true,否则返回false
let str = "hello you"
str.endsWith("he"); //值为false
str.endsWith("ou"); //值为true
repeat
string.repeat(num)方法,参数num为重复字符串的次数
let str = "heo";
console.log(str.repeat(2)); //"heoheo" str被重复了两次,str未被修改
'ww'.repeat(3); // "wwwwww"
'ww'.repeat(3.8); // "wwwwww",浮点类型参数会被取整
'ww'.repeat(0); // "",0会返回空字符串
'ww'.repeat(undefined); // "",undefined会被转化成0
'ww'.repeat(NaN); // "",NaN会被转化成0
'ww'.repeat(null); // "",null会被转化成0
'ww'.repeat(-2); // 负数报错
${}
${}来表示模板占位符,可以嵌入变量,还能保持代码格式:
let name = "wangcai";
let age = "10";
console.log('hello my name is ${name},my age is ${age}')
// hello my name is wangcai,my age is 10
箭头函数
箭头函数的语法
(itme1,itme2)=>{}
item =>{}
根据参数不同分以下情况
()=>{...}; //0个参数用()表示
a=>{...}; //一个参数可以省略()
(a,b)=>{...}; //两个参数必须带()
//多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。
x => { return x + x }; // 函数返回 x * x
x => x + x; // 同上一行
x => return x + x; // SyntaxError 报错,不能省略 {}
x => { x + x }; // 合法,没有定义返回值,返回 undefined
箭头函数中的this指向
箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。
//ES5
function f(){
this.age = 20;
return function(){
this.age+1;
}
}
var ga = new f();
console.log(ga());//undefined
//ES6箭头函数
function f(){
this.age = 20;
return ()=> this.age+1;
}
var ga = new f();
console.log(ga());//23
箭头函数给数组排序
let arr = [4,5,2,9,8]
let m =arr.sort((a,b) => a - b);
console.log(m); //[2,4,5,8,9]
ES6新增数组方法
- find():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。
let arr = [2,"4",5,"56"]
console.log(arr.find(n => typeof n === "number")) //1
- findIndex():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。
let arr = [2,"4",5,"56"]
console.log(arr.findIndex(n => typeof n === "number")) //0
- fill():用新元素替换掉数组内的元素,可以指定替换下标范围。
arr.fill(str, start , end)
- copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
arr.copyWithin(target,start,end)
name | action |
---|---|
target | 必需。复制到指定目标索引位置 |
start | 可选。元素复制的起始位置 |
end | 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。 |
let arr = [1,2,3,4,5,6]
console.log(arr.copyWithin(3)); //[1,2,3,1,2,3]
console.log(arr.copyWithin(3,1)); //[1,2,3,2,3,1]
console.log(arr.copyWithin(2,0,2)); //[1,2,1,2,3,1]