JS Chapter 1

Mac 下的Chrome 按什么快捷键调出页面调试工具

开发者工具：option＋command＋i
javascript控制台：option＋command＋j
或者按option＋command＋c也可以打开

字符串

• fromChardCode /charCodeAt
• repeat() 重复xx次字符串
• includes(string s) 有点像indexOf 返回boolean值
• includes(string s, int start) 第二个参数，从第几位开始
• startsWith(string s) 以...开始
• endsWith(string s) 以...结束
• endsWith(string s,int end) 以...结束,第二个参数:从第几位结束, 例如 var str = "abcedfg", str.endsWith(str,2) 会返回为true
• ${} 模板
• 可以用show调用函数可以代替左括号右括号

function show(){
    console.log(1);
}
show``;

let f = 5;
let g=  10;
console.log(`${f + g}`)

• 数组. find：循环出来所有的参数
  第一个参数:循环出来数组的所有内容
  第二个参数:循环出来下表
  第三个参数:循环出来数组本身

[1,2,3,4,5].find(function(x){
            console.log(x);
        });

函数

• 箭头函数

functionName = x => x;
        console.log(functionName(2));

        var functionName2 = function(x ){
            return x;
        }
        console.log(functionName2(2));
        

其中functionName 代表函数名 ，第一个x党代表参数，第二个参数代表返回值

show = () =>{
    console.log(1);
}
show``;

show函数没有传递参数,  可以像上面这么写

[1,2,3].find(function(x){
            console.log(`find1: ${x}`);
        });

        [1,2,3,4].find(x =>{
            console.log(`find2: ${x}`);
        });

        [1,2,3,4].find((x,y,z) =>{
            console.log(`find4: ${x},${y},${z}`);
        });

• 点击事件： ()代表参数，没有参数写空括号，有参数时将参数用()包起来

 document.onclick=function({     
   document.body.style.background='red';
}

document['onclick'] = () =>{            
document.body.style.background='red;
}

• 匿名函数

(function(){
        alert(1);
})()


let x = 10;
((x) =>{
    console.log(x);
})(x)
        

• 延展参数,可以延展任何参数,array,string,number
  如果传了参数，就执行传递的参数，没有传参数时，以默认的x=5为准

function show2(x=5){
            console.log(x);
        }
        show2();
        show2(3);

• 扩展运算符 ... 函数中的参数用 ...x
  代表实参为数组 进来的 x变量，在数组中可以起到合并数组
  输出2，3，4， 因为前面参数y占了一个参数，...表示剩下的都赋值给这个参数

function yanzhan(y, ...x){
    console.log(x);
}
yanzhan(1,2,3,4);

• 申明方式 let /const 变量不允许重复申明，但可以重复赋值,可以防止变量泄漏

for(var i = 0; i <5;i++){

        }
        console.log(i); //i 会泄漏，输出5,相当于var是全局的

for(let j = 0; j <5;j++){

        }
        console.log(j);//Uncaught ReferenceError: j is not defined
    at

• const 常量，不允许重复声明，也不允许重复赋值

     const a = 10;
        a = 20;
        console.log(a); //会报错 Uncaught TypeError: Assignment to constant variable

• repeat

let div = `<div></div>`;
        document.write(div.repeat(5));

• querySelectorAll
  在未学习querySelector之前 是这么拼接的

var c = [];
        var d = document.getElementsByTagName('div');
    for(var i = 0;i < d.length; i++){
            c.push(d[i]);
        }
        console.log(c);

querySelectorAll写法

console.log([...document.querySelectorAll('div')]);

生成器函数

• function* 函数名(){}
• yield 有点类似于return

function* show(){
            yield () =>{
                console.log(1);
            }
            yield function(){
                //alert(2)
                console.log(2);
            }
        }
        //console.log(show())
        var k = show();
        k.next().value();
        k.next().value();

• 对象中的get和set {}可以有个set和get方法，方法名后放名字，如果执行这个名字不赋值的情况下，会走get， 例如下面
  json.Leo = 1会输出1， json.Leo会输出2

  
  var json = {};
      json = {
          set Leo(x){
              console.log(1);
          },
          get Leo(){
              console.log(2);
          }
      }
      json.Leo = 1; //输出1
      json.Leo;     //输出2
      
      
      
      var json2 = {};
      json2 = {
          set Leo(x){
              console.log(1);
          },
          get Leo(){
              return{
                  get LiBai(){
                      console.log(3);
                  }
              }
          }
      }
      console.log(json2.Leo.LiBai);  //输出3