数据类型的种类

js有7种数据类型
简单数据类型（基本数据类型）: Undefined Null Boolean String Number Symbol (ES6新增)
复杂数据类型 (引用数据类型)： Object (Object类型 Array类型 Data类型 Function类型 等)

Symbol 是 ES6引入了一种新的原始数据类型，表示独一无二的值。 最新的 ECMAScript 标准定义了 8 种数据类型: 原始类型 新增 BigInt

划分方式 : 是否可以表示为固定长度. 字符串是不可变的,因此被认为有固定长度
类型指的是值的类型,不是变量的类型(js是动态语言)

区别**
基本数据类型的值是按值访问的

  • 基本类型的值是不可变得
  • 基本类型的比较是值的比较
  • 基本类型的变量是放在栈内存中(stack)

引用类型的值是按引用访问的

  • 引用类型的值是可变的
  • 引用类型的比较是引用的比较
  • 引用类型的值是保存在堆内存（heap）中的对象。

image.png

判断数据类型

1.typeof
typeof 返回一个表示数据类型的字符串

typeof能判断一个数据是不是对象，却不能判断它是对象的哪个“子类型” 返回结果 number sting boolean undefined object function (需要注意返回结果是小写，需要带上引号)

其中可以对 number string boolean undefined 做出准确的判断
而对于引用类型，除function之外返回的都是 object .
注意：null 除外，typeof null === “object”.

  1. typeof new Function() //function 有效 仅能判断的引用类型只有function
  2. typeof [] //object 无效  上文中有说明array是引用类型
  3. typeof null //object  无效 原因见下
  4. typeof new Data() //object 无效

关于 typeof null //‘object’ 的原因
最初的js版本中，使用的是32位系统，为了性能考虑使用低位存储了变量的类型信息，000开头代表的是对象，然而null表示为全零，所以将它错误判断为 object 。
从逻辑角度来看，null值表示一个空对象指针。

2.instanceof
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
instanceof只能判断是否是你预期的类型且只能用于对象子类型的判断。

A instance B 如果A是B的实例，则返回true否则返回false instance 检测的是原型。

  1. 模拟instance 内部执行过程
  3. instance(A,B){
  4.   var L = A.__proto__;
  5.   var R = B.__proto__;
  6.   if(L === R){
  7.     //A的内部属性__proto__ 指向B的原型对象
  8.     return true
  9.   }
  10.   return false
  11. }
  14. [] instanceof Array; //true
  15. [] instanceof Object; //true
  16. new Date() instanceof Date;//true
  17. new Date() instanceof Object;//true
  18. function Person(){};
  19. new Person() instanceof Person;//true
  20. new Person() instanceof Object;//true
  22. [] Array Object 三者之间的关系
  24.  从instanceof 能够判断出 [].__proto__ 指向 Array.prototype，
  25. 而 Array.prototype.__proto__ 又指向了Object.prototype，
  26. Object.prototype.__proto__ 指向了null,标志着原型链的结束。

image.png

注意:instanceof运算符只能用于对象，不适用原始类型的值。

  1. 'hello' instanceof String // false
  2. null instanceof Object // false
  3. undefined instanceof Object // false
  5. 字符串、null和undefined不是对象，所以返回false。


获取一个变量的正确类型
toString 是 Object 原型上的一个方法，该方法默认返回其调用者的具体类型，是toString 运行时this指向的对象类型，返回的类型格式是[object,xxx]

  1. Object.prototype.toString.call(xx)  // [ object Type]
  3.  var a = [1,2]
  4. console.log(Object.prototype.toString.call(a))  //[object Array]



数值转换
Number() parseInt() parseFloat()
**

  1. Number(true)   //1
  2. Number(undefined) //NaN
  3. Number(15)  //15

**

  1. parseInt("")  //NaN 空字符串
  4. parseFloat(string)  解析参数（必要时先转换为字符串）并返回一个浮点数
  6. 使用场景 
  7. var year = '40 year';
  8. console.log(parseFloat(year))  //40





我能添加一个字符串属性吗？
**

  1. let str = "Hello";
  3. str.test = 5;    //(*)
  5. console.log(str.test);   // undefined
  7. 在执行 （*） 这一行
  8. 1.当访问str属性时，创建一个"包装对象"
  9. 2.当对属性进行操作的时候，这个对象获得了test属性
  10. 3.操作结束，"包装对象"消失
  12. 在最后一行，对字符串上的新的包装对象的每个对象操作，str 不再追踪这个属性。
  14. 这个例子清楚地表明，基本类型不是对象。
  16. 基本类型不能存储数据。
  18. 所有的属性/方法操作都是在临时对象的帮助下执行的。

