JavaScript基础看这一篇就够了

标签：function console 一篇 JavaScript 就够 var false true log

JavaScript是什么？

JavaScript是世界上最流行的客户端脚本语言，主要用于为网页添加交互，跟html，css并称为前端三大语言。

JavaScript能做什么？

客户端数据验证
客户端数据计算
客户端动画效果
客户端与服务器之间进行数据传输
开发移动端APP
开发服务器应用

JavaScript语句

JavaScript使用“;”表示一条语句的结束
字符串必须用引号包裹，单引号、双引号都可，但必须成对出现
严格区分大小写

注释

//我是单行注释，快捷键一般为 ctrl+/

/*
我是单行注释
快捷键一般为 ctrl+shift+/
视编辑器与编辑器设置不同
*/

如果是以三个括号与三个引号（单引号，双引号，反引号）开头的，在前面加分号；
单引号双引号所代表的都是字符串

var a=1
var b='asdafafas'
var c=a+b

代码输出为1asdafafas，隐式的字符转换，将数字1转变为字符串‘1’
当+任意一侧是字符串，则不为加号，+为拼接符

typeof（）是用来判断数据类型的

JavaScript输出

JavaScript 的三种输出方式

向网页中输出：document.write();
弹出提示框：alert();
在控制台输出：console.log();

变量的赋值

变量声明后第一次赋值，叫做“变量的初始化”
未经初始化的变量，取值为undefined（空）
变量的值是可以修改的
修改变量的值，只需重新为变量赋新的值即可（相当于替换变量中的原有值，不必重新声明）

隐式转换

隐式转换，是数据在计算过程中，自动完成的转换。
以算数计算为例：
数字+字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false
布尔值 + 布尔值：布尔值转换为数值1或0

显式转换

转为string类型：

String(x)，将任意内容转为字符串
x.toString()，将任意内容，转为字符串，除null和undefined之外

转为boolean类型：

Boolean(x)，将任意类型的值转换为boolean类型 true/false
规律：只有5个值会被转为false：
0 “” null undefined NaN
其余的值，都会转为true

转为number类型：

①Number(x)，可将纯数字组成的字符串或boolean值，转换为number
② parseInt(str)，数字开头的，将string类型的数据转化为number，去掉小数部分，下取整
③parseFloat(str)，将string类型的数据转化为number，保留小数部分。
parseInt()和parseFloat()要求数字字符开头，可去掉数字后面的非数字字符
如果转换不了数字，则结果为NaN，NaN参与任何算数计算，结果依然是NaN

数据类型

数据类型，是数据在内存中的存储结构
不同类型的数据，具有不同的特性，可执行不同的操作
JavaScript中的数据类型，大的分类上有两种，分别为原始类型和引用类型。

原始类型

number

数字类型，专门保存所有数字的数据类型
既可以表示整数，也可以表示浮点数，一个数字占8个字节
数值的大小和存储空间无关
常用方法：
number.toString(2/8/10/16…); //以某种进制转换数字
number.toFixed(2…) //四舍五入到小数点后几位

string

字符串类型，专门保存一系列文本字符的数据类型
以引号包裹，单引号或双引号均可
一个数字字符或英文字符占1个字节
一个汉字占两个字节
所有字符串中的文字都采用Unicode编码
特殊字符需要转义：\” \’ 引号、 \n 换行、 \t Tab（制表符）

boolean

布尔类型，表示真或者假
仅有两个值：true/false
运算中，true=1,false=0
undefined
表示“不存在该数据”
变量声明后从未赋值，或者对象的属性不存在

null

表示“没有数据”
可以主动的把某变量设置为 null
其中null和undefined两种数据类型有点类似，要仔细分辨其中的区别

算术运算

算术运算符包括：+ - * / % ++ - -
+（加）：+ 可以表示加法运算，也用于连接字符串
-（减）：- 可以表示减法运算，也可以表示负号
*（乘）：表示乘法运算
/（除）：表示除法运算
%（取余/求模）：取余数部分，例如：5%2 结果为1

