JS 基础知识
浏览器
浏览器控制台
1.Elements: 显示页面中的结构和样式(还可以临时修改)
2.Console: 可以运行代码,可以打印页面中代码的内容
3.Sources: 存放的是页面的静态资源文件
4.NetWork: 里边是所有的数据请求
浏览器的内核
- webkit (v8引擎)
- Chrome
- safari
- 手机浏览器
- 国产浏览器
- Gecko
- FireFox
- Prosto
- Opera
- Trident
- IE
- IE EDGE(Chrome mini)
js
js作为一门客户端开发语言,不仅要操作浏览器的某些功能,还要操作页面中的dom元素
- ECMAScript3/5(老版本) ;(6/7)(新版本):规定了js的语法、变量、操作语句等
- DOM:(document object
model)提供了一些js的属性和方法,用来操作页面中的dom元素 - BOM:(borwser object
model)提供了一些js的属性和方法,用来操作浏览器 JS创建变量的几种形式
注释 单行注释ctrl+/ 多行注释shift+alt+A
-1.var 创建一个变量(ES5)
-2.let 创建一个变量(ES6)
-3.const 创建一个常量 (不允许修改)(ES6)
-4.function 创建函数变量(ES5)
-5.import导入变量(ES6)
-6.class创建类(ES6)
-7.Symbol创建唯一值
js命名规范
- 严格区分大小
- 变量名由数字,字母,$,_,组成,不能以数字开头
- 遵循驼峰命名法(变量名的第一个单词首字母小写,以后每一个有意义的单词首字母大写) 起名 要有意义
- 不能以关键字或者保留字作为变量名
js的数据类型 =号后边使用
基本数据类型操作的是值,引用操作的是空间地址
-
基本数据类型
- number 数字类型 2 ,1, 2,-2,
- string 字符串"",
- boolean 布尔 true false
- null空对象指针
- undefined 未定义
- Symbol 唯一值
-
引用数据类型
- object对象
- 普通对象{name:‘xxxx’}
- 数组 []
- Math 数学对象
- Date 日期对象
- /^$/正则
- function函数
- object对象
js创建变量的几种形式
var
//创建变量a
var a = 12;
a = 13;
//打印变量a
console.log(a)
let 创建变量(ES6)
let c = 12;
c = 15;
const 创建常量(不允许被修改)ES6
const s = 12;
function 创建函数变量
function x(){
x = 12;
}
import 导入变量(ES6)
import r from './1.js';
class 创建类(ES6)
class F {}
Symbol 创建唯一值
let a = Symbol(10);
let b = Symbol(10);
console.log(a);
console.log(b);
console.log(a == b);(false//唯一值,ab不相等)
number数字类型
- 组成:有效数字
NaN(not a number)不是一个数,但是它是number数据类型的
NaN和谁都不相等,包括它自己
把其它数据类型转数字类型
Number(val)
把字符串转数字
- 只要字符串中出现了非有效数字,那结果就是NaN(第一个小数点不算,第一个-,+不算)
- 如果左右有空格会自动去掉,中间有空格会是NaN
- 空字符串转数字是0
把布尔转数字
- true转数字是1
- false转数字是0
- 把null和undefined转数字
- null转数字是0
- undefined转数字是NaN
把普通对象转数字,先把数据转换为字符串,再转换为数字
- Number({})
- 浏览器会自动把普通对象转换为字符串({}).toString()
- 所有的普通对象转字符串都是 '[object Object]'
- Number('[object Object]')
- 所有的普通对象转数字都是NaN
把数组转数字,先把值转换为字符串,再转换为数字
- 把数组转字符串是把左右两边的中括号去掉,替换为引号,然后里面每项做toString处理,然后拼接到一起,','不能丢
- Number([true,'1'])
- Number([true,'1'].toString())
- Number('true,1')
parseInt和parseFloat
- 把字符串转换为数字
- 从左到右依次查找有效数字,一旦发现非有效数字,立即停止查找,把找到的数字返回出去(paeseInt不可以识别小数点,parseFloat可以识别小数点)
-如果你要转换的值不是字符串类型的,先转换为字符串,类型再查找
-true、false、null、undefined、{}、NaN转都是NaN
-如果从一开始就是非有效数字,那结果就是NaN
let num = 3.1415.926;
console.log(paeseInt(num)) //3
console.log(paeseFloat(num)) //3.1215
let s = true;
console.log(parseInt(s)) // 'true' // NaN
console.log(parseInt([])) // '' NaN
console.log(parseFloat({})) // '[object Object]' NaN
isNaN(val)
- 检测一个值是否是一个非有效数字,如果是就是true,反之就是false
- (这个值如果是有效数字,那结果就是false,反之就是true
- 如果你要检测的值不是数字类型的,先转换为数字类型再检测
console.log(isNaN(3)) //false
console.log(isNaN(NaN)) // true
console.log(isNaN(true)) // false
console.log(isNaN(false)) // false
console.log(isNaN(undefined)) // true
console.log( isNaN( Number( isNaN(NaN) ) ) ) // true=>1=>false
console.log( isNaN( Number( parseFloat( isNaN({}) ) ) ) )
//true=>NaN=>NaN=>true
string字符串
- 所有单引号,双引号,反引号(ES6的模板字符串)包起来的都是字符串
- 天生自带一个length属性,代表字符串的长度或者个数
- val.toString( )
- 把number、boolean转字符串都是直接加引号
- null 和undefined不能使用.toString方法
- 把普通对象转字符串 => { }=>'[object Object]'
- 把数组转换为字符串 => [ ]=>''
字符串拼接
四则运算:在四则运算中,除了加法,其余的都是正常运算
- 在运算过程中,如果相运算的值不是数字类型的,先转为数字类型再运算
- 在运算过程中,如果出现了NaN,那结果就是NaN
- 在加法中有两种情况:从左到右依次计算——————————括号里面如果是引号就不会计算
-
正常运算:
- 字符串拼接:如果加号一旦跟引号相遇了,那就是字符串拼接,不再是正常的运算
- 如果拼接的过程当中,引用数据类型要转数字(转数字的过程中先转字符串,然后就变成基本字符串拼接,不会再继续转为数字)
console.log(true+true) // 1+1 2
console.log(undefined+true) // NaN+1 NaN
console.log(undefined+'true') //'undefinedtrue'
console.log(1+true+undefined+'true'+true)
//1+1>2 2+NaN>NaN NaN+'true'>'NaNtrue' 'NaNtrue'+true>'NaNtruetrue'
console.log(true+10/true - [{}] )
//true+10>11 11-[{}]>11-'[object Object]'>11-NaN NaN
把true转换数字用四则运算转
console.log(true-0/true+0/true*1/true/1) // 1
同理把null转换为数字 0
boolean布尔(true false)
把其他数据类型转布尔
- Boolean(val)
- 把其他数据类型转布尔有且只有NaN、null、undefined、0、''、这五种是false,其余的都是true
把布尔转布尔还是本身
- !:把其它数据类型转布尔,然后取反
- !!:把其它数据类型转布尔,然后取反再取反(相当于Boolean())
Boolean(true) // true
Boolean(false) // false
Boolean(NaN) // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(0) // false
Boolean('') // false
Boolean(' ') // true
null和undefined
- 它俩都代表空
- null:它一般都是意料之中的(一开始我们不知道值,但是以后知道了,再给它重新赋值)
- undefined:它也是空,但是一般都是浏览器的默认机制定义的(意料之外的)
引用数据类型({},[])
普通对象{ }
- 每一个对象都由大括号包裹,里面是0到多个键值对组成,用逗号隔开
- 每个键值对由属性名和属性值组成(中间用冒号连接)
- 属性名是由字符串和数字组成(''可以省略)
- 属性值是js数据类型一种
let monkey = {
name: 'sunWuKong',
age: null,
speed: 10000,
3:[]
}
对象的增删改查
查:
对象名.属性值/对象名['属性名']
如果属性名是数字,不能用对象名.属性名的方式去获取对应的值
console.log(monkey.name) // 'sunwukong'
console.log(monkey['name']) // 'sunwukong'
console.log(monkey[3]) // []
增:
对象名.属性名= 'xxx'
改:
对象名.属性名 = 'xxx'
如果属性名存在,就是修改属性值,如果没有就是新增
删:
假删除
对象名.属性名 = null;
真删除
delete 对象名.属性名
数组 [ ]
- 数组由中括号包裹,里面存放的是每一个属性值
- 属性名是浏览器内定的,从0开始依次递增,它代表属性值的位置=>索引
- 天生自带一个length属性,属性值是数组的长度
- 不要用delete删除数组,因为会改变数组从0开始依次递增的顺序
console.log(ary.length) // 打印ary数组的长度
console.log(ary[0]) //打印ary数组的第一个属性值
console.log(ary.[ary.length-1]) //打印ary数组的最后一项
console.log(ary.[ary.length] = 'sss') //给ary数组新增一项
ary.length = 4 //改变ary数组的长度,如果为0,则变为空数组
判断里数据类型的比较规则
- ==:是两个值进行比较(等于) 会默认先进行数据类型之间的转换,再比较
- !==:是两个值进行比较(不等于)
- ===:是两个值进行比较(绝对比较) 不进行数据转换 直接比较 必须完全相等
- %取余(mo) 4%4 0
判断详悉
数字 跟字符串、布尔、对象 比较
字符串、布尔、对象要转为数字
字符串 跟布尔 跟对象
布尔值转数字 字符串转数字
对象转成字符串,然后进行比较
布尔 跟对象
对象转为字符串,字符串转为数字。布尔直接转数字,然后比较
对象 跟对象
永不相等 为false
null == undefined //true
null只跟undefined和自己相等,undefined只跟null和自己相等
NaN ==NaN //false
if(1==1){
console.log(100);
}else{
console.log(200);
}
==:是两个值进行比较,会默认进行数据类型之间的转换再比较;
数字 == 字符串
字符串转换成数字,然后和数字进行比较;
console.log(1 == '1') //true
console.log(0 == '0') //true
console.log(1 == '1px') //false
console.log(1 == '[1]') //false
数字 == 布尔
true=> 1 false=>0
console.log(1 == true) //true
数字 == 对象(对象数据类型)
对象先转成字符串,然后再转成数字
NaN和自己不相等,普通对象和数字比都是false
console.log(NaN == {}) //false
对象 == 对象
在JS中,只要遇到{ },都会开辟一个新的空间地址;空间地址不同就false;
当浏览器解析代码时,会形成两个虚拟的内存,分别是栈内存和堆内存
栈内存提供代码的运行环境,并且存储基本数据类型值
堆内存存储引用数据类型的值
对象 == 字符串
对象转成字符串进行比较
console.log(({name:1}).toString); //'[object Object]'
console.log('' == ' ') //false
let str = '';
let str1 = ' ';
console.log(str.length) //0
console.log(str1.length) //1
对象 == 布尔
对象转字符串,字符串转数字,布尔直接转数字,然后进行比较
console.log([] == false) //true
console.log(![] == false) //true 直接把[]转为布尔值
console.log([] == ![]) //true
console.log([] !== []) //true
布尔 == 字符串
布尔转数字,字符串转数字
console.log(false == '') //true
console.log(true == '1px') //false
console.log(null == undefined) //true
console.log(NaN == NaN) //false
===:绝对比较,不进行数据类型转换,只要数据类型不一样,返回false
//null和undefined和其他值都不等