前端Es6新增语法使用

const关键字 作用：声明变量，常量就是值（内存地址）不能变化的量。 具有块级作用域 if（true）{ const a=10; } console.log(a); //a is not defined 声明常量时必须赋值 const PI; //使用const关键字必须赋初始值 常量赋值后，值不能修改 const PI=3.14； PI=100；//赋值后不能修改，修改将修改地址 ary[0] = 123;//可以进行修改 let关键字 let关键字就是用来声明变量的使用lef关键字声明的变量具有块级作用域 在一个大括号中 使用let关键字声明变量才具有块级作用域var关键字是不具备这个特点 防止循环变量变成全局变量 先声明在使用// 使用let关键字声明的变量没用变量提升 例子： // let关键字就是用来声明变量的 let a = 10; console.log(a); 只能局部访问

let、const、var区别 1、使用var声明变量，其作用域为该语句所在的函数内，且存在变量提升现象 2、使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升 3、使用const声明变量，在后面出现的代码中不能再修改常量的值。如果使用的值不需要修改或变化使用const关键字

变量提升：就是可以先使用在声明 Var Let Const 函数级作用域 块级作用域 块级作用域 变量提升 不存在变量提升 不存在变量提升 值可更改 值可更改 值不可更改

解构赋值 Es6允许从数组中提取，按照对应的位置，对变量赋值。对象也可以实现解构

数组解构 let [a, b, c] = [1, 2, 3]; console.log(a); console.log(b); console.log(c); let ary = [1, 2, 3]; let [a, b, c] = ary; console.log(a); console.log(b); console.log(c); 如果解构不成功，变量的值为undefined let [foo] = []; let [bar, fool] = [1]; console.log(bar);//1 console.log(fool);// undefined 对象解构 按照一定模式，从数组或对象中提取，将提取出来的值赋给另外的变量 对象解构允许使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量 let person = { name: 'zhangsan', age: 20 } let { name, age } = person; console.log(name);//zhangsan console.log(age);//20 第二种 let { name: myName } = person; console.log(myName);//zhangsan

箭头函数 （形参）=>{} const fn=（）=>{} 函数体中只有一句代码，且代码执行结果就是返回值，可以省略大括号。

const sum = (n1, n2) => n1 + n2; const result = sum(10, 20); console.log(result); 在箭头函数中形参只有一个 形参外侧的小括号也可以省略 const fn = v => { alert(v); } fn(20); const fn=v=>v; 箭头函数不绑定this关键字， 箭头函数没有自己的this关键字， 如果在箭头函数中使用this， this关键字指向的是函数定义位置的上下文this function fn() { console.log(this); return () => { console.log(this); } } const obj = { name: 'zhangsan' }; // 将函数this指向obj const resFn = fn.call(obj); resFn();

剩余参数语法允许将一个不定数量的参数表示为一个数组

const sum = (...args) => { let total = 0; args.forEach(item => total += item); return total; }; console.log(sum(10, 20)); console.log(sum(10, 20, 30)); const sum (first，...args) => { console.log(firsr); //10 console.log(args); //[20,30] }; sum(10,20,30); 剩余参数和解构配合使用 let students = ['wangwu', 'zhangsan', 'lisi']; let [s1, ...s2] = students; console.log(s1); //'wangwu' console.log(s2); //['zhangsan','lisi']

扩展运算符 扩展运算符可以将数组或对象转为逗号分隔的参数序列 let ary = [“a”, “b”, “c”]; console.log(…ary) console.log(“a”, “b”, “c”)

扩展运算符应用于数组合并 let ary1 = [1, 2, 3]; let ary2 = [4, 5, 6]; let ary3 = [...ary1, ...ary2]; console.log(ary3) 扩展运算符转换为数组 将类数组或可遍历对象转换为真正的数组 var oDivs =document.getElementsByTagName('div'); console.log(oDivs) var ary = [...oDivs]; 构造函数方法Array.from() 将类数组或可遍历对象转换为真正的数组 var arrayLike = { "0": "张三", "1": "李四", "2": "王五", "length": 3 } var ary = Array.from(arrayLike); console.log(ary) //["张三", "李四", "王五"] 乘2 var arrayLike = { "0": "1", "1": "2", "length": 2 } var ary = Array.from(arrayLike, item => item * 2) console.log(ary) //[2, 4]

findlndex(); 用于找出第一个符合条件的数组成员位置，如果没有找到返回-1

let ary = [10, 20, 50]; let index = ary.findIndex(item => item > 15); console.log(index) includes（）

判断数组中是否包含某一个值,返回布尔值 [1,2,3].includes(2)//true [1,2,3].includes(4)//false

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

find（） 用于找出第一个符合条件的数组成员，如果没有找到就返回undefined 查找数组中符合的条件

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

String的扩展方法 Es6创建字符串的方式，使用反引号定义（位置在tab键上面） 模板字符串 模板字符串可以解析变量，使用$拼接字符串必须使用反引号<scripttype{=}^{\prime }text/javascrip{t}^{\prime }>letname{=}^{\prime }张{三}^{\prime };letsayHello=‘Hello,我的名字叫${name}; console.log(sayHello); </script> 模板字符串可以换行 let html = div> $result.name</span><span>${result.name} ; console.log(html); 在摸板板字符串中可以调用函数。 const sayHello = function() { return '哈哈哈追不到我吧就是这么强大'; }; let greet =${sayHello()}哈哈哈哈`; console.log(greet); //哈哈哈追不到我吧就是这么强大哈哈哈哈 starsWith和endsWith() starsWith（）；表示字符串是否在原字符串的头部，返回布尔值 endsWith()；表示参数字符串是否在原字符串的尾部，返回布尔值