JavaScript看这个就够了-入门基础篇

于 2021-01-30 20:47:07 发布
阅读量340 收藏
点赞数 2
分类专栏： JavaScript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45812941/article/details/113445732
版权
打印你的第一个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 `'<li>'+el.toString()+'</li>';`
    });
    console.log(items);
    //`[ '<li>1</li>', '<li>-1</li>', '<li>2</li>', '<li>3</li>' ]`
    items=items.join("\n");
    console.log(items);
    /*`
    <li>1</li>
    <li>-1</li>
    <li>2</li>
    <li>3</li>
    `*/
}
缩减数组
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指向对象本身

高万禄
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高万禄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值