ES6新增基础特性
一、let 声明变量
1、作用域
var声明变量具有全局作用域，可在全局调用
let 声明变量只能在当前作用域生效
{
var a = 1;
let b = 2;
}
console.log(a) // 控制台输出 1
console.log(b) // 控制台报错 b is not defined
2、唯一性
var 声明变量可以声明多次
let 声明变量只可以声明一次
var a = 1;
var a = 2;
let b = 1;
let b = 2;
console.log(a) // 控制台输出 2
console.log(b) //控制台报错 Identifier 'b' has already been declared
*注意：不在同一作用域内的同一变量名可以重复声明
function a () {
let b = 1
}
let b = 2
console.log(b); //控制台输出 2
3、变量提升
var 存在变量提升
let 不存在变量提升
console.log(a);
var a = 10; // 控制台输出 undefined
console.log(b);
let b = 12; // 控制台报错 Cannot access 'b' before initialization
二、const 声明常量
1、声明后不可以改值
const a = 1; // const 声明一个常量
console.log(a) // 控制台输出 1
a = 2; // 如果重新赋值
console.log(a) // 控制台报错： Assignment to constant variable.
2、声明后必须初始化
const a; // const 声明一个常量若不初始化
a = 1;
console.log(a) // 控制台报错 Missing initializer in const declaration
三、表达式解构
1、数组解构
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3
2、对象解构
const person = {
name: "jiegou",
age: 18,
language: ['JavaScript', 'Css', 'TypeScript']
}
// 从person里解析出name的值在赋值给abc
const { name:abc, age, language } = person
console.log(abc, age, language)
// jiegou 18 ['JavaScript', 'Css', 'TypeScript']
四、字符串方法
1、检测字符串前缀
使用startsWith方法判断，返回值为Boolean
let str = "strings.js";
console.log(str.startsWith("strings")) // 控制台输出true
2、检测字符串后缀
使用endsWith方法判断，返回值为Boolean
let str = "strings.js";
console.log(str.endsWith("js")) // 控制台输出true
3、检查是否包含某个元素
使用includes方法判断，返回值为Boolean
let str = 'HUAWEI'
console.log(str.includes("A")) // 控制台输出true
console.log(str.includes("EI")) // 控制台输出true
*注意：以上三种方法严格区分大小写字母
五、字符串模板
let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>
六、字符串中插入变量或表达式或方法
1、字符串中插入变量
let abc = '张三' , age = 18
let str = `我是${abc},今年${age}`
console.log(str) //我是张三,今年18
2、字符串插入表达式
let abc = '张三' , age = 18
let str = `我是${abc},今年${age + 10}`
console.log(str) //我是张三,今年28
3、 字符串插入方法
function fun() {
return "我是大帅哥";
}
let abc = '张三' , age = 18
let str = `我是${abc},今年${age + 10},我想说：${fun()}`
console.log(str) //我是张三,今年28,我想说:我是大帅哥
七、函数优化
1、函数中如果没有传参，则可以使用函数中形参的默认值
function add(a, b = 1) {
return a + b; // a = 10 , b = 1
}
console.log(add(10)) // 控制台输出 11
2、箭头函数
//普通函数
var sum = function (a, b) {
c = a + b
return c
}
console.log(sum(1,2)) // 控制台输出 3
//箭头函数
var sum2 = (a, b) => {
a + b
};
console.log(sum2(3,4)) // 控制台输出 7
3、箭头函数结合解构表达式
//普通函数
function hello(person) {
console.log("hello" + person.name)
}
hello(person)
//箭头函数
let hello2 = params => {
console.log("hello" + person.name)
}
hello2(person)
//箭头函数加解构表达式
var hello3 = ({ name }) => {
console.log("hello" + name)
}
hello3(person)
4、不定参数
根据传参内容执行不通效果
function fun(...nums) {
console.log(nums.length)
}
fun(1, 2) // 控制台输出 2
fun(1, 2, 3, 4) // 控制台输出 4
八、对象优化
1、新增Object方法
-
key(obj)：获取对象的所有key形成的数组
-
value(obj):获取对象的所有value形成的数组
-
value(obj):获取对象的所有value形成的数组
const person = { name: "zqb", age: 18, hobby: ["篮球", "听歌", "睡觉"] } // ["name","age","hobby"] console.log(Object.keys(person)) // ["zqb",18,Array(3)] console.log(Object.values(person)) // [Array(2),Array(2),Array(2)] console.log(Object.entries(person))
2、Object.assign
第一个参数是目标对象，后面的参数都是源对象，将源对象的属性赋值到目标对象中。
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const obj3 = { c: 3 }
Object.assign(obj1, obj2, obj3);
console.log(obj1) //{a: 1, b: 2, c: 3}
3、声明对象简写
// 基础
const name = 'zqb'
const age = 18
// 将属性值name，age分别赋给person1对象的name，age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) // 控制台输出 {name: "zqb", age: 18}
// es6:属性名和属性值变量名一样，可以省略
const person2 = {name,age}
console.log(person2) // 控制台输出 {name: "zqb", age: 18}
4、对象的函数属性简写
let person3 = {
name: "zqb",
//基础
eat: function (food) {
console.log(this.name + "爱吃" + food);
},
//箭头函数中this不能使用，需要使用对象.属性
eat2: food => {
console.log(person3.name + "爱吃" + food)
}
eat3(food) {
console.log(this.name + "爱吃" + food)
}
}
person3.eat("沙拉") // 控制台输出 zqb爱吃沙拉
person3.eat2("口蘑") // 控制台输出 zqb爱吃口蘑
person3.eat3("山竹") // 控制台输出 zqb爱吃山竹
5、对象的扩展运算符
扩展运算符（…)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//拷贝对象（深拷贝）
let obj1 = { name: "zqb", age: 18 }
let obj2 = { ...obj1 }
console.log(obj2)// 控制台输出 {name: "zqb", age: 18}
//合并对象
let age = { age: 18 }
let name = { name: "zqb" }
let obj3 = {}
obj3 = { ...name,...age }
console.log(obj3) // 控制台输出 {name: "zqb",age: 18 }
九、map和reduce方法
1、map方法
map() : 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ["1", "2", "3", "4"]
arr = arr.map(item => item * 2)
console.log(arr) // 控制台输出 [2, 4, 6, 8]
2、 reduce方法
callback(执行数组中每个值的函数，包含四个参数)
-
previousValue（上一次调用回调返回的值，或者是提供的初始值)
-
currentValue(数组中当前被处理的元素)
-
index(当前元素在数组中的索引)
-
array(调用reduce的数组)
let arr1 = [2, 40, -10, 6] let result = arr1.reduce((a, b) => { return a + b }, 10) console.log(result)// 控制台输出 48
十、模块化
模块化：是指把代码进行拆分，方便重复利用。
模块的功能主要有两个命令构成：export和import
export命令用于规定模块的对外接口，export不仅可以导出对象，一切js变量都可以导出。
import命令用于导入其他模块提供的功能
总结
-
ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念
-
目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6
-
ES6提供了大量的语法糖，让你写代码的时候会方便和高效很多！
