es6总结

最新推荐文章于 2024-07-20 13:10:06 发布

Che1203

最新推荐文章于 2024-07-20 13:10:06 发布

阅读量81

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/chen120012/article/details/115840214

版权

es6总结

这里写目录标题

es6总结
call apply bind 总结
类和对象
继承
get set
静态方法静态属性
模块化
浅拷贝
深拷贝

1.关键字

              //let
//   let存在暂时性死区
// 块级作用域内let又声明了一个局部变量a
//导致后者绑定这个    块级作用域
//所以在let声明变量前，对a赋值会报错 
//而且    let  没有变量提升
	var a=100;
	{
		console.log(a);//报错
		let a=10;
	}
	console.log(a);//100
            //const
// const 声明具有块级作用域
const a=10
if(true){
const a=100;
console.log(a);//100
if(true){
//  const a  //书写时必须赋初识值不然报错
const abc=111;
abc=1122;//报错 常量声明后值不能更改
}
}

1.3 let、const、var区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

2.字符串模板

// 1、模板字符串 在变量和常量拼接的时候使用  整个字符串使用`${变量}`
var stu={
		name:'zs',
		age:12
	}
txt.innerHTML=`学生的姓名是${stu.name}，年龄是${stu.age}`;
//2.标签模板
let a=10;
let b=2;
function add(x,y){
		console.log(x,y);
		console.log(arguments)
	}
add`hello${a}welcome${b}`
 //第一个参数['hello','welcome',''] 
 //第二个参数10  第三个参数2

3.解构

//数组解构
// 数组的解构赋值 按照数组的顺序一一赋值 
//如果变量比数组的值多则多余的变量值为undefined
let ary=[1,2,4];
let [a,b,c,e]=ary;
console.log(a,b,c,e);//1 2 4 undefined
// 交换值
let m=12;
let n='hello';
// 通过解构可以直接交换值
[m,n]=[n,m];
console.log(m,n);//hello  12

//对象解构
// 对象的解构赋值和数组有一个重要的不同，数组的解构是有顺序的，对象的解构没有顺序，由属性来决定			
// 变量名字必须与属性名字一致，才能获取到正确的值
let stu={
		name:'zs',
		age:12
	}
let {age,name,address}=stu;
console.log(age,name,address);//12 zs undefined
                 // address相当于声明了，没有赋值
                 
// 字符串的解构赋值 把字符串中的字符解析一一赋值。
//如果有多余的不会报错，只是没有对应变量赋值
			let[x,y,z]='hello';
			console.log(x,y,z);// h e l
// 字符串都会有一个长度属性，因此可以使用属性解构赋值
			let {length:len}='hello';
			console.log(len);//5

4.数组方法

          //es5
//1.forEach 迭代
//相当于for 循环的加强版
var arr=[1,2,3,4,5,5]
arr.forEach(function(value,index,array){
console.log("每个数组元素"+value);//数组当前值
console.log("数组元素的下标"+index);//数组当前索引
console.log("数组本身"+array)//数组对象本身 
	})
//2. filter  过滤
//可以把所有符合条件的数据过滤出来
var arr=[1,22,36,48,500,51];
var newArr=arr.filter(function(value,index){
		return value>=40;
})
//filter筛选数组所以要定义变量接收下
	console.log(newArr)//[48,500,51]
//3.some 查找数组中是否有满足条件的元素
			var arr=["red ","pink","blue"];
			var flag=arr.some(function(value){
				return value=="pink";
			})
			console.log(flag);//true
	//filter 和some 的总结	
//1.filter 查找满足条件的元素返回一个数组 将所有满足条件的元素返回
//2.some 查找满足条件的元素是否存在 返回的是布尔值 如果查找到第一个元素就终止循环

                     //es6
// Array.from()可以把类数组/集合转化为数组
var btns=document.getElementsByTagName('button');
//btns 是一个类数组，转换为数组后 可以通过forEach遍历数组
// 声明了一个长度为10的数组
	var ar=new Array(10);
  // array.of()相当于对new Array的扩展。不论输入什么，代表的都是数组元素
 var ar=Array.of(10);
