JS是基于对象的语言。当然此时都说是面向对象的语言。

类:模板,原型对象    对象:具体的实例

原型对象:

var user = {

name:"xiaoxiao",

age:5,

run:function(){

console.log(this.name + "running");

}

};

var xiaozhang = {name:"xiaozhang"};

xiaozhang.__proto__ = user;

xiaozhang.run();//xiaozhang running

xiaozhang.age;//5

var bird = {

fly:function(){  console.log(this.name + "fly");}

};

xiaozhang.__proto__ = bird;

xiaozhang.fly();//xiaozhang fly

原型链:始终指向object java里叫继承

class对象    ES6 引入的

//定义一个学生的类,属性,方法

class Student{

constructor(name){ this.name = name; }

hello(){ alert('hello'); }

}

var zhangsan= new Student("zhangsan");

var lisi = new Student("lisi");

zhangsan.hello();//hello

//继承

class smallStudent extends Student{

constructor (name,grade){

  super(name);

  this.grade = grade;

}

myGrade() { alert("一名小学生");  }

}

var xiaowang = new smallStudent("xiaowang",2);

console.log(xiaowang);//name:"xiaowang",grade:2

xiaowang.myGrade();//一名小学生

JS提供了大量的内置对象,这些内置对象,不需要你创建就可以直接使用。比如document。

内置对象:所谓内置对象就是在JS中已经创建好,可以直接使用;其他对象。

内部对象: 

标准对象:

var x = 10;
var name = "tom";
var f = false;
var p = {};
console.log(typeof x);// number
console.log(typeof name);//string
console.log(typeof f);// boolean
console.log(typeof p);// object
typeof NaN//number typeof []//object
typeof Math.abs//function typeof undefined//undefined

案例:

    <script>
// 下面都是包装类型。
       var xx = new Number(10);
       var username = new String("jerry");
       var ff = new Boolean(true);
       console.log(typeof xx);// object
       console.log(typeof username);// object
       console.log(typeof ff);// object
   </script>

var x = 10与 var y = new Number(10);

        var x = 10;
       var y = new Number(10);
       console.log(x == y);// true 比较数值
       console.log(x === y);// false 比价数值和类型

String

String 全局对象是一个用于字符串或一个字符序列的构造函数。

String是一个数据类型,表示所有的字符串和字符。

我们可以通过new String();创建一个字符串对象。 当然很明显''和""会来的更简单一点。但是有啥区别?

看案例:

    <script>
       console.log(String); // 构造函数
       // 使用引号创建
       var name = "卡卡西";  // 字符串
       // 使用new关键字创建
       var name1 = new String("卡卡西"); // 对象
       console.log(name == name1);// true
       console.log(typeof name); // string
       console.log(typeof name1);// object
   </script>

String赋值的内存分析:

var name = "卡卡西";
var name1 = "卡卡西";
var name2 = new String("卡卡西");

name1和name2指向同一块内存,如果修改name1,name是否一起修改?

        var name = "卡卡西";
       var name1 = "卡卡西";
       var name2 = new String("卡卡西");
       console.log("name="+name); // 卡卡西
       console.log("name1="+name1);// 卡卡西
       name1="鸣人" // 重新赋值
       console.log("name="+name);// 卡卡西
       console.log("name1="+name1);// 鸣人

我们会发现,修改name1不影响name。是因为String是常量。不能修改。我们之前做的所有的修改都是重新给变量赋值。  但是对象的属性是可以被修改的。

看例子:

        var p = {};
       p.name = "卡卡西";
       var p1 = p;
       console.log(p.name); //卡卡西
       console.log(p1.name);//卡卡西
       p1.name="鸣人"
       console.log(p.name);//鸣人
       console.log(p1.name);//鸣人

Math

Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math的属性:

Math.E 欧拉常数,也是自然对数的底数,约等于 2.718。

Math.LN2 2 的自然对数,约等于 0.693。

Math.LN10 10 的自然对数,约等于 2.303。

Math.LOG2E 以 2 为底的 E 的对数,约等于 1.443。

Math.LOG10E 以 10 为底的 E 的对数,约等于 0.434。

Math.PI 圆周率,一个圆的周长和直径之比,约等于 3.14159。

Math.SQRT1_2 二分之一 ½ 的平方根,同时也是 2 的平方根的倒数 ,约等于 0.707。

