javascript基础(一)--(数据类型,运算符,语句等)

JS 包含三部分

核心ECMASCRIPT
DOM
BOM

JS 注释

单行注释 // 被注释的这一行,它不会被执行
多行注释 /* 注释多行 */
注 \n 在js文本中(弹框等)的换行,JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性

JS 三种弹框

alert(“弹出框”)
confirm(“提示信息”) 返回值为true或false
prompt(“提示信息”,”默认值”) 点击确定返回输入的字符串

JS 输出

document.write() document.writeln()输出之后会加空格,如果在文档已完成加载后执行 document.write，整个HTML页面将被覆盖
consloe.log() 控制台输出信息
console.time(1) code console.timeEnd(1) 用来标记循环耗时
console.table(obj) 将json对象按表格输出

JS 变量

以字母下划线 $开头不能由数字开头不能使用关键字
对大小写敏感(age和AGE是不同的变量)
当给变量分配文本值时,应该用双引号或单引号包围这个值。
当给变量赋的值是数值时,不要使用引号.如果用引号该值会被作为文本来处理
声明多个变量用逗号隔开(var a,b,c)
声明变量的时候没有给它赋值。只是声明，没有管它，没有给它赋值。
var name;
alert(name); //会弹出undefined;
变量存放在栈里键盘上的字符,数字,特殊符号放在常量池对象放在堆里面
局部变量会在函数运行以后被删除全部变量会在页面关闭后被删除

JS 数据类型 (es6之前)

基本数据类型
一 number 数值型 infinity 无穷大数字 10/0 infinity
二 string 字符串必须用引号引起来
三 bool 布尔型 true和false 布尔值直接使用千万不要加上引号
四 function 函数
五 undefined 未定义
复合数据类型
六 object 对象 null 对象{} 数组[]

注意问题

null   没有这个对象或无值(空)  通过给一个变量赋 null 值来清除变量的内容
undefined  有声明而未赋值的变量
null==undefined;   //true
isNaN()判断是否是NaN(判断之前先用Number()转换)
NaN   不是一个数字 但是它是number数字型
NaN 和 NaN  自己不相等 是布尔值false

显式类型转换

一 Number()  转换成数值型
ex:var a = '110'
   var b = Number(a)
   console.log(b)  // 110
   console.log(typeof b) //number
ex:var a = '110px'
   var b = Number(a)
   console.log(b) //NaN 不是一个数字
   console.log(typeof b) // number
Number("")-->0   Number(null)-->0    Number([])-->0
注:空字符串 空数组和null 进行Number()转换时 返回0
   对象 函数 undefiend 使用Number()时 都为NaN
   当数组有且只一个元素,而这个元素是数值时 Number()转换成该数值
   数组不是一个元素时不管是什么Number()转换都是NaN
二 parseInt() 强制取整  parseFloat()  转换成小数
   parseInt(b,10)  //第二个参数表示进制
   对字符串或数组的第一个字符进行判断,不是数字字符将停止转换
   除了加号/空格/减号(负数)外的任何非数字都将得到NaN)
ex:var a = '100px';
   var b = parseInt(a);
   console.log(b); //100
   console.log(typeof b);//number
   当数组第一个元素是数字parseInt()或parseFloat()将数组第一个元素转换成数字
ex:console.log(Number(['a']))         //NaN
   console.log(Number([2,'2',2]))   //NaN
   console.log(Number(['2']))         //2
   console.log(parseInt(["2",3,4]))   //2
   console.log(parseInt(['a',2]))       //NaN
三 转换为布尔值 Boolean(变量) 或  !!变量

隐式类型转换
① +(拼接) //100 + '1' => '1001' 变字符串
② - * / % ++ -- // '100'-2 => 98 变数字
③ > < // (var a='10')<(var b=4) 转换成布尔值会用number转换
④ 字符串比较大小时比较第一个字符的ASCII码
⑤ !取反 把右边的数据类型转换成布尔值

JS 运算符

算术运算符 + - * / % ++ --
++ -- 自增或自减不支持布尔型对于字符串自增或自减属于升序或降序
a++或a-- 先用(赋值)再加结果不变加不加()运算结果都一样
++a或--a 先加再用(赋值) 结果加1或减1

var a = 1
// 无论是否加括号都是  先执行 3 + a  然后在 a进行自增 a+1
// console.log(3 + a++) // 4  a => 2
console.log(3 + (a++)) // 4  a => 2
var m = 1
// 无论是否加括号都是  先执行 m自增 m+1  然后在和3相加
// console.log(3 + ++m) // 5  m => 2
console.log(3 + (++m)) // 5  m => 2

赋值运算符 = += -= *= /= %= 把右边的值赋给左边的变量或常量
比较运算符 < > <= >= == != === !==
比较运算符的结果都是一个布尔型
恒等于===值和类型都相同非恒等于!==数值不相等或类型不相同
==和!=在比较之前首先让双方的值做隐士类型转换
在简单基本比较运算符中值和引用都要一样
逻辑运算符
and或&& 逻辑与当两边都为true时，才返回true，否则返回false
or或|| 逻辑或只要有一个为true时，返回true，都为假时才返回false
xor 逻辑异或当两个操作数一个为真一个为假时，才返回true
！ 逻辑非单一操作数为true，则返回false
位运算符
对二进制位从低位到高位对齐后进行计算
& 按位与 | 按位或 ^ 按位异或 ~ 按位取反 << 向左移位 >> 向右移位
注: 按位运算不会出现短路

