[JavaScript知识库]javascript入门第一篇(数据类型与作用域详解)

数据类型(7大类):

Number(数值型)??

字符串型(String)

布尔值型(Boolean)

undefined

null

对象(Object)?

symbol? ??

注意:

在这里说明一下undefined 它是用来表明用户定义了变量(即初始化), 默认值就是undefined

Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

字符串:

????????var str = 'hello world!';
????????console.log(str[1]); //e
????????str[1] = 'x'; //无法改写?

类型分类: 基础的数据类型存储在栈内存中, 对象类型存储在堆内存中

这里一定要注意浮点型的计算,因为js本身不是专门用于计算的一个语言, 所以在进行浮点数计算的时候,容易造成一定的误差.

*数值范围:

无穷大: Infinity??

无穷小: -Infinity

数值判断:

NaN:?

not a number 表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

简洁点说就是除了拼接字符串以外, 其他要是遇上数字与非数字的符号进行逻辑运算, 都会出现NaN的情况.

isNaN:

英文名为: is not Number(不是一个数字), 并且NaN进行任何的数字计算, 也是NaN.

接下来介绍一个新的关键字typeof:

typeof是一个弱判断类型,用它可以来判断1 => 'number'? ?true => 'boolean'? ,? 但是它之所以是弱判断类型,正是因为它无法非常准确的识别出用户输入的数据具体是什么类型! 比如说: 我用typeof 去判断一个[1,2,3] 这样子一个数组的时候, 它所识别出来的是'object', 而这对我们开发者来说就不是很友好了.

例如:

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
typeof undefined //"undefined"
typeof null // "object"? 这点要注意

下一个关键词 isFinite:

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true,? 这边是因为null 转换成了0
isFinite(-1) // true

算术运算符

• 加法运算符：x + y

• 减法运算符： x - y

• 乘法运算符： x * y

• 除法运算符：x / y

• 指数运算符：x ** y

• 余数运算符：x % y

• 自增运算符：++x 或者 x++

• 自减运算符：--x 或者 x--

• 数值运算符： +x

• 负数值运算符：-x

逻辑运算符

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
! ?非 ?取反

关系运算符

< ?> ?>= ?<= == != === !==

var result = '55' == 55; ??? ?// true
var result = '55' === 55; ?? ?// false 值相等，类型不相等
var result = 55 === 55; ?? ?// true

赋值运算符

= += -= *= /= %=

二进制运算符:

异或运算符 ^

一般可以用来做开关或者倒值
var a = 33;
var b = 66;

a ^= b, b ^= a, a ^= b;

a // 66
b // 33

否运算符 ~:

一般用于 双否 取整
~~ 13.33 ? ?// 13? ?两次取否之后就可以取整了

转换成字符串类型

有两种方式:

1.用Object.toString()

例子:?

var num = 5;
console.log(num.toString());

2.用String()方法

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

转换成数值类型:

Number(Obj)

Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

parseInt(string,radix)

parseFloat(string)

+，-0等运算

var str = '500';
console.log(+str);?? ??? ?// 取正
console.log(-str);?? ??? ?// 取负

转换成布尔类型:

''(空字符串) null undefined NaN 0 会转换成false 其它都会转换成true

隐式转换

1. 如果包含的是有效数字字符串或者是有效浮点数字符串，则会将字符串转换(Number())为数值，再进行逻辑操作，返回值的类型是：number类型。

2. 如果是boolean类型，则先会把true或者false转换为1或者0，再进行逻辑操作，返回值的类型是：number类型。

3. 如果是null类型，则先会把null转换为0，在进行逻辑操作，返回值的类型是：number类型。

4. 如果是undefined，则先会把undefined转换为NaN，再进行加减操作，返回值的类型是：number类型。

5. 如果是对象，则先会通过对象的valueOf()方法，进行转换，如果返回的是NaN，调用toString()方法，在进行前面的操作，返回值的类型是：number类型。（注：空数组[]会返回0，在进行加减操作，空对象则会返回NaN）。

逻辑操作符中的隐式转换规律

注：只有undefined、null、NaN、0、空字符串会被转换为false，其余都为true

逻辑操作符一般用于语句判断中。通过判断结果返回的值进行后面的语句操作。

1. 逻辑非(!)操作符：首先会通过Boolean()函数将其操作值转换为布尔值，然后求反。

2. 逻辑与(&&)操作符：如果第一个值经过Boolean()函数转换后为true，则返回第二个操作值，否则返回第一个操作值。如果有一个操作值为null这返回null，如果有一个操作值为undefined，则返回undefined，如果有一个值为NaN，则返回NaN。

