javaScript ES6
2020年7月16日什么是ES6
ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本的标准化规范,ES6实际上是一个泛指,泛指ES2015及后续的版本
为什么使用ES6
每一次标准的诞生都意味着语言的完善,功能的加强,javaScript语言本身也有这一些令人不满意的地方
- 变量提升增加了程序运行时的不可预测性
- 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码
ES6的新增语法
let关键字
let声明变量只在所处于的块级有效,在大括号中,使用let关键字的声明的变量才具有块级作用域
|
1 2 3 4 |
if (true) { let a = 10 } console.log(a) //a is not defined |
let 金典面试题
变量i是全局变量,函数指向时输出的都是全局作用域下的i值
|
1 2 3 4 5 6 7 8 9 10 |
var arr = [] for (var i = 0; i < 2; i++) { arr[i] = function(){ console.log(i) } } arr[0](); arr[1](); //2 //2 |
指向的是局部变量
|
1 2 3 4 5 6 7 8 9 10 |
let arr = [] for (let i = 0; i < 2; i++) { arr[i] = function(){ console.log(i) } } arr[0](); arr[1](); //0 //1 |
const关键字
- 具有块级作用域
- 声明常量时必须赋值 //missing initializer in const declaration
- 常量就是值(内存地址)不能变化的量 ,复杂数据类可以这样不改变内存地址的方式修改里面的值 “常量名[‘name’] = 111 ;常量名.name = 222 “
let const var 的区别
|
1 2 3 4 |
var let const 函数级作用域 块级作用域 块级作用域 变量提升 不存在变量提升 不存在变量提升 值可改变 值可改变 值可改变 |
解构赋值
数组解构
|
1 2 3 4 5 6 7 |
/** * 将 1,2,3 分别赋值给a,b,c * []中括号在=右边才叫数组 * 如果变量多值少后面的变量就为 undefined * 如果变量少值多数组后面的值就会赋不上 */ let [a, b, c] = [1, 2, 3] |
对象解构
|
1 2 3 4 5 6 |
let {name, age} = {name: 'zhangsan', age: 20} /** * 在赋值的过程中改变,系统制定的变量名 * 改为 myName 和 myAge */ let {name: myName, age: myAge} = {name: 'zhangsan', age: 20} |
箭头函数
箭头函数不绑定this关键字,箭头函数中的this,指向函数定义位置中的上下文this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const obj = {name: '张3'} function fn() { console.log(this) return () => { console.log(this) } } const resFn = fn.call(obj); //改变fn 方法的 this 指向为obj resFn(); //调用返回的方法 /** * 输出结果 * ***************** * {name: "张3"} * {name: "张3"} */ |
箭头函数面试题
在对象中使用this , this 指向window
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var obj = { age: 18, say: () => { alert(this.age) } } obj.say(); /** * 输出结果 * ******** * undefined */ |
…变量名 剩余参数 展开运算语法
- 如果 …变量名 放到形参的位置,或者等号左边 代表接受剩余参数
- 如果 …变量名 参数是一个数组,没有放到等号左边或形参的位置,代表展开数组,
剩余参数
|
1 2 3 4 5 6 7 8 9 10 |
const sum = (...args) => { /** * 箭头函数 如果形参是 一个参数 () 小括号会省略 * 如果方法的代码只是一行 {} 大括号 和 return 就可以省略 */ args.forEach(value => console.log(value)) } sum(1,2,3,4) |
利用剩余参数解构
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let students = ['wangwu', 'zhangsan', 'lisi'] let [sen, ...sen1] = students console.log(sen) console.log(sen1) /** * 输出结果 * ************* * wangwu * Array(2) * 0:"zhangsan" * 1:"lisi" */ |
展开运算语法
|
1 2 3 4 5 6 7 8 9 10 11 |
let arr = [1, 2, 3, 4] console.log(...arr) /** * 输出结果 * ************ * 1 2 3 4 * 只要不放在等号左边 或者 形参位置,参数是数组 就是展开 console.log * 逗号分隔可以打印 多个,arr展开后的逗号用于分隔了,所以在console.log * 中不显示逗号 */ |
使用展开运算符合并数组
|
1 2 3 4 5 6 7 8 9 10 |
let arr1 = [1, 2, 3, 4] let arr2 = [5, 6, 7, 8] let arr3 = [...arr1, ...arr2] console.log(arr3); /** * 输出结果 * ************ * (8) [1, 2, 3, 4, 5, 6, 7, 8] */ |
使用展开运算符将 伪数组 转换为 数组 ,这样就可以使用数组中的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
let divs = document.querySelectorAll('div') let arrDivs1 = [...divs] let arrDivs2 = Array.from(divs) //或者使用这种方法将伪数组转换为数组 console.log(divs) console.log(arrDivs1) console.log(arrDivs2) /** * 输出结果 * ************** * NodeList(3) [div, div, div] * (3) [div, div, div] * (3) [div, div, div] */ |
模板字符串
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let result ={ name:'zhangsan', age:'20', sex:'男', } //这里是反引号,可以换行 let html = ` <div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div>` console.log(html) |
还可以在里面执行函数
|
1 2 3 4 5 |
function fn() { return '帅哥'; } console.log(`你是${fn()}`) |
Set数据结构
ES6提供了新的数据结构Set.它类似与数组,但是成员的值都是唯一的,没用重复的值
|
1 2 |
const s1 = new Set() //set本身就是一个构造函数,用来生成set数据 const s2 = new Set([1,2,3,4,5]) //set函数可以接收一个数组作为参数 |
set去除数组中重复数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
let s1 = new Set(['a','b','a','b','1']) console.log(s1.size) //set数据类型,没有length let arr = [...s1] console.log(arr) //这样就可以去除重复数据 /** * 稍微封装就是去除数组中重复值得方法 * @param arr * @returns {*[]} */ function unique(arr) { let s1 = new Set(arr) return [...s1] } console.log(unique(['1','1','2','2','c','c'])) |
set数据结构常用方法
|
1 2 3 4 5 |
s1.add(1).add(2) //添加值 可以列式调用 s1.delete(2) //删除值为2的 数据 返回布尔值 s1.has(3) //判断是否存在3的数据 返回布尔值 s1.clear() //清除所有值 s1.forEach(item => console.log(item)) //set数据也有forEach方法 |
