JS basics
Browser
Browser console
1. Elements : display structure and style (You can also temporarily modify) the page
2. Console : you can run the code, you can print the contents of the code page
3. Sources : static resource file is stored in the page
4. NetWork : inside is All data requests
Browser kernel
- webkit (v8 engine)
- Chrome
- safari
- Mobile browser
- Domestic browser
- Gecko
- FireFox
- Prosto
- Opera
- Trident
- IE
- IE EDGE(Chrome mini)
js
js as a client development language, not only to operate certain functions of the browser, but also operating dom elements in the page
- ECMAScript3 / 5 (old version); (6/7) (new version): specifies js syntax, variables, operators, statements, etc.
- The DOM: (Document Object
Model) provides a number of properties and methods js, the operation for the page elements dom - BOM: (borwser Object
Model) provides a number of properties and methods of js, used to operate several forms of the browser to create JS variable
Note single line comment ctrl + / multi-line comment shift + alt + A
-1.var 创建一个变量（ES5）
-2.let 创建一个变量（ES6）
-3.const 创建一个常量 (不允许修改)（ES6）
-4.function 创建函数变量（ES5）
-5.import导入变量（ES6）
-6.class创建类（ES6）
-7.Symbol创建唯一值
js naming convention
- Strict distinction between the size of the
- Variable names of numbers, letters, $, _, composition, can not start with a number
- CamelCased nomenclature (lowercase first letter of the first word in the variable name, after every meaningful word capitalized) to be meaningful named
- Keyword or can not be reserved words as variable names
Js behind using data type number =
Operation is the basic data type value, a reference operation of the address space
-
Basic data types
- Type 2 digital number, 1, 2, -2,
- string string "",
- Boolean true false boolean
- null null object pointer
- undefined undefined
- Symbol unique value
-
Reference data types
- Object object
- Common Object {name: 'xxxx'}
- Array []
- Math mathematical objects
- Date Date Object
- / ^ $ / Regular
- function function
- Object object
js create a variable of several forms
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 numeric types
- Composition: Effective digital
NaN (not a number) is not a number, but it is the number of data types
NaN and who are not equal, including its own
The other data type to digital type
Number(val)
The string-to-digital
- 只要字符串中出现了非有效数字，那结果就是NaN(第一个小数点不算，第一个-，+不算)
- 如果左右有空格会自动去掉，中间有空格会是NaN
- 空字符串转数字是0
The Boolean-to-digital
- true转数字是1
- false转数字是0
- 把null和undefined转数字
- null转数字是0
- undefined转数字是NaN
The generic object-to-digital, data is first converted to a string, and then converted to digital
- Number({})
- 浏览器会自动把普通对象转换为字符串({}).toString()
- 所有的普通对象转字符串都是 '[object Object]'
- Number('[object Object]')
- 所有的普通对象转数字都是NaN
The array to a digital, first value to a string, and then converted to digital
- 把数组转字符串是把左右两边的中括号去掉，替换为引号，然后里面每项做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 string
- 所有单引号，双引号，反引号（ES6的模板字符串）包起来的都是字符串
- 天生自带一个length属性，代表字符串的长度或者个数
- val.toString( )
- 把number、boolean转字符串都是直接加引号
- null 和undefined不能使用.toString方法
- 把普通对象转字符串 => { }=>'[object Object]'
- 把数组转换为字符串 => [ ]=>''
String concatenation
四则运算：在四则运算中，除了加法，其余的都是正常运算
- 在运算过程中，如果相运算的值不是数字类型的，先转为数字类型再运算
- 在运算过程中，如果出现了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 Boolean (true false)
Turn to other data types Boolean
- 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：它也是空，但是一般都是浏览器的默认机制定义的（意料之外的）
Reference data types ({}, [])
Common Object {}
- 每一个对象都由大括号包裹，里面是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 对象名.属性名
Array []
- 数组由中括号包裹，里面存放的是每一个属性值
- 属性名是浏览器内定的，从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，则变为空数组
Determine the type of data in comparison rules
- ==：是两个值进行比较（等于） 会默认先进行数据类型之间的转换，再比较
- !==：是两个值进行比较（不等于）
- ===：是两个值进行比较（绝对比较） 不进行数据转换 直接比较 必须完全相等
- %取余（mo） 4%4 0
Analyzing know in detail
Digital with string, boolean, object comparison
字符串、布尔、对象要转为数字
With Boolean objects with string
布尔值转数字 字符串转数字
对象转成字符串，然后进行比较
Boolean objects with
对象转为字符串，字符串转为数字。布尔直接转数字，然后比较
Objects with objects
永不相等 为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和其他值都不等