3. 逻辑或(||)操作符：如果第一个值经过Boolean()函数转换为false，则返回第二个操作值，否则返回第一个操作值。 （注：逻辑操作符的运算为短路逻辑运算：前一个条件已经能够得出结果后续条件不再执行！）

关系操作符的隐式转换规律

(关系操作符的操作值也可以是任意类型)：

1. 如果两个操作值都是数值，则直接比较大小。

2. 如果两个操作值都是字符串，则字符串进行其Unicode编码进行比较。

3. 如果一个操作值是数值，则另一个值转换为数值进行比较。

4. 如果一个操作值是对象，则调用对象的valueOf()和toString()方法，然后再进行上述比较。

5. 如果一个操作值是布尔值，则将布尔值转换为数值再进行比较。 (注：NaN和任何值都不相等，包括自己，同时它与任何类型比较都会返回false。)

相等操作符==和===的隐式转换规律：

1. 布尔值、字符串和数值进行比较，会先将其转换为数值再进行比较。

2. null和undefined比较是相等的，但不是全等的。

3. NaN与任何值都不相等，都会返回false。

注意这里有个坑: null == 0? 返回的是false? ?而null >= 0 返回的是true

数组

数组的创建方式:

1.

var arr = new Array(3); //只写一个参数,创建一个长度为3的数组 , 数组中每一项都为 空置empty [empty,empty,empty]

2.
var arr = new Array(1,2,3,4); //多个参数 ?会生成对应参数个数与内容的数组 [1,2,3,4]

也可以通过字面量的形式去创建数组:

例如: var newArr = [1, 2, 3, 4]

获取数组的属性:

arr[0]

遍历数组:

for(var i = 0, item; item = arr[i++];) console.log(item);? ?

for(var key in obj)

for(var value of arr)

数组元素赋值:

var arr = ['red', 'green', 'blue'];

arr[2] = 'yellow'; //给下标为2的数组元素赋值 如果该元素本身有值会进行覆盖

arr[3] = '#368'; // 给下标为3的数组元素赋值 如果该元素不存在就新增

arr //["red", "green", "yellow", "#368"]

arr[5] = '#f60'; //如果跨位进行赋值 空位显示 empty (空置)

arr //?["red", "green", "yellow", "#368", empty, "#f60"]

数组类型判定与隐式转换

var arr = [1,2,3];

typeof arr //'object'

Number(arr) //NaN

String(arr) // '1,2,3'

Bollean(arr) // true

[] == [] //false

arr + '海牙' //'1,2,3海牙'

arr / 2 // NaN

arr + [] // '1,2,3'

[] + [] //''

[2] ?- 1 //1

[1,] ?- 1 //0

[1,2] ?- 1 // NaN

!![] // true

数组的基础方法:

1.isArray

用法: Array.isArray([1, 2, 3])

返回布尔类型的值

2.join(separator)

作用: 方法将一个数组的所有元素进行拼接, 拼接成一个字符串

const elements = ['火', '空气', '水'];

console.log(elements.join());
// "火,空气,水"

console.log(elements.join(''));
// "火空气水"

console.log(elements.join('-'));
// "火-空气-水"

参数

separator 可选 指定分隔符号 该参数默认值为","

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

3.push(element1,...,elementN)

作用:?方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

elementN 可选多个参数
参数会添加到数组末尾

当调用该方法时，新的 length 属性值将被返回。

4.unshift(element1,...,elementN)

作用:?方法将一个或多个元素添加到数组的前端，并返回该数组的新长度。

elementN 可选多个参数
参数会添加到数组前端

当调用该方法时，新的 length 属性值将被返回。

5. pop()

方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

从数组中删除的元素(当数组为空时返回undefined)。

6. shift()

方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

从数组中删除的元素; 如果数组为空则返回undefined 。?

7.slice() 俗称浅拷贝

原始数组不会发生改变

返回值:?一个含有被提取元素的新数组。

arr.slice([begin[, end]]) //begin 和end都是可选参数
如果不传参 默认切割整个数组
begin 可选
? ? 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
? ? 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二?? ??? ?个元素到最后一个元素（包含最后一个元素）。
? ? 如果省略 begin，则 slice 从索引 0 开始。
? ? 如果 begin 大于原数组的长度，则会返回空数组。

