Vinson

Vinson

JavaScript 数据类型

发表于 2023-08-06
Vinson
阅读量 48

JavaScript 数据类型分类

  1. 变量声明分为字面量创建和构造函数(实例化)创建
  2. 构造函数创建 typeof 检测数据类型都为 object
  3. 原生对象:String,Number,Boolean,Function,object,Array,Date,Error,RegExp,global,Math
  4. 内置对象:global,Math
  5. 宿主对象:DOM,BOM
  6. 全局对象:window(document 属于 window 下)

JavaScript String 字符串对象-数据类型

'\u03a3'.length // 1
// 转义序列表示一个字符,所以只算一个字符。如果包含双节字符可能导致 length 不准确
js

字符串是不可变的,一旦创建,值就不能变了。字符串的方法都是返回新的值。

let lang = "Java";
lang = lang + "Script";
js

刚开始 lang 包含字符串"Java",接着,lang 被重新定义为包含"Java"和"Script"的组合"JavaScript"。整个过程首先会分配一个足够容纳10 个字符的空间,然后填充上"Java"和"Script"。最后销毁原始的字符串"Java"和字符串"Script",所有处理都是在后台发生的。

转换为字符串

几乎所有值都有的toString()方法,字符串toString()方法只是简单地返回自身的一个副本,null 和undefined 值没有

let age = 11;
let ageAsString = age.toString(); // 字符串"11"
let found = true;
let foundAsString = found.toString(); // 字符串"true"

// 参数为进制数,默认10进制
let num = 10;
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(10)); // "10"
console.log(num.toString(16)); // "a"
js
  • String()
    因为null 和undefined 没有toString()方法,就直接返回了字面量文本。
let value1 = 10;
let value2 = true;
let value3 = null;
let value4;
console.log(String(value1)); // "10"
console.log(String(value2)); // "true"
console.log(String(value3)); // "null"
console.log(String(value4)); // "undefined"
js

注意
用加号操作符给一个值加上一个空字符串""也可以将其转换为字符串

取值

str.charAt(1);// 返回下标
str[1];// 返回下标
str.charCodeAt(1);// 返回下标对应Unicode编码
String.fromCharCode(97,99);// 'ac' 返回对应Unicode码对应字符
js

截取

  • 不会对原始字符串修改,返回值的副本
  • 只有一个参数,截取到字符结束
str.substring(0,2);
js
  1. 起始下标,结束下标 -1
  2. 起始大于结束,会互换
  3. 起始为负数,默认变 0
str.slice(0,3);
js
  1. 起始下标,结束下标-1
  2. 起始大于结束,不换位,返回空字符串
  3. 出现负值,为倒数 = length + 负数
str.substr(1,3);
js
  1. 起始下标,截取位数
  2. 出现负值,为倒数 = length + 负数

位置查询

str.indexOf("o") // 查询字符下标 没有返回 -1
str.lastIndexOf("o")// 从末尾查询 下标还是从左开始 没有返回 -1 
str.indexOf("o",6) // 下标 6 开始查询
str.lastIndexOf("2",3)// 下标 3 向下标 0 倒序搜
str.search("ol");// 下标 0 开始查找 indexOf 但可以传正则
js

分隔/拼接

// 分隔

str.split(",",2);
// 参数 1:以“,”分隔 返回数组,可以传正则
// 参数 2:可选,返回数组的 length,后面多余的不会有

// 拼接
str.concat("!");// 拼接字符串
js

编辑/替换

str.trim(); // 删除前后的空格,中间的空格不会删除,返回副本

// replace:查找字符,要替换字符
str.replace("at","oo");// coo, bat, sat  只会替换第一个
str.replace(/at/g,"oo");// coo, boo, soo  全局替换要正则表达式
js

大小写转换

str.toUpperCase();// AAA  BB 大写
str.toLocaleUpperCase();// AAA  BB 大写
str.toLowerCase();// aaa  bb 小写
str.toLocaleLowerCase();// aaa  bb 小写
js

带 Locale 是针对地区的转换,Unicode 码可能存在不同

URI编码方法

