原生JS常见对象

创建对象

ECMA变量

  1. 用‘var’关键字来定义变量,并可以将其初始化为任意值
  2. 变量中存储的值可以改变

关键字及保留字

关键字

在这里插入图片描述

保留字

在这里插入图片描述

ECMAJscript运算符

  • 运算符是指完成操作的一系列符号,也称为操作符
  • 运算符用于江一个或多个指进行运算并返回结果。
  • 使用运算符的值称为操作数
  • 运算符和操作数的组合称为表达式
运算符的类型
1 算术运算符

分别是 : + - * / % ++ –

2 比较(关系)运算符

分别是 : > < <= >= == === !=

​ !==

比较运算符的返回结果一定是布尔值(true,false)

3 逻辑运算符

分别是 && || !

逻辑运算符的结果一定为 Boolean值

在逻辑运算符中,逻辑非( !)占着一定的比例,在一定程度上会减少代码的开发量

逻辑非

在表达式 中 逻辑非 表示 true的值分别为

​ !’ '非字符串—注意和空格符的区别,由于空格符有着占位,所以算成是非空字符串, !0 !null !NaN !undefined;

猜想:由上述的五个特殊的返回值 true,是否可以这样认为

只要表示没有任何东西或者是除对象外不占用任何的位置,返回都是true,

或者是 只要是上述的五个特例,返回都是true

console.log(!{}); //false
console.log(!' ')   //false
console.log('任意非字符');  //false
console.log(!'')    //true
console.log(!1)     //false
console.log(!0)     //true
console.log(!null);     //true
console.log(!NaN);  //true
console.log(!undefined) //true	

逻辑与&&

[外链图片转存失败(img-XBYhXmAW-1566134937139)(C:\Users\Don\AppData\Roaming\Typora\typora-user-images\1565969237850.png)]

4 赋值运算符

= += -= *= /= %=

5 连接运算符
  • 只要 “ + ” 任意一边的操作数为字符串型数据,则不再执行加法运算
  • 连接后的结果为字符串型数据
console.log(12 + '12'); //1212
console.log(12 - '12')  //0

特别注意

只有 + 才能进行默认的字符拼接,同时,默认删除数字之间的Number类型 转换

算术运算符中 * - / % 都会默认发生 Number隐式转换。

运算符优先级

小括号 > 算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符

创建对象的方法

通过构造函数 Object() 创建普通对象
new 作用: 实例化对象
new 构造函数() ----> 实例化对象
构造函数 可以是js 自带的,可以是我们自定义的

        var student = new Object();
        var liuMing = "刘明",
        var liuJuan = "刘娟",

对象增与取

通过构造函数 Object() 创建普通对象
new 作用: 实例化对象
new 构造函数() ----> 实例化对象
构造函数 可以是js 自带的,可以是我们自定义的
对象取值,对象增加 key:value
1.对象增加key:value
如果是构造函数创建对象,可以通过传参形式增加 key:value

//方式一、传参添加 key:value
 var person = new Object({
     'a':'刘明',
     'b':'刘明1',
     'c':'刘明2',
 });
 
// 方式二、打点添加 key:value
// 语法: object.key = value
person.d = "刘明3";

var liuMing4 = "刘明4";
person.e = liuMing4;

获取
取值方式一、打点取值,并使用变量接受取值结果

    var one = person.a

    console.log(person.d)
    //取值方式二、
    //    语法:object['属性'],有且仅有左右获取值的函数
    //    获取到值如何处理 要么直接使用,要么直接输出
    var d1 = person['d'];
    console.log(d1,'wer');
    var a = {
        e:"sd",
        b:{

        }
    }

总结: 最后一个 点 左边的一律是对象,右面为任意数据类型

布尔对象

 var bool = new Boolean({
     a :false,
     //Boolean()  作用:将其他类型数据转化为布尔类型
     // 创建(构造)布尔对象,
     // 添加 了一个 bool属性,内置由空变为 有值有结构,所以为 true
});