操作符相关

递增与递减
一元加和减操作符

  1. var a = "123"
  2. a-0      //123

布尔操作符

逻辑非(!)

  1. !""  //true
  2. !" " //false

逻辑与（&&）
当操作数都为true时返回true；否则返回false.

  3. var a = true
  4. console.log(a&&1)  //1
  6. var a = false
  7. console.log(a&&1)  //false

逻辑或（||）
如果第一个操作数为true 就不会对第二个操作数求值

  2. var a = true
  3. console.log(a||1)  //true
  5. var a = false
  6. console.log(a||1)  //1

加法

  1. var result = 5+"5"  //"55"

相等操作符
== 与 ===
== 比较值相等
=== 比较值与类型 

  1. var num1 = "5"
  2. var num2 = 5
  3. console.log(num1 == num2)  //true
  4. console.log(num1 === num2)  //false
  7. 注意： null==undefined //true
  8.              null === undefined // false

条件操作符
三元运算符 条件 ? 值1 : 值2

  1. var status = (age >= 18) ? "adult" : "minor";
  3. 当 age 大于等于18的时候，将“adult”赋值给 status；否则将“minor”赋值给 status。

赋值操作符

  1. var num = 10;
  2. num = num + 10  //20
  4. => num += 10    //20

字符串

改变大小写
toLowerCase()
toUpperCase()

查找字符串
indexOf

  1. str.indexOf(substr,pos)
  3. pos 指定位置    substr寻找的字符   str字符串
  5. var a = "hello"
  6. console.log(a.indexOf("h"))   //0
  7. console.log(a.indexOf("h",1)) //-1
  1. let str = "Widget with id";
  3. if (str.indexOf("Widget") != -1) {
  4.     console.log("We found it"); // 现在运行了！
  5. }

includes()

  1. includes() 方法用于判断一个字符串是否包含在另一个字符串中，返回true 或 false
  3. 注意 区分大小写 
  5. let str = "Hello doraemon";
  6. console.log(str.includes("hello"))  //false
  7. console.log(str.includes("do"))    //true

获取子字符串
三种 substring、substr 和 slice

  1. str.slice(start [, end])   （重要）
  2. 返回从 start 到（但不包括）end 的字符串部分
  4. let str = "doraemon";
  5. console.log(str.slice(0,1))  //d
  6. console.log(str.slice(0))  //doraemon
  7. console.log(str.slice(-4,-1))  //emo
  1. str.substring(start [, end])
  2. 返回 start 和 end 之间的字符串部分。
  3. 这与 slice 几乎相同，但它允许 start 大于 end。
  5. let str = "doraemon";
  6. console.log(str.substring(0,1))  //d
  7. console.log(str.substring(0))  //doraemon
  8. console.log(str.substring(-4,-1))  // 空 
  10. 不支持 负参数  被视为 0
  1. str.substr(start [, length])
  2. 从 start 开始返回给定 length 的字符串部分。
  4. 与以前的方法相比，这个允许我们指定 length 而不是结束位置：
  6. let str = "doraemon";
  7. console.log(str.substr(0,5))  //dorae
  8. console.log(str.substr(0))  //doraemon
  9. console.log(str.substr(-4,-1))  // 空

总结

image.png

字符串 https://zh.javascript.info/string


数组相关

创建数组的方法 2种

  1. let arr = new Array()
  3. let arr = []    //字面量 方式

多维数组操作
const 定义常量的时候
再重新赋值会报错，但是引用类型就不会(修改对象中的值也不会，因为此时const 定义的是一个引用类型的值)
例如 定义一个数组

  1. const arr = [1,2]
  2. arr[1] = 99
  3. console.log(arr)  //[1, 99]

Array of 与数组创建细节
控制台 空的是用 empty 代替 ,打印出来的结果是undefined
length 属性是数组中元素的总个数 

  1. let array = ["a","b","c"]
  2. console.log(array)
  3. array[3] = "d"
  4. array[5] = "e"  //["a", "b", "c", "d", empty, "e"]
  5. console.log(array[4])   //undefined
  1. 仅只是 new Array()  这种创建方式 不常用
  3. let cms = new Array(6)  //empty
  4. console.log(cms.length) //6
  5. 当只有一个值得时候 上述会创建6个空
  8. 新版解决方案
  9. let arr = Array.of(6)
  10. console.log(arr)
  11. console.log(arr.length)

