js基础

目录：

 

1、js介绍
    * js是一款运行在客户端的网页编程语言。最初的目的是为了处理表单的验证操作。
        - 弱类型语言
        - 脚本语言
        - 解释型语言
        - 动态类型的语言
        - 基于对象的语言
    * 组成
        - ECMAscript：js标准
        - DOM(Document Object Model)：文档对象模型，通过js操作网页元素   
        - BOM(Bowser Object Model)：浏览器对象模型，通过api操作浏览器
    * 特点：
        - 简单易用
        - 解释执行，无需编译
        - 基于对象
    * js的应用场景
        - 网页特效
        - 服务端开发（nodejs）
        - 命令行工具（nodejs）
        - 桌面程序（Electron）
        - app（Cordova）
        - 控制硬件-物联网（Ruff）
        - 游戏开发（coco2d-js）

 

2、js的书写位置
    * 内嵌式
        <script type="text/javascript">
            alert("Hello~");
        </script>
        
    * 外链式
        <script src="" type="text/javascript"></script>
        
    * html标签内嵌
        <input type='button' value='alert(hello~)' onclick='' />

 

3、js代码的注意事项和注释
    1）在一对script标签中有错误的js代码，该错误代码后面代码不执行
    2）一对script标签中有错误js代码，不会影响其他scrip标签js代码的执行
    3）script标签可以写成<script type='text/javascript'>，这是标准写法
       <script language='javascript'>或<script type='text/javascript' language='javascript'>也可以
        
    * js注释
        单行注释   //
        多行注释  /*  */

 

4、输出消息的几种方式
    * Javascript执行过程中的原理
        - html页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。
          无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来
          等待脚本的执行完成才能继续，这在页面的生命周期中是必须的。
 
    * alert():在页面弹出一个对话框，早期JS调试使用。
    
    * confirm():在页面弹出一个对话框(有确定|取消的标签), 常配合if判断使用。
    
    * console.log():将信息输入到控制台，用于js调试
    
    * prompt():弹出对话框，用于接收用户输入的信息。
        var ssd = prompt("请输入摄氏度");
        alert("温度为："+ssd);
        
    * document.write():在页面输出消息或标签

 

5、变量
    * var num = 10; // 声明变量并初始化
    * 变量的命名规范
        - 不能以数字或者纯数字开头来定义变量名。
        - 不推荐使用中文来定义变量名。
        - 不能使用特殊符号或者特殊符号开头(下划线_除外);
        - 不推荐使用关键字和保留字来定义变量名。
    * 在JS中严格区分大小写的！！！

 

6、数据类型和typeof
    6种数据类型：number,string,boolean,undefined,null,object
    * 数字类型number
        var num1 = 2;//正数
        var num2 = -2.1;//负数，小数
        alert(typeof(num1));//number
        alert(typeof num2);//number
        
        十进制表示var num1 = 2;
        十六进制0x开头，0-9 a(A)-f(F)表示  var num3 = 0xffff;
        八进制 0开头，0-7组成
        
        Number.MIN_VALUE // 数字的最小值
        Number.MAX_VALUE // 数字的最大值
        
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(1/0); // Infinity
    
    * 字符串类型string
        字符串:由单引号或双引号扩起来 var str = 'abc';
        console.log('10' + 5); // 15
        console.log(typeof('10' + 5)); // string
        console.log('10' - 5); // 5
        console.log(typeof('10' - 5)); // number
        转义字符
            \"   双引
            \'   单引
            \n   换行
            \r   回车  
    
    * 布尔类型boolean
        实际运算中true=1,false=0
        var flag = true;
        alert(flag + 1);//2
        
        var flag = false;
        alert(flag + 1);//1
        
        var a = 1;
        var b = 2;
        var c = a > b;
        alert(c);//false
    
    * undefined  变量未初始化
        定义了变量，没有给变量赋值，变量在内存中是存在的
        函数没有明确返回值，如果接收了，结果也是undefined
        var num;
        console.log(num + 10); // NaN
        console.log(isNaN(num + 10)) // true
        
    * null 变量未引用，值为空，在内存中没有该变量
        var nul = null
        console.log(typeof nul) // object

7、类型转换
    * string==>number
    - var num1 = Number("123");
        ** 数字类型的字符串，转换之后得到的数字。
        ** 非数字字符串，转换之后得到是NaN。
        ** 小数类型的字符串，转换之后得到的是原数字。
    - var num2 = parseInt("123");
        ** 整数数字类型的字符串，转换之后得到的整数数字。
        ** 数字开头的字符串，转换之后得到的是前边的数字。
        ** 非数字开头的字符串，转换之后得到的是NaN。
        ** 小数类型的字符串，转换之后【取整】，去除小数
    - parseFloat
        ** 整数数字类型的字符串，转换之后得到的整数数字。
        ** 数字开头的字符串，转换之后得到的是前边的数字。
        ** 非数字开头的字符串，转换之后得到的是NaN。
        ** 小数类型的字符串，转换之后得到的是原数字。