Math.SQRT2 2 的平方根,约等于 1.414。

方法

Math.abs(x) 返回一个数的绝对值。

Math.acos(x) 返回一个数的反余弦值。

Math.acosh(x) 返回一个数的反双曲余弦值。

Math.asin(x) 返回一个数的反正弦值。

Math.asinh(x) 返回一个数的反双曲正弦值。

Math.atan(x) 返回一个数的反正切值。

Math.atanh(x) 返回一个数的反双曲正切值。

Math.atan2(y, x) 返回 y/x 的反正切值。

Math.cbrt(x) 返回一个数的立方根。

Math.ceil(x) 返回大于一个数的最小整数,即一个数向上取整后的值。

Math.clz32(x) 返回一个 32 位整数的前导零的数量。

Math.cos(x) 返回一个数的余弦值。

Math.cosh(x) 返回一个数的双曲余弦值。

Math.exp(x) 返回欧拉常数的参数次方,Ex,其中 x 为参数,E 是欧拉常数(2.718...,自然对数的底数)。

Math.expm1(x) 返回 exp(x) - 1 的值。

Math.floor(x) 返回小于一个数的最大整数,即一个数向下取整后的值。

Math.fround(x) 返回最接近一个数的单精度浮点型表示。

Math.hypot([x[, y[, …]]]) 返回其所有参数平方和的平方根。

Math.imul(x, y) 返回 32 位整数乘法的结果。

Math.log(x) 返回一个数的自然对数(㏒e,即 ㏑)。

Math.log1p(x) 返回一个数加 1 的和的自然对数(㏒e,即 ㏑)。

Math.log10(x) 返回一个数以 10 为底数的对数。

Math.log2(x) 返回一个数以 2 为底数的对数。

Math.max([x[, y[, …]]]) 返回零到多个数值中最大值。

Math.min([x[, y[, …]]]) 返回零到多个数值中最小值。

Math.pow(x, y) 返回一个数的 y 次幂。

Math.random() 返回一个 0 到 1 之间的伪随机数。

Math.round(x) 返回四舍五入后的整数。

Math.sign(x) 返回一个数的符号,得知一个数是正数、负数还是 0。

Math.sin(x) 返回一个数的正弦值。

Math.sinh(x) 返回一个数的双曲正弦值。

Math.sqrt(x) 返回一个数的平方根。

Math.tan(x) 返回一个数的正切值。

Math.tanh(x) 返回一个数的双曲正切值。

Math.toSource() 返回字符串 "Math"。

Math.trunc(x) 返回一个数的整数部分,直接去除其小数点及之后的部分。

案例:

    <script>
       console.log(Math);
       console.log(Math.E);
       console.log(Math.PI);
       // 向上取整
       console.log(Math.ceil(12.2));// 13
       console.log(Math.ceil(-12.2));// -12
       // 向下取整
       console.log(Math.floor(12.2));// 12
       console.log(Math.floor(-12.2));// -13
       console.log(Math.fround(12.2));// 12.199999809265137
       // 取出最大的数
       console.log(Math.max(1,3,45,67,2,43));
       var arr = [2,5,5,3,2,6,6,343,4,6,65,54,5]
       console.log(Math.max(...arr));
       // 取出最小的数
       console.log(Math.min(1,3,45,67,2,43));
       var arr = [2,5,5,3,2,6,6,343,4,6,65,54,5]
       console.log(Math.min(...arr));
       // 去次幂
       console.log(Math.pow(20,5000));
       // 四舍五入
       console.log(Math.round(4.49999));
       // 判断数字正负
       console.log(Math.sign(100));
       // 截断小数部分
       console.log(Math.trunc(12.555));
   </script>

Date

创建一个 JavaScript Date 实例,该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。

案例:

<script>
   // 日期函数
   // 创建一个当前的系统时间
   var now = new Date();
   console.log(now);//Fri Jan 21 2022 11:41:38 GMT+0800 (中国标准时间)
   // 根据毫秒数创建一个指定的时间 (1h = 60mi = 3600mm = 3600*1000)
   var date1 = new Date(1321365464560);
   console.log(date1);
   // date提供的一些API
   // 将上面的日期转换为我们需要的格式
   var year = now.getFullYear();//年
   var month = now.getMonth()+1; // 0~11
   var day = now.getDate();//日
    now.getDay();//星期几
   var hours = now.getHours();// 24 小时制
   var minutes = now.getMinutes();
   var seconds = now.getSeconds();
   console.log(year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds);
   // 获取当前的毫秒数
   console.log(now.getTime());
   now.getTime();//时间戳,全世界统一 从1970.1.1 0:00:00到现在的毫秒数
