day46homework常量字符串拼接結構賦值擴展運算符for-of循環map函數默認值
阿新 • • 發佈：2017-08-31
html javascript css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01定義常量.html</title>
<!--常量-->
<script>
//常量：1.一旦定義 不能更改
const PI = 3.14;
// console.log(PI);
// PI = 3.1415; error
// error: 2.必須賦初始值
// const PI1;
// PI1 = 3.1415926;
// console.log(PI1);
</script>
<!--字符串拼接-->
<script>
// 用 + 拼接
var name = "zhang";
var msg = "hello " + name;
console.log(msg);
var name1 = "zhang";
var msg1 = `hello ${name1}`; //${name}
console.log(msg1);
</script>
<!--結構賦值-->
<script>
/*
var a = 1;
var b = 2;
var c = 3;
console.log(a,b,c);
*/
//數組賦值
var [a,b,c] = [11,22,33];
console.log(a,b,c);
var [a,[b,c],d] = [1,[2,3],4];
console.log(a,b,c,d);
//json 賦值
var {a,b,c} = {a:1,c:2,b:3};
console.log(a,b,c);
//結構賦值 等號兩邊的結構要相同
var [a,{b,c},d] = [1,{c:3,b:2},4];
console.log(a,b,c,d);
/*
var {a = 10, b = 20};
console.log(a,b); //error
*/
var {a = 100,b = 200} = {};
console.log(a,b); // 輸出結果 100 200
var {a = 100,b = 200} = {a:111,b:222};
console.log(a,b); // 輸出結果 111 222
</script>
<!--擴展運算符-->
<script>
var arr1 = [1,2,3,4,5];
1 數組賦值（error）
var arr2 = arr1; //將arr1的地址賦給了arr2 操作arr2影響arr1
arr2.pop();
1
var arr2 = [];
for(var i = 0; i < arr1.length; i++){
arr2.push(arr1[i]);
}
// 2.
var arr2 = [...arr1];
arr2.pop();
console.log(arr1);
console.log(arr2);
function show(x,y){
console.log(arguments); //arguments不是數組 不能用數組的方法
// arguments.pop();
}
// show(1,2);
//2. 函數定義時使用擴展運算符，把參數保存在一個數組裏面
function show1(...mgs){
// console.log(mgs);
mgs.push(33); //mgs是數組
console.log(mgs);
console.log(mgs[0],mgs[1],mgs[2]);
}
// show1(11,22);
//3. 調用時，通過擴展運算符將數組裏的值變成參數列表
var argu = [11,22];
show(...argu);
</script>
<!--for of 循環-->
<script>
var arr1 = [11,22,33,44,55];
for(i in arr1){
// console.log(i); // 0 1 2 3 4 i是數組的下標
// console.log(arr1[i]); // 11 22 33 44 55 數組的值
}
for(i of arr1){
// console.log(i); //i是數組的值
}
for(i of arr1.keys()){
// console.log(i) //i是數組的下標
}
var json = {a:44,b:55,c:66};
for(i in json){
// console.log(i); //a b c
// console.log(json[i]); //輸出json的值
}
//for of 不能遍歷json的值
for(i of json){
// console.log(i); error
}
</script>
<!--map-->
<script>
//map 是一種數據集合，以key/value的形式存儲和訪問
var map = new Map();
//添加
map.set(‘a‘,11);
map.set(‘b‘,22);
map.set(‘c‘,"33");
map.set(‘d‘,"dddd");
map.set(‘e‘,‘\\‘);
console.log(map);
// 查看
// console.log(map.get(‘a‘));
// console.log(map.get(‘b‘));
// console.log(map.get(‘c‘));
//刪除
// map.delete(‘b‘);
// console.log(map);
for(i of map){ //默認 map實體
// console.log(i);
}
for(i of map.entries()){
// console.log(i); //map 實體
}
for(i of map.values()){
// console.log(i); //map 的值
}
for(i of map.keys()){
// console.log(i); //map 的鍵 a b c d e
}
for([a,b] of map){ //第一個參數是鍵 第二個參數是值
console.log(a+":"+b);
}
for([key,value] of map){ //獲取map的鍵和值
console.log(key + ":" + value);
}
</script>
<!--函數默認值-->
<script>
function show(x,y){
if(!x){
x = "hello";
}
if(!y){
y = "world";
}
console.log(x,y);
}
// show();
//1.在定義函數時，將默認參數寫在參數列表中
function show1(x,y="bbb"){
console.log(x,y);
}
// show1(‘a‘); //把參數賦給x
// show1(‘a‘,‘c‘); // 把a賦給x 把c賦給y
//2.如果默認參數的賦值有變量的話，值是可以動態改變的
var z = 100;
function show2(a = z + 1){
console.log(a);
}
// show2(); //101
//3.結構賦值
function show3({a = 1,b = 2}={}){
console.log(a,b);
}
// show3();
// show3({a:11,b:22});
function show4({a,b} = {}){
console.log(a,b);
}
// show4({a:111,b:222}); 111 222
// show4({a:111,b:222});
function show5({a,b}){
console.log(a,b);
}
// show5({a:100,b:100});
function show6(url,{body = "",method = "get"}){
console.log(method);
}
// show6("http://www.liyuit.com"); //error
// show6("http://www.liyuit.com",{}); //get
function show7(url,{body = "",method = "get"}={}){
console.log(method);
}
show7("http://www.liyuit.com");
</script>
<!--函數-rest參數-->
<script>
//用擴展運算符後的參數來接受多余的參數
function show(x,...args){
console.log(x,args);
}
show(1,2,3,4,5,6); //把1給了參數 x 把 2,3,4,5,6給了args數組
</script>
</head>
<body>
</body>
</html>
<!--封閉空間-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09封閉空間.html</title>
<script>
//封閉空間，就是把匿名函數用括號擴氣來，形成自己的作用域
/*
(function(){
console.log("aaa");
})();
//相當於自己調用自己
//匿名函數立即執行並傳參
(function(msg){
console.log(msg);
}("bbbb"));
*/
window.onload = function(){
var aBtn = document.getElementsByTagName(‘input‘);
console.log(aBtn);
/*
點擊按鈕是 輸出當前元素的下標
第一種 用this
for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
console.log(this.index);
}
}
*/
/*
第二種
for(let i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
console.log(i);
}
}
*/
//第三種
for(var i = 0; i < aBtn.length; i++){
(function(index){
aBtn[index].onclick = function(){
console.log(index);
}
}(i))
}
}
</script>
</head>
<body>
<input type="button" value="按鈕1">
<input type="button" value="按鈕2">
<input type="button" value="按鈕3">
</body>
</html>本文出自 “11183863” 博客，請務必保留此出處http://11193863.blog.51cto.com/11183863/1961508
day46homework常量字符串拼接結構賦值擴展運算符for-of循環map函數默認值