JavaScript基础——数据的基本类型、对象和数组的常用函数、运算符

JavaScript基础——数据的基本类型、对象和数组的常用函数、运算符

一、数据的基本类型

1、JS的数据类型有几种？

8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt（ES11引入的新的基本数据类型）

2、Object中包含了哪几种类型

其中包含了Data、function、Array等。这三种是常规用的

3、用typeof输出类型

输入	输出	类型
{}	Object	对象
[]	Object	对象
console.log	function	函数
String()	String	字符串
Number()	number	数据类型
Boolean()	boolean	布尔型
Undefined	undefined	没有初始化、定义的值
Null	Object	对象
NaN	number	number中的特殊数值
Object	function	函数

问：Number(‘as’) == NaN?

答案是false。

因为NaN是number类型，但NaN是一个除数字外的任意值的数字类型，因为它的值是不确定的，所以NaN两个不确定是值肯定是不相等的

null和undefined的区别

undefined是从null中派生出来的，undefined是没有定义，null是定义了但是为空

二、对象和数组的常用函数和运算符

1、常用函数：

（1）、对象

每个Object都有以下属性和方法

constructor：保存着用于创建当前对象的函数。（构造函数)constructor就是object();

hasOwnProperty(propertyName):用于检查给定的当前属性在当前对象实例中）而不是在实例原型中）是否存在。其中，作为参数的属性名（propertyName)必须以字符串形式指定（例如：o.hasOwnProperty(“name”))。

isPrototypeOf(object):用于检查传入的对象是否是传入对象原型。

propertyIsEnumerable(propertyName):用于检查给定属性是否能够用for-in语句。与hasOwnProperty（）方法一样，作为参数的属性名必须以字符串形式指定。

toLocaleString( ):返回对象的字符串表示，该字符串与执行环境的地区对应。

toString( ):返回对象的字符串表示。

valueOf( ):返回对象的字符串、数值或者布尔值表示。通常与toString( )方法的返回值得相同。

// Array：返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array);   // true

// Date：当前时间距1970年1月1日午夜的毫秒数
// Sun Aug 18 2013 23:11:59 GMT+0800 (中国标准时间)
var date = new Date(2013, 7, 18, 23, 11, 59, 230); 
console.log(date.valueOf());   // 1376838719230

// Number：返回数字值
var num =  15.26540; // 15.2654
num.valueOf() // 15.2654
console.log(num.valueOf() === num);   // true

// 布尔：返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool);   // true

// new一个Boolean对象
var newBool = new Boolean(true); // Boolean {true}
newBool.valueOf() // true
// valueOf()返回的是true，两者的值相等
console.log(newBool.valueOf() == newBool);   // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
console.log(newBool.valueOf() === newBool);   // false


// Function：返回函数本身
function foo(){}
console.log( foo.valueOf() === foo );   // true

var foo2 =  new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() === foo2); // true
/*
ƒ anonymous(x,y) {
return x + y;
}
*/

// Object：返回对象本身
var obj = {name: "张三", age: 18};
console.log( obj.valueOf() === obj );   // true

// String：返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str );   // true

// new一个字符串对象
// String {"http://www.xyz.com"}
var str2 = new String("http://www.xyz.com"); 
str2.valueOf() // "http://www.xyz.com"
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
console.log( str2.valueOf() === str2 );   // false

create：返回一个以obj为原型的对象（创建空对象时需要传入null，否则会报TypeError）

用法：Object.create({},{}) 注意：不可写,不可枚举,不可配置。

getPrototypeOf(obj)：返回obj.__ proto__指向

freeze：冻结obj对象，使之不能修改已有属性、添加属性和删除属性 （用**isFrozen()**判断对象是否被冻结）

 var obj = {
    name:123
  }
  Object.freeze(obj)
  obj.age = 18
  console.log(obj); //{name:123}

is：比较value1和value2值是否相等，类似===，区别于Object.is(NaN,NaN)返回true，Object.is(+0,-0)返回false，===与之相反。

assign：用于将对象obj中的所有可枚举属性复制到目标对象中，并返回目标对象。

var p1 = {
    name:123,
    aa:456
  }
  let p2 = {
    aa:7489
  }
  let p = Object.assign({},p1,p2)
  console.log(p); //{name:123,aa:7489}

keys：返回一个数组，获取对象所有可枚举属性的名称

const obj = { a: 1, b: 2 };
const keys = Object.keys(obj);
console.log(keys); // ['a', 'b']

values：返回一个数组，获取对象所有可枚举属性的值

const obj = { a: 1, b: 2 };
const values = Object.values(obj);
console.log(values); // [1, 2]

entries：返回一个数组，获取对象所有可枚举属性的名称 和 可枚举属性的值

const obj = { a: 1, b: 2 };
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2]]

（2）、数组

1. Array.isArray()

   检测是否是数组

2. toString()

   转换为字符串，在默认情况下都会以逗号分隔字符串的形式返回字符串

   	let arr = [1,2,3,4]
   	console.log(arr.toString()); //1,2,3,4
   

3. sort()

   将数组从小到大排序

   	let arr = [1,4,8,2,6]
   	console.log(arr.sort()); //[1,2,4,6,8]
   

   将数组从大到小排序

       let arr = [1,4,8,2,6]
       console.log(arr.sort((a,b)=>{
      		return b - a
   	})); //[8,6,4,2,1]
   

