JavaScript看这就够了

打印你的第一个hello world

  • 使用console.log()打印东西到控制台
    console.log("hello world");

变量

在ES6出现之前使用var来定义变量,但var定义变量作用域是全局的,对于编程语言来说这是比较不规范的。

if(1){
     
    var i=0;
}
console.log(i);

对于C++这样的静态语言,则会报错i没有定义,在javascript中则是输出了0,而我们使用let定义变量。

if(1){
     
    let uselet=0;
}
//console.log(uselet);
//Uncaught ReferenceError: uselet is not defined
//则会产生异常

可见我们能使用let 就不要使用 var

定义常量(不过多阐述对有编程基础的学习者)

const num=1000;
//num=999;
//Uncaught TypeError: Assignment to constant variable.
console.log("num:",num);

JavaScript两种类型变量

值类型与引用类型
值类型:String Number Boolean undefined null
引用类型:Object Array Function

if(1){
     
    //String
    let name="gaowanlu";
    //Number
    let m=30;
    //Boolean
    let k=true;
    //undefined
    let u=undefined;
    //null
    let n=null;    
}
编程语言有两种:动态语言 静态语言

JavaScript属于前者,也就是说我们定义了变量,什么时候想改变它的数据类型就可以改变。
在C++中、一旦编码 int variable=1; 我们就无法把variable当float使用 在Javascript中 let i="javascript"; i=10; 这是完全可行的操作

if(1){
     
    let v=1;
    console.log(typeof(v));
    v="string"
    console.log(typeof(v));
}

JavaScript一切皆对象

Object

if(1){
     
    let person={
     
        name:"gaowanlu",
        age:11
    };
    console.log(person.name);
    console.log(person["name"]);
    person.phone="133466377";
    console.log(person);
    console.log(person.phone);
    let key="phone";
    console.log(person[key]);
}

Array

if(1){
     
    let array=['red',1,'guy'];
    console.log(array[0]);
    array[0]="yellow";
    console.log(array);
    //得到数组长度
    console.log(array.length);
}

Function

if(1){
     
    function hello(name){
     
        if(typeof(name)=="string"){
     
            console.log(name+"  hello.");  
            return true;          
        }else{
     
            return false;
        }
    }
    hello("gaowanlu");
}

操作符、运算符(不详细介绍、这是编程很基础的东西)

/*
+ - * / 加减乘除
= 赋值
+= -= *= /= 加减乘除
% 取余
** 指数
++ -- 自加1 自减1
> >= < <= != == === 比较运算符
&& || ! 与 或 非
*/

三元运算符

if(1){
     
    let output=2>1?"2>1":"2<1";
    console.log(output);
}

JavaScript中的类假值

/*
Falsy(false)
undefined
null
0
false
''
NaN
*/

位运算符

if(1){
     
    console.log(1|2);//位或
    console.log(1&2);//位或
}

运算符优先级

(省略)

if语句

/*
因为与大多数编程风格一样(Python除外):省略
if(){
    if(){

    }
}else if(){
    if(){

    }else{

    }
}else{

}
*/

switch case语句

/*
与C/C++相同
switch(){
    case __:_________;break;
    case __:_________;break;
    default:—————————break;
}
*/

JavaScript 循环

for 、 while、 do while、 for in、 for of

if(1){
     
    for(let i=0;i<5;i++){
     
        console.log(i);
    }
    let i=0;
    while(i<5){
     
        i++;
    }
    i=0;
    do{
     
        i++;
    }while(i<5);
}
if(1){
     
    let person={
     
        name:"gaowanlu",
        age:19
    };
    for(let key in person){
     
        console.log(key," : ",person[key]);
    }
    let colors=['red','green','blue'];
    for(let index in colors){
     
        console.log(colors[index]);
    }
    for(let val of colors){
     
        console.log(val);
    }
}

break 与 continue

省略

详细学习Object

if(1){
     
    let person={
     
        name:"gaowanlu",
        phone:"133466377",
        call:function(){
     
            console.log(this.name,this.phone);
            this.class_sum+=1;
        },
        class_sum:0,
    };
    console.log(person);
    person.call();
    console.log(person);
}

工厂函数

function create_obj(){
     
    let person={
     
        name:"gaowanlu",
        phone:"133466377",
        call(){
     //call()是class:function()的缩写
            console.log(this.name,this.phone);
            this.class_sum+=1;
        },
        class_sum:0,
    };
    return person;
}
if(1){
     
    let obj=create_obj();
    console.log(obj);
}

构造函数(函数即对象)

function Circle(radius){
     
    this.radius=radius;
    this.show=function(){
     
        console.log(this.radius);
    }
}
if(1){
     
    let cir=new Circle(10);
    //如果没写new那么Circle内的this指向window,致命行为
    cir.show();
}

