EC6常用语法

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新增数组方法

1. find()：传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

let arr = [2,"4",5,"56"]
console.log(arr.find(n => typeof n === "number")) //1

2. findIndex()：传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

let arr = [2,"4",5,"56"]
console.log(arr.findIndex(n => typeof n === "number")) //0

3. fill()：用新元素替换掉数组内的元素，可以指定替换下标范围。

arr.fill(str, start , end)

4. 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]