这篇文章主要围绕js基础和js基础数据类型展开，旨在为您提供一份详细的参考资料。我们将全面介绍js基础的优缺点，解答js基础数据类型的相关问题，同时也会为您带来1js基础、1.Js基础、JS加密之JS

这篇文章主要围绕js基础和js基础数据类型展开，旨在为您提供一份详细的参考资料。我们将全面介绍js基础的优缺点，解答js基础数据类型的相关问题，同时也会为您带来1 js基础、1.Js基础、JS加密之JS基础大考验、JS基础 之 事件的实用方法。

本文目录一览：

• js基础（js基础数据类型）
• 1 js基础
• 1.Js基础
• JS加密之JS基础大考验
• JS基础 之 事件

js基础（js基础数据类型）

概述

• js是一款运行在客户端的网页编程语言
• 组成部分：<br> ECMAScript js标准，语法规范<br> DOM(Document Object Model的简称) js操作网页上元素的API<br> BOM(Browse Object Model的简称) js操作浏览器部分功能的API
• 特点：简单易用，解释执行，基于对象

输出消息的几种方式

alert() 在页面弹出一个对话框
confirm() 在页面弹出一个对话框，常配合if判断使用，对话框有取消和确定按钮
console.log() 将信息输出到控制台
console.error("我是错误")
console.warn("我是警告")
prompt() 弹出对话框，用于接受用户输入的信息
document.write() 在页面输出消息，能够读取标签

转义字符

\" 转双引
\'' 转单引
\n 转换行
\r 转回车

命名规则 关键字 保留字

• 关键字

break	    do	        instanceof	typeof
case	    else	    new	        var
catch	    finally	    return	    void
continue	for	        switch	    while
debugger*	function	this	    with
default	    if	        throw	    delete
in	        try

• 保留字

abstract	enum	    int	        short
boolean	    export	    interface	static
byte	    extends	    long	    super
char	    final	    native	    synchronized
class	    float	    package	    throws
const	    goto	    private	    transient
debugger	implements	protected	volatile
double	    import	    public

数据类型

简单数据类型(值类型)

Number 数字类型
String 字符串
Boolean 布尔数据类型
undefined 未定义，变量未初始化，定义了变量，没有赋值，变量是在内存中存在的
null 空，变量未引用，值为空，属于object

复杂数据类型（引用类型）

Object,Array,Function,Date,RegExp,Error...

判断数据类型

typeof()    typeof "abc"

数据类型转换

• 任何简单类型转字符串
  • 变量+""/变量+"abc"
  • String(变量)
  • 变量.toString() 注意：null和undefined无toString方法
• 任何简单类型转数字类型
  注：在转换过程中如果有非数字字符出现，一般都会出现NaN。
  1. 变量（+、-、乘、/）一个数字，console.log(type of("111")/1);
  2. Number()
     • 数字类型的字符串，转换之后得到的数字。
     • 如果含有非数字字符串，转换之后得到是NaN。
     • 小数类型的字符串，转换之后得到的是原数字。
  3. parseInt() 取整
     • 整数数字类型的字符串，转换之后得到的整数数字。
     • 数字开头的字符串，转换之后得到的是前边的数字。
     • 非数字开头的字符串，转换之后得到的是NaN。
     • 小数类型的字符串，转换之后取整。
  4. parseFloat() 取浮点数
     • 整数数字类型的字符串，转换之后得到的整数数字。
     • 数字开头的字符串，转换之后得到的是前边的数字。
     • 非数字开头的字符串，转换之后得到的是NaN。
     • 小数类型的字符串，转换之后得到的是原数字。
  • 空字符串parseInt()和parseFloat()返回NaN,Number("")返回0
• 转布尔类型
  Boolean()
  • 数字和字符串转完之后为true
  • undefined,null,0 转完之后为false
  • 任何数据类型都可以转换成boolean类型

Number

浮点数

