02.javascript-ES6语法
ES6 是由ECMA 国际标准化组织制定的一项脚本语言的标准化规范
let
- let 声明的变量只在所处于的块级有效
- 防止循环变量变成全局变量
- 使用let声明的变量没有变量提升
- 暂时性死区
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
})