// 数组.find(function(条件){书写具体条件})得到的结果是第一个符合条件的数组元素的值。查找顺序，从左到右
let score=[98,97,96,86,79,79,80];
		 let m=score.find(function(n){
			return n<80
			 })
			console.log(m)
// 数组.findIndex(function(条件){书写具体条件})得到的结果是第一个符合条件的数组元素对应的下标。查找顺序，从左到右 	 		    
   let m=score.findIndex(function(n){
		 		return n<80
		 	})
		 	console.log(m)//
// copyWithin(参数1，参数2，参数3) 复制数组中的一段元素，替换原来的元素 参数1:替换开始的位置 参数2：复制开始的位置 参数3：复制结束的位置 含开始不含结束
let score=[98,97,96,86,79,79,80];
	 score.copyWithin(1,3,6);//98 86 79 79 79 79 80
// score.copyWithin(0,4,10);79 79 80 86 79 79 80
//score.copyWithin(-3,-4,-1); 98 97 96 86 86 79 79
			console.log(score);

5函数方法

// rest剩余参数。 ...参数名  用于获取函数多余的实参,是一个数组  必须要放置在结尾。

			function add(x,y,...values){
				console.log(x+y);//3
				console.log(values);//[3,4]
				var arr=values.push(x,y);
				console.log(values)//[3,4,1,2]
			}
			// 获取用户所有输入的实参，放在一个数组里面
			add(1,2,3,4);
//			
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) // 6

//  Default  函数参数的默认值
//  如果y没有实参，默认值就是3。如果有实参，默认就是实参的值
			 function fn(x,y=3){
			 	console.log(x*y)
			 }
		 fn(3,20);
//Spread 扩展运算符
var arr=[2,3,5,6]
//...arr 将 arr数组拆分为  2 3 5 6 
console.log(Math.max(...arr));//6
//es6数组去重
//1.
arr=[2,2,2,2,3,3,4,5,5,1,16,7];
var a=[... new Set(arr)];
//2.
function(array){
return Array.from(new Set(array))}

6.箭头函数

 // 箭头函数  去除function ()和{}之间用=>   
 //相当于       ()=>{}
 			var fn=()=>{};         
//	1、箭头函数不可以当做构造函数使用，也就是说。不能使用new命令
//	2、箭头函数中的this，指向的是定义的时候所在的对象，不是使用的时候所在的对象。const stu={name:'zs'}
			function fu(){
				// 普通函数中的this指向window
				console.log(this);
				return ()=>{
					console.log(this)
				}
			}
			fu();//this 指向window
			var reult=fu.call(stu);
			reult();//this 都指向 stu
// 3、如果函数体，只有一句话，可以直接省略{}。如果这句话带有return省略return
		 var fn=(x,y)=>console.log(x+y);
		 fn(2,4);

call apply bind 总结

相同点：

都可以改变this 指向

不同点：

1.call 和apply会调用函数，并且改变函数内部this指向
2.call 和apply 传递的参数不一样
call传递的参数 aru1 aru2 …形式 apply必须以数组的形式传递参数
3.bind 不会调用函数，可以改变this指向

主要应用场景

1.call 经常继承
2apply 跟数组有关。如借助数学对象实现最大最小值
3.bind 常用于改变定时器内部this指向

类和对象

对象是一个具体的事物对象由属性和方法构成
类抽象了对象的公共部分，泛指某一大类

继承

让子类可以使用父类的一些属性和方法；
extends: class x extends y{}
super：用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

在这里插入图片描述

get set

var circle={
				 r:30,
				get act(){
					return Math.PI*this.r*this.r;
				},
				set act(value){
					return this.r=value
				}
				
			}
			console.log(circle.act);
			circle.act=40;
			console.log(circle.act);

