IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ES6(持续更新) -> 正文阅读

[JavaScript知识库]ES6(持续更新)

模板字符串 可以换行定义 , 可以解析变量 , 空格回车会输出出来 eg : ‘‘我是${a}我’’

var : 有变量提升 , 可以重复定义 后定义的会覆盖前面定义的内容
let : 声明变量不能被定义过 , 变量不能被重复定义 , 没有变量提升
const : 声明要又初始值(声明变量必须赋值) , 没有变量提升, 定义后不重新赋值 但是可以修改里面的属性 一般声明的变量用大写

解构赋值 : 可以同时给多个变量赋值

eg : let [a,b,c] = ['张三','王五','李四'];
	       console.log(a) //张三
	       console.log(b) //王五
	       console.log(c) //李四
不使用第三个变量交换两个变量的值
eg : let [a,b]=[10,99];
     [a,b]=[b,a];

函数可以使用解构赋值的方式返回值 同时给多个变量赋值
eg : function aa(){
            return [11,22,33,44];
       }
       var [a,b,c,d]=[11,22,33,44]
       console.log(c) //33
       console.log(a) //11

不需要注意顺序 
eg : function aa({name="张",age}){
	console.log('我的名字是'+name)
            	console.log('我的年龄是'+age)
        }
        aa({age:"14",name:"李"})

箭头函数 : this指向 由上下文决定 , 指向他的父元素 (箭头函数的this指向在定义的时候继承最外层第一个普通函数的this)
普通函数的this 一般指向它的直接调用者,在默认情况下,this指的是window
var a(函数名) = (name)(参数) =>console.log()(函数里面的内容);
代码体如果是单行的情况下 可以省略 return 关键字,同时也可以省略代码体的{}
eg : 原函数 : function a (name){
return name+2
}
箭头函数 : var a = (name) => name+2;
var b = a(18)
console.log(b)
有参数的,有返回值的,多行代码体的
eg : 原函数: function a(name){
name +1;
name *2;
return name
}

  	 	箭头函数 : var a = (name) =>{
    		         	        name +=1;
    		        	        name *=2;
    		         	        return name
    		 	}
如果返回的是对象的必须加 ()  
	eg : var a =  () => ({name:"张三"})

function cc(){
     "use strict"  //开启严格模式
}

数组 : 复制填充方法
arr.fill(value,start,end) 向一个数组中插入全部或部分的值
第一个参数 用来插入或者是替换的值
第二个参数 开始填充的位置 可选
第三个参数 结束索引的位置 可选 如果有的话不包括end索引
eg : zeroes.fill(5);
console.log(zeroes); // [5, 5, 5, 5, 5]
zeroes.fill(6, 3);
console.log(zeroes); // [0, 0, 0, 6, 6]
zeroes.fill(0);
zeroes.fill(7, 1, 3);
console.log(zeroes); // [0, 7, 7, 0, 0];

新增的数组方法 : indexof() 查询数组或字符串中有没有指定的值,有的话返回第一个值的索引 , 没找到的话返回-1
find(回调函数) 查询指定的数组或字符串指定的值,符合条件的话,会返回这个值 , 返回第一个值后会停止查找

          reduce((priceValue,n)=>{priceValue+n},0) 汇总计算 默认值是0 数组里有几个值执行几次返回
          var arr [1,2,3,4]
          第一次:priceValue: 0 n:1
          第二次:priceValue: 1 n:2
          第三次:priceValue: 3 n:3
          第四次:priceValue: 6 n:4
          结果为10
	
          filter(回调函数)  会把所有符合条件的值放到一个数组中返回出来
          some(回调函数) 有一个满足条件就会返回true , 都不满足返回false  如果第一个满足会有短路效果 会停止循环不继续查找
          every(回调函数) 必须全部满足条件才会返回true , 有一个不满足就返回false ,也会出现短路效果
          some(function(value,index,arr){              every(function(value,index,arr){
	   参数1 : 数组里面的每个元素    	   参数1 : 数组里面的每个元素    			
	   参数2 : 每个元素对应的索引 		   参数2 : 每个元素对应的索引 		
	   参数3 : 原数组			   参数3 : 原数组
	})				})

