四.字符串
1.多了2个新方法
startsWith
endWith
--------------------
<script>
let str='1.png';
if(str.endsWith('.txt')){
alert('文本文件');
}else if(str.endsWith('.jpg')){
alert('JPG图片');
}else{
alert('其他');
}
</script>
-----------------------
<script>
let str='git://www.baidu.com/2123123';
if(str.startsWith('http://')){
alert('普通网址');
}else if(str.startsWith('https://')){
alert('加密网址');
}else if(str.startsWith('git://')){
alert('git地址');
}else if(str.startsWith('svn://')){
alert('svn地址');
}else{
alert('其他');
}
</script>
------------------------------
2.模板 `反单引号
---------------
<script>
/*let str='abc';
let str="abc";*/
let a=12;
let str=`a${a}bc`;
alert(str);
</script>
---------------
<script>
let title='标题';
let content='内容';
let str='<div>\
<h1>'+title+'</h1>\
<p>'+content+'</p>\
</div>';
let str2=`<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;
</script
五.面向对象
1.class关键字、构造器和类分开了
2.class里面直接加方法
----------------
老版写法
----------
<script>
function User(name, pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function (){
alert(this.name);
};
User.prototype.showPass=function (){
alert(this.pass);
};
var u1=new User('blue', '123456');
u1.showName();
u1.showPass();
</script>
-----------------
继承
-------------------------
<script>
function User(name, pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function (){
alert(this.name);
};
User.prototype.showPass=function (){
alert(this.pass);
};
//-------------
function VipUser(name, pass, level){
User.call(this, name, pass);
this.level=level;
}
VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function (){
alert(this.level);
};
var v1=new VipUser('blue', '123456', 3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
-----------------------------
新版写法
-------------------------
<script>
/*function User(name, pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function (){
alert(this.name);
};
User.prototype.showPass=function (){
alert(this.pass);
};*/
class User{
constructor(name, pass){
this.name=name;
this.pass=pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
var u1=new User('blue', '123456');
u1.showName();
u1.showPass();
</script>
-------------------
继承
------------
<script>
class User{
constructor(name, pass){
this.name=name;
this.pass=pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
class VipUser extends User{
constructor(name, pass, level){
super(name, pass);
this.level=level;
}
showLevel(){
alert(this.level);
}
}
var v1=new VipUser('blue', '123456', 3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
-------------
面向对象应用
-------------
<script type="text/babel">
class Test extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <span>123</span>;
}
}
window.onload=function (){
let oDiv=document.getElementById('div1');
ReactDOM.render(
<Test></Test>,
oDiv
);
};
</script>
---------------------------------
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
let aItems=[];
for(let i=0;i<this.props.arr.length;i++){
aItems.push(<Item str={this.props.arr[i]}></Item>);
}
return <ul>
{aItems}
</ul>;
}
}
window.onload=function (){
let oDiv=document.getElementById('div1');
ReactDOM.render(
<List arr={['abc', 'erw', 'sdfasdf', 'dfasdfsdfds']}></List>,
oDiv
);
};
</script>
---
<body>
<div id="div1">
</div>
</body>
--------------------------------
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <ul>
{this.props.arr.map(a=><Item str={a}></Item>)}
</ul>;
}
}
window.onload=function (){
let oDiv=document.getElementById('div1');
ReactDOM.render(
<List arr={['abc', 'erw', 'sdfasdf', 'dfasdfsdfds']}></List>,
oDiv
);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
------------------------------
1.JSON对象
JSON.stringify
JSON.parse
-------------------------------
json的标准写法：
1.只能用双引号
2.所有的名字都必须用引号包起来
{a: 12, b: 5} ×
{"a": 12, "b": 5} √
{a: 'abc', b: 5} ×
{"a": "abc", "b": 5}√
-------------------------------
<script>
let json={a: 12, b: 5};
let str='http://it.kaikeba.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
alert(str);
</script>
--------------------------
<script>
let json={a: 12, b: 5};
alert(JSON.stringify(json));
</script
------------------------------
<script>
let str='{"a": 12, "b": 5, "c": "abc"}';
let json=JSON.parse(str);
console.log(json);
</script>
------------------------------
2.简写
名字跟值(key和value)一样的 留一个就行
-----------------
<script>
let a=12;
let b=5;
let json={a, b, c: 55};
console.log(json);
</script>
--------------------
方法 : function一块删
show: function (){...}
show(){...}
-------------------
<script>
let json={
a: 12,
show(){
alert(this.a);
}
};
json.show();
</script>
---------------------
六.Promise
-------------------
异步
------------------
<script src="jquery.js" charset="utf-8"></script>
<script>
Promise.all([
$.ajax({url: '地址', dataType: 'json'}),
$.ajax({url: '地址', dataType: 'json'}),
$.ajax({url: '地址', dataType: 'json'})
]).then(results=>{
let [arr, json, num]=results;
alert('成功了');
console.log(arr, json, num);
}, err=>{
alert('失败了');
});
</script>
七.generator