静态方法静态属性

	<!-- 静态方法和静态属性只能通过类直接调用，不需要实例对象 -->
			class Product{
				// 在类的方法前面加上static以后 就表示该方法为静态方法，只能通过类直接调用
				static buy(){
					console.log('您确认购买商品吗')
				}
				buy(){
					console.log('maile......')
				}
			}
			// 静态属性值得是类本身的属性。通过类名.静态属性名直接赋值。只能通过类调用
			Product.price=1000;


			var p=new Product();
			p.buy();
			Product.buy();
			console.log(Product.price);
			class Fruit extends Product{
				constructor(){
					super()
				}
			}
			//静态方法和静态属性是可以继承的 ,不是复制的和实例对象的属性不一样，实例对象的属性是复制过来的
			Fruit.buy()
			console.log(Fruit.price);
			// 也是继承的
			console.log(Fruit.hasOwnProperty('buy'))
			console.log(Fruit.hasOwnProperty('price'))
			console.log(Product.hasOwnProperty('buy'))

模块化

1、新建文件夹(英文)
2、初始化 npm init -y
3、下载包文件
4、新建.babelrc文件
5、使用babel指令进行转化。把es6转化为es5 指令babel 源文件es6 -d 目标文件es5
‘xxx’ 不是内部或外部命令，也不是可运行的程序或批处理文件。一般出现这种问题，说明该软件不是全局安装。
三种方法完全独立
1、需要找到安装目录在安装目录下执行指令软件一般安装在bin文件目录下
2、把该软件配置到配置到环境变量里面 (找到文件所在地址，复制到环境变量)
环境变量(执行一个指令的时候，如果命令行所在的目录不存在，会去环境变量里面寻找，如果能找到就会执行该指令，否则就报错)
3、配置快捷键使用快捷键 npm run 快捷键名字
在package.json中配置快捷键
在package.josn内部

“build”:“babel -d dist”

浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用

var obj={
			name:"zs",
			id:1,
			msg:{age:12}};
			var o={};
	//for(var k in obj){
	//		o[k]=obj[k];
	//		}
//console.log(o);// {name:"zs",id:1,msg{age:12}}
//o.msg.age=20;//拷贝的是引用地址 所以改了会影响原数据
//console.log(o);//{name:"zs",id:1,msg{age:20}}
//es6 浅拷贝语法糖 
Object.assign(o,obj);//第一个要拷贝给谁 二.要拷贝哪一个对象
console.log(o);//{name:"zs",id:1,msg{age:12}}

深拷贝

深拷贝拷贝多层，每一级别的数据都会拷贝

var obj={name:"zs",id:1,
			msg:{
			age:12},
			color:["pink","red"],
			};
			var o={};
			//深拷贝
			function deepCopy(newobj,oldobj){
			for(var k in oldobj){
				//1获取属性值
				var item=oldobj[k];
				//2.判断是否是数组 
				//数组要写前面因为数组也是对象
				if(item instanceof Array){
					newobj[k]=[];
					deepCopy(newobj[k],item);
				}else if(item instanceof Object){	//3判断是否是 对象
					newobj[k]={};
					deepCopy(newobj[k],item);
				}else{	//判断是否是简单数据对象
					newobj[k]=item;
				}
			}	
			
	}
	deepCopy(o,obj);
	console.log(o)//{name:"zs",id:1,msg{age:12}，color:["pink","red"]};
	//o.msg.age=133;
	console.log(o);//{name:"zs",id:1,msg{age:133}，color:["pink","red"]};
	console.log(obj);//{name:"zs",id:1,msg{age:12}，color:["pink","red"]};

Che1203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6总结

es6总结1.数组方法 //es5//1.forEach 迭代//相当于for 循环的加强版 // var arr=[1,2,3,4,5,5] // arr.forEach(function(value,index,array){ // console.log("每个数组元素"+value);//数组当前值 // console.log("数组元素的下标"+index);//数组当前索引 // console.log("数组本身"+array)//数组对象本身
复制链接

扫一扫