三元运算符(条件运算符)
表达式1？表达式2：表达式3
如果表达式1为真则执行表达式2，表达式1为假则执行表达式3

一. 在取模%运算符中  正负号取决于被除数的正负
ex: var a = 5,b = -2
    console.log(a%b)  //1
ex: var a = -5,b = -2;
    console.log(a%b)  //-1
在js中拼接用"+"  从左往右碰到第一个非数值之后就理解为字符串拼接
在JS中任何类型的值都可以转换成逻辑布尔值
假 ""(空字符串) null undefined  false NaN 0为假,其他都为真
真 函数  对象  非空字符串  非0的数字  数组  true都为真
注:在js中逻辑运算符(短路) 返回的是最早能判断表达式结果的那个值
二. 对于&&  如果第一个值是false 则整个表达式都是false 并返回第一个值。
如果第一个值是true  则直接返回最后一个值不管真假
三. 对于||  如果第一个值是false 则看后面的条件是否为真,找到真值就将其返回
如果到最后也没找到真值，则返回最后一个值。
如果第一个值是真就直接返回第一个
ex var a = false
var b = 6
var c = true
var d = a || b && c
console.log(d)  //true
ex var a = false
var b = 6
var c = null
var d = a && b || c
console.log(d) //null
四. void取消返回值

delete删除对象的属性或数组中的元素
删除数组元素时，并没有改变数组的长度，只是留下了一个undefined的值

ex: delete obj.a delete obj["a"] delete array[0]
var arr = [1, 2]
delete arr[1]    //true
console.log(arr) //[empty, 2]
arr.length       //2

逗号表达式
一般形式是：表达式1，表达式2，表达式3……表达式n
逗号表达式的求解过程是：先计算表达式1的值，再计算表达式2的值，……一直计算到表达式n的值。
最后整个逗号表达式的值是表达式n的值。看下面几个例子：

x = 8 * 2, x * 4 /*整个表达式的值为64，x的值为16*/
(x = 8 * 2, x * 4), x * 2 /*整个表达式的值为128，x的值为16*/
x = (z = 5, 5 * 2) /*整个表达式为赋值表达式，它的值为10，z的值为5*/
x = z = 5, 5 * 2 /*整个表达式为逗号表达式，它的值为10，x和z的值都为5*/
// 逗号表达式用的地方不太多，一般情况是在给循环变量赋初值时才用得到

in运算符
in运算符它的左操作符是一个字符串或可以转化为字符串，右操作符是一个对象。如果右侧的对象拥有一个名为左操作数值的属性名，那么表达式返回true

ex:var point = { x:1, y:1 }
"x" in point // true
"z" in point // false 对象不存在z属性
"toString" in point // true 对象继承了toString方法
var data = [ 7,8,9 ]
"0" in data // true  数组包含"0"属性
1 in data   // true  数字转换为字符串
3 in data   // false 没有索引为3的元素

typeof运算符(es6之前)
返回表示操作数类型的字符串 typeof(xx) typeof xx

typeof(undefined) // "undefined"
typeof(null) // "object"
typeof(1.2) // "number"
typeof(NaN) // "number"
typeof('字符串') // "string"
typeof(function fn(){}) // "function"
typeof({}) // "object"

JS 语句

条件控制语句

// if语句
if (expr(真或假)) {
  statement
}
// 只有一条语句时，大括号可以省略
if(expr) statement
// if...else语句
if (expr) {
  statement
} else {
  statement
}
// if...elseif语句
if (expr1) {
  statement1
} else if (expr2) {
  statement2
} else {
  statement3
}
// switch...case语句
switch(变量){
  case 值1:
    statement1
    break
  case 值2:
    statement2
    break
  case 值3:
    statement3
    break
  default:
    statement
}
a. switch(变量)  变量的类型只能是数字或字符串
b. case中值的判断必须是 === 类型和数值都得相等
c. switch case 适合单个值匹配  elseif 适合判断范围时使用
d. break是退出switch使用的,如果需要同时匹配多个值可以使用多个case而不加break
e. default无论放在开始还是结束,不会影响程序执行,先执行case 在执行 default 放在末尾可以不加break  放在开头必须加break

循环控制语句用于遍历对象或数组

// while循环语句
// 表达式为true时  才执行循环体
while(expr){
  statement;
}
//  for语句
for(expr1;expr2;expr3){
  statement;
}
// expr1变量的初始赋值,expr2为循环条件,expr3为变量递增或递减
// 用于已知循环次数多条件循环操作
// do...while循环语句
// 先执行循环体,在判断表达式,成立再执行循环体
do {
  statement
} while(expr)
// for...in 循环语句  遍历对象所以可枚举的属性（enumerable）
for(var key in json){
  console.log(key+'-->'+json[key]);
}

