javascript初学

0.js使用方式

引入文件

<script type="module" src="/static/js/index.js"></script>

在script标签内写js代码

<script type="module"></script>

import引入到当前作用域

1.注释

单行//

多行/* */ 

2.+可以拼接字符串

const hhh="abc"+"def";

3.函数

function reusableFunction(){
  console.log("123");
}
reusableFunction(); //123 

let x=function (n){
    return n;
}
console.log(x(3)); //3

带有参数的函数

function functionWithArgs(a,b){
  console.log(a+b);
}
functionWithArgs(1,2);

使用return给函数返回值

function timesFive(x){
  return x*5;
}

箭头函数

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

//只返回一个值可以这样写
const myFunc = () => "value";

//给箭头函数传递参数
const doubler = (item) => item * 2;
doubler(4);
//8

//只有一个参数，可以省略参数外面的括号
const doubler = item => item * 2;

//可以传递多个参数
const multiplier = (item, multi) => item * multi;
multiplier(4, 2);
//8

//给函数传入默认参数
const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John"));  //Hello John
console.log(greeting());  //Hello Anonymous

4.!==和===不会做类型转换

==，!=，>，<，>=，<=会转换 

5.对象

let dog = {
  name:"abc",
  age:3,
};

let dog = {
  name: "abc",
};
console.log(dog.name);

let dog = {
  name: "Spot",
  numLegs: 4,
  sayLegs:function(){
    return "This dog has " + dog.numLegs + " legs.";
  },
};
console.log(dog.sayLegs());

//this可以代替
let dog = {
  name: "Spot",
  numLegs: 4,
  sayLegs: function() {
    return "This dog has " + this.numLegs + " legs.";
  },
};
console.log(dog.sayLegs());

//构造函数，创建对象
function Dog(){
  this.name="abc";
  this.color="red";
  this.numLegs=4;
}

//创建实例
function Dog() {
  this.name = "Rupert";
  this.color = "brown";
  this.numLegs = 4;
}

let hound=new Dog();

//构造函数，接收参数
function Dog(name,color) {
  this.name=name;
  this.color=color;
  this.numLegs=4;
}
let terrier=new Dog("abc","red");

6.switch

function caseInSwitch(val) {
  let answer = "";
  switch(val){
    case 1:
      answer+="alpha";
      break;
    case 2:
      answer+="beta";
      break;
    case 3:
      answer+="gamma";
      break;
    case 4:
      answer+="delta";
      break;
  }
  return answer;
}

console.log(caseInSwitch(1));

 

default最后一个

function switchOfStuff(val) {
  let answer = "";
  switch(val){
    case 'a':
      answer+="apple";
      break;
    case 'b':
      answer+="bird";
      break;
    case 'c':
      answer+="cat";
      break;
    default:
      answer+="stuff";
      break;
  }
  return answer;
}
console.log(switchOfStuff(1));

多个 

function sequentialSizes(val) {
  let answer = "";
  switch(val){
    case 1:
    case 2:
    case 3:
      answer="Low";
      break;
    case 4:
    case 5:
    case 6:
      answer="Mid";
      break;
    case 7:
    case 8:
    case 9:
      answer="High";
      break;
  }
  return answer;
}

console.log(sequentialSizes(1));

7.模板字符串

``中的换行和空格，都会保留

let a = `1 2`;
console.log(a);//1 2

${}中可以放入js表达式

let x = 2;
let a = `1 ${x} 3`;
console.log(a);//1 2 3

8.类

class Test{
    constructor(){
        this.x = 1;
    }
    testx(){
        console.log('testx');
    }
}

class Child extends Test{
    testy(){
        console.log('testy');
    }
}

let child=new Child();
console.log(child.x); //1
child.testy(); //testy

9.call,apply,bind

const obj = {
    name: 'A',
    greeting1:function(){
        console.log(this.name);
    },
    greeting2:function(city,country){
        console.log(this.name+city+country);
    },
};
  
const person = {
    name: 'B'
};

obj.greeting1.call(person);
//B
obj.greeting2.apply(person,['London','UK']); 
//BLondonUK
obj.greeting2.bind(person,'London')('UK');
//BLondonUK

10.promise

const promise = new Promise((resolve, reject) => {
    resolve('hhh');
    //reject(new Error('error'));
});
promise.then((res) => {
    console.log('resolved',res);
    //resolved hhh
}, (err) => {
    console.log('rejected',err);
});

前面then方法的返回值，会作为后面then的参数 

如果返回的是promise，后面的then会等待它的结束

const promise = new Promise((resolve, reject) => {
    resolve('hhh');
    //reject(new Error('error'));
});
promise.then((res) => {
    console.log('resolved',res);
    //resolved hhh
}) 
.catch((err) => {
    //链式调用，前面的then返回的promise对象，异常会往后传递，可以捕获
    console.log('rejected',err);
});

Promise.resolve('hhh')
.then(res => {
    console.log(1,res);
    //1 hhh
})
Promise.reject(new Error('err'))
.catch(err => {
    console.log(2,err);
    //2 Error: err
})

11.generator

function * hhh(){
    console.log('start');
    try {
        const res = yield 'yyy'
        console.log(res);
    } catch (error) {
        console.log(error);
    }
}
const generator = hhh();
const result = generator.next();//start
console.log(result);//{ value: 'yyy', done: false }
generator.next('two');//two
//generator.throw(new Error('e'));//Error: e

12.async/await

function promise1(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve()
            console.log("promise1");
        },1000)
    })
}
function promise2(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve();
            console.log("promise2");
        },2000)
    })
}
function promise3(){
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve();
            console.log("promise3");
        },3000)
    })
}

//await碰到promise会阻塞
//promise.all会同时进行
async function asyncTime(){
    console.time("aysncTime");
    await promise1();
    await promise2();
    await promise3();
    console.log("async执行完毕");
    console.timeEnd("aysncTime");
}    
asyncTime();
// promise1
// promise2
// promise3
// async执行完毕
// aysncTime: 6.011s

// console.time("test");
// Promise.all([promise1(),promise2(),promise3()]).then(()=>{
//     console.log("promise.all执行完毕");
//     console.timeEnd("test");
// }).catch(()=>{
//     console.log("promise.all执行失败");
//     console.timeEnd("test");
// })
// promise1
// promise2
// promise3
// promise.all执行完毕
// test: 3.002s

捕获异常

function promise1(){
    return new Promise((resolve,reject)=>{
        //resolve('ok')
        reject('error')
    })
}

async function test(){
    try{
        let res = await promise1();
        console.log(res);
    }catch(err){
        console.log(err);
    }
};

test();//error