vs code中文設(shè)置:
https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html
let和const
1.let定義變量,為了取代var
(1) 是否有變量提升 let沒(méi)有變量提升,var有變量提升
(2) 是否有塊級(jí)作用域 let塊級(jí)作用域,var沒(méi)有
出現(xiàn)ES6之前,作用域就有兩種:全局作用域,局部作用域
(3) 是否重復(fù)定義 let不允許重復(fù)定義,var允許
2.const定義常量
特點(diǎn):和let類似,也沒(méi)有變量提升,也有塊級(jí)作用域,不能重復(fù)定義,定義時(shí)必須賦值,但只能賦值一次
箭頭函數(shù)
格式:
(參數(shù)1,參數(shù)2) => {
函數(shù)體
}
箭頭函數(shù)與普通函數(shù)的區(qū)別:主要是this的指向問(wèn)題,箭頭函數(shù)本身沒(méi)有this,它的this使用是父級(jí)函數(shù)的this,而普通函數(shù)有自己的this
箭頭函數(shù)如果=>后面沒(méi)有{},默認(rèn)是帶return
模板字符串
用反引號(hào)引起來(lái)的字符串: ` `
用${}來(lái)獲取變量中的值
例如:var str=`你的姓名為${info.name},你的年齡是${info.age},你的籍貫是${info.address}`
解構(gòu)賦值
注:主要對(duì)數(shù)組,對(duì)象進(jìn)行解構(gòu)
例如:
var info={
name:'關(guān)帥河北',
age:18,
address:'河北',
isMarry:'否'
}
var {name,age,address}=info
類(class)
ES5如何實(shí)現(xiàn)類:用函數(shù)模擬一個(gè)類,即構(gòu)造函數(shù)
例如:
function Chinese() {
this.theme="黃色",
this.eyes="黑色"
}
公共方法:用prototype原型實(shí)現(xiàn)
Chinese.prototype.spring=function() {
console.log(`${this.name}過(guò)春節(jié)`);
}
如何實(shí)現(xiàn)類之間的繼承:例如:chinese類如何繼承Person類
原型鏈繼承:Chinese.prototype=new Person()
缺點(diǎn):不能傳參,所以要引入類式繼承 .call
通用作法即原型鏈繼承和類式繼承組合用
例如:
function Chinese(name) {
Person.call(this,name)
this.theme="黃色",
this.eyes="黑色"
}
Chinese.prototype=new Person()
Chinese.prototype.spring=function() {
console.log(this.name+"過(guò)春節(jié)");
}
ES6如何實(shí)現(xiàn)類:用class定義類
常用關(guān)鍵字:class,extends,super,constructor
定義一個(gè)類:
class 類名 {
}
例如:
class Person1 {
constructor(name='關(guān)帥') {
this.name=name
}
eat() {
console.log(this.name+"喜歡美食");
}
sleep() {
console.log(this.name+"喜歡欣賞枕頭");
}
}
用extends實(shí)現(xiàn)繼承
例如:
class Chinese1 extends Person1 {
constructor(name) {
super(name) // super就是要繼承的父類
this.theme="黃色"
this.eyes="黑色"
}
spring() {
console.log(this.name+"過(guò)春節(jié)");
}
}
注意:只要加extends,supe是必加的
數(shù)組常用遍歷方法
forEach 返回undefined
arr.forEach((item,index,arr)=>{
console.log(`第${index}的值為:`,item.name)
})
filter 返回新數(shù)組
var result=arr.filter((item,index,arr)=>{
return item.age>25
})
map 返回新數(shù)組
var result=arr.map((item,index,arr)=>{
return `姓名:${item.name},年齡:${item.age}`
})
React學(xué)習(xí)資料:
1.菜鳥(niǎo)教程: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初步
環(huán)境搭建:
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中寫(xiě)react代碼
<script type="text/babel">
const element=<h1 className="box">我是標(biāo)題1</h1>;
ReactDOM.render(element,document.getElementById('app'));
</script>
2.用react官方create-react-app腳手架來(lái)開(kāi)發(fā)項(xiàng)目