++（递增）：当前变量+1，例如：
n++，等同于n=n+1;
-（递减）:当前变量-1，例如
n- -，等同于n=n-1

赋值运算

赋值运算符包括：= += -= *= /= %=
=：用于为变量赋值，变量名 = 变量值
+=：n+=3 相当于：n=n+3
-=：n-=3 相当于：n=n-3
=：n=3 相当于：n=n*3
/=：n/=3 相当于：n=n/3
%=：n%=3 相当于：n=n%3

关系运算

关系运算用于比较数据之间的大小关系
关系运算符有：> < >= <= == != === !==
关系表达式的返回值为boolean类型：true/false
关系运算中，如果参与比较的值不是number类型，程序会进行隐式转换
默认一切都转为数字，再比较
特殊情况：
如果两个字符串比较，不再转数字，而是依次比较每个字符的unicode编号大小
要比较null 和 undefined ，必须使用 === ，全等于
isNaN()，用来判断一个值是不是非数字

逻辑运算

逻辑运算是将多个表达式的结果综合得出最终结论
逻辑运算符有：&& (与/并且) || (或/或者) ! (非/不)

表达式1 && 表达式2
两个表达式都为true时，才返回true
只要有一个表达式为false，就返回false
表达式1 || 表达式2
只要一个表达式为true，则返回true
所有表达式都为false，才返回false
! 表达式
颠倒任意判断结果

短路逻辑
如果前一个条件已经可以得出最终结论，则后续条件不再执行
&& 如果前一个条件为true，则后续条件继续执行
如果前一个条件为false，则后续条件不再执行，直接返回false
|| 如果前一个条件为true，则后续条件不再执行，直接返回true
如果前一个条件为false，则后续条件继续执行

条件运算

条件运算，也叫做三目运算、三元运算
条件运算可以实现简单的分支
条件运算符：? :
条件?表达式1:表达式2
若条件为true，则执行表达式1
若条件为false，则执行表达式2

//具名函数声明方法1
        function add(x, y) {
        return x + y
    }

    //参数是入参，是入口，return是返回值，是出口
        console.log(add(1, 1), add(2, 2))

    //具名函数声明方法2
        var fun = function () {

        }
        //fun()

        //匿名函数的自调用方法1
    ;(function () {
        alert(111)
    })()

    //匿名函数的自调用方法2
    !function () {
        alert(2222)
    }()

作用域

var a=1
    function fun() {
        var a=2
    }
    fun()
    console.log(a)
    //JavaScript作用域分为局部和全局两种，局部作用域是函数里面的，局部作用域可以获得外部作用域的变量，外部作用域不能获得局部作用域的变量

for循环

const ARR=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

    for (var i=0;i<ARR.length;i++){
        console.log(ARR[i])
    }

    for (var i=ARR.length-1;i>=0;i--){
        console.log(ARR[i])
    }
    //如果对顺序没有要求，则建议使用倒序

    for(i in ARR){
        console.log(ARR[i])
    }
    //i是索引，index

    for (item of ARR){
        console.log(item)
    }
    //item就是数组里的每个元素

获取bom

<ul id="ul1">
    <li id="li1">001</li>
    <li>002</li>
    <li>003</li>
    <li class="colorBlue">004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li class="colorBlue">008</li>
    <li>009</li>
    <li>010</li>

 var li1=document.getElementById('li1')
    console.log(li1)
    li1.style.color='red'

    var colorBlue =document.getElementsByClassName('colorBlue')
    console.log(colorBlue[0])
    for (item of colorBlue){
        item.style.color='blue'
    }

    var tag=document.getElementsByTagName('li')
    // console.log(tag[0])
    for (item of tag){
        item.style.background='green'
    }

数组长度

    var arr=new Array(5,6,7,8,9)
    // arr[10]='a'
    console.log(arr[arr.length-1])