• 因为精度丢失问题，所以不判断计算后的两个浮点数是否相等

数值范围

• 最小值：Number.MIN_VALUE,这个值为5e-324
• 最大值：Number.MAX_VALUE,这个值为1.7976931348623157e+308
• 无穷大：Infinity
• 无穷小：-Infinity

NaN 非数值（Not a Number）

• 字符串与数字相除结果是NaN（数值型的字符串除外）。console.log("abc"/18);"2"/2=1(number类型)。
• undefined和任何数值计算结果都是NaN。console.log(undefined-1==NaN)的返回值为false。
• NaN与任何值都不相等，包括NaN本身。

isNaN()

• 任何不能转换为数值的值都会导致这个函数返回true
• isNaN(NaN);//true

String

• 字符串不可变，在内存中不会立刻消失，只能二次赋值，原有的字符在一定时间内会被垃圾回收器回收

Boolean

• true、除0数字、“something”、Object(任何对象)为true
• false、0 、“”、undefined 、null为false
• if判断时会把（）内的值强行转换成boolean类型进行判断

null和undefined

• null==undefined结果为true
• null===undefined结果为false
• 10+null结果为10
• 10+undefined结果为NaN
• 任何数据类型和undefined运算都是NaN
• 任何值和null运算，null可以看作0运算

Function 函数

函数的定义

• function 函数名(){ 程序 }
• var fn=function(){ 程序 }
• var fn=new Function("程序")

返回值

• 函数中如果没有return或者return后没有任何值，那么函数的返回值就是undefined。
• 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退 出，也就是说return后面的所有其他代码都不会再执行

小知识

• 函数不调用不执行
• 函数名就等于（整个函数）
• 加载函数的时候，只加载函数名，不加载函数体
• 参数相当于局部变量
• 就近原则使用变量
• 两个平级的函数中的变量不会相互影响（可以使用同样的形参名）
• 变量声明提升只提升变量名，不提升变量值，但是，函数是所有的内容全部提升
• 实参大于形参，正常执行，多余的实参，不使用
• 实参小于形参，（报错，NaN,undefined）
• js中没有方法重载，所以同一函数名，后边的会覆盖前边的
• 打印执行函数，就等于打印函数的返回值
• 函数中包函数，先执行里面，后执行外面

预解析

js的解析器在页面加载的时候，首先检查页面上的语法错误，把变量声明提升起来

匿名函数

• 调用方法：
  1. 直接调用或自调用
  2. 绑定事件
  3. 定时器

递归

• 递归的实质就是自己调用自己；
• 递归必须有跳出条件，否则就是死循环

回调函数

就是函数作为参数

进制转换

• parseInt 一个参数，取整；两个参数，进制转换，将任意进制转换成十进制。十进制=parseInt(数值,进制)
• .toString() 无参转换成字符串；带参，十进制转换成任意进制。任何进制=十进制.toString(进制)

构造函数

new后边调用函数，称为构造函数，构造函数的本质就是函数。构造函数通常首字母大写

• this
  1. this只出现在函数中
  2. 谁调用函数，this就指的是谁
  3. new People(); People中的this代指被常见的对象实例
• new
  1. 开辟内存空间，存储新创建的对象
  2. 把this设置为前对象
  3. 执行内部代码，设置对象属性和方法
  4. 返回新创建的对象

对象字面量{}和json

对象字面量就是一个{}，包含键值对 key：value ，和json只有一点不同，json的key要求必须加“”； 对象本身没有length，所以不能用for循环遍历

for in 循环

for(var key in json){ }； 多用于遍历json，一般数组和dom对象不使用本方法，因为其中隐藏有很多其它的属性

简单和复杂数据类型的存储和传递

参数赋值的时候，简单数据类型传数值（简单类型数据做参数，函数内部对参数的修改不应影响外部变量），复杂数据类型传地址（复杂类型数据做参数，函数内部对参数的修改会应影响外部变量）

算术运算符

+加号