遍历数组的方式 : 
	1 .  arr.forEach(function(value,index,arr){
		参数1 : 数组里面的每个元素    			
	   	参数2 : 每个元素对应的索引 		   		
	   	参数3 : 原数组
	       })
	2 .  for(let i=0;i<arr.length;i++){
		arr[i] 是数组里面对应的值
		console.log(arr[i]+"索引是"+i)
	      }
	 3 .  let i =0;
   		       while(i<arr.length){
   			console.log(arr[i]+"索引是"+i)
    			i++
    		       }
	4 .  let i=0    //不建议使用(他是先执行一遍才去判断)
	      do{
		console.log(arr[i]+"索引是"+i)
		 i++
	       }while(i<arr.length)
	5 .  for(let i in arr){
		// i 是索引
    			console.log(arr[i])
    		       }	
	6 .   for(let i of arr){    //不能给对象用
    			console.log(i)   // i 代表里面的每个元素
    		      }		

伪数组转换成数组      Array.from(伪数组)  
	eg : var pList = document.getElementsByTagName('p')
       	var bb  = Array.from(pList)

映射 map(回调函数)   把数组里面每一个元素按照传入的回调函数里面的代码都执行一遍
	eg  : var arr = new Array(1,2,3,4,5);
    	       	var newArr = arr.map(item=>item*2)
        	console.log(newArr)   //(2,4,6,8,10)

合并 Object.assign( 合并的对象 )  合 并到第一个对象
	eg : var aa = {name:"张三"}
    	       	var bb = {age:"18",sex:"男"}
    	       	Object.assign(aa,bb)
       	console.log(aa)   //{name:"张三",age:"18",sex:"男"}

深拷贝 : 吧里面的内容一个一个复制出来开一个内存放进去,地址不一样,互不影响
var arr1=[1,2,3]
var arr2=[]
for(let i in arr1){
arr2[i]=arr1[i]
}
arr1[0]=‘abc’
console.log(arr2) //[1,2,3]
console.log(arr1) //[‘abc’,2,3]

新增运算符(深拷贝)   ( ... )
var arr1=[1,2,3]
var arr2=[...arr1]
arr1[0]='aa'
console.log(arr2) //[1,2,3]
console.log(arr1) //['aa',2,3]
 
不会拷贝原型里面的东西
function aa(name){
    this.name=name
    aa.prototype.age=17
}
function bb(name){
    this.name=name
}
var  a=new aa('张三')
var  b={...a}
b.name='李四'
console.log(a) //name:'张三'
console.log(b) //name:'李四'

b.__proto__{...aa.prototype}
b.age=99
console.log(b.age) // 99
console.log(a.age) // 15

浅拷贝 : 数组和对象直接等号赋值的通常是浅拷贝 一个发生变化,另外一个也会跟着变,他只是指向另外一个地址
var obj1={‘name’:‘张三’}
var obj2=obj1
console.log(obj1) //张三 加上obj1.name='李四’后也变成 李四
consolelog(obj2) //张三 加上obj1.name='李四’后也变成 李四
obj1.name=‘李四’
console.log(obj2) //李四

set : 声明:var arr=new set([1,2,3]) 里面的不能有重复的 有去重效果 , 不能通过索引直接获得里面的值 , 他的键值对相同
arr.add(4) 添加元素
arr.size()获取数组长度
arr.delete(1) 删除元素
arr.has(1) 检测有没有 返回bool值
arr.clear() 清空
set拥有iterator属性所以可以使用for of 遍历