设置长度length意义不大，可以随时被改
括号里面有一个数字，该数字代表的是数组的长度
括号里面有两个及以上的数字，则都为数组的元素

    var arr=['a','b','c','d','e','f','g','h']
    console.log(arr.join('1'))
    console.log(arr)

    console.log(arr.concat([1,2,3]))//数组的拼接
    console.log(arr)

    var brr=[]
    for (var i=0;i<arr.length;i++){
        brr[i]=arr[i]
    }
    var brr=arr.slice()//如果slice括号里不指定开始结束位置，则复制原数组
    arr[0]=1
    console.log(arr)
    console.log(brr)

    //前面添加用unshift,前面删除用shift,后面添加用push,后面删除用pop
    arr.unshift(1)
    console.log(arr)

    arr.shift()
    console.log(arr)

    arr.push(2)
    console.log(arr)

    arr.pop()
    console.log(arr)

    arr.splice(3,0,1,2,3,4)//从哪里开始，删除几个，后面的都是新加的内容
    console.log(arr)

正则

正则表达式对象：RegExp
封装一条正则表达式，并使用正则表达式提供的API执行验证和查找
正则表达式对象的创建：
使用直接量：var reg=/正则/ig;
使用new：var reg=new RegExp(“正则”,”ig”);

    var reg=/^1[3578]\d{9}$/
    var a=reg.test('13312341234a')
    console.log(a)

Math对象

Math对象无须创建，直接Math对象名调用其属性和方法即可。比如：

Math.PI
Math.random()

Data对象

创建一个日期对象，并初始化为当前系统时间

new Date();
getMonth()     //获取月
getSeconds()    //获取秒

setInterval对象

setInterval() 方法会不停地调用函数，直到窗口被关闭。

setInterval(code,millisec)

后面就两个参数：code是你的js代码，millisec为时间间隔，以毫秒计
1000毫秒=1秒

鼠标事件

<script>
    var div1= document.getElementById('div1')
    div1.onclick=function () {
    console.log('我被点击了')
    }
    div1.onmousedown=function () {
        console.log('鼠标按下')
    }
    div1.onmouseup=function () {
        console.log('鼠标抬起')
    }
    div1.onmousemove=function () {
        console.log('鼠标移动')
    }
    div1.onmouseenter=function () {
        console.log('鼠标进入')
    }
    div1.onmouseleave=function () {
        console.log('鼠标离开')
    }
    div1.onmouseout=function () {
        console.log('鼠标离开')
    }
    div1.onmouseover=function () {
        console.log('鼠标在上')
    }
    div1.onmousewheel=function () {
        console.log('鼠标滚轮')
    }

    document.onkeydown=function (event) {
        console.log(event)
        if (event.keyCode==37){
            //坦克往左走
        }else if (event.keyCode==38){
            //坦克往上走
        }
    }
    //onkeypress跟onkeydown类似，但是少了部分功能键
</script>

标签：function,console,一篇,JavaScript,就够,var,false,true,log
From： https://www.cnblogs.com/-ZhouYi--/p/16770905.html

JavaScript基础看这一篇就够了

JavaScript是什么？

JavaScript能做什么？

JavaScript语句

注释

typeof（）是用来判断数据类型的

JavaScript输出

变量的赋值

隐式转换

显式转换

转为string类型：

转为boolean类型：

转为number类型：

数据类型

原始类型

number

string

boolean

null

算术运算

赋值运算

关系运算

逻辑运算

条件运算

作用域

for循环

获取bom

数组长度

正则

Math对象

Data对象

setInterval对象

鼠标事件

相关文章

赞助商

阅读排行

JavaScript基础 看这一篇就够了

JavaScript是什么？

JavaScript能做什么？

JavaScript语句

注释

typeof（）是用来判断数据类型的

JavaScript输出

变量的赋值

隐式转换

显式转换

转为string类型：

转为boolean类型：

转为number类型：

数据类型

原始类型

number

string

boolean

null

算术运算

赋值运算

关系运算

逻辑运算

条件运算

作用域

for循环

获取bom

数组长度

正则

Math对象

Data对象

setInterval对象

鼠标事件

相关文章

赞助商

阅读排行

JavaScript基础看这一篇就够了