ES6学习
变量声明
es6中新增了let const
let const 是局部变量,只在对应的块作用域生效
let和var可以重新赋值 const不能,const声明的是常量,声明就必须赋值,并且赋值后不能修改
同一作用域let const不能重复声明 var可以
var有变量提升,let const没有
变量的解构赋值
对数组或者对象进行模式匹配,然后对其中的变量进行赋值
//数组基本使用
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
//对象的基本使用
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
ES6声明模板字符串
反引号 ‘ ‘
内容中可以出现/n(能解析html标签)
对象的简写方法
let name="zy";
let age=18;
let linDaiYu={
//name:name,
name,
//age:age
age,
say() {
console.log('我是'+this.name);
}
};
箭头函数
let fun = (x) => x
console.log(fun(2)) //2
1.箭头函数不能用于构造函数
2.箭头函数不绑定this,箭头函数中没有this 的指向,在箭头函数中this 的指向会指向离他最近的那个作用域
3.不可以使用arguments对象
允许函数赋初始值
function add(a,b,c=10){
return a+b+c;
}
let result=add(1,2);
console.log(result)
rest参数
//rest返回的类型是数组,可以用数组的方法
function data(...args){
console.log(args)
}
data('学习','睡觉')
//有多个参数的时候,rest参数必须放到最后
function data2(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
data2(1,2,3,4,5,6,7,8)
拓展运算符
拓展运算符能将【数组】转换为逗号分隔的参数序列
const zy=['学习','睡觉','吃饭']
function lz(){
console.log(arguments)
}
lz(...zy);
伪数组的运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script>
//1数组合并
const zy=['学习','睡觉','吃饭']
const lz=['上课','听课']
const zz=zy.concat(lz)
console.log(zz)
//用数组拓展运算符
const yy=[...zy,...lz]
console.log(yy)
//数组克隆 这里是浅拷贝
const zhang=['a','b','c']
const yin=[...zhang]
console.log(yin)
//3.将伪数组转换为真数组
const divs=document.querySelectorAll('div')
console.log(divs)
const divall=[...divs]
console.log(divall)
</script>
</html>
Symbol
symbol是es6引进的新的原始数据类型,表示独一无二的值
symbol的特点
(1)symbol的值是唯一的,用来解决命名冲突的问题
(2)symbol的值不能与其他数据进行运算
(3)symbol定义的属性不能使用 for in来遍历,但是可以使用 Rflect.ownKeys来获取对象的所有键名
//创建symbol
let s=Symbol();
console.log(s,typeof(s))
let s2=Symbol('zy')
let s3=Symbol('zy')
console.log(s2===s3)
//使用Symbol.for创建
let s4=Symbol.for('lz')
let s5=Symbol.for('lz')
console.log(s4,typeof(s4))
console.log(s4===s5)
//不能与其他数据进行运算
// let result=s+100
迭代器
迭代器,是 ES6 引入的一种新的遍历机制
迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为 Symbol.iterator 的方法来实现
iterator接口主要供for…of消费
迭代的过程如下:
通过 Symbol.iterator 创建一个迭代器,指向当前数据结构的起始位置;
随后通过 next 方法进行向下迭代指向下一个位置,next 方法会返回当前位置的对象,对象包含了 value 和 done 两个属性,value 是当前属性的值,done 用于判断是否遍历结束;
当 done 为 true 时则遍历结束。
//声明一个数组
const zy=['学习','吃饭','睡觉'];
const lz = zy[Symbol.iterator]();
console.log(lz.next())
//{value: "学习", done: false}
console.log(lz.next())
//{value: "吃饭", done: false}
console.log(lz.next())
//{value: "two", done: false}
console.log(lz.next())
//{value: undefined, done: true}
生成器
生成器函数也是一个函数,但是和普通的函数有一些区别:
首先,生成器函数需要在function的后面加一个符号:*
其次,生成器函数可以通过yield关键字来控制函数的执行流程:
最后,生成器函数的返回值是一个Generator(生成器):
function* foo() {
console.log("函数开始执行~")
const value1 = 100
console.log("第一段代码:", value1)
yield
const value2 = 200
console.log("第二段代码:", value2)
yield
const value3 = 300
console.log("第三段代码:", value3)
yield
console.log("函数执行结束~")
}
// 调用生成器函数时, 会给我们返回一个生成器对象
const generator = foo()
// 开始执行第一段代码
generator.next()
// 开始执行第二端代码
console.log("-------------")
generator.next()
generator.next()
console.log("----------")
generator.next()
//遍历
for (let s of foo()) {
console.log(s)
}
Promise
promise对象仅有三种状态
pending(进行中)
Resolved(已完成)
rejected(已失败)
ES6数组新增拓展
构造函数新增的方法
关于构造函数,数组新增的方法有如下:
Array.from()
将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
Array.of()
用于将一组值,转换为数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
还可以接受第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组
console.log(Array.from([1, 2, 3], (x) => x * x))
// [1, 4, 9]
补充数组去重
//数组去重
let arr=[1,2,2,3,4,5,5,6,7,5]
let newarr=Array.from(new Set(arr))
console.log(newarr)
Array.of()
没有参数的时候,返回一个空数组
当参数只有一个的时候,实际上是指定数组的长度
参数个数不少于 2 个时,Array()才会返回由参数组成的新数组
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
数组实例对象新增的方法有如
- copyWithin()
- find()、findIndex()
- fill()
- entries(),keys(),values()
- includes()
- flat(),flatMap()
copyWithin()
将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
//输出结果Banana,Orange,Banana,Orange,Kiwi,Papaya
find()
用于找出第一个符合条件的数组成员
参数是一个回调函数,接受三个参数依次为当前的值、当前的位置和原数组
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
findIndex()
返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
fill()
使用给定值,填充一个数组
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
entries(),keys(),values()
keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
includes()
用于判断数组是否包含给定的值
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
includes方法数组去重
//数组去重
let arr=[1,2,2,3,4,5,5,6,7,5]
let nwearr=[]
for(let i=0;i<arr.length;i++){
if(!nwearr.includes(arr[i])){
nwearr.push(arr[i])
}
}
console.log(nwearr)
flat(),flatMap()
将数组扁平化处理,返回一个新数组,对原数据没有影响
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
flatMap()方法对原数组的每个成员执行一个函数相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
sort()
//数组排序
let arr=[1,8,2,3,7,5,4,6]
arr.sort((a,b)=>{
return a-b;
})
console.log(arr)
ES6对象新增的拓展
super关键字
this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象
ES6对象遍历的5中方法
for…in:循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)
Object.keys(obj):返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名
Object.getOwnPropertyNames(obj):回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名
Object.getOwnPropertySymbols(obj):返回一个数组,包含对象自身的所有 Symbol 属性的键名
Reflect.ownKeys(obj):返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举
对象新增的方法
Object.is()
判断2个值是否完全相等
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.assign()
Object.assign()方法用于对象的合并,将源对象source的所有可枚举属性,复制到目标对象target
Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象
const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Object.setPrototypeOf()
Object.setPrototypeOf方法用来设置一个对象的原型对象
const target = { a: 1, b: 1 };
const source1 = { c: 4 };
Object.setPrototypeOf(target,source1)
console.log(target)
Object.getPrototypeOf()
用于读取一个对象的原型对象
const target = { a: 1, b: 1 };
const source1 = { c: 4 };
Object.setPrototypeOf(target,source1)
console.log(Object.getPrototypeOf(target))
Object.keys()
返回自身的(不含继承的)所有可遍历(enumerable)属性的键名的数组
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
Object.values()
返回自身的(不含继承的)所有可遍历(enumerable)属性的键对应值的数组
const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]
Object.entries()
返回一个对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对的数组
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]