es6学习

卓 zoey

已于 2023-04-09 17:35:17 修改

阅读量133

点赞数

分类专栏： JavaScript 文章标签： es6 java 前端

于 2022-07-06 15:47:57 首次发布

本文链接：https://blog.csdn.net/weixin_44974676/article/details/125634955

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

		<div class="">
			<div class="item"> 1 </div>
			<div class="item"> 1 </div>
			<div class="item"> 1 </div>
		</div>

		<script>
			let items = document.getElementsByClassName('item');
			for (var i = 0; i < items.length; i++) {
				items[i].onclick = function() {
				this.style.background='pink'
					
				}
			}
      </script>

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

let [foo = true] = [];//foo= true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x = 1, y = x] = [];     // x=1; y=1
let [x = y, y = 1] = [];   // ReferenceError: y is not defined 上面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明
let { foo, bar } = { foo: "aaa", bar: "bbb" }; // foo="aaa"，bar="bbb"
let {length : len} = 'hello'; // len=5
const [a, b, c, d, e] = 'hello'; //a= "h"，b= "e",c= "l",d="l",e="o"
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; // baz="aaa"、
const f4=['1','2']
let [xiao,liu]=f4;//xiao=1,baz=2
const zhao={name:'zz',age:22}
let {name,age}=zhao;

箭头函数

（1）this是静态的，this始终指向函数声明式所在作用域下的this的值

<script>
			let items = document.getElementsByClassName('item');
			for (let i = 0; i < items.length; i++) {
				items[i].onclick = function() {
				// this.style.background='pink'
					items[i].style.background = 'pink'
				}
			}
			function getName(){
				console.log(this.name)
			}
			let getName2=()=>{
				console.log(this.name)
			}
			window.name='apple';
			const school={
				name:'grape'
			}
			getName.call(school)//grape
			getName2.call(school)//apple
      </script>

（2）箭头函数不能作为构造实例化对象

let person =（name)=>{

this.name=name;}//这样是不行的

（3）不能使用arguments变量

（4）let add=n=>{

return n+n; }

   let ad=document.getElementById('ad')
           ad.addEventListener('click',function(){
               let _this=this;
               setTimeout(function(){
                   console.log(_this);
                   _this.style.background='pink'
               })
           })

let ad=document.getElementById('ad')
           ad.addEventListener('click',function(){

               setTimeout(function(){
                   console.log(this);
                   this.style.background='pink'
               })
           })

let ad=document.getElementById('ad')
           ad.addEventListener('click',function(){

               setTimeout(()=>{
                   console.log(this);
                   this.style.background='pink'
               })
           })

arguments的使用

当我们不确定多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

arguments是一个伪数组

1.具有数组的length属性

2.按照索引的方式进行存储的

3.它没有真正数组的一些方法：pop(),push()等等

function a(){

console.log(arguments);//里面存储了所有传递过来的参数

}

some和foreach的区别：

有三次输出“11”

有一次输出“11”

Object.defineProperty()

定义对象中新属性或修改原有的属性

var obj={
id:1,
pname:'zoey',
price:1999}
Object.defineProperty(obj,'num',{//定义新属性并设置值
value:1000
});

Object.defineProperty(obj,'price',{//修改属性的值
value:1000
});
Object.defineProperty(obj,'id',{//不允许修改 
writable:false
});
Object.defineProperty(obj,'address',{//是否能够被遍历
	value:'dd',
	enumerable:false
	});

集合的练习

                let arr=[1,2,3,4,5,4,3,2,1];
				let arr2=[4,5,6,5,6];
				//数组去重
				let result=[...new Set(arr)];
				console.log(result)//(5) [1, 2, 3, 4, 5]
                //交集
				let result1=[...new Set(arr)].filter(item=>{
					let s2=new Set(arr2);
					if(s2.has(item)){
						return true;
					}else{
						return false;
					}
				})
				console.log(result1)//(2) [4, 5]

              let result2=[...new Set(arr)].filter(item=>new Set(arr2).has(item));
				console.log(result2)//(2) [4, 5]

async

await

深拷贝和浅拷贝

浅拷贝出现的前提：引用类型的数据（对象和数组）

深拷贝和浅拷贝

对象浅拷贝解决方法：

1.json转换方法

缺点：数据类型为function或者数据值为undefined情况下无法复制

2.Object.assign方法