JAVASCRIPT

1.变量

1.1概念

变量源于数学,是计算机语言中存储计算结果或表示值抽象概念

计算机有个地方叫内存,变量都会将值存入到内存中,变量就是指向这个值的名字

1.2命名规则

1. 由字母数字下划线和$组成
2. 不能以数字开头
3. 严格区分大小写
4. 不能使用关键字和保留字

关键字和保留字

ECMA-262第3版描述的关键字

caseelsenewvar
catchfinallyreturnvoid
continueforswitchwhile
debugger*functionthiswith
defaultifthrowdelete
intry

ECMA-262第3版描述的保留字

booleanexportinterfacestatic
byteextendslongsuper
charfinalnativesynchronized
classfloatpackagethrows
constgotoprivatetransient
debuggerimplementsprotectedvolatile
doubleimportpublic

ECMA-262第5版本非严格模式

constexportimport

ECMA-262第5版严格模式

privatestaticletprotected
yield

2.数据类型

2.1字符串string

  1. 概念:由零个或者多个16位Unicode字符组成的字符序列。
  2. 定义方式:使用单引号''和双引号""定义字符串

单双引号的特点

  1. 单双引号没有区别,都不解析变量
  2. 单双引号可以相互嵌套
  3. 不可以嵌套自身,除非使用转义字符\转义
// 单引号
var str1 = '老板,瓜甜吗?'; // 双引号
var str2 = "滚犊子,这是苦瓜"; // 关于单引号嵌套双引号
var str3 = '王健林说:"先定一个小目标,先赚它一个亿"'; // 双引号嵌套单引号
var str4 = "俊哥说自己很'帅',大家都笑了"; // 关于嵌套自身
var str5 = ''单引号'' // 最外层的一组单引号定义字符串,内层的一组单引号作为普通单引号字符串,为了避免语法报错和歧义,使用转义字符转义
  1. 特点:

    1. 字符串是不可以改变的,一旦创建,值不能改变,如果改变,要先销毁原来的字符串,用新值填充

      var name = '俊哥';
    name += '很帅'; // 俊哥很帅

    2.转为字符串

      第一种方法:
    str.toString()
    除null和undefined之外,所有的数据都可以通过 数据.toString()转为字符串
    //会报错 第二种方法:
    String():将任何值都可以转为字符串
    对象=>字符串:[Object Object]
    其他数据=>原型输出

    3.特殊字符串

    \t制表符
    \r回车
    \斜杠(\有转义的意思,需要展示,使用\转义自身)
    \unnnn16进制代码nnnn表示一个Unicode字符(n为0-F)

2.2 数值(Number)

1. 整数

// 十进制
var num1 = 12; // 八进制(第一位必须是0)
// 0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20 21 22 23 24
var num2 = 070; // 等价于 十进制56
注意:八进制在严格模式下报错 // 十六进制(第一位必须是0x)
// 0 1 2 3 4 5 6 7 8 9 a b c d e f 10
var num3 = 0xA; // 等价于 十进制10 注意:八进制和十六进制的数值最终都会转换为十进制数值进行 算数计算

2. 浮点数

var num1 = 1.1;
var num2 = 0.8;
var num3 = .4; // 不推荐 注意:
1. 0.1 + 0.2 = 0.30000000000000004
2. 0.8 - 0.2 = 0.20000000000000007 这是基于IEEE754的数值进行计算的通病,有计算损耗
所以:请不要使用浮点数进行精确计算

3. NaN(Not a Number)

概念:表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)

3 - 'a'	// 不知道结果,NaN
4 * 'b' // 不知道结果,NaN
5 / 'z' // 不知道结果,NaN
4 + 'x' // 结果:4x(此时+ 是连接运算符)

4. 其他数据转换为数值

  1. Number转换规则

    字符串=>数值
    ''=>0
    纯数字字符串=>原型输出(***)
    普通字符串=>NaN(***)
    '0xf'=>15(支持十六进制字符串转换为十进制)
    布尔值=>数值(***)
    true=>1
    false=>0
    数值=>数值
    原型输出
    null=>0(***)
    undefined=>NaN(***)
    对象=>数值
    调用对象的valueOf()方法进行检测,检测结果是NaN
    继续调用对象toString()方法,再按前面的规则返回字符串值
  2. parseInt转换规则

    从第一个字符开始查找,直到找到第一个非法数字截止,找到的即是转换结果
    'abc'=>NaN
    '23ab'=>23
    true=>NaN
    null=>NaN
    '32.18'=>32
    undefined=>NaN
    特殊:
    '0xf'=>15(可以转换16进制) 进制之间的转换
    parseInt('10',2) // 2
    parseInt('10',8) // 8
    parseInt('10',10) // 10
    parseInt('10',16) // 16
    parseInt('AF',16) // 175
  3. parseFloat转换规则

    从第一个字符开始查找,直到找到第一个非法字符(除数字和第一个小数点)截止,找到的即是转换结果
    'abc'=>NaN
    '23ab'=>23
    true=>NaN
    null=>NaN
    undefined=>NaN
    25=>25
    '32.18'=>32.18