encodeURI("https://www.baidu.com /") // https://www.baidu.com%20/(只有空格替换成 %20)
encodeURIComponent("https://www.baidu.com /") // https%3A%2F%2Fwww.baidu.com%20%2F (除字母数字符号,替换成对应的编码)
decodeURI("https://www.baidu%23.com%20") // https://www.baidu%23.com ( %20 会变成空格,%23 是 decodeURIComponent 的字符不会被转换  )
decodeURIComponent(url1); // https://www.baidu#.com (所有的字符变成原来的,但这个字符不是一个有效的 URL)
js

eval()

解析字符串 js 代码

eval("function hi(){console.log('hi');}") 
hi();// eval 可以将字符串直接当做完整的 js 代码解析运行
eval("var a = 'hello world'");// 不会有变量提升,因为包含在字符串中,只有 eval 运行的时候才会被解析
js

注意
当开启严格模式后 eval 会存在作用域

localeCompare()

  • 比较字符串在字母表的前后
  • 在前面返回 1
  • 在后面返回 -1
var str = "yellow";
str.localeCompare("brick") // 1
str.localeCompare("yellow") // 0
str.localeCompare("zoo") // -1 

// 姓名比较 sort姓名排序
"张".localeCompare("啊","cn");// 1 张Z 的字母表 在 啊A 的后面

// 中文的比较方法 ---- 可以比较任何文字
var arr = [
  { name: '武丽昕', num: 78 },
  { name: '汤文博', num: 38 },
  { name: '卢文博', num: 58 },
  { name: '付秋萍', num: 79 }
];
arr.sort(function(a, b){ // 中文名 进行排序
  return a.name.localeCompare(b.name, 'zh');
})
js

JavaScript Number 数字对象-数据类型

let intNum = 55; // 整数

// 八进制字面量,第一个数字必须是零(0),然后是相应的八进制数字(数值0~7)
let octalNum1 = 070; // 八进制的56
let octalNum2 = 079; // 无效的八进制值,当成79 处理
let octalNum3 = 08; // 无效的八进制值,当成8 处理

// 十六进制字面量,必须让真正的数值前缀0x(区分大小写),然后是十六进制数字(0~9 以及A~F)
let hexNum1 = 0xA; // 十六进制10
let hexNum2 = 0x1f; // 十六进制31
js
  • 浮点值
    科学记数法的格式跟一个大写或小写的字母e,再加上一个要乘的10 的多少次幂,浮点值的精确度最高可达17 位小数
let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效,但不推荐
let floatNum1 = 1.; // 小数点后面没有数字,当成整数1 处理
let floatNum2 = 10.0; // 小数点后面是零,当成整数10 处理
let floatNum = 3.125e7; // 等于31250000
js
  • 方法
var num = 10;
num.toString() // '10'
num.toString(2) // 2 进制转换

num.toFixed(2) // 保留几位小数
num.toExponential(1) // 1.0e+1 科学计数法
var num1 = 99;
num1.toPrecision(1)// 1e+2 向上舍入为 100
num1.toPrecision(2)// 99
num1.toPrecision(3)// 99.0
js
  • NaN
    分子是非0 值,分母是有符号0 或无符号0,则会返回Infinity 或-Infinity
console.log(0/0); // NaN
console.log(-0/+0); // NaN
console.log(5/0); // Infinity
console.log(5/-0); // -Infinity
js

isNaN 首先会调用对象的 valueOf() 方法,然后再确定返回的值是否可以转换为数值。如果不能,再调用 toString() 方法,并测试其返回值

Number.isFinite()

  • 没有隐式的 Number() 类型转换,所有非数值都返回 false
  • 检查一个数值是否为有限的( finite ),即不是 Infinity
Number.isFinite(1);  // true
Number.isFinite(0.1); // true
Number.isFinite(NaN); // false 不是有限的
js

Number.isInteger()

  • 判断一个数是不是整数
Number.isInteger(0); // true
// JavaScript 内部,整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值
Number.isInteger(1);  // true
Number.isInteger(1.0); // true
js