两个数字类型的变量相加，得到的是一个数字类型。
一个数字类型和一个字符串相加，得到的是一个字符串。

-减号

两个数字类型的变量相减，得到的是一个数字类型。
一个数字类型和一个数字字符串相减，得到的是一个数字类型。
一个数字类型和一个非数字字符串相减，得到的是NaN,是一个数字类型。

/ 除号

两个数字类型的变量相除，得到的是一个数字类型。
一个数字类型和一个数字字符串相除，得到的是一个数字类型。
一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。    
0做为除数的时候，得到结果	Infinity （无限大），是一个数字类型。

运算符的优先级

1. ()
2. !、-（负数）、++、-- （正数省略+）（一元运算）
3. *、/、%
4. +、- （加，减）（二元运算）
5. <、<=、<、>= （一级逻辑运算）
6. ==、!=、===、!==、 （二级逻辑运算）
7. && （三级级逻辑运算）
8. ||
9. ?: （三元运算）
10. =、+=、-=、*=、/=、%= （赋值运算）

注意点

• a++代表先赋值，a值之后再自加，即：var a=1；b=a++；可以分解为b=a=1；a=a+1=2；最终b的值为1，a的值为2。
• ++a代表先自加，再赋值，即：var a=1；b=++a；可以分解为a=a+1=2；b=a；最终b=a=2。

   var a = 1;
   var b = 2;
   a++;
   var num = ++a + (a++) + a + (++b) + b++;
             //  3 + 3 + 4 + 3 + 3;

   console.log(num);

内置api

javascript内置对象：
Arguments   函数参数集合
Array       数组
Boolean     布尔对象
Date        日期时间
Error       异常对象
Function    函数构造器
Math        数学对象
Number      数值对象
Object      基础对象
RegExp      正则表达式对象
String      字符串对象

Date()对象

日期的定义 声明

var date1 = new Date();

设定制定时间：（兼容最强）
var date2 = new Date("2016/01/27 12:00:00")

不常用：
var date3 = new Date(''Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)'');
var date4 = new Date(2016, 1, 27);

Date对象的方法

getDate()                 获取日 1-31
*getDay ()                 获取星期 0-6（0代表周日）
*getMonth ()             获取月 0-11（1月从0开始）
getFullYear ()	       获取完整年份（浏览器都支持）
getHours ()	       获取小时 0-23
getMinutes ()	       获取分钟 0-59
getSeconds ()	       获取秒  0-59
getMilliseconds ()    获取毫秒 （1s = 1000ms）
*getTime ()	       返回累计毫秒数(从1970/1/1午夜)

返回距离1970/01/01毫秒数

var date = Date.now();
var date = +new Date();
*var date = new Date().getTime();
var date = new Date().valueOf();

Math对象

Math.PI
Math.ceil() 向上取整
Math.floor() 向下取整
Math.max(n1,n2)
Math.min(n1,n2)
Math.pow(n1,n2) 返回n1的n2次方
Math.round() 四舍五入
Math.random() 返回0-1之间的随机数
Math.abs()  取绝对值
Math.sqrt(num)  num开平方
Math.sin()
Math.cos()

Array 数组高级api（内置对象）

查阅：w3c MDN

数组的定义

• 字面量定义

var arr1=[1,2,3];

• 创建对象

var arr2=new Array();//空数组
var arr3=new Array(1,2,3);
var arr4=new Array(3);//参数只有一个，代表数组的长度;多个参数则代表元素

• 数组的长度

数组名.length;
可以通过修改数组的长度来改变数组中元素的个数，如果改小了，数组从后面删除元素。（伪数组的长度可以修改，但是不能修改里面的元素）

• 在获取索引值时，如果没有指定的索引（元素没有那么多），系统不会报错，而是给出undefined。

判断数组和转换数组

Instanceof:  是一个关键字。	判断A是否是B类型。
    布尔类型值 = A Instanceof B ;