2.3 布尔值(Boolean)

  1. true:真

  2. false:假

    只有以下7个值转换为布尔值为假,其他为真

    ''    //空字符
    0
    0.0
    NaN
    false
    null
    undefined

2.4 未定义(undefined)

  1. 未定义的变量
  2. 定义但是未赋值的变量
// 定义但是未赋值
var str;
console.log(str); // undefined // 由typeof 检测未定义的变量
console.log(typeof abc); // undefined 如果不用typeof检测,直接打印输出一个未定义的变量,在JS中会直接报错

注意:两种未定义的情况

console.log(a);   //如果a在整个代码中都未定义过,那么JS报错a is not defined
console.log(a);  //程序都是顺序执行,虽然a还是未定义,但是整个代码中有a的存在,程序不会报错,执行出来是undefined
var a; 跟函数比较相似
浏览器在执行script代码的时候,先将script内部的函数和变量值全部"登记",然后才去执行具体的每一行代码
执行到console.log(abc)的时候,没有"登记"过abc,则abc直接报错,说没有定义该变量,而且终止了代码的执行
执行到第一个console.log(a)的时候,曾经"登记"过a变量,但是a变量在下面定义的,于是浏览器认为说a属于定义了但是未赋值的状态,就赋值为undefined, 不会报错
函数跟变量不一样的地方是:
函数提前登记之后,可以直接提前调用,但是变量值提前调用只是不报错,拿不到下面定义的值

2.5 对象(object)

  1. null

    console.log(typeof null);
  2. array数组

    var arr = ['a','b','c'];
    console.log(typeof arr);
  3. 对象

    var obj = {};
    console.log(typeof obj);

属性Object.keys(传入的对象); 并且以数组形式输出

var obj = {a:1,b:2,c:3}
Object.keys(obj) //['a','b','c']

2.6 函数(function)

 function demo(){}console.log(typeof demo);    // function

3. 运算符

3.1 算术运算符

1. 普通算数运算符: + - * / %

var num1 = 8;
var num2 = 5; console.log(num1 + num2); // 13
console.log(num1 - num2); // 3
console.log(num1 * num2); // 40
console.log(num1 / num2); // 1.6
console.log(num1 % num2); // 3 等价于 8/5=1...3 注意:当/ % 的除数为0时,5/0 5%0 测试结果为Infinity Infinity 无穷大的意思
当/ % 的除数为0时 测试类型是 typeof(5/0) 或typeof(5%0) 为NaN

2. 特殊算数运算符: ++ --

  • 认识++和--
// ++:让自身自增1
var num1 = 5;
num1++;
console.log(num1); // 6 var num2 = 8;
++num2;
console.log(9); // --:让自身自减1
var num3 = 4;
num3--;
console.log(num3); // 3 var num4 = 2;
--num4;
console.log(num4); // 1 总结:
1.i++,i-- 是先运算在+ -
++i,--i是先+ -,再运算
2. 不管++在变量之前,还是在变量之后,都是让自身增加1
不管--在变量之前,还是在变量之后,都是让自身减小1
  • 区分++/--在前和在后的区别
var num1 = 5;
// num1++:++在变量num1之后,先执行console.log,再执行自身自增1
console.log(num1++); // 5
console.log(num1); // 6 var num2 = 3;
// ++num2:++在变量num2之前,先执行自身自增1,在执行console.log
console.log(++num2); // 4
console.log(num2); // 4 // 举例
var num3 = 4;
var num4 = 8;
// 解释:num4++(++在后),num4会先和num3运算得出计算结果,然后自身再自增1为9,所以+运算的结果是12,运算结束num4的值变为9
console.log(num3 + num4++); // 12
console.log(num3,num4); // 4 9 总结:
2. ++在变量前,先自增1再运算
++在变量后,先运算再自增1 --在变量前,自减1再运算
--在变量后,先运算再自减1 ==============================================
注意:这里大家会考虑,都算完了,再自减1有毛线的作用? 减1之后,对之后的运算会产生影响,请看例子
var num5 = 1;
var num6 = 3;
console.log(num5 + num6++ + num6); // 1 + 3 + 4 = 8 第一个+运算执行的是:1 + 3
num6++:自身自增1
第二个+运算执行的是:4 + 4(中间num6++,num6变为了4)
==============================================

3.2 赋值运算符 = += -= *= /= %=

