ES6入门及语法使用

什么是ECMAScript

浏览器脚本语言的规范，而我们熟知的的js语言，如JavaSript则是规范的具体实现

常见的问题

for(var i=0; i<5; i++) console.log(i);
console.log("我再循环外" + i)

打印出来的 我在循环外5

ES6语法打印

for(let i=0; i<5; i++) console.log(i);
console.log("我再循环外" + i)

打印出来的是错误 i is not defined

ES6语法

1. let和const

let声明一个局部变量，const声明一个常量

2. 字符串扩展

• includes() 返回布尔值，表示是否找到了参数字符串
• startswith() 返回布尔值，表示参数字符是否在原字符串的头部
• endswith() 返回布尔值，表示参数字符串是否在原字符串的尾部
• ``定义换行长字符串

const s = "hello es6"
s.includes("ec");
s.includes("es"); // true
s.startwith("he");  // true
s.startwith("es");  // false
const ss = `
    hello
    es6
    hehe
`

3. 解构表达式

3.1 数组的解构

let arr = [1,2,3];
//console.log(arr[1]); 传统的方式
let [x,y,z] = arr;
console.log(x,y,z);//1 2 3
let [x1] = arr;
console.log(x1); // 1

3.2 对象的解构

const person={
    name:"jack",
    age:21,
    language:["java","js","html"]
};
let {name:n,age,language} = person;
console.log(n,age,language);

4. 函数的优化

4.1 函数默认值

function fun1(a,b=1) // 如果传值，就正常，如果没传，就是默认值
{
    //b = b || 1
    console.log(a/b);
}
fun1(10);

4.2 箭头函数

前面是参数列表，后面是业务代码 ()=>{}

let fun2 = i => console.log(i);
let fun3 = (i,j) => {
    const z = i + j;
    console.log(z);
}
fun2(200);fun3(100,200);

4.3 对象里的函数属性简写

const person = {
    name : "zhangsan",
    eat : function(x){
        console.log(this.name + "吃"  + x);
    },
    eat2 : (food) => console.log(person.name + "吃" + + x); // 箭头函数的this域是最外面
    eat3(x) console.log(this.name + "吃" + + x);
}
person.eat1("dandan");

4.4 箭头函数结合解构表达式

const p  = {
    name : "lisi",
    age : 30
}
const fun3 = (ppp) => {console.log(ppp.name)}
const fun3 = ({name}) => {console.log(name)}
fun3(p)

5. map和reduce

• map() 接收一个函数，将原数组中的所有元素用这个函数处理后放入新的数组返回
• reduce() 接收一个函数和一个初始值(可选) reduce会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，
  • 第一个参数(函数)可以接收两个参数
    • 第一个参数是上一次reduce处理的结果
    • 第二个参数是数组中要处理的下一个元素

let arr = [10,20,40]
const brr = err.map(a => a*10)
// ..........
arr.reduce( (a,b) => { a + b } ); // 60 == (10 + 20) + 30
arr.reduce( (a,b) =>  a + b  , 100);

6. 对象扩展

• keys(obj) 获取对象的所有key组成的数组
• value(obj) 获取对象的所有value组成的数组
• entries(obj) 获取对象的所有key和value组成的二维数组
• assign(dest, …src) 将多个src对象的值 拷贝到dest中(浅拷贝)

let person = {
    name : "jack",
    age  : 12,
    sex  : 1,
    username : "zhangsan"
}
Object.keys(person);
Object.values(person);
Object.entries(person); // [Array(2),Array(2),Array(2),Array(2)]
let pp = { age: "yyy" };
let pp1 = { xxx: "xxx" };
Object.assign(pp,person,pp1) // {age: "yyy",name:"jack",age:12,sex:1,username:"zhangsan"}

7. 数组扩展

• find(callback) 用于找出第一个符合条件的数组成员。参数是一个回调函数，所有数组成员依次执行直到返回值为true，否则返回undefined
• findIndex(callback) 与上面类似，但如果都不符合，返回-1
• includes(数组元素) 如果匹配返回true

let arr = [10,20,30,40,60];
arr.find(a=>{a==30});
arr.find(a=>{a==30});