Array.isArray()	 HTML5中新增    判断是不是数组
    布尔类型值 = Array.isArray(变量) ;
    调用者：Array	参数：变量(被检测值)		返回值：布尔类型	
toString()		 把数组转换成字符串，每一项用,分割
    字符串  =  数组.toString();
valueOf()		 返回数组对象本身
    数组本身 = 数组.valueOf();
join			 根据每个字符把数组元素连起来变成字符串
    字符串  =  数组.join(变量);
    变量可以有可以没有。不写默认用逗号分隔，无缝连接用空字符串。

数组的增删和换位（原数组将会被修改）

push()  在数组最后面插入项，返回数组的长度
    数组1改后的长度  =  数组1.push(元素1);
pop()    取出数组中的最后一项，返回最后一项
    被删除的元素  =  数组1.pop();
unshift()   在数组最前面插入项，返回数组的长度
    数组1改后的长度  =  数组1.unshift(元素1);
shift()     取出数组中的第一个元素，返回最后一项
    被删除的元素  =  数组1.shift();
reverse()	翻转数组（原数组讲呗反转，返回值也是被反转后的数组）
    反转后的数组  =  数组1.reverse();
sort();    给数组排序，返回排序后的数组。如何排序看参数。
    从小到大排序后的数组  =  数组1.sort(function(a,b){
                              return a-b;
                            });
    无参：按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素。
    带参：必须为函数（回调函数--callback）。函数中带有两个参数，代表数组中的前后元素。如果计算后（a-b），返回值为负数，a排b前面。等于0不动。返回值为正数，a排b后面。

其它api

concat()  连接数组，（原数组不会被修改）
    新数组 = 数组1.concat(数组2);
slice()   从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
    新数组 = 数组1.slice(索引1，索引2);
splice()  删除或替换当前数组的某些项目，参数start,deleteCount,options(要替换的项目,元素形式)（注意：替换的元素不能是以数组形式存在，否则将整个数组放进原数组中）
    截取后的数组 = 数组1.splice(起始索引，结束索引，替换内容（"1","2","3"）)；
	数组1会直接变为新替换后的数组（原数组会发生变化）
indexOf()、lastIndexOf()   如果没找到返回-1
    索引值 = 数组.indexOf/lastIndexOf(数组中的元素);

数组api方法遍历

every()、filter()、forEach()、map()、some()
    数组/boolean/无 = 数组.every/filter/forEach/map/some(
                        function(element,index,arr){
    						程序和返回值；				          
                        }
                    );

//对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；不写默认返回false
array.every(function(item,index,arr) {
})
//对数组中每一项运行以下函数，该函数返回结果是true的项组成的新数组
var arr = array.filter(function(item,index,arr) {
});
console.log(arr);  
//遍历数组
array.forEach(function(item,index,arr){
});
//对数组中每一项运行以下函数，返回该函数的结果组成的新数组
var arr = array.map(function(item,index,arr) {
    return "\"" + item + "\"";
})
//对数组中每一项运行以下函数，如果该函数对某一项返回true，则some返回true
var b =  array.some(function(item,index,arr) {
    if (item == "ww") {
        return true;
    }
    return false;
});

清空数组

array.splice(0,array.length); //删除数组中所有项目 
array.length = 0; //length属性可以赋值，其它语言中length是只读
array = [];  //推荐

伪数组

arguments: 只在函数中使用，实参的数组
    伪数组：不能修改长度的数组（可以修改元素，但不能改变长短）
    形参个数：fn.length
    实参个数：arguments.length
    整个函数：arguments.callee

基本包装类型

• 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean
• Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义
• 创建基本包装类型的对象
  • var num = 18; //数值，基本类型
  • var num = Number("18"); //类型转换
  • var num = new Number(18); //基本包装类型，对象
• 简单数据类型是没有属性和方法的，当调用方法的时候，先把基本类型包装成string类型的临时对象，再调用方法，最后销毁临时对象

