js基础

javascript介绍

结构：

1. ECMAScript 标准-----js的基本语法

2. BOM------Browser Object Model 浏览器对象模型

3. DOM------Document Object Model 文档对象模型

js语言的特点：

1. 脚本语言(不需要编译 t-sql cmd等是常见的脚本语言)
2. 解释型语言
3. 动态类型的语言
4. 基于对象的语言

历史：

1. 原名LiveScript
2. 最初的作用：解决用户和浏览器之间交互的问题
3. 现在的作用：
   1. 网页特效
   2. 服务端开发Node.js
   3. 命令行工具Node.js
   4. 桌面程序Electron
   5. App(Cordova)
   6. 控制硬件 物联网Ruff
   7. 游戏开发cocos2d-js

js代码书写的位置：

1. html文件中script标签内
2. 在js文件中写 xxx.js 需要外部引入:script标签内的src=“js的路径”
3. script标签的标准写法：<script type="text/javascript">内容</script>或者<script language="javascript">
4. 在h5标准的页面可以省略type和language
5. script标签可以在一个页面中有多对
6. script一般放在body的最后 有时会放到head里 因为是先执行上面的
7. 如果script标签用来引入外部文件 里面就不要写代码了

注意：

1. script标签中如果有错误的代码 那么该错误的代码之后的代码不会执行
2. 有错误的script标签并不会影响后面的script标签的执行

注释:

1. 单行// content 多行/*content*/
2. 注释的代码不执行 用来给开发者看的解释代码

变量

变量的作用

1. 作用：存储/读取数据，操作数据的位置：内存空间 由内存分配地址
2. 根据变量名称可以获取数据 使用变量可以方便修改数据

变量的使用

1. 声明类型用var，每一行结束应有分号
2. 变量初始化(声明及赋值)：var hero = "garren";
3. 一次性声明多个变量并且不赋值：var x, y, z;
4. 变量名区分大小写，字符串可以使用单引号或双引号

注意

1. 变量名有意义
2. 变量名规范：
   1. 可以有字母$_数字，数字不能开头 不能重名
   2. 缩写的或者常量用大写
   3. 遵循驼峰原则（第一个单词首字母小写后面单词的首字母大写）
   4. 不能使用关键字保留字等可以在前面加上个$

数据类型

• 使用typeof获取变量类型

num数字

• （整数和小数）不是数字与数字运算值：NaN

数字的进制

1. 2 遇2进1 01011010 二进制
2. 8 遇8进1012前面加0是八进制写法
3. 10 遇10进1
4. 16 遇f进10xDAB1321前面加0x的是16进制写法

数字的范围

1. 最小值：Number.MIN_VALUE = 5e-324
2. 最大值：Number.MAX_VALUE = 1.797631348623157e+308
3. 无穷大 Infinity
4. 无穷小 -Infinity

数字的判断:

1. 不要用小数验证小数 精度有问题
2. 不要用NaN验证是否为NaN eg: NaN==NaN 这个值是false 应该用isNaN(值或者变量)

string(字符串)

1. 字符串的拼接：使用+可以把多个字符串拼接成一个字符串
2. 只要有一个是字符串用+拼接则结果也是字符串
3. 如果字符串和数字类型用-，则会把字符串转换为数字类型再进行运算，值是数字类型(隐式转换)

boolean

• 布尔型 值：true(真1)/flase(假0)

null

1. 空类型， 值:undefined 如果函数没有返回值 则返回的值也是undefined
2. 如果想要值为null 必须手动设置 eg： var a = null;

object 对象

类型的转换：

1. 转数字：
   1. parseInt() 转整数
   2. parseFloat() 转小数
   3. Number() 转数字（更严格只要不是数字就是NaN）
2. 转字符串：
   1. toString() 变量有意义 eg: var a = true;
   2. String() 变量无意义 eg: var a;
3. 转布尔
   1. boolean()

运算符

1. 一元运算符 ++ –
   • i++先赋值再运算 ++i先运算再赋值
2. 算术运算符：+ - * / %
3. 逻辑运算符
   1. && 与 有一个false则结果为false
   2. || 或 有一个为true则结果为true
   3. ！ 非 取反
4. 关系运算符
   1. == 只比较值 === 值和类型必须全等才为true
   2. <, >, <=, >=, !
5. 复合运算符
   1. +=，-=，%=，*=，%=
6. 赋值运算符：=
7. 优先级：()>一元>算数>关系>相等>逻辑>赋值

流程控制:

顺序语句：

• 从上到下执行

分支结构：

条件语句

1. if语句:

if(条件语句){
// 满足条件则执行 否则不执行这里的代码
}

2. if-eles语句:

if(条件语句){
//满足条件执行这里的代码
}else{
//不满足条件执行这里的代码
}

3. 三元表达式:

表达式1？表达式2：表达式3;
表达式1结果为true则执行表达式2 否则执行表达式3

4. if-else if:

if(表达式){
    满足表达式执行这里的代码，不执行以下的代码
} else if(表达式n){
    满足表达式n执行这里的代码，不执行以下的代码
} else{
    以上的表达式都不满足则执行这里的代码
}

5. switch语句:

switch(值){
    case 值1:`如果值是值1，则执行这里的代码`; break;
    case 值2:`如果值是值2，则执行这里的代码`; break;
    case 值3:`如果值是值3，则执行这里的代码`; break;
    case 值4:`如果值是值4，则执行这里的代码`; break;
    case 值5:`如果值是值5，则执行这里的代码`; break;
    default: `如果值不是上面的，执行这里的代码`;
}
// 遇到break则终止 比较的值是===严格模式

循环语句

1. while循环
   while(循环条件){
   满足条件则执行这里的代码
   }

2. do while
   do{
   先执行一次这里的代码，再判断条件，满足条件则执行这里的代码 否则跳出去
   }while(条件语句);
3. for循环

for(var i = 0; i<=2; i++){
    // 
}

调试

1. 调试代码—高级程序员都是从调试开始的
2. 写代码—打开浏览器–F12(开发人员工具)—>Sources—双击文件,在某一行代码前面点击一下(出现的东西就是断点)

关键字:

1. break
   1. 终止当前循环
2. continue:
   1. 跳出此次循环 继续执行下一次循环

数组

• 有序的数据
• 作用: 存储数据(多个)

1. 数组的创建
   1. 通过构造函数:var arr = new Array(length); //没有数据无长度undefined
      1. var arr = new Array()//空数组
      2. var arr = new Array(length)//有长度的数组
      3. var arr = new Array(value1,value2,value3,...)//定义数组并且有数据
   2. 字面量: var arr = []
      1. var arr = []//空数组
      2. var arr= [1,2,3]//有3个数据 数据可以是不同类型
2. 数组的元素:数组中存储的数据
3. 数组的长度: 数组中元素的个数
4. 数组索引(下标):从0开始
5. 数组的遍历:
   1. for循环：

   var array = new Array();
   for(var a =0; a < array.length; a++){
       console.log(array[a]);
   }
   

6. 排序
   1. 冒泡法：

函数

• 函数重名后面的会覆盖前面的

1. 参数: 形参和实参

2. 返回值：return

arguments对象(伪数组)

可以获取传入的每个参数的值

函数表达式

把一个函数给一个变量
var f1 = function (){};
函数的数据类型是function
函数作为参数就是回调函数

预解析

把函数或者变量的声明提前到当前作用域的最前面 不会调用或者赋值

创建对象的三种方式

1. 调用系统的构造函数
2. 自定义构造函数
3. 字面量方式

Date对象

创建对象：var date = new Date();//可以传入字符串类型的时间 如果不传参则默认当前的时间

Date方法：

//返回当前时间的毫秒数
Date.now();
var dt = new Date();
// 年
dt.getFullYear();
// 月 从0开始
dt.getMonth();
// 日
dt.getDate();
// 时
dt.getHours();
// 分
dt.getMinutes();
// 秒
dt.getSeconds();
// 毫秒
dt.getMilliseconds();
// 周 0开始
dt.getDay();
//转换字符串
dt.toString();
// 英文格式 
dt.toDateString();//日期
dt.toTimeString();//时间
// 数字格式
dt.toLocaleDateString();//日期
dt.toLocaleTimeString();//时间

String对象

string:基本
String:引用
单引号或双引号都可以
可以看成数组进行遍历获取字符
改变值的原理:变量指向了其他的值

属性和方法

1. charAt(索引);//获取一个索引位置的字符 超出索引 返回值为空字符串
2. length
3. String.fromCharCode(code);//静态方法 返回Unicode值创建的字符
4. concat(str1,str2,...,strn);//字符串拼接
5. replace(子字符串,需要替换的字符串);//替换
6. slice(start,end);//截取字符串从start索引开始 取不到end
7. split(要分割的字符,返回的数组长度))));//分隔符(以指定字符来分割字符串 返回得到的字符数组))
8. substr(start,length));//截取字符串
9. substring(start,end);//start开始 取不到end
10. indexOf("需要查找的字符串",需要查找的索引);//参数二可以没有 找到了返回索引 找不到返回-1
11. lastIndexOf();//同上 从后往前找
12. toLocaleLowerCase(); toLowerCase()//转小写
13. toLocaleUpperCase(); toUpperCase();//转大写
14. trim();//去掉头尾空格

Array对象

• Polyfill兼容旧环境

方法

1. Array.isArray(数组);//等同于instanceof 判断是不是数组
2. Array.from(数组);//返回一个新数组
3. concat(数组1,...,数组n);//拼接数组
4. every(callback);//筛选判断 传入的函数三个参数(元素的值,索引的值,调用者)  callback传入函数 return:boolean
5. filter(callback);//筛选结果 返回数组
6. pop();//取出最后一个值 返回删除的元素
7. push();//压入一个值到最后 返回数组的长度
8. shift();//取出第一个值
9. unshift();//插入个值到第一个
10. forEach(函数);//遍历数组
11. indexOf(元素值);//返回索引 没有则-1
12. join("字符串"));//插入字符串 return字符串
13. map(函数);//all elements 执行函数 返回执行后的结果的数组 
14. reverse();//反转数组
15. sort(function compare(a,b){//排序
    // 自定义排序
    if(a>b){
        return 1;
    }else{
        if(a==b){
            return 0;
        }else{
            return -1;
        }
    }
});
16. slice(start, end);//return 数组
17. splice(start, 个数, newEle)//替换/插入元素 

基本包装类型

本身是基本类型 调用了属性和方法那么就变成了基本包装类型
var a = 对象&&true a=true
var a = true&&对象 a=对象