ES6基础

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 43 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端 #开发语言 #ecmascript

本文深入探讨ES6的新增功能，包括变量声明方式let和const的特性，数组解构及其实用场景，字符串模板的使用，高阶函数如forEach、map、filter的应用，以及对象简写、解构等特性。同时，文章还介绍了类、继承、超类等面向对象概念，以及Promise解决异步编程中的问题。

ES6

变量声明

var
	let

1 let和var差不多2 let作用域在一对{}启用3 不能重复声明4 不会变量提升

const

1.声明常量大写
2.声明必须赋值
3.声明后不能修改(复杂类型可以)数组，对象

数组解构

定义:可以把数组分解为单个的变量

1. 交换变量 [a,b]=[b,a]
		2.剩余值 
			var arr=[1,3,5,7,9,11,13]
			let[a,b,...rest]=arr
		3.跳过	
			var arr =[1,3,5,7,9]
			let [a,,b,,c]=arr
			a=1
			b=5
			c=9,

字符串模板1.字符串模板
作用：字符串和变量拼接

str=`你好我是${变量}字符串`
	str=`你好我的名字是"+name+"我今年"+age+"岁了`

2.去掉前后空格
trim()3.重复字符串
repeat(3)数组的高阶函数
forEach()遍历
arr.forEach(function(item,index,self){})
map映射
filter过滤
reduce累计
arr.reduce(function(a,b){return a+b})
every检测每一个是否符合条件
some检测有一个是否符合条件箭头函数
箭头函数是函数的简写
=>前是函数的参数 =>后是执行语句也是返回语句
多个参数或者没有参数用()
多条语句用{}
=>this 指向上一级函数
函数的默认值
函数的形参不定参
function sum(...arg){}
函数的实参扩展参数
Math.max(...arr)
求数组arr中的最大值

对象

对象简写
var name="mm"
var age=18
var obj= {name,age}动态属性
var obj={name,age,["nick“+age]:age}对象解构
let {name,age}={name:"zql",age:18,say(){}}把对象分解为单个变量
Class面向过程，es面向对象一个语法糖实现

class Animal{constructor(name,age)(this.age=age,this.name=name)
	}
			class Cat extends  Animal{
		constructor(arg){
	super()
	   }
	}

常见单词

class类
extends继承
super超类
constructor构造器数组数组去重
var arr=[];
var s=new set(arr)
arr=Array.from(s);数组排序
arr. sort((a,b)=>a>b?1:-1)最大值
Math.max(...arr)for of 可以迭代对象
可以迭代对象
string
Array
set
arr
keys()键集合
values()值集合
entries()键和值集合
promise

解决问题

1.承诺与兑现问题(延期)
2.回调函数过多代码结构不清晰的问题
3.顺序执行的问题1.创建承诺
var p=new promise(function(resolve,reject){
resolve(兑现承诺)
//reject(拒绝原因)})2.寻求兑现承诺
p.then(function(res),function(err){})
当承诺能兑现会执行.then的第一个方法，会传过来“兑现内容”当参数
当承诺不能对西安，会执行.then的第二个方法，会传过来拒绝的原因当参数
浏览器同源策略CORS定义

当通过ajax(XMLHTTPREquest)去获取内容时候，要求当前文件
 和被获取内容是同源的

同源：端口一样，域名一样，子域名，协议一样

解决同源的方法

1.后端headers设置
Access-Control-Allow-Origin:*2.jsonp
在ajax里加一个参数
dataType:"jsonp"原理
Script src 没有同源限制
返回数据是一个执行JS的方法，方法里面有参数，参数就是我们要的数据

Vue

vue是一款mvvm做单页面应用的渐进式js框架
	vue的使用

1.<script src="xxx.vue">
2.new Vue({
	el:"#app",
	data:{msg:"你好数据"}
})
3.<div id="app"><p>{{msg}}</p><input v-model="msg"></div>