4. splice()

   可以实现删除、替换、修改

   删除：指定两个参数（起始位置，要删除的项数）

   var arr = [1, 2, 3, 4, 5, 6];
   arr.splice(0, 3)
   console.log(arr)//[ 4, 5, 6 ]
   

   插入：指定三个参数（起始位置，0，要插入的任意数量的项）

   var arr = [1, 2, 3, 4, 5, 6];
   arr.splice(6, 0, 7, 8, 9)
   console.log(arr)//[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
   

   替换：指定三个参数（起始位置，要删除的项数，要插入的任意数量的项）

   var arr = [1, 2, 3, 4, 5, 6];
   arr.splice(0, 3, 7, 8, 9)
   console.log(arr)//[ 7, 8, 9, 4, 5, 6 ]
   

5. every()

   对数组中的每一元素运行给定的函数，如果该函数对每一行都返回true，则该函数返回true

   let arr = [1,4,8,2,6]
     let result = arr.every((item,index,arr)=>{
       return item > 2
     })
     console.log(result); //false
   

6. some()

   与every相反

   let arr = [1,4,8,2,6]
     let result = arr.some((item,index,arr)=>{
       return item < 0
     })
     console.log(result); //false
   

7. filter()

   对数组中的每一项运行给定的函数，会返回满足该函数的项组成的数组

   let arr = [1,4,8,2,6]
     let result = arr.filter((item,index,arr)=>{
       return item < 4
     })
     console.log(result); //[1,2]
   

8. map()

   let arr = [1,4,8,2,6]
     let result = arr.map((item,index,arr)=>{
       return item * 2
     })
     console.log(result); //[1,2]
   
     let obj = [
       {
         name : '张三',
         age : '18'  //string
       },
       {
         name : '李四',
         age : 20  //number
       }
     ]
     // 将age统一为number
     let res = obj.map((item,index,obj)=>{
       return {
               name:item.name,
               age:Number(item.age)
             }
     })
     console.log(res);/*[
                           {
                             name : '张三',
                             age : 18  //number
                           },
                           {
                             name : '李四',
                             age : 20  //number
                           }
                         ]*/
   

9. forEach()

   遍历数组

   let arr = [1,4,8,2,6]
     let result = arr.forEach((item,index,arr)=>{
         console.log(item);//1 4 8 2 6
     })
   

10. reduce()

    1. 第一次的previousValue是数组第一项，currentValue为数组第二项，为数组中的每一个元素依次执行回调函数

       let arr = [1,4,8,2,6]
         let result = arr.reduce((previousValue,currentValue,index,arr)=>{
             console.log(previousValue,currentValue,index,arr);
             return previousValue + currentValue
         })
         console.log(result);
       

       

       应用场景：

       1. 计算数组中元素的个数

          let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
           
          let nameNum = names.reduce((pre,cur)=>{
            if(cur in pre){
              pre[cur]++
            }else{
              pre[cur] = 1 
            }
            return pre
          },{})
          console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
          

       2. *数组去重

          let arr = [1,2,3,4,4,1]
          let newArr = arr.reduce((pre,cur)=>{
              if(!pre.includes(cur)){
                return pre.concat(cur)
              }else{
                return pre
              }
          },[])
          console.log(newArr);// [1, 2, 3, 4]
          

       3. 将二维数组转化为一维

          let arr = [[0, 1], [2, 3], [4, 5]]
          let newArr = arr.reduce((pre,cur)=>{
              return pre.concat(cur)
          },[])
          console.log(newArr); // [0, 1, 2, 3, 4, 5]
          

       4. 对象里的属性求和

          var result = [
              {
                  subject: 'math',
                  score: 10
              },
              {
                  subject: 'chinese',
                  score: 20
              },
              {
                  subject: 'english',
                  score: 30
              }
          ];
           
          var sum = result.reduce(function(prev, cur) {
              return cur.score + prev;
          }, 0);
          console.log(sum) //60
          

11. reverse()

    将数组反转

    const arr1 = [1, 2, 3];
    arr1.reverse();
    // [3, 2, 1]
    const arr2 = ['1', '4', '3', 1, 'some string', 100];
    arr2.reverse();
    // [100, 'some string', 1, '3', '4', '1']
    

12. push()

    将一个或多个项目添加到数组的末尾并返回数组（更新数组长度）

    const animals = ['cats', 'rats', 'sheep'];
    animals.push('cows');
    console.log(animals);// ['cats', 'rats', 'sheep', 'cows']
    console.log(animals.lenght);
    

13. pop()：删除数组最后一项（更新数组长度）

14. shift()：删除数组第一项（更新数组长度）

15. unshift()：将数据添加到数组开头（更新数组长度）

16. of()：将可变的参数返回一个数组

17. at()：根据索引查找数组的值，负数时从最后一位找

18. fill()：更改数组中的元素（开始下标，结束下标）

    2、常用运算符：

    1. 算术运算符

       + - * / % ++ –

       %：取余

       ++：自增

       –：自减

       口诀（++ – ===》在前先加减，在后就后加减）

    2. 比较（关系）运算符

       > 大于， < 小于， >=大于等于 ， <=小于等于 ， 等于， != 不等于 === 全等 ， ! 不全等

       == 和 === 的区别

       == 只比较数值，不比较类型

       === 不但比较数值还比较类型

    3. 逻辑运算符

       &&(与) 、||(或)、 !(非)

       &&：有假为假

       ||：有真为真

       !：真为假，假为真

    4. 三元运算符（?）

       判断条件？true时执行的指令 : false时执行的指令

    5. 赋值运算符

       已经学过的赋值运算符： = 将等号右边的值赋予给左边，要求左边必须是一个容器
       其他赋值运算符： += -= *= /= %= 使用这些运算符可以在对变量赋值时进行快速操作

    运算符的优先级：

    1. ​ 小括号（）
    2. ！
    3. 算数运算符
    4. 比较运算符
    5. 逻辑运算符
    6. 赋值运算符