对象结构
<script>
const Tom = {
name:'Tome Jones',
age:25,
family:{
mother:'Norah Jones',
father:'Richard Jones',
brother:'Howard Jones'
},
}
const {name, age}=Tom;
console.log(name);
console.log(age);
</script>
- 对象结构的嵌套
<script>
const Tom = {
name:'Tome Jones',
age:25,
family:{
mother:'Norah Jones',
father:'Richard Jones',
brother:'Howard Jones'
},
}
//const {mother,father,brother}=Tom.family;
//console.log(mother);
//console.log(father);
//console.log(brother);
//对象结构重命名：
// const {mother:m,father:f,brother:b}=Tom.family;
// console.log(m);
// console.log(f);
// console.log(b);
//在添加一个没有的对象。
const {mother:m,father:f,brother:b,sister='good sister'}=Tom.family;
console.log(sister);
</script>
<body>
<div class="container"></div>
<script>
function appendChildDiv(options = {}) {
const {parent = 'body',width = '100px',height = '80px',
backgroundColor = 'pink'} = options;
const div = document.createElement('div');
div.style.width = width;
div.style.height=height;
div.style.backgroundColor = backgroundColor;
document.querySelector(parent).appendChild(div);
}
//回滚，回到默认值。
appendChildDiv({
parent:'.container',
width:'200px',
height:'150px',
backgroundColor:'yellow'
})
</script>
</body>
获取数组
<body>
<script>
const numbers = ['one','two','three','four'];
//如果要获取第一个和第三个的值，中间的第二个的位置，要留出来。
const [one, ,three]=numbers;
console.log(one,three);
//用...others可以获取数组后面的值。
const [one, ...others]=numbers;
console.log(one,others);
</script>
</body>
For of Loop
<script>
const fruits = ['Apple','Banana','Orange','Mango'];
fruits.describe = 'My favorite truits';
//for循环
for(let i=0; i<fruits.length; i++){
console.log(fruits[i]);
}
//forEach循环，不能在中间终止循环。
fruits.forEach(friut =>{
console.log(friut);
})
//for in获取属性值，获取到的是所有可枚举属性。
for(let index in fruits ){
console.log(fruits[index]);
}
//for of是为了去掉上面方法中带有的一些小缺陷，其次代码简单。
for(let fruit of fruits){
console.log(fruit);
}
</script>
<script>
const fruits = ['Apple','Banana','Orange','Mango'];
for(let fruit of fruits.entries()){
console.log(fruit);
}
</script>
…的使用
<script>
function sum(...numbers) {
return numbers.reduce((prev,curr)=>prev + curr,0)
}
console.log(sum(1,2,3,4));
console.log(sum(1,2,3));
</script>
<script>
function converCurrency(rate,...amounts) {
return amounts.map(amount =>amount * rate);
}
const amounts = converCurrency(0.89,12,34,656,23);
console.log(amounts);
</script>
<script>
const player = ['Jelly',123,5.4,6.7,3.4,7.8,8.9];
const [name,id,...scores] = player;
console.log(name,id,scores);
</script>
…扩展运算符
<script>
const player = ['Jelly',123,5.4,6.7,3.4,7.8,8.9];
const [name,id,...scores] = player;
console.log(name,id,scores);
</script>
<script>
const youngers = ['George','John','Thomas'];
const olders = ['James','Adrew','Martin'];
const members = [...youngers,...olders];
const curr = [...members];
console.log(curr);
// console.log(members);
</script>
promise实例
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js">
</script>
<script>
let username;
const usersPromise =axios.get('https://api.github.com/users');
usersPromise
.then(reponse =>{
username = reponse.data[0].login;
return axios.get(`https://api.github.com/users/${username}/repos`);
})
.then(reponse =>{
console.log(reponse.data);
})
</script>
</body>