//实例
        var boolstr1 = new Boolean('aaa'); //true
        var boolstr2 = new Boolean('true'); //true
        var boolstr3 = new Boolean('false');    //true
        var boolstr4 = new Boolean(true);   //true
        var boolstr5 = new Boolean(0);  //false
        var boolstr6 = new Boolean(NaN);    //false
        var boolstr7 = new Boolean(null);   //false
        var boolstr8 = new Boolean(23);     //true
        var boolstr9 = new Boolean([]);     //true
        var boolstr10 = new Boolean(' ');   //true
        var boolstr11 = new Boolean('');    //false
        var boolstr12 = new Boolean(false);

总结:在Boolean() 中转换,如果为 空, null ‘’ 0 等代表没有的值的时候,输入结果为false,但是,[]空数组除外。
如果里面有实质的值,转化为true。但false 除外

字符串对象

字符串使用基类 String来构造对象。

   var str = '香港是中国的一部分';
   console.log(str);    //香港是中国的一部分
   var str2 = '转义\'字符\''; 
   console.log(str2)    //转义'字符'
   var str3 = "123.13.23";
   console.log(Number(str3))    //NaN
   console.log(Number(''))  //0
   console.log(parseInt(true))  //true
   console.log(parseInt(""))    //NaN
   console.log(parseInt(''))    //NaN
   console.log(parseFloat('13.123香港'))    //13.123
   console.log(parseFloat(''))  //NaN
   console.log(Math.round('123.343香港') )  //NaN
   console.log(Math.round(true) )   //1
   console.log(Math.round(false) )      //0
   console.log(Math.round("12321.943") )       //12322
   console.log( Math.round("true") )     //NaN
   console.log(Number("12321.香港") )   //NaN
   console.log(Number("true") )     //NaN

字符串转换为Number() ,有值为NaN,无值 为 0;

数字对象

在这里插入图片描述

日期对象

使用 Date();

getTime() 1565766812786 timestamp 时间戳,具有唯一性, 时间戳就是当前时间的 总time毫秒数

一秒等于 1000 毫秒

在使用时间时,一定要注意时间的api,

创建日期对象 new Date() ,可以简写为 new Date().getTime();

星期中的某一天,使用本地时间。返回值是 0(周日) 到 6(周六) 之间的一个整数。

   var date = new Date();
   var year = date.getFullYear();
   var month = date.getMonth() + 1;
   var day = date.getDate();
   var hours = date.getHours();
   var m = date.getMinutes();
   var s = date.getSeconds();
   var ms = date.getMilliseconds();
   var timeX = date.getTime();
   
   var a = new Date().getTime();
   console.log(date)

1. 创建一个日期对象,Date();

星期一 Monday Tuesday Wednesday Thursday Friday Saturday Sunday

古巴比伦人创立的星期制,首先传到古希腊、古罗马等地。古罗马人用他们自己信仰的神的名字来命名1周7天:Sun’s-day(太阳神日),Moon’s-day(月亮神日),Mars’s-day(火星神日),Mercury’s-day(水星神日),Jupiter’s-day(木星神日),Venus’-day(金星神日),Saturn’s-day(土星神日)。

这7个名称传到英国后,盎格鲁-撒克逊人又用他们自己的信仰的神的名字改造了其中4个名称,以Tuesday 、Wednesday、Thursday、Friday 分别取代Mars’s-day 、Mercury’s-day 、Jupiter’s-day 、Venus’-day。 Tuesday来源于Tiu,是盎格鲁-撒克逊人的战神;Wednesday来源于Woden,是最高的神,也称主神;Thursday来源于Thor,是雷神;Friday来源于Frigg,是爱情女神。这样就形成了今天英语中的1周7天的名称。

