vs code中文设置:
https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html
let和const
1.let定义变量,为了取代var
(1) 是否有变量提升 let没有变量提升,var有变量提升
(2) 是否有块级作用域 let块级作用域,var没有
出现ES6之前,作用域就有两种:全局作用域,局部作用域
(3) 是否重复定义 let不允许重复定义,var允许
2.const定义常量
特点:和let类似,也没有变量提升,也有块级作用域,不能重复定义,定义时必须赋值,但只能赋值一次
箭头函数
格式:
(参数1,参数2) => {
函数体
}
箭头函数与普通函数的区别:主要是this的指向问题,箭头函数本身没有this,它的this使用是父级函数的this,而普通函数有自己的this
箭头函数如果=>后面没有{},默认是带return
模板字符串
用反引号引起来的字符串: ` `
用${}来获取变量中的值
例如:var str=`你的姓名为${info.name},你的年龄是${info.age},你的籍贯是${info.address}`
解构赋值
注:主要对数组,对象进行解构
例如:
var info={
name:'关帅河北',
age:18,
address:'河北',
isMarry:'否'
}
var {name,age,address}=info
类(class)
ES5如何实现类:用函数模拟一个类,即构造函数
例如:
function Chinese() {
this.theme="黄色",
this.eyes="黑色"
}
公共方法:用prototype原型实现
Chinese.prototype.spring=function() {
console.log(`${this.name}过春节`);
}
如何实现类之间的继承:例如:chinese类如何继承Person类
原型链继承:Chinese.prototype=new Person()
缺点:不能传参,所以要引入类式继承 .call
通用作法即原型链继承和类式继承组合用
例如:
function Chinese(name) {
Person.call(this,name)
this.theme="黄色",
this.eyes="黑色"
}
Chinese.prototype=new Person()
Chinese.prototype.spring=function() {
console.log(this.name+"过春节");
}
ES6如何实现类:用class定义类
常用关键字:class,extends,super,constructor
定义一个类:
class 类名 {
}
例如:
class Person1 {
constructor(name='关帅') {
this.name=name
}
eat() {
console.log(this.name+"喜欢美食");
}
sleep() {
console.log(this.name+"喜欢欣赏枕头");
}
}
用extends实现继承
例如:
class Chinese1 extends Person1 {
constructor(name) {
super(name) // super就是要继承的父类
this.theme="黄色"
this.eyes="黑色"
}
spring() {
console.log(this.name+"过春节");
}
}
注意:只要加extends,supe是必加的
数组常用遍历方法
forEach 返回undefined
arr.forEach((item,index,arr)=>{
console.log(`第${index}的值为:`,item.name)
})
filter 返回新数组
var result=arr.filter((item,index,arr)=>{
return item.age>25
})
map 返回新数组
var result=arr.map((item,index,arr)=>{
return `姓名:${item.name},年龄:${item.age}`
})
React学习资料:
1.菜鸟教程:http://www.runoob.com/react/react-tutorial.html
2.react文档:
官方文档:https://reactjs.org/docs/hello-world.html
中文文档:http://react.html.cn/docs/getting-started.html
React初步
环境搭建:
1.用script引入方式
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
再script中写react代码
<script type="text/babel">
const element=<h1 className="box">我是标题1</h1>;
ReactDOM.render(element,document.getElementById('app'));
</script>
2.用react官方create-react-app脚手架来开发项目