// 其他类型转数字类型
// 1. parseInt() 转整数
console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10
console.log(parseInt('a10')) // NaN
console.log(parseInt('10.23')) // 10
console.log(parseInt('10.23a')) // 10
// 2. parseFloat() 转小数
console.log(parseFloat('10')) // 10
console.log(parseFloat('10a')) // 10
console.log(parseFloat('a10')) // NaN
console.log(parseFloat('10.23')) // 10.23
console.log(parseFloat('10.23a')) // 10.23
// 3. Number() 参数是一个数字才能转成功
console.log(Number('10')) // 10
console.log(Number('10a')) // NaN
console.log(Number('a10')) // NaN
console.log(Number('10.23')) // 10.23
console.log(Number('10.23a')) // NaN


// 其他类型转字符串
// 1. toString()
var num = 10;
console.log(typeof num.toString()) // string
//console.log(typeof num1.toString()) // 报错 num1 is not defined
// 2. String()
console.log(typeof String(10)) // string


// 其他类型转boolean类型
console.log(Boolean(1)) // true
console.log(Boolean(0)) // false
console.log(Boolean('')) // false
console.log(Boolean({})) // true
console.log(Boolean([])) // true
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false

　　

　　隐式数据类型转换：在运算过程中，程序自己进行的数据转换(程序员没有操作)，例如:

var n1=12;
var n2="2";
alert(n1-n2);//10

 

8、运算符

8.1、赋值运算符：=

　　带操作的赋值运算 +=  -=  *=  /=

 

8.2、算数运算符：+ - * / %
　　带操作的赋值运算 +=  -=  *=  /=

　　js里面不区分整数和小数 123/1000*1000=123

var a;
a += 1; // a = a + 1;　　

alert("456"+1); //结果是4561
alert("456"-1);//结果是455
alert("abc"-1);//结果是NaN

alert(flag+1); //flag为true（值为1），结果是2
alert(flag+1); //flag为false（值为0），结果是1

 

8.3、比较运算符
　　<  >   <=  >=   ==  != === !==
　　==和===的区别：==比较值内容；===比较值和类型

 

8.4、逻辑运算符
　　与&&  或||  非!

 

8.5、运算符++  --

var num = 10;
console.log(num++); // 10
console.log(num); // 11

var num1 = 10;
console.log(++num1); // 11

 

9、流程控制

　　条件判断: if、else if、else

// 条件判断：if
var num = 10;
if (num > 5) {
    console.log('num 大于 5');
}

var num1 = 10
if (num1 > 5)
    console.log('num1 大于 5');

// 条件判断：if、else
var num2 = 2;
if (num2 > 5) {
    console.log('num2 大于 5');
} else {
    console.log('num2 不大于 5');
}

var num3 = 2;
if (num3 > 5)
    console.log('num3 大于 5');
else
    console.log('num3 不大于 5');

// 条件判断if、else if、else
var num4 = 10;
if (num4 > 10) {
    console.log('num4 大于10')
} else if (num4 < 0) {
    console.log('num4 小于0')
} else {
    console.log('num4 在0到10之间')
}

　　三元表达式：  表达式 ? 结果1：结果2；
　　　　如果表达式结果为true，执行结果1，如果表达式结果为false，执行结果2。可以理解为if else的另外一种写法。

 

　　switch...case

var num = 2
switch (num) {
    case 1: 
        console.log('num为1');
        break;
    case 2:
        console.log('num为1');
        break;
    default:
        console.log('num不为1或2');
        break;
}

var str = 'b'
switch (str) {
    case 'a': 
        console.log('str为a');
        break;
    case 'b':
        console.log('str为b');
        break;
    default:
        console.log('str不为a或b');
        break;
}

// case穿透: 执行case 'a'后面的语句块后没有break, 继续执行，这就是case穿透
var str = 'a'
switch (str) {
    case 'a': 
        console.log('str为a');
    case 'b':
        console.log('str为b');
        break;
    default:
        console.log('str不为a或b');
        break;
}

　　 case穿透的应用场景

var month = prompt("请输入月份");
switch(month){
    case "3": case "4": case "5":
        alert("春季");
        break;
    case "6": case "7": case "8":
        alert("夏季");
        break;
    case "9": case "10": case "11":
        alert("秋季");
        break;
    case "12": case "1": case "2":
        alert("冬季");
        break;
    default:
        alert("您在火星");
        break;
}    

 

　　while循环

var i = 0;
while (i < 10) {
    console.log(`i=${i}`)
    i++;
}
console.log(`最后i=${i}`)

　　do...while循环

var i = 0;
do {
    console.log(`i=${i}`)
    i++
} while (i < 10)
console.log(`最后i=${i}`)

　　for循环

for (var i = 0; i < 10; i++) {
    console.log(`i=${i}`)
    
}
console.log(`最后i=${i}`)

　　关键字break

var sum = 0;
var i = 0;
while (sum < 100) {
    sum += i;
    i++
}
console.log(`sum=${sum}`)

var sum = 0;
var i = 0;
while (true) {
    // 如果sum大于100，跳出循环
    if (sum > 100) break;
    sum += i;
    i++
}
console.log(`sum=${sum}`)

　　关键字continue

for (var i = 0; i < 10; i++) {
    // 如果i为偶数，执行下一次循环
    if (i % 2 === 0) continue;
    console.log(`i=${i}`)
    
}
console.log(`最后i=${i}`)

 

10、数组

来源：https://www.cnblogs.com/xy-ouyang/p/12180148.html