string 字符串方法

• 字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

给索引查字符
    charAt()    //获取指定位置处字符，无则返回空字符串
    charCodeAt()  //获取指定位置处字符的ASCII码，无则返回NaN
    str[0]   //HTML5，IE8+支持 和charAt()等效
给字符查索引
    indexOf()   //返回指定内容在元字符串中的位置，找不到返回-1
    lastIndexOf() //从后往前找，只找第一个匹配的,找不到返回-1
url编码和解码，URI通用资源标识符
    encodeURIComponent() //函数可以把字符串作为URI组件进行编码
    decodeURIComponent() //函数可以把字符串作为URI组件进行解码
连接字符串
    concat()   //拼接字符串，等效于+，+更常用
字符串的截取
    slice(索引1，索引2)    //从start位置开始，截取到end位置，end取不到
        （2，5）包左不包右
        （2） 从指定索引剪到最后
        （-3） 剪倒数几个数
        （5，2）前大，后小，空
    substring() //从start位置开始，截取到end位置，end取不到
        同slice，不同点：（5，2）参数智能调换位置
                        参数是负值，将全部获取字符串
    substr(索引值，长度)   //从start位置开始，截取length个字符
去除空白   
    trim()  //只能去除字符串前后的空白
替换
    replace() //str.replace(/aaa/gi,"bbb") 
字符串变数组
    split() //无参是把字符串作为一个整元素添加进数组
            //双引号的空字符串，分隔字符串种的每一个字符，添加进数组
            //指定字符分割数组：分割符号不会出现在数组中
大小写转换方法
    to(Locale)UpperCase() //转换大写
    to(Locale)LowerCase() //转换小写
其它
    search()   看该字符串对象与一个正则表达式是否匹配
    localeCompare()（操作单个字符）
        s1.localeCompare(s2)   
        s1 > s2 返回正数，一般是1
        s1 == s2 返回0
        s1 < s2  返回负数，一般是-1
    fromCharCode()
        String.fromCharCode(101,102,103); //把ASCII码转换成字符串
    anchor()  创建a链接
    big()
    sub()
    sup()
    link()  创建a链接，返回值是字符串
    bold()

等号运算符

=   赋值
==  只判断内容是否相同，不判断数据类型
=== 不仅判断内容，还判断数据类型

自增自减

i++ 先赋值后自增
++i 先自增后赋值

语句

if(){}else{}

三元表达式

表达式?结果1：结果2;

switch 语句

switch(变量){//在比较值时使用的是全等操作符（===）。
    case 1:
    ...要执行的语句
    break;//break会使代码跳出整个循环，如果省略则会继续执行下一个case。
    case 2:
    ...
    break;
    default:
    ...
    break;
}

• switch 语句可以对变量进行集体的判断

    switch(变量){
        case 1: case 2: case 3:
        ...
        break;
    }

while 循环

while(表达式){ }

while需要在循环体外定义变量

do while 循环

do{

}while(表达式)

比while多循环一次

for 循环

for(定义变量;条件表达式;自增自减){

}

for ... in 遍历对象的属性或者方法

for(var key in obj) {
	console.log(key + "==" + obj[key]);
}

break 语句

跳出本循环也就是跳出当前循环体

continue 语句

跳出本次循环进入下一循环

return 语句

可以切断函数

1 js基础

# JS基础

## 一、JS语言介绍

#### 1、概念

- 浏览器脚本语言
- 可以编写运行在浏览器上的代码程序
- 属于解释性、弱语言类型编程语言

#### 2、组成

- ES语法：ECMAScript、主要版本ES5和ES6
- DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

## 二、三种存在位置

#### 1、行间式：存在于行间事件中

```html
<body id="body" onload="body.style.backgroundColor=''#0ff''">

</body>
```

#### 2、内联式：存在于页面script标签中

```html
<body id="body">
<script type="text/javascript">
body.style.backgroundColor=''#0ff''
</script>
</body>
```