end 可选
? ? 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 ?? ??? ?end 的所有元素（包含 begin，但不包含 end）。
? ? slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
? ? 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中?? ??? ??? ?的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
? ? 如果 end 被省略，则 slice 会一直提取到原数组末尾。
? ? 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

8.concat(arr)

格式: newArr.concat(arr)

作用:

合并方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

例子:

var plants = ['西红柿', '黄瓜', '芹菜', '豆角', '土豆'];
var otherPlants = ['冬瓜', '韭菜']
var newPlants = plants.concat(otherPlants);

console.log(newPlants);?
//['西红柿', '黄瓜', '芹菜', '豆角', '土豆', '冬瓜', '韭菜']

返回值:

一个合并后的新数组。

9.indexOf(element, fromIndex)

作用:?方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

参数

arr.indexOf(searchElement[, fromIndex])

searchElement
要查找的元素

fromIndex 可选
开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

返回值:

首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

冒泡排序:

?var arr = [4, 6, 3, 2, 7, 8, 1, 4, 5, 9];

? ? //冒泡排序

? ? for(var i = 0, len=arr.length; i < len - 1; i++)

? ? ? ?for(var j = 0; j < len - i - 1; j++) {

? ? ? ? ?if(arr[j] > arr[j + 1]) {

? ? ? ? ? ?var temp = arr[j] ^ arr[j + 1];

? ? ? ? ? ?arr[j + 1] ^= temp;

? ? ? ? ? ?arr[j] ^= temp;

? ? ? ? ?}

? ? ? ?}

? ? console.log(arr);

选择排序:

var arr = [4, 6, 3, 2, 7, 8, 1, 4, 5, 9], len = arr.length;

? ? //选择排序

? ? for(var j = 0; j < len; j++) {

? ? ? var minIdx = j;

? ? ? for(var i = j + 1; i < len - 1; i++) {

? ? ? ? if(minIdx === i) {

? ? ? ? ? continue; //提前进入到下一次的循环里面

? ? ? ? }

? ? ? if(arr[minIdx] > arr[i]) {

? ? ? ? minIdx = i; //更新最小下标

? ? ? }

? ? ? }

? ? var temp = arr[minIdx];

? ? arr[minIdx] = arr[j];

? ? arr[j] = temp;

? ? }

? ? console.log(arr);

? ?

插入排序:

var arr = [4, 6, 3, 2, 7, 8, 1, 4, 5, 9], len = arr.length;

? ? //插入排序

? ? for(var i = 1; i < len; i++) {

? ? ? for(var j = i - 1; j > 0; j--) {

? ? ? ? if(arr[j - 1] > arr[j]) {

? ? ? ? ? var temp = arr[j - 1] ^ arr[j];

? ? ? ? ? arr[j] ^= temp;

? ? ? ? ? arr[j - 1] ^= temp;

? ? ? ? }

? ? ? }

? ? }

? ? console.log(arr);

字符串方法

1.indexOf(searchValue[, fromIndex])

注意这个跟数组的indexOf()方法有点区别.

str.indexOf(searchValue[, fromIndex])

searchValue
要被查找的字符串值。
如果没有提供确切地提供字符串，searchValue 会被强制设置为 "undefined"， 然后在当前字符串中查找这个值。
举个例子：'undefined'.indexOf() 将会返回0，因为 undefined 在位置0处被找到，但是 'undefine'.indexOf() 将会返回 -1 ，因为字符串 'undefined' 未被找到。

fromIndex 可选
数字表示开始查找的位置。可以是任意整数，默认值为 0。
如果 fromIndex 的值小于 0，或者大于 str.length ，那么查找分别从 0 和str.length 开始。（译者注： ?fromIndex 的值小于 0，等同于为空情况； fromIndex 的值大于 str.length ，那么结果会直接返回 -1 。）
举个例子，'hello world'.indexOf('o', -5) 返回 4 ，因为它是从位置0处开始查找，然后 o 在位置4处被找到。另一方面，'hello world'.indexOf('o', 11) （或 fromIndex 填入任何大于11的值）将会返回 -1 ，因为开始查找的位置11处，已经是这个字符串的结尾了。

2.split([separator[, limit]])方法

作用:?方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

参数:

str.split([separator[, limit]])
separator
指定表示每个拆分应发生的点的字符串。separator 可以是一个字符串或正则表达式。 如果纯文本分隔符包含多个字符，则必须找到整个字符串来表示分割点。如果在str中省略或不出现分隔符，则返回的数组包含一个由整个字符串组成的元素。如果分隔符为空字符串，则将str原字符串中每个字符的数组形式返回。
limit
一个整数，限定返回的分割片段数量。当提供此参数时，split 方法会在指定分隔符的每次出现时分割该字符串，但在限制条目已放入数组时停止。如果在达到指定限制之前达到字符串的末尾，它可能仍然包含少于限制的条目。新数组中不返回剩下的文本。

返回值:

返回源字符串以分隔符出现位置分隔而成的一个 数组(Array)

slice():

作用:方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

参数:

str.slice(beginIndex[, endIndex])

beginIndex
从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）

endIndex
可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。

返回值:

返回一个从原字符串中提取出来的新字符串

trim():

作用:

方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）。

返回值:

一个依据调用字符串两端去掉空白的新字符串。

深刻理解 &&? 与? || 的关系

function addItem(num) {

? ? ? return (String(num)[1] && String(num)) || '0' + String(num);

? ? }

函数定义的两种方式:

function 函数名() {}

var 函数名 = function() {}

关于函数参数的值传递理解:

如果函数调用时 没有传入实参 对应形参默认值为 undefined

JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。

如果函数改变了参数的值，它不会改变参数的原始值。

参数的改变在函数之外是不可见的。

arguments

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

arguments为 (类数组)

这样，您就可以简单地使用函数来查找（例如）数字列表中的最高值：

实例

jsx = findMax(1, 123, 500, 115, 44, 88);
function findMax() { ??
? ? var i; ? ?
? ? var max = -Infinity;
? ? for (i = 0; i < arguments.length; i++) {?
? ? ? ? if (arguments[i] > max) { ?
? ? ? ? ? ? max = arguments[i]; ? ? ??
? ? ? ? } ??
? ? }?
? ? return max;
}

函数分类

javascript非常适合函数式编程，这里简单介绍下几种基础函数方式的基础应用

补充:函数fn1再去调用函数fn2 这只是起到了调用而已,所涉及到的作用域不会跟随.

还有一个问题,当涉及到匿名函数与普通函数名字一样的时候,当在调用时,会只执行匿名函数.

纯函数

纯函数(Pure Function)

1. 如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

2. 该函数不会产生任何可观察的副作用

非纯函数(函数副作用)

所谓"副作用"（side effect），指的是函数内部与外部互动（最典型的情况，就是修改全局变量的值），产生运算以外的其他结果.

var str = '海牙';
function changeStr(){
?? ?str = 'kyogre';
}
console.log(str); //海牙
change();
console.log(str); //kyogre

匿名函数

匿名函数：没有名字的函数

匿名函数如何使用：

将匿名函数赋值给一个变量，这样就可以通过变量进行调用
匿名函数自调用

关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

可以用匿名函数执行IIFE(自调用函数)

(function () {
? alert(123);
})();

柯里化函数:

//纯函数
function add(x, y) {
? ? return x + y;
}
console.log(add(1, 2)); // 3

//柯理化
function curryingOfAdd(x) {
? ? return function (y) {
? ? ? ? return x + y;
? ? }
}

console.log(curryingOfAdd(1)(2)); // 3

var tranCurry = add(3);
tranCurry(2); //5
tranCurry(8); //11

柯里化函数是很容易产生闭包的影响, 闭包是什么? 之后会安排!

作用域:

分为全局作用域和局部作用域

在js中词法作用域规则:

1. 在javascript中 有全局作用域(script) 有局部作用域 (函数{})
? ? ? 2. 作用域是单向可访问 内部作用域可以访问外部作用域的变量 外部作用域不可以访问内部作用域的私有变量
? ? ? 3. 私有变量 指的是 在当前局部作用域下*声明*的变量 , 如果没有声明符就不是当前作用域的私有变量
? ? ? 4. 在调用没有声明的变量的时候 会向上一级作用域寻找 声明 一直找到 全局作用域为止.
? ? ? 5. 变量的访问 优先访问自己作用域内的局部变量 自己作用域找不到 向上寻找调用
? ? ? 6. 如果一个变量 在局部作用域中直接使用 但是没有声明, 并且向上一直寻找到 全局作用域 也没有 var 声明 ,js引擎会在全局作用域进行隐式声明

? ? ? 7.要是变量名与函数名一样,先提升变量再提升函数,这样会造成函数变量的提升会覆盖掉变量的提升.

预解析:

javascript解析器解析javascript的时候,分为两个过程: 1.预解析过程? 2.代码执行过程

预解析过程:

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。

2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。

3. 先提升var，在提升function