//时间戳转为时间
   new Date(1643982353862);//Fri Feb 04 2022 21:45:53 GMT+0800 (中国标准时间) {}
   //获取本地时间
  now.toLocaleString();//'2022/2/4 下午9:45:53'
</script>

Array

JavaScript的 Array 对象是用于构造数组的全局对象。

数组的一些API:

Array.prototype.at() 根据指定的索引,取出数组中的元素。如果是负数,则从右边开始计算。

Array.prototype.concat() 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组

Array.prototype.copyWithin() 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度

Array.prototype.entries() 返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对

Array.prototype.every() 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

Array.prototype.fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

Array.prototype.filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

Array.prototype.find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

Array.prototype.findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

Array.prototype.flat()---- 按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

Array.prototype.flatMap()--- 使用映射函数映射每个元素,然后将结果压缩成一个新数组

Array.prototype.forEach()--- 对数组的每个元素执行一次给定的函数

Array.prototype.includes() 判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false

Array.prototype.indexOf() 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1

Array.prototype.join() 将一个数组的所有元素连接成一个字符串并返回这个字符串

Array.prototype.keys() 返回一个包含数组中每个索引键的 Array Iterator 对象

Array.prototype.lastIndexOf() 返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1

Array.prototype.map() 返回一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值

Array.prototype.pop() 从数组中删除最后一个元素,并返回该元素的值

Array.prototype.push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度

Array.prototype.reduce() 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值

Array.prototype.reduceRight() 接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值

Array.prototype.reverse() 将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组

Array.prototype.shift() 从数组中删除第一个元素,并返回该元素的值

Array.prototype.slice() 提取源数组的一部分并返回一个新数组

Array.prototype.some() 测试数组中是不是至少有一个元素通过了被提供的函数测试

Array.prototype.sort() 对数组元素进行原地排序并返回此数组

Array.prototype.splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

Array.prototype.toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 Object.prototype.toLocaleString() 方法转成字符串

Array.prototype.toString() 返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 Object.prototype.toString() 方法转成字符串

Array.prototype.unshift() 将一个或多个元素添加到数组的头部,并返回该数组的新长度

Array.prototype.values() 返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