#### 3、外联式：存在于外部JS文件，通过script标签src属性链接

```html
index.js文件
body.style.backgroundColor=''#0ff''

index.html文件
<script src="./js/index.js"></script>
```

## 三、解释性语言特性决定JS代码位置

- 出现在head标签底部：依赖型JS库
- 出现在body标签底部：功能型JS脚本

## 四、JS语法规范

- 注释

```js
// 单行注释
/*
多行注释
*/
```

- 以分号作为语句结尾（允许省略）

## 五、变量的定义

#### 1、ES5定义变量

```js
var num = 10; // 无块级作用域变量
num = 10; // 全局变量
```

#### 2、ES6定义变量

```js
let num = 10; // 局部变量
const NUM = 10; // 常量
```

#### 3、变量(标识符)的命名规范

- 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
- 区分大小写
- 不能出现关键字及保留字

| | | | | |
| --------- | --------- | ---------- | --------- | ------------ |
| abstract | arguments | boolean | break | byte |
| case | catch | char | class\* | const |
| continue | debugger | default | delete | do |
| double | else | enum\* | eval | export\* |
| extends\* | false | final | finally | float |
| for | function | goto | if | implements |
| import\* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super\* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield | | |

## 六、三种弹出框

- alert：普通弹出框
- confirm：确认框
- prompt：输入框

## 七、四种调试方式

- alert()
- console.log()
- document.write()
- 浏览器断点调试

## 八、数据类型

#### 1、值类型

- number：数字类型

```js
var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''number'')
```

- string：字符串类型

```js
var a = ''10'';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''string'')
```

- boolean：布尔类型

```js
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''boolean'')
```

- undefined：未定义类型

```js
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''undefined'')
console.log(a == undefined)
```

#### 2、引用类型

- function：函数类型

```js
var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''function'')
```

- object：对象类型

```js
var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''object'')
console.log(a instanceof Object)
```

#### 3、具体的对象类型

- null：空对象

```js
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''object'')
console.log(a == null)
```

- Array：数组对象

```js
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''object'')
console.log(a instanceof Object)
console.log(a instanceof Array)
```

- Date：时间对象

```js
var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''object'')
console.log(a instanceof Object)
console.log(a instanceof Date)
```

- RegExp：正则对象

```js
var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == ''object'')
console.log(a instanceof Object)
console.log(a instanceof RegExp)
```

#### 4、类型转换

- 数字|布尔 转换为 字符串

```js
var a = 10 or true

String(a)

a.toString()
```

- 布尔|字符串 转换为 数字

```js
var a = true or ''10''

Number(a)

+ a

parseFloat()
parseInt()
```

- 字符串|数字 转换为 布尔

```js
var a = 10 or ''10''
Boolean(a)
```

- 自动转换

```js
5 + null // 5
"5" + null // "5null"
"5" + 1 // "51"
"5" - 1 // 4
```

- 特殊产物

```js
// NaN: 非数字类型
// 不与任何数相等，包含自己
// 利用isNaN()进行判断
```

## 九、运算符

#### 1、算数运算符

前提：n = 5

<table>
<tr>
<th>运算符</th>
<th>描述</th>
<th>例子</th>
<th>x结果</th>
<th>n结果</th>
</tr>
<tr>
<td>+</td>
<td>加法</td>
<td>x=n+2</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td>-</td>
<td>减法</td>
<td>x=n-2</td>
<td>3</td>
<td>5</td>
</tr>
<tr>
<td>*</td>
<td>乘法</td>
<td>x=n*2</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>/</td>
<td>除法</td>
<td>x=n/2</td>
<td>2.5</td>
<td>5</td>
</tr>
<tr>
<td>%</td>
<td>取模(余数)</td>
<td>x=n/2</td>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">++</td>
<td rowspan="2">自增</td>
<td>x=++n</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>x=n++</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="2">--</td>
<td rowspan="2">自减</td>
<td>x=--n</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>x=n--</td>
<td>5</td>
<td>4</td>
</tr>
</table>