对象动态性

if(1){
     
let person={
     
    name:"gaowanlu"
};
person.phone="133";//添加属性
delete person.name;//删除属性或者方法
console.log(person);
}

枚举对象成员

if(1){
     
    let person={
     
        name:"gaowanlu",
        age:19
    };
    for(let key in person){
     
        console.log(person[key]);
    }
    for(let key of Object.keys(person)){
     
        console.log(person[key]);
    }
    for(let entry of Object.entries(person)){
     
        console.log(entry);
    }
    /*
    Object.entries(person)=
    [["name", "gaowanlu"],["age", 19]]
    */
}

克隆对象

if(1){
     
    let person={
     
        name:"gaowanlu",
        age:19
    };
    let another={
     };
    for(let key in person){
     
        another[key]=person[key];
    }
    console.log(another);

    //使用Object.assign()
   another= Object.assign({
     color:"yellow"},person);
   console.log(another);//{color: "yellow", name: "gaowanlu", age: 19}

   //使用{...objname}
   another={
     ...person};
}

垃圾回收

内存自动管理

Math对象

String对象

if(1){
     
    const message="gaowanlu";
  • 常用方法
    //concat()
    let name="gaowanlu";
    console.log(name.concat(" hello ","YES"));
  • 模板语法
    let show=`${
       name}fdfd${
       name}`;
  • .split()将字符串切为数组
    let numbers="1 2 3 4 5 6";
    numbers=numbers.split(' ');
    console.log(numbers);//[1,2,3,4,5,6]
}

Date对象

省略

Array对象

Adding Elements 添加元素
if(1){
     
    const numbers=[3,4,5];
    //const数组我们不能修改,numbers但能修改数组的内部

.push()在后面添加新元素

    numbers.push(6,7,8);
    console.log(numbers);//[3,4,5,6,7,8]

.unshift()在前面添加新元素

    numbers.unshift(1,2);
    console.log(numbers);//[1, 2, 3, 4, 5, 6, 7, 8]

.splice()在中间插入新元素

    numbers.splice(2,0,'a','b');//从下标2开始,删除0个,插入a b
    console.log(numbers);//[1, 2, "a", "b", 3, 4, 5, 6, 7, 8]
    // .splice()第一个参数是插入位置下标,第二个参数删除几个元素,后面为新元素
}
Finding Elements(Primitives)查找元素(值类型)
if(1){
     
    const numbers=[1,2,3,4,5,1,2,3,4,5];

.indexOf(el,start)查找第一个符合要求的元素

    console.log(numbers.indexOf(5));//start为从那个下标开始查找
    /* 4  即第一个符合要求的元素的下标,找不到返回-1 */

.lastIndexOf()查找最后一个符合要求的元素

    console.log(numbers.lastIndexOf(5));
    /* 输出:     9        */

.includes() 检查数组中有没有某个元素返回布尔值

    console.log(numbers.includes(1));
}
Finding Elements(Object)查找元素(对象)
if(1){
     
    const course=[
        {
     id:1,name:'a'},
        {
     id:2,name:'b'}
    ];

.find() 方法 返回第一个匹配的对象

    var found=course.find(function(el){
     
        return el.id==1&&el.name=='a';
    });
    console.log(found);
    //{id: 1, name: "a"}

.findIndex() 方法 返回第一个匹配的对象的下标

    found=course.findIndex(function(el){
     
        return el.id==1;
    });
    console.log(found);//输出:0
}
箭头函数
if(1){
     
    const courses=[
        {
     id:1,name:'a'},
        {
     id:2,name:'b'}
    ];
    const course=courses.find((el)=>{
     
        return el.name==='a';
    });
    /*
    (参数列表)=>{函数体},当只有一个参数是可以写为
    参数列表=>{函数体}
    */
    console.log(course);
}
Removing Elements(删除元素)
if(1){
     
    const array=[1,2,3,4,5,6,7,8,9];

.splice(index,count)

    array.splice(2,3);//从下标2开始删除后面3个元素
    console.log(array);//[1,2,6,7,8,9]

}