数组对象

  1. 数组特点

    • 有序 有索引值(index),索引值可以是从【0】 开始到【length -1】结束

    • 数组中数据:可以为任意数据类型,数据可重复

    • 未来数据结构,数组中都是i对象,对象中有数组

  2. 数组中取值

    • 数组名字【索引值】
    • 取最有一个数据 array[array.length -1]
  3. 数组长度

    • 表示数组中数据的总个数
    • 获取 var len = array.length
  4. 创建数组

        方式一、构造函数方式--- Array 数组的构造函数 作用 ,创建数组
        数组,参数未数组中的数据
        数组特点
        1. 有序,从 0 开始 ,
        2. 0~n 是数组的[索引值]
        注意: 索引值具有唯一性,有序性
        3. 数组中数据,可以为任意数据类型
        4. 数组中数据可重复
        注意:以后遇见的数据结构,数组中全是对象,对象中有数组
        var arr = new Array(1,'Hello',true,{name:'黄顺飞'},'');
        console.log(arr)
        /**
        创建数组方式二

        */
        var arr1 = [1,2,3,4,5,{name:'黄顺飞'},[1,2,3[245,465,7632,432,657,6,53,42],4,5]];
        console.log(arr1)
        /*
        数组中取值,语法 array[index] array-数组名 index 索引值
        获取数组的最后一个元素 length - 1
        */
        var arr2 = arr1[arr1.length - 1];
        console.log(arr2)

        /*
        更改数组元素的内容
        */
         arr1[2] = {mes:'我爱中国'};
         console.log(arr1[2])
  1. 创建数组二
数组内部的API
slice

​ 返回数组中一部分并组成新的数组,不会影响原来数组对象。

参一: 从第几个索引值开始 截取

​ 参二: 从第几个索引值结束,不包括这个索引值

​ 截取数据区间: start <= x < end

        var arr = [1,2,3,'刘明','刘明2',4];
        var res = arr.slice(3,5);
        console.log(res); //(2) ["刘明", "刘明2"]
        console.log(arr); //(6) [1, 2, 3, "刘明", "刘明2", 4]
点名器

求随机索引值

        var arr = ['刘明','王','刘一','woqu','雪峰'];
        /*
        求随机索引值
        */ 
        var i = Math.round(Math.random()*4);
        // 需求:在页面中输出被点到
        // document.write(arr[i]);
        document.write("<h1>" + "点名点到"+ arr[i] + "</h1>");
split

split() 将字符串切割成数组,并返回一个新的数组

​ 数组转成字符串

        var className = 'icon,icon2';
        var arr = className.split(',');
        console.log(className); // icon,icon2
        console.log(arr); // (2) ["icon", "icon2"]
        /*
        数组内容添加
        */ 
        arr[2] = 'icon3';
        arr[3] = 'icon4';
        arr[4] = 'icon5';
        console.log(arr); //(5) ["icon", "icon2", "icon3", "icon4", "icon5"]
        var str = arr.toString();
        console.log(str) //icon,icon2,icon3,icon4,icon5
        var str1 = arr.join(' ');
        /*
        空格分开每个数据,转化为字符串
        */ 
        console.log(str1) //icon icon2 icon3 icon4 icon5
        document.write('  <div class=" '+ str1+' "> '+ '我是数组类加成'+' </div>');

类的添加,涉及到 数组添加 小节,其中,有 数组拼接 join, 数组转化为字符串 toString 。

数组删除
数组元素内容删除

delete删除数组里面的内容,相当于重置内容,但是数组长度不变,相当于该为止数据处于为负值状态

        var arr = [1,2,3,4,5,6];
        var arr1 = delete arr[2];
        console.log(arr1) //true
        console.log(arr); //(6) [1, 2, empty, 4, 5, 6]
        console.log(arr.constructor); //ƒ Array() { [native code] }
pop

删除数组的最后一个元素,会对原数组 进行 删除修改

语法: arr.pop()

解释: arr 表示要删除元素 的 目标数组,

没有参数,参数无效,一次只能删除一个数组元素,且是排在最后的元素

有默认返回值,返回的是 删除的元素