数值转换

  • null,返回0。
  • undefined,返回NaN。
  • 字符串:
    • Number(“1”)返回1,Number(“123”)返回123,Number(“011”)返回11
    • 浮点数同样忽略前面的 0
    • 16 进制转换为对应的 10 进制整数值
  • 对象,调用valueOf()方法,再执行上面的规则。如果是NaN,则调用toString()方法,再按照字符串的规则转换。
  let num1 = Number("Hello world!"); // NaN
  let num2 = Number(""); // 0
  let num3 = Number("000011"); // 11
  let num4 = Number(true); // 1
js
  • parseInt()
    • 字符串最前面的空格会被忽略
    • 第一个字符不是数值、加号或减号,立即返回 NaN
let num1 = parseInt("1234blue"); // 1234
let num2 = parseInt(""); // NaN
let num3 = parseInt("0xA"); // 10,解释为十六进制整数
let num4 = parseInt(22.5); // 22
let num5 = parseInt("70"); // 70,解释为十进制值
let num6 = parseInt("0xf"); // 15,解释为十六进制整数
js
  • parseInt()也接收第二个参数,指定进制数
let num = parseInt("0xAF", 16); // 175
// 提供了十六进制参数,那么字符串前面的"0x"可以省掉:
let num1 = parseInt("AF", 16); // 175
let num1 = parseInt("10", 2); // 2,按二进制解析
let num2 = parseInt("10", 8); // 8,按八进制解析
let num3 = parseInt("10", 10); // 10,按十进制解析
js
  • parseFloat 解析到一个无效的浮点数值字符为止
    • 始终忽略字符串开头的零
    • 十六进制数值始终会返回 0,因为 parseFloat() 只解析十进制值
let num1 = parseFloat("1234blue"); // 1234,按整数解析
let num2 = parseFloat("0xA"); // 0
let num3 = parseFloat("22.5"); // 22.5
let num4 = parseFloat("22.34.5"); // 22.34
let num5 = parseFloat("0908.5"); // 908.5
let num6 = parseFloat("3.125e7"); // 31250000
js

JavaScript Array 数组对象-数据类型

创建

new Array(10);// 一个值是数组的长度,值为 empty(空
new Array('1','3');// 多个值与字面量一样
js
  • 利用 length 可以在末尾添加一项
as[as.length] = "red";

as[99] = "green"; // 下标 99 添加,3 到 98 都是undefined
js
  • 转换方法
var color = ['red','pink','green'];
color.toString() // red,pink,green
color.valueOf() // (3) ["red", "pink", "green"] 返回数组对象的原始值
js

改变原数组(7个方法)

arr.push();// 末尾添加 一个/多个值, 返回新 length
arr.pop();// 删除末尾的值,返回删除的值
arr.unshift();// 前面添加 一个/多个值,返回新 length
arr.shift();// 删除第一个值,返回删除的值
arr.reverse();// 数组逆序,不是排序
arr.sort((a,b)=>a-b);// 升序,return 大于 0 的值,a b互换,小于 0 不换
arr.splice(startIndex,length,'替换或插入的值 ?可选');// 起始下标,截取的长度,返回剪切的 [数组]
js

不改变原数组

arr.concat('12',[2]);// 拼接数字或字符,返回新数组
arr.slice(startIndex,endIndex);// 截取开始下标,结束下标 -1
arr.join("-");// 返回以标识符连接字符串
arr.toString();// 返回数组的字符串
arr.indexOf('2');// 查找数值在数组的位置,有返回下标,没有返回 -1
Array.isArray([]);// 传入的参数是否是数组,是返回 true
js

数组迭代

arr.every((items,i,arr)=>{return 条件});// 条件每一项为 true,全部符合条件才为 true
arr.some((items,i,arr)=>{return 条件});// 条件有一项为 true,则为 true
arr.filter((items,i,arr)=>{return 条件});// 返回符合条件的值,组成数组返回,没有符合返回空[]
arr.forEach((items,i,arr)=>{});// 遍历
arr.map((items,i,arr)=>{return val*2});// 遍历每一项,组成新数组返回