// 将4赋值给num变量
var num = 4;
console.log(num); // 4 // 将num1自增5,再赋值给自身
var num1 = 3;
num1 += 5; // 等价于 num1 = num1 + 5
console.log(num1); // 8 // 将num2自减5,再赋值给自身
var num2 = 14;
num2 -= 5; // 等价于 num2 = num2 - 5
console.log(num2); // 9 // 将num3自乘5,再赋值给自身
var num3 = 3;
num3 *= 5; // 等价于 num3 = num3 * 5
console.log(num3); // 15 // 将num4自除5,再赋值给自身
var num4 = 10;
num4 /= 5; // 等价于 num4 = num4 / 5
console.log(num4); // 2
console.log(typeof 7/0) //NaN // 获取num5跟5取余的结果,再赋值给自身
var num5 = 13;
num5 %= 5; // 等价于 num5 = num5 % 5
console.log(num); // 3
console.log(typeof 7%0) //NaN

3.3 比较运算符 == === != !== > < <= > >=

1. 相等比较:== ===

var num1 = 3;
var num2 = 3;
console.log(num1 == num2); // true var num3 = 4;
var num4 = 2;
console.log(num3 == num4); // false var num5 = 7;
var num6 = '7';
// ==:只比较值大小,不比较类型
console.log(num5 == num6); // true var num7 = 7;
var num8 = '7';
// ===:比较值和类型,都相等结果为true
console.log(num7 === num8); // false // 特例
console.log(null == undefined); // true
console.log(null === undefined); // false
null==0 //false
0==undefined //false

2. 不相等比较: != !==

var num1 = 4;
var num2 = 5;
console.log(num1 == num2); // false
// num1和num2不相等返回true
console.log(num1 != num2); // true var num3 = 3;
var num4 = '3';
console.log(num3 === num4); // false
// num3和num4值和类型有一个不相等返回true
console.log(num3 !== num4); // true

3. 大于小于比较: > >= < <=

var num1 = 5;
var num2 = 19;
console.log(num1 > num2); // false
// num1>num2成立或者num1==num2成立都可以返回true
console.log(num1 >= num2); // false console.log(num1 < num2); // true
// num1<num2成立或者num1==num2成立都可以返回true
console.log(num1 <= num2); // true

3.4 逻辑运算符

1. 逻辑与:&& - 两真为真,其余都为假

console.log(true && true)		// true
console.log(true && false) // false
console.log(false && true) // false
console.log(false && false) // false

本质是:

// 将&&两侧的值"隐式"转为布尔值进行判断
console.log(3 && 'a') // a
console.log('abc' && 23) // 23
console.log('abcd' && null); // null
console.log(0 && '么么哒') // 0
***console.log(undefined && null) // undefined***

***注意:

如果&&两侧都为真,那么以后面的为结果;
如果&&两侧都为假,那么以前面的为结果。

2. 逻辑或:|| - 两假为假,其余都为真

console.log(true || true);	// true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false);// false

本质是:

console.log(23 || 8);	// 23
console.log('ab' || null) // ab
console.log(undefined && '萌萌哒'); // 萌萌哒
console.log(null && undefined); // undefined

*注意:

如果||两侧都为真,那么以前面的为结果
如果||两侧都为假,那么以后面的为结果

3. 取反

console.log(!true);	// false
console.log(!false);// true

本质是:

console.log(!23);	// false
console.log(!null); // true
console.log(!0); // true

3.5 条件运算符(三元运算符)

var result = 布尔值 ? 布尔值为真走这 : 布尔值为假走这;

var result = 5 > 3 ? '婚姻大事全凭父母做主' : '小女子还想侍奉父母两年';
console.log(result); // 婚姻大事全凭父母做主

3.6 特殊的+:连接运算符

1.特殊1:+

var num1 = 3;
var num2 = 'a';
var num3 = 8; console.log(num1 - num2); // NaN
console.log(num1 * num2); // NaN
console.log(num1 / num2); // NaN // +两边有非数字'a',取连接运算
console.log(num1 + num2); // 3a
// +两边是纯数字,取加法运算
console.log(num1 + num3); // 11 var num4 = 5;
num4 += 13; // num4的值为18
num4 += 'abc'; // num4的值变为18abc

2. 特殊2:- * /

var num1 = 12;
var num2 = '5';
console.log(num1 - num2); // 7
console.log(num1 * num2); // 60
console.log(num1 / num2); // 2.4
console.log(num1 % num2); // 2 总结:
除+之外,其余的运算符,在进行纯数字运算的时候,正常运算

3.特殊的+

var num1 = '5';
// 将字符串类型的num1变为数字
console.log(+num1); // 5
console.log(+num1+12); // 17
console.log(3+ +num1); // 8 总结:
在纯数字字符串前多写一个+,可以将字符串类型的数字变为数值类型的数字

3.7 运算符优先级

12成员访问(obj.username)、数组访问(arr[1])、new(new Person)、函数调用(demo())
11后置递增(num++),后置递减(num--)
10取反(!) 前置递增(++num) 前置递减(—num) typeof void delete
9乘法(*) 除法(/) 取余(%)
8加法(+) 减法(-)
7< <= > >= in instanceof
6== != === !==
5逻辑与(&&)
4逻辑或(||)
3三元运算符(?
05-26 19:43