var arr = [1,2,3,4,5,6,7,'走了'];
var arr1 = arr.pop(2);
console.log(arr1);   //走了
console.log(arr);    //(7) [1, 2, 3, 4, 5, 6, 7]
console.log(arr.pop());    //7
console.log(arr);   //(6) [1, 2, 3, 4, 5, 6]
shift

删除 目标数组 的第一个 元素,改变原数组的内容

语法:arr.shift();

arr 表示的是修改的目标数组,

没有参数,且参数无效,

有默认返回值,返回的是删除目标数组中的原第一个元素

var arr = ['我在前面位置',1,2,3,4,5,6,7];
var arr1 = arr.shift(2);
console.log(arr1);  //我在前面位置
console.log(arr);    //(7) [1, 2, 3, 4, 5, 6, 7]
console.log(arr.shift());   // 1
console.log(arr);   //(6) [2, 3, 4, 5, 6, 7]
splice

对数组进行删除,会改变原来数组的内容

语法:arr.splice(参数1,参数2);

// 语法:arr.splice(参数1,参数2, 参数3,。。。); 这里不考虑参数3及多余的参数,如果有就变成替换了,不符主题

解释:arr 是 删除操作的目标数组,

参数1 表示 arr数组 的 元素索引值,【索引值】

参数2 表示 截取元素的个数

有返回值,默认返回的是 截取的数组

var arr = ['我在前面位置',1,2,3,4,5,6,7];
var arr1 = arr.splice(1,2);
console.log(arr1);  //(2) [1, 2]
console.log(arr);   //(6) ["我在前面位置", 3, 4, 5, 6, 7]
console.log(arr.splice(1,2));   //(2) [3, 4]
console.log(arr);   //(4) ["我在前面位置", 5, 6, 7]
数组添加

在实际运用中,可以通过数组添加 来完成 添加选择器 构建 样式层叠。参考 split小节

push

在数组的最后位置添加元素,会对原数组进行修改

***语法:***arr.push(参数1,参数2,。。。)

解释:push 是数组的API

其中 arr 表示 目标参数 添加到 这个 arr数组中,

参数1,参数2,。。。 表示需要添加的目标元素,可以为任意的类型值。

有返回默认值,值是修改后的数组长度

var arr = [1,2,3,4,5,6,7];
var arr1 = arr.push('我是第一个push','我是第二个push');
console.log(arr1); //9
console.log(arr.push('我是第三个push')) // 10
console.log(arr);   //(10) [1, 2, 3, 4, 5, 6, 7, "我是第一个push", "我是第二个push", "我是第三个push"]
unshift

在数组的最前一个元素的前面,添加 n 个元素,会对原数组进行修改

特点

添加元素到 数组 的第一个元素之前,占据第一个元素的位置,原来的元素位置依次向后移一位。

语法: arr.unshift(参数1,参数2,。。。);

解释:unshift 是数组的API,

其中 arr 表示 目标参数 添加到 arr 数组中;

参数n 表示需要添加的元素,如果 需要添加的参数数量大于1,则依次有序的排列添加到上一个添加数组元素之后,

参数可以为任意值,

有默认的返回值,返回值是添加后的数组的长度

var arr = [1,2,3,4,5,6,7];
var arr1 = arr.unshift('我是第一个','我是第二个',{},[''],null,undefined,);
console.log(arr1) //8
console.log(arr)    //(8) ["我是第一个", 1, 2, 3, 4, 5, 6, 7]
concat

合并一个或多个 数组,并【返回】一个新数组

特点:

concat 数组之间 进行拼接 ,不会影响数组参数的值,同时 在完成方法后 返回一个新的数组

语法:数组1.concat(拼接的数组参数2,拼接的数组参数2.。。)

解释:这个 API 将 数组1 与 拼接的数组参数2、拼接的数组参数3.。。 等进行拼接,不会改变原来任何数组,并返回一个 拼接后的数组。

原理是默认复制 数组1,然后进行数组拼接,最后将这个新的数组返回。

