ES6新特性

半生瓜zy

已于 2022-07-24 22:54:16 修改

阅读量434

点赞数

文章标签： es6 javascript 前端

于 2022-07-24 02:27:04 首次发布

本文链接：https://blog.csdn.net/qq_52136871/article/details/125900802

版权

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] ]