#### 2、赋值运算符

前提：x=5，y=5

| 运算符 | 例子 | 等同于 | 运算结果 |
| :----- | :--- | ------ | -------- |
| = | x=y | | 5 |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |

#### 3、比较运算符

前提：x=5

| 运算符 | 描述 | 比较 | 结果 |
| ------ | ---------- | ------- | ----- |
| == | 等于 | x=="5" | true |
| === | 绝对等于 | x==="5" | false |
| != | 不等于 | x!="5" | fales |
| !== | 不绝对等于 | x!=="5" | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |

#### 4、逻辑运算符

前提：n=5

| 运算符 | 描述 | 例子 | 结果 |
| ------ | ---- | ------------- | ------------------- |
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| \|\| | 或 | x=n<10\|\|n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |

#### 5、三目运算符

```js
// 结果 = 条件表达式 ? 结果1 : 结果2;

// eg:
var tq = prompt("天气(晴|雨)")
var res = tq == ''晴'' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);
```

#### 6、ES6语法解构赋值

- 数组的解构赋值

```js
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
```

- 对象的解构赋值

```js
let {key: a} = {key: 10}
// a=10
```

- 字符串解构赋值

```js
let [a,b,c] = ''xyz''
// a=''x'',b=''y'',c=''z''
```

 

1.Js基础

• js组成部分

1.ECMAScript 2.DOM（document object model）3.BOM（browser object document）
（1）ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。
（2）DOM是文档对象模型，规定了文档的显示结构，可以轻松地删除、添加和替换节点
（3）BOM是浏览器对象模型，就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象

• 定义变量名的规范：

1. 由字母、数字、下划线、$组成；
2. 变量名不能以数字开头 1num
3. 遵循驼峰命名法； 第一个有意义的单词小写，以后任何一个有意义的单词大写，（语义化:方便维护）

4. 不能以关键字保留字作为变量名；

    关键字：在JS中有特殊意义的单词;
    保留字：在未来有可能成为关键字的词
   

5. 严格区分大小写

• 数据类型

  基本数据类型和引用数据类型
  1.基本数据类型存储到栈内存中，引用存储到堆内存中；
  2.基本数据类型是操作值的，引用数据类型操作的是空间地址；
  基本： number string boolean null undefined symbol
  引用： 对象数据类型和函数数据类型
  对象数据类型: 对象 数组 正则 Math Date的实例...
  函数数据类型： 函数 、类

    console.log(isNaN(NaN));//true
    console.log(isNaN("aaa"));//true
    console.log(isNaN("1px"));//true
    console.log(isNaN(1));//false
    console.log(isNaN("1"));//false
    console.log(Number("22.22")) //22.22
    console.log(Number(null));//0   *******
    console.log(Number([]));//0
    console.log(Number(""));//0
    console.log(Number(true));//1
    console.log(Number(false));//0
    console.log(Number("1px"));//NaN
    console.log(Number({})); //NaN
    console.log(Number(undefined));//NaN

isNaN() 先转number类型，是有效数字--false

• 数据类型比较的规律

  1.对象==对象,比较的空间地址;
  2.对象==字符串,对象默认调用toString方法,先转换成字符串,再比较
  3.对象==布尔, 对象先转换字符串,再转换数字;布尔直接转换数字;
  4.对象==数字; 对象先调用toString方法转成成字符串,然后再转number
  5.布尔==数字: 布尔转数字
  6.字符串==数字:字符串转数字
  7.布尔==字符串:布尔转数字,字符串转数字,然后比较
  8.null == undefined: true //null==null undefined==undefined 都是true
  9.unll.undefined 和其他数据类型比较都是false;

JS加密之JS基础大考验

之前不知道在哪看到的几个JS题目，感觉比较有趣，全是细节，没什么技巧。

