前端基础知识---8 ES6
第一种情况，getName是user对象中的一个方法，当调用user.getName()的时候，this关键字在getName（）中指向user对象，因此是ime。因为obj中的propKey已经被第一行时的“itbaizhan”给替代了，因此obj中已经不存在propKey了，因此出现undefined。由于箭头函数中没有自己的this，因此指向外部的getName方法中的name，即为ime。
8.1命令行工具
8.1.1CMD工具
8.1.2PowerShell
8.2babel转码器
8.3Let命令
8.3.1var关键字：函数级作用域
（1）在循环中只有一个i，每次都是重新赋值给i
（2）存在变量提升（结果是undefined）
（3）同一个变量可以可以重复声明
8.3.2let关键字：花括号级作用域（块级作用域 ）
（1）在循环中创建多少个i，就保存多少个i
（2）let不存在变量提升
（3）同一个作用域内，同一个变量不可以重复声明（多个作用域可以重复）
8.4const命令（一旦声明，不可改变）
（1）初始化时，必须赋值
（2）不允许重复赋值
（3）const块级作用域（打印不出来，因此是块级作用域；若能打印，则为全局作用域）
（4）不能提升
（5）不可重复声明
8.5对象解构赋值
8.6字符串拓展
8.6.1字符串遍历接口 for...of
var str = "hello"
for(let i of str){
console.log(i)
}8.6.2字符串模板 $
var href = "https:///itbaizhan.com"
var text ="百战"
var itbaizhan = `<a herf="${href}">${text}</a>`
console.log(itbaizhan)8.7字符串新增方法
8.7.1包含
incldes（）
startsWith（）
endsWith（）
8.7.2 重复
repeat（）
var x ='x'
console.log(x.repeat(3))8.7.3补全
padStart(长度，“字符串”)
padEnd（长度，“字符串”）
var h = "hello"
console.log(h.padStart(10,"ab"))
console.log(h.padEnd(10,"ab"))8.7.4清除
trim（）
trimStart（）
trimEnd（）
8.8数组拓展运算符
8.1.1拓展运算符 ...
8.1.2数组新增方法
伪数组：arguments，元素集合，类似数组的对象
Array. from() 将伪数组转化为数组
Array.of() 将数值转化为数组
答案：D。第一个是将数值转化为了数组，第二个是相当于构造函数，开辟了三个空间
8.9对象的拓展
8.9.1属性简洁法（属性名和属性值是同样变量名称时可以省略）
8.9.2属性名表达式
8.9.4对象拓展运算符
答案：C。因为obj中的propKey已经被第一行时的“itbaizhan”给替代了，因此obj中已经不存在propKey了，因此出现undefined。
8.9函数的拓展---箭头函数
8.9.1把普通函数转化为箭头函数（省略了function）
8.9.2简化回调函数（匿名函数）
map方法：
JavaScript
复制
var numbers = [1, 2, 3, 4];
var squares = numbers.map(function(number) {
return number * number;
});
console.log(squares); // 输出: [1, 4, 9, 16]在这个例子中，map 方法遍历数组 numbers 中的每个元素，将每个元素传递给回调函数，回调函数计算元素的平方并返回结果。最终，map 方法返回一个新数组 squares，包含原始数组中每个元素的平方。
注意：箭头函数没有自己的this，而是引用外层的this
第一种情况，getName是user对象中的一个方法，当调用user.getName()的时候，this关键字在getName（）中指向user对象，因此是ime。
第二种情况，方法中直接使用name，而name是一个全局变量，因此返回的是iwen
由于箭头函数中没有自己的this，因此指向外部的getName方法中的name，即为ime
8.10set数据结构
set数据结构：类似于数组，但成员值是唯一的，没有重复的值
8.10.1基本用法
set本身就是一个构造函数，用于生成set数据结构
（1）直接构造一个
（2）将数组放进set数据结构中
（3）数据去重（数据、字符串）
（4）size属性：返回成员数
8.10.2set数据结构方法
add（）
delete（）
has（）判断是否有这个值
clear（）清除所有数据
8.11Promise对象
8.11.1异步编程
异步编程：是一种编程范式。用于处理程序中需要等待的操作（网络请求...），从而不会阻塞程序的运行。异步编程允许在等待操作时同时执行其他任务，提高效率
8.11.2promise对象基本用法
promise（一个容器）对象是一个构造函数，用于生成实例
promis实例生成后，可以用then方法分别指定resolved状态和rejected状态的回调函数
加载图片资源的例子
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box")
function loadImageAsync(url){
const promise = new Promise(function(resolve,reject){
//异步处理，消耗时间的代码
const image = new Image() //创建image对象
image.src = url
image.onload = function(){
resolve(image) //成功了，即返回这个图像
}
image.onerror = function(){
reject(new Error('Could not load image at' + url)) //错误就给提示
}
})
return promise; //不管成功与否，最终结果都是返回给promise对象，所以要把它return给函数
}
const promise = loadImageAsync("http://iwenwiki.com/api/musicimg/2.png")
promise.then(function(data){
//成功
box.appendChild(data)
},function(error){
//失败
box.innerHTML = "图片加载失败"
})
</script>
</body>8.12Async函数（配合await使用）
使异步操作更便捷，使异步代码看起来像同步代码
<script>
function timeout(ms){ //ms是等待的毫秒数
//resolve是一个函数
return new Promise((resolve,reject) =>{
setTimeout(function(){
console.log("定时器")
resolve() //如果不调用resolve函数，promise将一直处于pending状态，不会执行下面的代码
},ms)
})
}
async function asyncPrint(ms,value) {
//把具有异步操作的代码前面放入：await
await timeout(ms)
console.log(value)
}
asyncPrint(100,"hello")
</script>8.13class
8.13.1class的基本语法
（1）用new创建
（2）constructor是类的默认方法
（3）类不存在提升，必须先定义后使用
class Person{
constructor(name,age){
this.name=name
this.age=age
}
getName(){
console.log(this.name,this.age)
}
}
var p = new Person("iwen",20)
p.getName()
var p1 = new Person("ime",12)
p1.getName()8.13.2class属性与方法
（1）实例方法：通过类的实例对象调用方法
（2）静态方法：在方法前加上static关键字，可以直接通过类调用
（在静态方法中的this指向当前类，而不是实例对象）
8.13.3class的继承
var p =new Person()
p.say()
Person.say()
class Student extends Person{
getSchool(){
console.log("景贤")
}
}
var s = new Student()
s.say()
Student.say()
s.getSchool()
注意！在子类的constructor方法中必须要有super（），且必须先对父类的构造函数完成塑造，再对其进行添加自己的实例属性和方法。
class Student extends Person{
constructor(name,age,schoolName){
super(name,age)
this.schoolName = schoolName
}
getSchool(){
console.log(this.schoolName)
}
}
8.14Model的语法
管理文件
（1）在终端安装（全局安装） cnpm install -g babel-cli
（2）在文件下安装（项目安装） cnpm install -D babel preset -env
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
19
0- 0
已为社区贡献1条内容
所有评论(0)