// 归并 
arr.reduce(function(prev,cur,index,array){
  // prev 为此方法 return 的值,初始为数组的第一项
  // cur 为数组的下一项
  // index 下标
  // array 数组本身
  return prev + cur ; 
})
// arr.reduceRight 与 reduce 是一样的,从右边开始遍历
js
  • reduce 计算数组总和
[1,2,3].reduce(function(prev,next) {
  return prev + next
})
js
  • 利用 reduce 第二个参数,计算对象下某个值的总和
var arr = [{a: 1},{a: 2},{a: 3}];
arr.reduce(function(prev,next) {
  return prev + next.a
},0)
js

如果没有 reduce 第二个参数,prev 初始值会是数组的第一项,设置初始值为 0 与下一项累加即可

类数组

var obj = {
  "0" : "12",
  "1" : 21,
  "2" : "122",
  length : 1,
  splice : Array.prototype.splice,
}
console.log(obj); // 控制台会输出数组形式的数据,js 中的数组也是重写了 Object 的原型
js

条件:

  1. 键为 0 1 2 3 的数字字符串(数组 0 1 2 也会被默认调用 tostring 以字符串存储为键)
  2. 有 length 属性
  3. 绑定 splice 为 Array 原型上的方法 此时输出的 obj 为数组

JavaScript 数组去重排序

数组去重

var arr = [9,9,0,0,2,3,2,3,5];
var a = [];
arr.forEach(function(item,index,arr){
  if(a.indexOf(item) == -1){
  // if(a.includes(item)){ // 或
    a.push(item);
  }
});
js

冒泡排序

// 二重循环,外层循环控制比较次数,内层,两两相邻进行比较换位,谁大谁换到后一位
for(var i = 0; i < arr.length; i++){
  for(var j = 0; j < arr.length - i; j++){// 循环相邻两位比较,外层每走一次,内层的循环最大值,就减小 i
    // 内层循环进行相邻的两两比较
    if(arr[j] > arr[j + 1]){// 如果前一项大于后一项,进行换位
      // 引入第3个变量,才能进行两个变量的值的交互
      var temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
    }
  }
}
js

选择排序