<script>
   var arr = [9,5,2,7];
   var arr1 = new Array();
   console.log(typeof arr);// object
   console.log(typeof arr1);// object
   var x = arr.at(-1);
   console.log(x);// 7
   // 合并数组
   var arr2 = [1,2,3,4,5]
   var arr3 = [3,4,5,6,7]
   var arr4 = arr2.concat(arr3);
   console.log(arr2);
   console.log(arr3);
   console.log(arr4);
   // copyWithin
   var arr5 = [1,2,3,4,5,6,7,8,9];
   // 从索引为3的元素开始复制到索引为5的元素的前一个。将这些内容从索引为2的开始填充,产生新的数组
   var arr6 = arr5.copyWithin(2,3,5);
   console.log(arr5);
   console.log(arr6);
   // every()
   var arr7 = [3,4,5,6,7]
   var result = arr7.every(function(curr){
       // 这里的curr表示遍历中的每一个元素
       return curr > 3;
  });
   console.log(result);
   // fill
   var arr8 = new Array(10);
   arr8.fill("鸣人");
   console.log(arr8);
   // filter();
   var arr9 = [1,2,5,4,7,23,6,5,43,64,34];
   // 取出所有的偶数放在一个新数组中
   var arr10 = arr9.filter(function(curr){
       return curr % 2 == 0;
  });
   console.log(arr10);
   // find 和 filter差不多,但是只返回第一个
   var num = arr9.find(function(curr){
       return curr % 2 == 0;
  });
   console.log(num);
   // forEach
   var arr11 = [1,5,9,3,4,7,2,6,8,5];
   arr11.forEach(function(curr){
       if(curr % 2 ==0){
           console.log(curr+"是偶数");
      }else{
           console.log(curr+"是奇数");
      }
  });
   console.log(arr11.includes(5));
   console.log(arr11.indexOf(5));
   // join
   var str = arr11.join("哈哈");
   console.log(str);
   console.log(arr11.lastIndexOf(5))
   // map();
   var arr12 = arr11.map(function(item){
       if(item % 2 == 0){
           return "偶";
      }else{
           return "奇";
      }
  });
   console.log(arr12);
   // pop() 弹出数组的最后一个值 修改了原数组
   arr11 = [1,2,3,4,5,6]
   var n = arr11.pop();
   console.log(n);
   console.log(arr11);
   // push() 往数组的最后追加一个或者多个元素
   arr11.push(7);
   var length = arr11.push(8,9,10);
   console.log(arr11);
   // reduce
   arr11 = [1,3,2,4,5,7,6,8];
   var x = arr11.reduce(function(prex,curr){
       // 求和
       return prex + curr;
  });
   console.log(x);
   console.log(arr11);
   // 反转数组 会修改原来的数组
   arr11.reverse();
   console.log(arr11);
   // shift() 弹出第一个元素
   console.log(arr11.shift());
   console.log(arr11);
   console.log("----------------------")
   // 截取子数组
   var arr13 = [1,2,3,4,5,6,7,8,9]
   var arr14 = arr13.slice(3,7);
   console.log(arr13);
   console.log(arr14);
   arr14[2] = 55;
   console.log(arr14);
   console.log(arr13);
   console.log("---------对象数组-------------")
   var arr15 = [{name:"鸣人"},{name:"佐助"},{name:"小明"},{name:"小飞"},{name:"卡卡西"},{name:"迈特凯"},{name:"春野樱"}];
   var arr16 = arr15.slice(1,4);
   console.log(arr15);
   console.log(arr16);//[{name:"佐助"},{name:"小明"},{name:"小飞"}]
   // 修改arr16中的某一个值
   arr16[2].name="大飞"; // 修改完成之后,原始数组和新数组的数据都会被修改。
   console.log(arr16);
   //检查是否有满足需求的元素
   var arr17 = [1,3,5,6,7,9];
   var result = arr17.some(function(curr){
       return curr % 2 == 0;
  });
   console.log(result);
   // 排序
   arr17 = [2,10,15,18,25,32,4,5,6]
   arr17.sort();
   console.log(arr17);
   arr17 = [2,10,15,18,25,32,4,5,6]
   // 自定义排序规则
   arr17.sort(function(a,b){
       if(a > b){
           return -1;
      }else if(a == b){
           return 0;
      }else{
           return 1;
      }
  });
   console.log(arr17);
   // 按照规则给数组中插入指定的元素
   var arr18 = [1,2,3,4,5];
   // 在索引为1的位置插入18
   arr18.splice(1,0,18);
   console.log(arr18);
   arr18 = [1,2,3,4,5];
   // 在索引为1的位置插入18,19,20
   arr18.splice(1,0,18,19,20);
   console.log(arr18);
   arr18 = [1,2,3,4,5];
   // 在索引为1的位置插入18,19,20
   arr18.splice(1,0,...[18,19,20]);
   console.log(arr18);
   arr18 = [1,2,3,4,5];
   // 在索引为1的位置插入18,19,20, 并且删除原来的2和3
   arr18.splice(1,2,18,19,20);
   console.log(arr18);
   console.log(arr18.toLocaleString());
   console.log(arr18.toString());
   //   给数组的第一个位置插入新元素
   arr18.unshift("旗木卡卡西");
   console.log(arr18);
</script>

数组的遍历:

    <script>
       var arr = [9,5,1,3,6,7,4,2,12,13,18,8,6]
       // 传统遍历 for
       var str = "";
       for(var x = 0;x < arr.length;x ++){
           str += x + ",";
      }
       str = "";
       // forEach遍历
       for(var j in arr){ // j是索引   每次从数组中取出一个索引赋值给j
           str += arr[j] + "&";
      }
       str = "";
       // 使用array的forEach方法
       arr.forEach(function(curr){ // 这里的curr就是每一个元素。 每次取一个值出来传入内面的函数执行
           str += curr+"-"
      });
       str = "";
       // 使用Array的entries得到实体集合再遍历
       var iterator = arr.entries();
       // iterator --> [[0,9],[1,5]......]
       for(var item of iterator){ // 迭代器的专有的遍历方式
         // item : [0,9]
           str += item[1] + "=";
      }
       str  = "";
       // 使用Array的keys方法获取所有索引的迭代器,进行迭代
       var keysIt = arr.keys(); //[0,1,2,3.....]
       for(var k of keysIt){
           str += arr[k] + "kkkk"
      }
       str = "";
       //使用Arrsy的values方法获取所有的数组元素的迭代器,进行迭代
       var valuesIt = arr.values();
       for(var v of valuesIt){
           str += v + " v ";
      }
       console.log(str);
   </script>