map方法 : 声明 var a=new Map([[‘name’,‘张’],[‘name’,‘张’]])(二维数组) 键值对可以不相同
添加 a.set(‘name’,‘李’)
删除 a.delete(‘name’) //根据键名删除
清空 a.clear()

Symbol : 是es6中新增的数据类型 他属性的名字是唯一的,独一无二的 , 不需要new(他是一个原始数据类型的值,不是对象) new的话会报错
一般用来定义属性和常量
基本数据类型(Number String Boolean undefined Null Symbol)
给对象添加独一无二的Symbol属性:

var a = {
	[Symbol('run')]:function(){
		console.log('111')
		}
	}

生成器函数:
function * gen(){
yield ‘’ 分割代码
}
let aa = gen()
aa.next()
只能通过调用next 来执行 调用一次执行一个yield
异步编程 纯回调函数
传参:next传入的参数会变成上一个yield的返回值

echarts : 使用来绘制图表的 eg : 柱状图 , 折线图 …

class : 声明类(语法糖) 没有变量提升
class aa{
//aa这个类一但被new实例化 , 就会第一时间调用 constructor方法
//constructor 构造方法 , 用来初始化值用

//constructor(构造函数)==function 里面的方法不用写function了
constructor(name,age){
this.name=name
this.age=age
console.log(name)
}
run(){
alert(‘111’)
}
}
//实例化
var b = new aa(‘zhangsan’,18)
console.log(b) // 先打印出来zhangsan 然后在打印 aa {name:‘zhangsan’,age:18}

//用extends来继承
class bb extends aa{
     constructor(name,age){
	//super 这个函数来重新定义父类里面构造函数的执行(注意要在构造函数里面使用)
	super(name,age)
     }
}
var b=new bb('王五',20)
console.log(b) //父类constructor里面的(name,age)都修改成 (王五 , 20)

Promise : 异步处理 处理结束后 : 调用resolve(成功) 或者 reject(失败)
//可读性好 便于维护
回调地狱 : 为了实现某些效果用到层层嵌套的回调函数 , 如果嵌套过多的话就会极大地影响可读性和逻辑,这种情况被称为回调地狱

//可以解决回调地狱 
	eg : function aa(){
            		return new Promise(function(resolve,reject){   //创建Promise
                		setTimeout(function(){
                  	 		resolve("{'name':'张三','age':'18'}")
                		},1000)
            		})
        		}
        		aa().then(function(da){
            			console.log(da);
            		return aa()
        		})
        		.then(function(da){
           			 console.log(da);
            		return aa()
        		})

d3.js : 绘制图表 eg : 柱状图 … 世界地图 …

reduce : 计算数组里面值的和
	eg : var arr=[1,2,3,4]
	var a=arr.reduce(function(a,b){
		return a+b
	},10)
	console.log(a)

proxy : 对象代理
eg ; let test = { name: “小红” , age:19, sex:‘男’ };
//参数1 要被处理的对象 参数2 是怎么处理的
bb = new Proxy(test, {
//参数1 原对象 参数2 访问的属性名 bb.oo oo

//调用时用
               		get(target, key) {
                    		for(let i in target){
                        		target[i] = target[i]+"龙哥666"
                    	}
                    	return target  //把 bb 对象放回到  bb.oo里面  
            		}
        	});
	bb.oo
	console.log(bb)
set 可以做过滤
let test = { name: "小红" , age:19, sex:'男' };
//参数1 要被处理的对象     参数2 是怎么处理的
 bb = new Proxy(test, {
	//参数1 原对象  参数2 访问的属性名name   参数3传入的属性值 小
	//赋值时用
           		set(target, key,value) {
                		var a = target[key].substring(0,1)
            			if(value == a){
               				 console.log('ok思密达')
           				 }else{
                				console.log('get out')

            			}
                		}
    		});
bb.name='小'
console.log(bb)
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-13 11:21:44  更:2021-10-13 11:21:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 16:56:43-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码