之前的那个博主也写了他对题目的理解，我个人感觉还是一知半解，于是想按自己的理解再写一次。

感兴趣的朋友可以一起看一下，懂JS基础就可以看明白。

只抽了2个典型的例子，其他题目大同小异没啥特点

题目1

var x = 1;
function f(x, y = function () { x = 3; console.log(x); }) {
  console.log(x) // 1
  var x = 2 
  y() // 2
  console.log(x) // 3
}
f()
console.log(x) // 4

各位先复制代码自己去分析推理一遍，预想一下答案是什么，然后执行一遍看看是否符合自己的猜想。

然后继续分析为何会是这个结果。如果还是不解，再来看我的想法，应该会比较更深入的了解。

各位先努力分析一波，待会我揭晓我的看法····

执行顺序

1.x是参数，未赋值，所以是undefine。

var x = 2，重新申明x变量，将参数的x覆盖了。

2.执行y函数,打印y函数里的x

3.打印x，y函数修改的x = 3，修改的是y函数最近作用域的x，也就是参数x，而这里打印的是 var x = 2;申明的x，所以是2

4.最后打印x,也就是最外层的x，因为f函数内修改的都是局部作用域的x，所以外层x异常是初始值

题目2

var x = 1;
function f(xx, y = function () { x = 3; console.log(x); }) {
  console.log(x) // 1
  var x = 2
  y() // 2
  console.log(x) // 3
}
f()
console.log(x) // 4

这题依然大家先不要执行，自行在脑子里分析执行结果。

这题考的其实就是var提升，就是一些小细节问题。

执行顺序

1.第一个x是undefined，原因是f函数内有一个x的变量申明了，他会在作用域内提升到最前边申明。

f函数内部真正执行的时候成了这样

var x = 1;
function f(xx, y = function () { x = 3; console.log(x); }) {
  var x;
  console.log(x) // 1
  x = 2
  y() // 2
  console.log(x) // 3
}
f()
console.log(x) // 4

2.y函数内打印3

3.因为就近作用域原则，y函数内的x当前作用域没有，向外层找，找到的是最外层的x，修改的也是最外层的，所以这里输出的还是2

4.因为y函数给他改成3了 所以输出3

结语

JS加密技术必须要有扎实的js基础功，才能更好的利用这些知识去保护别人的JS，防止代码被不良份子侵害。

如果你感觉文章很有用，请点赞收藏。

如果感觉文章有不对的地方非常欢迎指出一起探讨纠正。

如果有需要联系我，可以在jsjiami.com底部有我联系方式

JS基础 之 事件

       基于对象的基本特征就是采用事件驱动，它在图像界面的环境下，使得一切输入变得简单化。通常鼠标或热键的动作称之为事件，而鼠标和热键引发的一连串程序动作，称之为事件驱动。而对事件进行处理的程序或函数，称之为事件处理程序。

       事件源：触发事件的源头，每一个html标记都可以成为触发事件的条件

       事件处理者：处理事件的程序，是对事件做成响应的语句

--指定事件的方法

    1.使用html标记指定

<div onclick="fntest()"></div>

    2.在javascript中说明

    点击#test弹出test

<div id="test">test</div>
<script type="text/javascript">
    function testOnLoad(a){
        alert(a);
    }
    document.getElementById("test").onclick=testOnLoad;//没有()
</script>

    页面加载时就弹出test,点击#test没有反应

<div id="test">test</div>
<script type="text/javascript">
    function testOnLoad(a){
        alert(a);
    }
    document.getElementById("test").onclick=testOnLoad("test");
</script>

preventDefault：阻止默认行为的发生而发生其他的事情

stopPropagation：阻止冒泡

关于js基础和js基础数据类型的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于1 js基础、1.Js基础、JS加密之JS基础大考验、JS基础 之 事件的相关知识，请在本站寻找。

本文标签：

• JS基础
• 数据类型
• javascript
• 编程语言