JSON:
在JS一切皆为对象,任何js支持的类型都可以用JSON来表示:
格式:
对象都用{} 数组都用[] 所有的键值对都是用 key:value
var user = {name:"zhangsan",age:20,sex:"男"};
//对象转化为json字符串 {"name":"zhangsan","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象 参数为JSON 字符串
var obj = JSON.parse({"name":"zhangsan","age":3,"sex":"男"});
JSON 和 JS 对象的区别
var obj = {a:'hello',b:'hellob'};
var json = '{"a":"hello","b":"hellonb"}';
AJAX:

原生的js写法,xhr 异步请求

jQuery封装好的方法,$("#name").ajax("");

axious 请求

JS的一些对象的更多相关文章

  1. 程序猿都没对象,JS竟然有对象?

    现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名. 好吧, ...

  2. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  3. 浅解析js中的对象

    浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...

  4. js中XMLHttpRequest对象实现GET、POST异步传输

    js中XMLHttpRequest对象实现GET.POST异步传输 /* * 统一XHR接口 */ function createXHR() { // IE7+,Firefox, Opera, Chr ...

  5. 170104、js内置对象与原生对象

    内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象 ...

  6. (转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  7. JavaScript基础17——js的Date对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JavaScript基础18——js的Array对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  10. JS获取当前对象大小以及屏幕分辨率等...

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...

随机推荐

  1. 终-Echart可视化学习(十二)

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 进入官网寻找 里面可以搜素很多 这 ...

  2. java mapreduce实现网站PV分析

    原文链接: https://www.toutiao.com/i6765677128022229517/ PV 是Page Views的缩写,即页面浏览量,用户每一次对网站中的每个网页访问均被记录一次. ...

  3. 动静分离、Rewirte、HTTPS

    目录 Nginx动静分离技术 示例搭建步骤 部署NFS 静态资源共享 部署代理服务器 Rewrite(重点) Rewrite基本概述 rewrite语法 rewrite标记Flag last和brea ...

  4. vue 快速入门 系列 —— 模板

    其他章节请看: vue 快速入门 系列 模板 前面提到 vue 中的虚拟 dom 主要做两件事: 提供与真实节点对应的 vNode 新旧 vNode 对比,寻找差异,然后更新视图 ①.vNode 从何 ...

  5. IDEA超级好用的插件推荐

    IDEA超级好用的插件推荐 以下都是本人使用idea开发以来,所使用过的插件,强烈推荐,提升代码质量,事半功倍之首选!!! 先介绍下如何安装这些插件:(本人使用idea的版本是2020.2.3) 1. ...

  6. android+opencv+opencl: cv::dft()的opencl版本的性能分析

    在小米mix 2s + 高通骁龙 845 + Adreno 630 上测试了opencl版本的cv::dft(). 测试数据 先看表格里面的描述: 名称 函数名 最大时间(ms) 平均时间(ms) 说 ...

  7. golang中函数的参数

    1. 函数当做函数的参数 package main import "fmt" type HandleFunc func(int) (int, bool) func add10(nu ...

  8. 集合框架-Map集合-LinkedHashMap及关联源码操作

    1 package cn.itcast.p9.linkedhashmap.demo; 2 3 import java.util.HashMap; 4 import java.util.Iterator ...

  9. 前端页面禁止调试debugger方法汇总

    打开控制台直接跳转页面 //debug调试时跳转页面 var element = new Image(); Object.defineProperty(element,'id',{get:functi ...

  10. MacBook USB 连 iPhone 响个不停,充电频繁的连上/断开

    电脑是 MacBook Pro (Retina, 15-inch, Mid 2015) 连 iPhone 响个不停,充电频繁的连上 /断开,数据线是原装的,想连接爱思助手连接不上. 网上方法 1 开启 ...