var arr = [1,2,3,4,5,6,7];
var arr1 = ['我是arr1',2,33,44,55,77]; 
var arr2 = ['arr2',3,4,5,1];
var arr3 = arr1.concat(arr,arr2); 
console.log(arr3) //(18) ["我是arr1", 2, 33, 44, 55, 77, 1, 2, 3, 4, 5, 6, 7, "arr2", 3, 4, 5, 1]
console.log(arr1.concat(arr,arr2)) //(18) ["我是arr1", 2, 33, 44, 55, 77, 1, 2, 3, 4, 5, 6, 7, "arr2", 3, 4, 5, 1]
console.log(arr1) //(6) ["我是arr1", 2, 33, 44, 55, 77]
数组修改
splice

对数组进行删除,会改变原来数组的内容

语法:arr.splice(参数1,参数2, 参数3,。。。); 这里不考虑只有两个的参数,如果有就变成替换了,不符主题

解释:arr 是 删除操作的目标数组,

参数1 表示 arr数组 的 元素索引值,【索引值】

参数2 表示 截取元素的个数

参数3以及后面的参数 表示 在该位置上替换的元素

有返回值,默认返回的是 截取的数组

var arr = ['我在前面位置',1,2,3,4,5,6,7];
var arr1 = arr.splice(1,2,'我是替换splice',{},'我是替换2');
console.log(arr1);  //(2) [1, 2]
console.log(arr);   //(9) ["我在前面位置", "我是替换splice", {…}, "我是替换2", 3, 4, 5, 6, 7]
console.log(arr.splice(1,2));   //(2) ["我是替换splice", {…}]
console.log(arr);   //(7) ["我在前面位置", "我是替换2", 3, 4, 5, 6, 7]

总结

splice() 作用: 删除 添加 替换

参数可以有多,但注意参数表示:

参一:表示从该数组的第【index】索引值开始【查找】

参二: 表示从 【index】的位置开始 删除 参数个 元素

参三及以后的参数: 表示占用该 【index】的索引 添加的元素,可以有多个数

数组排序
sort

sort() 排序步骤

ASCII 码排序

1. 将每个元素转成 字符串类型,

2. 检索第一个字符,然后将该字符转化伪ASCII 码 值

3. 用转化后的 ASCII 码值,进行大小排序,通过 ASCII 码 进行升序排列

注意:函数有返回值,返回的是 修改排列顺序后的数组,会改变原来的数组排序,

有必要的化可以背一些常用的 ASCII 码 和 Unicode 码

var arr = [1,3,6,2,7,44,11];
arr.sort();
console.log(arr.sort())  //(7) [1, 11, 2, 3, 44, 6, 7]
console.log(arr) // [1, 11, 2, 3, 44, 6, 7]
// 注意: 1 11  111  2  23  2444  5  51  6  的排列顺序
reverse

颠倒数组中的元素排序,从以前的顺序 改为 倒序

注意:函数有返回值,返回 的是操作后的数组,会影响原来的数组顺序。

var arr = [1,3,6,2,7,44,11];
arr.reverse();
console.log(arr.reverse()) // [1, 3, 6, 2, 7, 44, 11]
console.log(arr) //[1, 3, 6, 2, 7, 44, 11]
数组和字符串之间的相互转换
数组转换为字符串

toString

​ *toString 将数组中所有字段转换为字符串,返回一个新的字符串,*不会改变原数组的内容。

    var arr = [1,2,3,4,5];
    var str1 = arr.toString(); //1,2,3,4,5 字符串
    console.log(arr1) //(5) [1, 2, 3, 4, 5]

join

join: 将数组里面的内容拼接为字符串,不会改变原数组的原有内容,返回一个新的字符串

如果内容为空,和 toString 效果一样

如果内容为空格字符串,表示将数组中所有的字段拼接成一个新字符串。

​ 参数:作用代替逗号的字符,默认逗号

    console.log(str1);
    var str2 = arr.join();
    console.log(str2);
    var str3 = arr.join("");
    console.log(str3) //12345
    var str4 = arr.join(" ");
    console.log(str4) //12345
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值