类型检测与转换

  1. console.log(Array.isArray(1)) //false     [] true
  4. 数组变成字符串 String(arr)  arr.toString() arr.join(',') 
  6. 1.let hd = [1,2,4].toString()
  7. 2.let hd = String([1,2,4])
  8. 3.let hd = [1,2,3].join(',')
  10. console.log(typeof hd) //string 
  13. 字符串变成数组
  14. let str = 'chu'
  16. console.log(str.split("")) //["c", "h", "u"]
  17. console.log(Array.from(str))
  20. 语法是可以转的 需要length属性
  21. let obj = {
  22.     0:"hchc",
  23.     1:"jfh",
  24.     length:2
  25. }
  26. console.log(Array.from(obj))
  30. 实际应用
  31. <div>div1</div>
  32. <div>div2</div>
  34. let divs = document.querySelectorAll('div')
  35.   console.log(divs)
  36.   console.log(Array.from(divs,function(item){
  37.       // console.log(item.innerHTML)
  38.       item.style.backgroundColor = 'red'
  39.   }))

展开语法

  1. for of 如何使用
  3. let arr = ["aaa","bbb"]
  4. let hd  = ["12","23"]
  5. for(let value of hd){
  6.     arr.push(value)
  7. }  
  8. console.log(arr)   //["aaa", "bbb", "12", "23"]
  11. 展开语法
  12. let arr = ["aaa","bbb"]
  13. let hd  = ["12","23"]
  14. arr = [...arr,...hd]
  15. console.log(arr)   //["aaa", "bbb", "12", "23"]
  19. 求和专题
  20. 应用场景 求和 
  21. 遇到的问题 参数不固定 reduce
  23. 注意： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  25. initialValue 可选
  26. 作为第一次调用 callback函数时的第一个参数的值 如果没有提供初始值，则将使用数组中的第一个元素
  27. 在没有初始值得空数组上调用reduce 将报错
  30. function sum(...args){
  31.     console.log(args)
  32.     return args.reduce((s,v)=>{
  33.      return s+=v   
  34.     },0)
  35. }
  36. console.log(sum(1,2,3,4))

对应链接 未进行整理
https://www.yuque.com/doraemon-g9kzm/hgcwlg/cbl140

数组的 pop/push shift/unshift 方法

作用于数组末端的方法 

  1. pop  取出并返回数组的最后一个元素
  2. let array = ["a", "b", "c"]
  3. array.pop()  //"c"
  4. array        // ["a", "b"]
  7. push
  8. 在数组末端添加元素 
  10. let array = ["a", "b", "c"]
  11. array.push("d")  //4
  12. array            //["a", "b", "c", "d"]

作用于数组前端的方法

  1. shift 
  2. 取出数组的第一个元素并返回它
  4. let array = ["a", "b", "c"]
  5. array.shift()  // a 
  6. array          //["b", "c"]
  9. unshift 
  10. 在数组的前端添加元素 
  12. let array = ["a", "b", "c"]
  13. array.unshift("e")  // 4
  14. array               //["e", "a", "b", "c"]

内部
数组是一种特殊的对象，使用方括号来访问属性 arr[0] 实际上是来自于对象的语法 这个数字被用作键值

  1. let fruits = ["banana"]
  2. let arr = fruits;
  3. console.log(arr === fruits)   //true
  4. arr.push("pear")

性能方面

用作于数组的末端方法（pop/push ）比前端快。

image.png

循环
for 循环 

  1. let arr = ["apple","orange","pear"]
  2. for(let i=0;i<arr.length;i++){
  3.     console.log(arr[i])
  4. }

for … of

  1. let arr = ["apple","orange","pear"]
  2. //迭代数组元素 
  3. for(let key of arr){
  4.     console.log(key)
  5. }

for .. in (不适用于数组 速度很慢 )

  1. let arr = ["apple","orange","pear"]
  2.   for(let key in arr){
  3.       console.log(arr[key])
  4.   }

关于 “length “

可以清空数组 

  1. let arr = ["apple","orange","pear"]
  2. arr.length = 0
  3. console.log(arr)   //[]

多维数组
多维数组与一维数组的转换

toString
数组有自己的toString 方法的实现 会返回以逗号隔开的元素列表

  1. let arr = ["apple","orange","pear"]
  2. console.log(String(arr))  //apple,orange,pear

思考题
向数组上下文调用

  1. let arr = ["a", "b"];
  2. arr.push(function() {
  3.   alert( this );
  4. })
  6. arr[2](); // "a","b",function
  8. arr[2] 函数也就是调用对象函数。自然地，它接收 this 引用的对象 arr 然后输出该数组

最大子数组

数组方法

未完待续

https://www.one-tab.com/page/kt7Vzfl2Ryej7OmW3uByDg

**

文章参考链接