02.javascript-ES6语法

ES6 是由ECMA 国际标准化组织制定的一项脚本语言的标准化规范

let

• let 声明的变量只在所处于的块级有效
• 防止循环变量变成全局变量
• 使用let声明的变量没有变量提升
• 暂时性死区

``` //常见面试题 let arr = []; for(let i =0;i<2;i++){ arr[i]=function(){ console.log(i) } } arr[0]();//0 arr[1]();//1

var arr = [];
    for(var i =0;i<2;i++){
        arr[i]=function(){
            console.log(i)
        }
    }
    arr[0]();//2
    arr[1]();//2

<h2>const</h2>
<p>作用：声明常量，常量就是值(内存地址）不能变化的量</p>
<ul>
    <li>const 声明的变量只在所处于的块级有效</li>
    <li>声明常量时必须赋值</li>
    <li>常量赋值后，值不能修改</li>
    <li>暂时性死区</li>
</ul>

<h2>解构赋值</h2>
<p>ES6 中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构</p>
<h3>数组解构</h3>

let[a,b,c] = [1,2,3]
console.log(a,b,c)//1 2 3

<h3>对象解构</h3>

//对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量
let person = {name:'柠檬不酸i',age:18,sex:'女'};
let {name,age,sex}=person;
console.log(name);//柠檬不酸
console.log(age);//18
console.log(sex);//女

let {name:myname} =person
console.log(myname)//柠檬不酸

<h3>箭头函数</h3>

const fn=()=>{
console.log(123)
}
fn()

//函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
//传统
function sum(a,b){
return a+b
}
console.log(sum(1,2))
//箭头函数
const sum=(a,b)=>a+b
console.log(sum(2,3))

//如果形参只有一个，可以省略小括号
const fn = v=>{
alert(v);
}
fn(20);

<h3>箭头函数不绑定this 关键字，箭头函数中的 this，指向的是 <span style="color:red;">函数定义位置的上下文 this</span></h3>

    var obj = {
        age:20,
        say:()=>{
            alert(this.age)//undefined
        }
    }
    obj.say()

var age = 100;
var obj = {
age:20,
say:()=>{
alert(this.age)//100
}
}
obj.say()

<h2>剩余参数</h2>
<p>剩余参数语法允许我们将一个不定数量的参数表示为一个数组</p>

const sum = (...args)=>{
let total = 0;
args.forEach(item = >{
total += item
})
return total
};
sum(10,20);//30
sum(10,20,30);//60

<h3>剩余参数和解构配合使用</h3>

let students = ['wangwu','zhangsan','lisi'];
let [s1,...s2] = students;
console.log(s1);//'wangwu'
console.log(s2);//['zhangsan','lisi']

<h2>Array的扩展方法</h2>
<h3>扩展运算符（展开语法）</h3>
<p>扩展运算符可以将数组或者对象转为用逗号分隔的参数序列</p>

let ary = ['a','b','c'];
//...ary // 'a','b','c'
console.log(...ary)// a b c
console.log('a','b','c')//a b c

<p>扩展运算符可以用于合并数组</p>

//方法一
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];//123456

//方法二
arr1.push(...arr2);

<p>扩展运算符可以将类数组或可遍历对象转换为真正的数组</p>

var oDivs = document.getElementsByTagName('div');
console.log(oDivs)
var ary = [...oDivs];

<h3>构造函数方法：Array.from()</h3>
<p>将类数组或可遍历的对象转换为真正的数组</p>

    let arrayLike = {
        '0':'a',
        '1':'b',
        '2':'c',
        length:3
    };
    let arr2 = Array.from(arrayLike);
    console.log(arr2)// ["a", "b", "c"]

<p>还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组</p>

    let arrayLike = {
        '0':'1',
        '1':'2',
        '2':'3',
        length:3
    };
    let arr2 = Array.from(arrayLike,item=>item*2);
    console.log(arr2)//[2, 4, 6]

<h3>实例方法：find()</h3>
<p>用于找到第一个符合条件的数组成员，如果没有找到返回undefined</p>

    let ary =[
    {
        id:1,
        name:'张三'
    },{
        id:2,
        name:'李四'
    }
    ];
    let target = ary.find(item=>{
        return item.id ==2
    })
    console.log(target);//{id: 2, name: "李四"}

<h3>实例方法：findIndex()</h3>
<p>用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1</p>

    let arr  = [1,5,8,9];
    let index = arr.findIndex((val,index)=>val>9);
    console.log(index);//-1

<h3>实例方法：includes()</h3>
<p>表示某个数组是否包含给定的值，返回布尔值</p>

   let flag =  [1,2,3].includes(2);
   let flag2 =  [1,2,3].includes(4);
   console.log(flag);//true
   console.log(flag2);//false

<h2>String的扩展方法</h2>
<h3>模板字符串</h3>
<p>Es6新增的创建字符串的方式，使用反引号定义</p>
<h4>模板字符串中可以<span style="color:red;">解析变量</span></h4>

    let name = '张三';
    let sayHello = `hello,我的名字叫${name}`
    console.log(sayHello);//hello,我的名字叫张三

<h4>模板字符串<span style="color:red;">换行</span></h4>
<h4>模板字符串中可以<span style="color:red;">调用函数</span></h4>

    let fn = ()=>{
        return '我是fn函数'
    }
    let html = `我是模板字符串${fn()}`
    console.log(html);//我是模板字符串我是fn函数

<h3>实例方法：startsWidth()和endsWith()</h3>
<p><span style:"color:red;">startsWidth()</span>:表示参数字符串是否在原字符串的头部，返回布尔值</p>
<p><span style:"color:red;">endsWidth()</span>:表示参数字符串是否在原字符串的尾部，返回布尔值</p>

    let str = 'hello 2015';
    let r1 = str.startsWith('hello');
    console.log(r1)//true
    let r2 = str.endsWith('2015');
    console.log(r2)//true

<h3>实例方法：repeat()</h3>
<p>表示将原字符串重复n次，返回一个新字符串。</p>

console.log('y'.repeat(5));//yyyyy

<h3>Set 数据结构</h3>
<p>ES6提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值</p>
<p>Set本身是一个构造函数，用来生成Set 数据结构</p>

const s = new Set();

const s1 = new Set();
console.log(s1.size)//0

const s2 = new Set(['a','b']);
console.log(s2.size)//2

const s3 = new Set(['a','b','a','a']);
console.log(s3.size)//2
const ary = [...s3];//数组去重
console.log(ary);// ["a", "b"]

<p>Set函数可以接受一个数组作为参数，用来初始化</p>

const set = new set([1,2,3,4]);

<h3>实例方法</h3>
<ul>
    <li>add(value):添加某个值，返回Set结构本身</li>
    <li>delete(value):删除某个值，返回一个布尔值，表示删除是否成功</li>
    <li>has(value):返回一个布尔值，表示该值是否为Set的成员</li>
    <li>clear(value):清除所以成员，没有返回值</li>
</ul>

const s = new Set();
s.add(1).add(2).add(3); //向set 结构中添加值
s.delete(2) //删除set 结构中2值
s.has(1) //表示set结构中是否有1这个值 返回布尔值
s.clear() //清除set结构中的所有值

    const s4 = new Set();
    //向set结构中添加值 使用add方法
    s4.add('a').add('b');
    console.log(s4.size);//2
    //从set结构中删除值 使用delete方法
   const r1 =  s4.delete('a');
   console.log(s4.size);//1
   console.log(r1);//true
   //判断某一个值是否是set数据结构中的成员 使用has
   const r2 = s4.has('a')
   console.log(r2);//false
   //清空set数据结构中的值 使用clear方法
   s4.clear();
   console.log(s4.size)//0

<h3>遍历</h3>
<p>Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值</p>

s.forEach(value=>console.log(value))

//遍历set数据结构 从中取值
   const s5 = new Set(['a','b','c']);
   s5.forEach(value=>{
       console.log(value)// a b c
   })