Emptying an Array(清空数组)
if(1){
     
    let numbers=[1,2,3,4];
    console.log(numbers);

=[] 赋值清空

    numbers=[];

.length=0 清空

    numbers=[1,2,3];
    numbers.length=0;
    console.log(numbers);

.splice(0,numbers.length) 清空

    numbers=[1,2,3];
    numbers.splice(0,numbers.length);

.pop()清空

    numbers=[1,2,3,4];
    while(numbers.length>0){
     
        numbers.pop();
    }
}
Combining Arrays(组合和切割数组)
if(1){
     

.concat() 数组合并

    let array_1=[1,2,3];
    let array_2=[4,5,6];
    let array_concat=array_1.concat(array_2);
    console.log(array_concat);
    //[ 1, 2, 3, 4, 5, 6 ]

.slice(start_index,end_index_after)切割数组

    array_1=[1,2,3,4,5,6,7,8,9];
    array_1=array_1.slice(2,4);
    console.log(array_1);

[...__,...__] 拼接数组

    array_1=[1,2,3];
    array_2=[4,5,6];
    console.log([...array_1,"a",...array_2]);
    //[ 1, 2, 3, 'a', 4, 5, 6]
}
遍历数组
if(1){
     
    let array=[1,2,3,4,5,6,7,8,9];

传统for循环

    for(let i=0;i<array.length;i++){
     
        array[i]=2*array[i];
    }

.forEach(function)

    array.forEach(function(el){
     
        console.log(el);
    });

}
Joining Arrays(连接数组元素)
if(1){
     
    let numbers=[1,2,3];
    let string=numbers.join(",");
    console.log(string);//1,2,3
}
Sorting Arrays(数组排序)
if(1){
     
    let numbers=[1,2,5,3,2,7,8];

.sort() 方法

    numbers.sort();
    /*
    [
        1, 2, 2, 3,
        5, 7, 8
    ]*/
    console.log(numbers);

.reverse()方法 反转数组元素序列

    numbers.reverse();
    console.log(numbers);
    /*[8, 7, 5, 3, 2, 2, 1]*/

数组根据对象属性排序

    let courses=[
        {
     id:1,name:'gaowanlu'},
        {
     id:2,name:'ming'}
    ];
    courses.sort(function(obj_a,obj_b){
     
        if(obj_a.id<obj_b.id) return 1;
        if(obj_a.id>obj_b.id) return -1;
        return 0;
    });
    console.log(courses);
    //[ { id: 2, name: 'ming' }, { id: 1, name: 'gaowanlu' } ]
}
检测数组中的元素
if(1){
     
    let numbers=[1,2,3];

.every()

    let result=numbers.every(function(el){
     //全部都是数组返回true
        return typeof(el)=="number";
    });
    console.log(result);//true
    numbers=[1,"ds"];

.some()

    result=numbers.some(function(el){
     
        return typeof(el)=="string";
    });
    console.log(result);//true
}
过滤数组元素
if(1){
     

.filter(function)

    let numbers=[1,-1,2,3];
    numbers=numbers.filter(function(el){
     
        return el>=0;
    });
    console.log(numbers);//[ 1, 2, 3 ]
}
数组映射
if(1){
     
    let numbers=[1,-1,2,3];

.map()

    let items=numbers.map(function(el){
     
        return `'
  • '+el.toString()+'
  • ';`
    }); console.log(items); //`[ '
  • 1
  • ', '
  • -1
  • ', '
  • 2
  • ', '
  • 3
  • ' ]`
    items=items.join("\n"); console.log(items); /*`
  • 1
  • -1
  • 2
  • 3
  • `*/
    }
    缩减数组
    if(1){
         
    

    .reduce() 方法

        let numbers=[1,2,3,4,5,6];
        let sum=numbers.reduce(function(sum,cur){
         
            return sum+cur;
        });
        console.log(sum);
        //21
    }
    
    

    函数表达式与函数声明

    if(1){
         
        function SuperCar(){
         
            console.log("Tesla");
        }
        let tesla=function(){
         
            console.log("Tesla");
        }
    }
    

    深入函数参数

    if(1){
    使用arguments

        let sum=function(a,b){
         
            let sum=0;
            for(let i of arguments){
         
                sum+=i;
            }
            return sum;
        }
        console.log(sum(1,2,3,4,5));
        //输出:15
    

    余下操作符

        sum=function(none,...args){
         
            return args.reduce(function(sum,cur){
         
                return sum+cur;
            });
        }
        console.log(sum(99,11,1,1));
        //输出: 13
    

    参数默认值

        sum=function(a=1,b=1){
         
            return a+b;
        }
        console.log(sum());//输出: 2
    

    }

    getters and setters 取存器

    if(1){
         
        let obj={
         
            count:0,
            data:"",
            get num(){
         
                return num;
            },
            set num(el){
         
                this.data=el;
                this.count+=1;
            }
        }
        obj.num=1;
        obj.num=2;
        console.log(obj.count);//输出 2
    }
    

    异常

    if(1){
         
        try{
         
            throw new Error("new Error");
        }catch(err){
         
            
        }finally{
         
    
        }
    }
    

    this

    this指向对象本身

    你可能感兴趣的:(JavaScript,javascript,js)