跳转控制语句常用于跳出for循环或foreach循环
break语句 break n 指定要跳出几层循环结束整个循环结构
continue语句 continue n 指定要跳出几层循环只能终止本次循环继续下一层循环

JS中的保留字

1
2
3

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

JS运算符优先级

// 优先级 由高到底
//运算符         //描述
. [] ()         字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建
* / %           乘法、除法、取模
+ - +           加法、减法、字符串连接
<< >> >>>       移位
< <= > >= instanceof 	小于、小于等于、大于、大于等于、instanceof
== != === !==   等于、不等于、严格相等、非严格相等
&               按位与
^               按位异或
|               按位或
&&              逻辑与
||              逻辑或
?:              条件
= oP=           赋值、运算赋值
,               多重求值

JS 定时器

// 设置定时器 (目前最小时间14毫秒)
1.setInterval  //每隔多少秒执行一次 不清除会一直执行下去
ex: setInterval(function(){ console.log('定时器例子')}, 3000)
2.setTimeout   //隔多少秒后执行(只执行一次)
ex: setTimeout(function(){ console.log('定时器例子')}, 3000)
// 清除定时器  最好在使用定时器的时候先清除上一次的定时器
clearInterval(t) / clearTimeout(t)
ex:var num = 0;
var t = setInterval(function(){
  num++
  console.log('123')
  if(num == 2){
    clearInterval(t)
  }
},3000)
//问题:  在点击事件中执行多次停不下来   在每次开启时,先清除定时器
3.定时器有n个参数 setTimeout(function(num){ console.log(num)}, 1000, 123)   //123

JS 小知识

定时器有多个参数, 返回值timer是整数数字

var timer = setTimeout(function(num){
  console.log(num) // 123
}, 1000, 123)
console.log(timer) // 61834

利用\进行多行字符串的拼接

1
2
3

obj.innerHTML='<div>这行</div>\
              <span>文字</span>\
              <p>标签</p>'

console.log('%c'+带样式得输出,'font-size:50px;color:red') 可以输出样式,图片等
typeof写法 typeof arr等价于typeof(arr) 还有instanceof和in

嵌套for循环跳出循环

for(var i = 0; i < 5; i++){            a:for(var i = 0; i < 5; i++){
  for(var j = 0;j < 1; j++){               for(var j = 0; j < 1; j++){
    if(i == 3){                              if(i == 3){
      break;                                   break a
    }                                        }
    console.log(i)                           console.log(i)
    //0 1 2 4                                //0 1 2
  }                                        }
}                                        }

call(obj) 改变this指向不写参数默认指向window
obj.getBoundingClientRect() 获取元素上下左右宽高6个值
元素尺寸：对应jQuery中的$(xx).outerWidth()和$(xx).outerHeight()方法，包括padding和border，也就是元素的border-box的尺寸。在原生DOMAPI中对应的是offsetWidth和offsetHeight,所以,有时候也称为元素偏移尺寸。
元素内部尺寸：对应jQuery中的$(xx).innerWidth()和$(xx).innerHeight()方法，表示元素的内部区域尺寸，包括padding但不包括border，也就是元素的padding-box尺寸。在原生的DOM API中
对应clientWidth和clientHeight，所以，有时候也称为元素可视尺寸。
元素外部尺寸：对应jQuery中的$(xx).outerWidth(true)和$(xx).outerHeight(true)方法，表示元素的外部尺寸，不仅包括padding和border，还包括margin，也就是元素的margin-box尺寸。
没有相对应的原生的DOMAPI

JSON

json 是存储和传输数据的格式用于服务器端向网页传递数据
json 英文全称JavaScript Object Notation
json 格式仅仅是一个文本,文本可以被任何编程语言读取及作为数据格式传递

json语法规则

a.数据为键/值对      "firstName":"John"  // 属性名最好加上双引号
b.并列数据由逗号分隔  "firstName":"John", "lastName":"Doe"
c.大括号保存对象      {"firstName":"John", "lastName":"Doe"}
d.方括号保存数组      "employees":[{"firstName":"John", "lastName":"Doe"}]
var arr={"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]}
// JSON取值
arr.employees[0].firstName  //John
arr["employees"][0].firstName  //John

Json遍历for in(不能使用for循环),json是没有长度的,json.length会得到undefined

var json1 ={
  'url':['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],
  'text':['这是第一张图片','这是第二张图片','这是第三张图片','这是第四张图片']
}
for(var attr in json1){
  for(var i=0;i<json1[attr].length;i++){
    console.log(json1[attr][i])
  }
}

json字符串转换为javascript对象

// 创建javascript字符串字符传为JSON格式的数据
var txt='{"employees":['+
  '{"firstName":"John", "lastName":"Doe"},'+
  '{"firstName":"John", "lastName":"Doe"},'+
  '{"firstName":"John", "lastName":"Doe"}]}';
// 使用JSON.parse() 将json字符串转换为javascript对象
var obj = JSON.parse(txt)
// 获取值并输出
console.log(obj.employees[1].firstName+"--"+obj.employees[1].lastName)
console.log(obj["employees"][2].firstName+"--"+obj["employees"][2].lastName)