for(var i = 0; i < arr.length; i++){// 外层循环,控制每次选择的下标
  for(var j = i + 1; j < arr.length; j++){// 内层循环,控制 i 下标的后续下标
    if(arr[i] > arr[j]){
      // 比较选择的下标值和后续的下标的值,谁小就将谁换到选择的下标上来,然后在用选择的下标上换来的值和后续下标值进行比较
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  }
}
js

递归排序

function qSort(arr){
  // 当 lArr 或 rArr 中只有一个数据项或没有数据项时,就返回该数组本身边界条件
  if(arr.length <= 1){
    return arr;
  }
  // 获取中间下标值
  var mIndex = Math.floor(arr.length / 2);
  // 截取中间下标对应的值
  var mVal = arr.splice(mIndex , 1)[0];
  // 创建左右空数组
  var lArr = [], rArr = [];// 千万不能 var lArr = rArr = [];
  // 遍历数组中剩余的数据项,当该数据项小于 mVal 就放到 lArr 中,当大于 mVal 就放到 rArr
  for(var i = 0; i < arr.length; i++){
    if(arr[i] < mVal){
      lArr.push(arr[i]);
    }else{
      rArr.push(arr[i]);
    }
  }
  // 合并返回新数组,切对 lArr 数组和 rArr 数组进行递归
  return qSort(lArr).concat(mVal, qSort(rArr));
}
js

JavaScript Math 数学对象-数据类型

最大最小值

Math.max(1,3,4,5,9) // 最大值
Math.min(1,3,4,5,9) // 最小值
Math.max.apply(Math,[2,3,6]) // 最大值
Math.min.apply(Math,[2,3,6]) // 最小值
js

舍入

Math.ceil(1.3) // 向上舍入
Math.floor(1.9) // 向下舍入
Math.round(1.49) // 1 四舍五入(只看小数点后一位数)
Math.floor(Math.random() * 10 + 1)  
// 随机一个 [A - B] 之间的随机数
function selectFrom(A,B){
  return Math.floor(Math.random() * (B - A + 1) + A)
}
selectFrom(2,9);// 生成 2-9(包括 2 和 9)的随机数
js

其他方法

var num = -2.4;
Math.abs(num);// 绝对值
Math.exp(num);// 返回 Math.E 的 num 次幂
Math.log(num);// 自然对数
Math.pow(num,p);// num 的 p次幂
Math.sqrt(num);// num的平方根
Math.PI();// 表示数学中的 π 代表的是 180 的弧度
1弧度 = Math.PI() / 180;
----下面的方法传入的值要是弧度,不能传数字----
Math.acos(x);// x 的反余弦值
Math.asin(x);// x 的反正弦值
Math.atan(x);// 反正切值
Math.atan2(x,y)// y/x 的反正切值
Math.cos(x)// x 的余弦值
Math.sin(x)// x 的正弦值
Math.tan(x)// x 的正切值
-------------------------
Math.cbrt(1); // 1  计算一个数的立方根
Math.cbrt('1'); // 1 会对非数值进行转换
Math.imul(1, 2);  // 2 大多数情况下,与 a*b 相同
js

ES6 扩展方法

// Math.trunc 方法用于去除一个数的小数部分,返回整数部分。
// 隐式调用 Number 方法
Math.trunc(4.1) // 4
Math.trunc(-4.9) // -4
Math.trunc('123.456') // 123
Math.trunc(false) // 0
Math.trunc(null) // 0
// Math.sign 方法用来判断一个数到底是正数、负数、还是零。
/* 参数为正数,返回 +1;
 * 参数为负数,返回 -1;
 * 参数为 0,返回 0;
 * 参数为 -0,返回 -0;
 * 其他值,返回 NaN。 
 */
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
js

JavaScript Date 时间对象-数据类型

创建日期

new Date(); // 英文 星期几 月 日 年 时:分:秒 地区new Date(Date.parse("may 25 , 2004")) // 以传入的时间为起始new Date(Date.UTC(2005 , 4 , 5 , 17 , 5, 55)) // UTC时间new Date("2005,4,5,5,17,5,55") // 本地时间 年月日var start = Date.now() // 取得开始时间,调用函数var stop = Date.now() // 取得结束时间var start1 = new Date(); // 取得开始时间,调用函数var stop1 = new Date();// 取得结束时间Date.parse("2020-1-3");// 取得传入时间的时间戳
js

时间格式化

date.toDateString();// 显示星期几、月、日、年
date.toTimeString();// 显示分、秒、地区
date.toLocaleDateString();// 以特定地图显示星期几、月、日、年
date.toLocaleTimeString(); // 以特定地图显示、时、分、秒
date.toUTCString(); // 显示完整 UTC 时间
js

时间组件

date.getTime(毫秒); // 返回日期的毫秒数
date.setTime(); // 以毫秒设置日期,会改变整个日期
date.getFullYear(年); // 取得 4 位数的年份
date.setFullYear(); // 设置 4 位数的年份
date.getUTCFullYear();// 返回 UTC 日期的 4 位数年份
date.setUTCFullYear();// 设置 UTC 日期的 4 位数年份
date.getMonth(月);// 取得月份 0 表示 1 月
date.setMonth();// 设置月份 传入月份必须大于 0 超过 11 会增加年份
date.getDate(日);// 取得日期天数 1 - 31
date.setDate();// 设置日期天数
date.getDay(星期);// 取得星期几 0 是星期天
date.getHours(时);// 取得小时 0 - 23
date.setHours();// 设置小时超过 23 会增加天数
date.getMinutes(分);// 取得分钟 0 - 59
date.setMinutes();// 设置分钟数 超过 59 会加小时
date.getseconds(秒);// 取得秒数 0-59
date.setSeconds();// 设置秒数
date.getMilliseconds(毫秒);// 取得毫秒
date.setUTCMilliseconds();// 设置毫秒
date.getTimezoneOffset(UTC相差分钟);// 返回本地时间与UTC时间相差的分钟数
js

利用 Date 对象获取某个月有多少天

new Date('2021','10',-1).getDate()
js

获取 2021年 9月份有多少天,字符串 10 月,天数 -1 时会退回至 9 月,getDate 获取当前天数即可,而不再是使用 switch

JavaScript function 函数对象-数据类型

  • 函数分类
    • 普通命名函数
    • 通过名字调用执行
function fn(){}
js
  • 事件处理函数
    • 可以是匿名函数也可以是匿名函数,通过元素对象的事件触发来执行
  btn.onclick = function(){}
js
  • 构造函数
    • 通过new运算符来执行
  function Person(){}
  new Person();
js
  • 回调函数
    • 在主函数中满足一定条件调用执行 匿名函数也可以是命名函数
  • 表达式函数:将一个函数 赋值给一个变量 通过函数名的调用执行
var a = function(){}
js
  • 匿名函数:闭包
;(function(name){
  console.log(name);
  return 'aaa';
})('mark');
// 或者
+function(name){
  console.log(name);
}('mark');
// 或者
!function(name){
  console.log(name);
}('mark');
js

callee 与 caller

function a(){
  console.log(arguments.callee);// 当前函数
  console.log(a.caller); // 真正调用此函数的函数
}
js

改变this指向

fn.call(obj,a,b,c...);// 多个参数
fn.apply(obj,[a,b,c...]);// 两个参数,第二个为数组
fn.bind(obj,a,b,c...);// 与 call 一样,返回的是函数本身
js

注意
第一个参数传null为不改变this指向

函数的 length 属性

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2 有一个默认值, 3-1 = 2

// 数值为参数的长度,但指定了默认值 length 属性将失真
(function(...args) {}).length // 0 

// 如果设置了默认值的参数不是尾参数,那么 length 属性也不再计入后面的参数了。
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
js

name属性

function foo() {}
foo.name // "foo"
// 构造函数 name 为构造出来对象下的值
(new Function)
js

JavaScript RegExp 正则表达式对象-数据类型

修饰符

  • g:全局模式,表示查找字符串的全部内容,而不是找到第一个匹配的内容就结束。
  • i:不区分大小写,表示在查找匹配时忽略 pattern 和字符串的大小写。
  • m:多行模式,表示查找到一行文本末尾时会继续查找。
  • y:粘附模式,表示只查找从 lastIndex 开始及之后的字符串。
  • u:Unicode 模式,启用 Unicode 匹配。
  • s:dotAll 模式,表示元字符,匹配任何字符(包括\n 或\r)。

实例属性

  • global:布尔值,表示是否设置了 g 标记。
  • ignoreCase:布尔值,表示是否设置了 i 标记。
  • unicode:布尔值,表示是否设置了 u 标记。
  • sticky:布尔值,表示是否设置了 y 标记。
  • lastIndex:整数,表示在源字符串中下一次搜索的开始位置,始终从0 开始。
  • multiline:布尔值,表示是否设置了 m 标记。
  • dotAll:布尔值,表示是否设置了 s 标记。
  • source:正则表达式的字面量字符串(不是传给构造函数的模式字符串),没有开头和结尾的斜杠。
  • flags:正则表达式的标记字符串。始终以字面量而非传入构造函数的字符串模式形式返回(没有前后斜杠)。

方法

test()

  • test:检测字符串是否匹配正则 如果匹配 返回 true 不匹配返回 false 表单验证的返回值
/is/.test('my name is joth') // true
/is/.test('you are a ediot') // false

RegExp.input    // 查询的字符串
RegExp.leftContext // 返回表达式之前的字符串
RegExp.rightContext // 返回表达式之后的字符串
RegExp.lastMatch  // 返回与表达式匹配的字符串
RegExp.lastParen  // 返回(.)匹配的捕捉组
js

macth()

  • 全局 返回所有匹配字符串组成的一个数组。
  • 非全局 返回匹配到的第一个字符串数组,且会返回该字符串的下标及相关信息。
var str = 'my name is mark, my age is 18, my sex is male';
var reg = /is/;
str.match(reg)// ["is", index: 8, input: "my name is mark, my age is 18, my sex is male", groups: undefined]

// 全局模式
var reg = /is/g;
str.match(reg)// ["is", "is", "is"]
js

exec()

  • 全局模式 有一个自己的 lastIndex 值 引导下次进行 exec 匹配的起始位置。
  • 非全局模式下进行字符串的匹配 结果和 macth 一样
var str = 'my name is mark, my age is 18, my sex is male';
var reg = /is/;

// 非全局
reg.exec(str)// ["is", index: 8, input: "my name is mark, my age is 18, my sex is male", groups: undefined]

// 全局
var reg = /is/g;
reg.lastIndex  // 0
reg.exec(str)  // ["is", index: 8, input: "my name is mark, my age is 18, my sex is male", groups: undefined]
reg.lastIndex  // 10

reg.exec(str)  // ["is", index: 24, input: "my name is mark, my age is 18, my sex is male", groups: undefined]
reg.lastIndex  // 26

reg.exec(str)  // ["is", index: 38, input: "my name is mark, my age is 18, my sex is male", groups: undefined]
reg.lastIndex  // 40

reg.exec(str)  // null
reg.lastIndex  // 0
js

正则预查询

判断括号内表达式

返回 —> 括号外表达式

  • 正向肯定
    (?=):

表达式1(?= 表达式2)

返回 --> 前面是表达式1

后面是表达式2

var path1 = 'path/hello.html';
var reg = /\w+(?=.html)/; // 前面是数字字母_  后面是 .html
path1.match(reg); // hello
js
  • 正向否定
    (?!):

表达式1(?!表达式2)

返回 —> 前面是表达式1

后面不是表达式2

var str = 'a,1,b,2,c,3,' 
var reg = /,(?![a-z]|$)/g; // 前面是, 后面不是字母
str.replace(reg, '=') // 'a=1,b=2,c=3,'
js
  • 反向肯定
    (?<=):

(?<=表达式2)表达式1

前面是表达式2

返回 —> 后面是表达式1

var path1 = 'path/hello.html';
var reg = /(?<=path\/)\w+/; // 前面是 path/ 后面是数字字母_
path1.match(reg) // hello
js
  • 反向否定
    (?<!):

(?<!表达式2)表达式1

前面不是表达式2

返回 ----> 表达式1

var str = 'a,1,b,2,c,3,';
var reg1 = /(?<!\d),/g; // 前面不是, 后面是,
str.replace(reg1, '=') // 'a=1,b=2,c=3,'
js

元字符

  • 单个字符

    • . 匹配除换行外单个的任意字符
    • [范围] 匹配单个范围内的字符
    • [0-9] 匹配单个 数字
    • [^范围] 匹配单个范围内除括号内的字符
    • [^0-9] 匹配单个 非数字
    • [a-zA-Z0-9_] 匹配单个 数字、字母、下划线_
    • \w 匹配单个 数字、字母、下划线 等价于 [a-zA-Z0-9_]
    • \W 匹配单个 非数字、字母、下划线
    • \d 匹配单个 数字 等价于 [0-9]
    • \D 匹配单个 非数字 等价于 [^0-9]
  • 重复字符

    • x 代表任意的单个字符
    • x? 匹配0个或1个x /goog?le/ 要么是google 要么是goole
    • x+ 匹配最少1个字符
    • x* 匹配任意个x字符
    • x{m,n} 匹配至少m个,最多n个(包括n
    • x{n} 必须匹配n个字符
    • (xyz)+ 小括号括起来的部分是当做单个字符处理
  • 空白字符

    • \s 匹配任意单个空白字符(空格 制表 回车
    • \S 匹配任意单个非空白字符
    • \b 单词边界
    • \B 非单词边界
  • 锚字符

    • ^ 行首匹配/^google/
    • $ 行尾匹配/google$/
  • 替代字符

    • | 或 /google|baidu|bing/
  • 转义字符

    • .
    • *
  • 验证字符串是否存中文

      /^[\u4e00-\u9fa5]+$/ 
    js

JavaScript Object 对象-数据类型

Object.create()

Object.create(prototype, [descriptors])
js
  • 返回一个新对象
  • 新对象的__proto__指向第一个参数。参数可以为null,即没有原型对象
  • 要添加的属性以及配置
var newObj=Object.create(obj,{
  sex:{// 键名
    value:"男",// 键值,默认 undefined
    writable:true,// 是否可以被修改。默认 false
    configurable:true,// 是否可以被删除。默认 false
    enumerable:true,// 是否支持可枚举(for in 访问)。默认值是 false
  }
});
js

Object.defineProperty()

Object.defineProperty(obj, [propName], descriptor) 
js
  • 直接操作参数1 obj地址
  • propName: 添加的键名[两个参数时 = 配置选项的 value 值]
  • descriptor: 配置选项
var obj = {sex1:''};

Object.defineProperties(obj,{
  sex:{
    // 也可以有 Object.create() 的配置
    set(value){// 赋值时调用
      this.sex1=value;
    },
    get(){// 获取值时调用
      return this.sex1;
    }
  }
})
js
  1. 可以多次调用 Object.defineProperty() 方法修改同一个属性,但把 configurable 设置为 false 之后就会报错。
  2. 当使用了 getter 或 setter 方法,不允许使用 writable 和 value 这两个属性。如果使用,会直接报错

Object.defineProperties()

Object.defineProperties(obj, props)

  • obj:要修改的对象
  • props:属性值
var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
});
js

Object.assign()

Object.assign(target, ...sources)
js
  • 后面的 sources 源对象 拷贝到 target 目标对象上
  • 返回 target 对象
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returned = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5 }
console.log(returned); // Object { a: 1, b: 4, c: 5 }
js
  • 会调用源对象的 [[Get]]
  • 和目标对象的 [[Set]]

Object.keys()

var user ={
 name:"tom",
 age:25
}

var keys = Object.keys(user)// ['name','age'] 返回键的数组,参数可以是原型对象

// 只遍历键
for (let key of Object.keys(obj)){
  console.log(key);
}
js

Object.values()

var user ={
 name:"tom",
 age:25
}
var keys = Object.values(user) // ["tom", 25]

// 只遍历值

for(let item of Object.values(obj)){
  console.log(item);
}
js

Object.entries()

  • 遍历键和值
  • 以二维数组的形式,将对象中的每个键名和键值,进行数组分解。
for(let [key,item] of Object.entries(obj)){
  console.log(item,key);
}
js

Object.getOwnPropertyNames()

Object.getOwnPropertyNames(Person.prototype) // ["constructor", "name", "job", "sayName"] 返回键的数
js

包含constructor
不包含Symbol 属性

Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols(obj)
// 参数:要返回 Symbol 属性的对象。
// 返回值:对象自身上找到的所有 Symbol 属性的数组。

var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");

obj[a] = "localSymbol";
obj[b] = "globalSymbol";

var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2
console.log(objectSymbols)     // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0])   // Symbol(a)
js

Object.getOwnPropertyDescriptors()

返回同时包含常规和符号(symbol)属性描述符的对象,都没有则返回空对象

Object.getOwnPropertyDescriptors({a:1})
/* {
  a:{
    configurable: true
    enumerable: true
    value: 1
    writable: true
  }
} */
js

Object.is()

Object.is(value1, value2);
// 比较两个值是否相等,与 == 和 === 不一样。返回 true/false

Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is([], []); // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true

// 特例
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
js

Object.getPrototypeOf()

Object.getPrototypeOf(object) // 返回参数的原型对象,没有继承属性则返回 null
Object.getPrototypeOf( Object ); // ƒ () { [native code] }
Object.getPrototypeOf( Function ); // ƒ () { [native code] }
Object.getPrototypeOf( Object ) === Function.prototype; // true

var obj = new Object();
Object.prototype === Object.getPrototypeOf( obj ); // true
Object.prototype === Object.getPrototypeOf( {} ); // true
js

Object.freeze()

Object.freeze(obj); // 返回被冻结的对象; 返回传递的对象,不是创建一个被冻结的副本
// 冻结一个对象,冻结后不能添加删除,包括配置,可枚举,可写性等;也包括原型上的属性
js

Object.seal()

Object.seal(obj); // 返回被封闭的对象的引用
// 阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。
// 不会影响从原型链上继承的属性。但 __proto__ 属性的值也会不能修改。
js
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论