JavaScript相关知识（一）

DQiinG
101 阅读6分钟

一、数据类型

  1. 基本数据类型：Number、String、Boolean、null、undefined、symbol
    基本类型是存储在栈中
let a = 10;
let b = a;
b = 20;
console.log(a);//10

image.png

  1. 引用数据类型： Object、Array、function、Data、map
    引用类型是存储在堆中，每个堆中都有一个引用地址，引用地址存储在栈中
var obj1 = {}
var obj2 = obj1;
obj2.name = "Xxx";
console.log(obj1.name); // xxx

image.png

二、数组的常用方法有哪些？

1、操作方法 — — 增、删、改、查

增 — — push、unshift、splice、concat

 var arr = [1, 3, 5, 2, 10, 8]
// push
var arrPush = arr.push(12,22)
console.log('arr:' + arr);  //arr:1,3,5,2,10,8,12,22
console.log('push:' + arrPush);  //push:8 在数组末尾增加元素，返回的是增加之后的长度

// unshift
var arrUnshift = arr.unshift(88,7,32)
console.log('arr:' + arr);  //arr:88,7,32,1,3,5,2,10,8,12,22
console.log('unshift:' + arrUnshift);  // unshift:11，在数组最前面增加元素，返回的是增加之后的长度

// splice(起始位置，删除元素的个数，增加的元素)
var arrSplice = arr.splice(1,0, 81,43)
console.log('arr:' + arr);  // arr:88,81,43,7,32,1,3,5,2,10,8,12,22
console.log('splice:' + arrSplice); // splice:   返回的是空

// concat
var arrConcat = arr.concat(99,101,379)
console.log('arr:' + arr);  // arr:88,81,43,7,32,1,3,5,2,10,8,12,22
console.log('concat:' + arrConcat);  //concat:88,81,43,7,32,1,3,5,2,10,8,12,22,99,101,379
//push、unshift、splice会改变原有的数组；concat 方法不改变原有的数组，创建一个新的副本，在副本内增加元素

删 — — pop、shift、splice、slice

var arr = [1, 3, 5, 2, 10, 8, 9, 22, 41, 101]
// pop
var arrPop = arr.pop()
console.log('arr:' + arr); //arr:1,3,5,2,10,8,9,22,41
console.log('pop:' + arrPop); // pop:101,删除数组的最后一个元素，并返回其值

// shift
var arrShift = arr.shift()
console.log('arr:' + arr);  // arr:3,5,2,10,8,9,22,41
console.log('shift:' + arrShift); // shift:1, 删除数组的第一个元素，并返回其值

// splice
var arrSplice = arr.splice(1, 2)
console.log('arr:' + arr); // arr:3,10,8,9,22,41
console.log('splice:' + arrSplice); // splice:5,2，删除指定位置的指定数量的元素，并返回被删除元素的值

// slice (start, end) 不包括end
var arrSlice = arr.slice(2, 4)
console.log('arr:' + arr); // arr:3,10,8,9,22,41
console.log('slice:' + arrSlice); // slice:8,9  返回指定位置的元素，不改变原数组
// pop、shift、splice 改变原有的数组，slice 不改变原有数组

改 — — splice(起始位置，删除元素的个数，增加的元素)

var arr = [1, 3, 5, 2, 10, 8, 9, 22, 41, 101]
var arrSplice = arr.splice(3, 0, 1000, 200)
console.log(arr); //[1, 3, 5, 1000, 200, 2, 10, 8, 9, 22, 41, 101]

查 — — indexOf、find、includes

var arr = [1, 3, 5, 22, 10, 8, 9, 22, 55, 101]
// indexOf
var arrIndexOf = arr.indexOf(22)
console.log(arrIndexOf); // 3 
// indexOf在数组中找到元素则返回元素的位置（返回的是查找到的第一个匹配元素的位置）,没找到则返回-1

// find
var arrFind = arr.find(item => item > 50)
console.log(arrFind); // 55
//find 返回符合条件的第一个元素的值

// includes
var arrIncludes = arr.includes(22) 
console.log(arrIncludes); // true
// includes 返回的是Boolean 值，包含查找的元素返回true，没找到返回false
2. 转换方法

join 将数组转换为字符串

var arr = ['IU', 'Dami', 'GoogYoo', 'Jackson', 'Wooshik']
var str = arr.join(' + ')
console.log(str); //IU + Dami + GoogYoo + Jackson + Wooshik
3. 迭代方法

some、every、forEach、filter、map

var arr = [1, 3, 5, 22, 10, 8, 9, 22, 55, 101]
// some
var arrSome = arr.some(item => item > 20)
console.log(arrSome); // true
// some 只要有一个返回true，就返回ture

// every
var arrEvery1 = arr.every(item => item > 0)
var arrEvery2 = arr.every(item => item > 10)
console.log('arrEvery1:' + arrEvery1 + '\n' + 'arrEvery2:' + arrEvery2); 
//arrEvery1:true
//arrEvery2:false
// every 要全部返回true，才返回true；只要有一个为false，就返回false

// forEach
var arrForEach = arr.forEach(item => {
    if (item > 25) {
        console.log(item);
    }
})
// 55
// 101

// filter
var arrFilter = arr.filter(item => item > 50)
console.log(arrFilter); //[55, 101]
//filter 返回符合条件的元素组成的数组

// map
var arrMap = arr.map(item => item * 2)
console.log('arr:' + arr); // arr:1,3,5,22,10,8,9,22,55,101
console.log('arrMap:' + arrMap); //arrMap:2,6,10,44,20,16,18,44,110,202
// map 将数组的每个元素进行相关操作，不改变原数组

三、字符串常用的方法

1. 增、删、改、查

增 — — +、concat

var str = 'IU and Dami and Jackson'
// +
var str1 = str + ' GoogYoo '
console.log(str1); // IU and Dami and Jackson GoogYoo 

// concat
var str2 = str.concat(' MINO ')
console.log(str2); // IU and Dami and Jackson MINO

删 — — slice、substr、substring

var str = 'IU+and+Dami+and+Jackson'
// slice(start, end) 不包括end
var strSlice1 = str.slice(3)
console.log(strSlice1); // and+Dami+and+Jackson
var strSlice2 = str.slice(3, 6)
console.log(strSlice2); // and

// substr(start, length)
var strSubstr1 = str.substr(4)
console.log(strSubstr1); // nd+Dami+and+Jackson
var strSubstr2 = str.substr(0, 12)
console.log(strSubstr2); //IU+and+Dami+

// substring(start, end) 不包括end
var strSubstring1 = str.substring(0)
console.log(strSubstring1); //IU+and+Dami+and+Jackson
var strSubstring2 = str.substring(3, 8)
console.log(strSubstring2); // and+D

改 — — trim、trimLeft、trimRight、toLowerCase、toUpperCase、repeat、padEnd、padStart

var str = ' IU and Dami and Jackson '
// trim 删除左右两边的空格
var strTrim = str.trim()
console.log(strTrim); // "IU and Dami and Jackson"

// trimLeft 删除左边的空格
var strTrimLeft = str.trimLeft()
console.log(strTrimLeft); // "IU and Dami and Jackson "

// trimRight 删除右边的空格
var strTrimRight = str.trimRight()
console.log(strTrimRight); // " IU and Dami and Jackson"

//toLowerCase 转化为小写
var strLower = str.toLowerCase()
console.log(strLower); //" iu and dami and jackson "

//toUpperCase 转化为大写
var strUpper = str.toUpperCase()
console.log(strUpper); // " IU AND DAMI AND JACKSON "

//repeat 重复次数
var strRepeat = str.repeat(2)
console.log(strRepeat); // " IU and Dami and Jackson  IU and Dami and Jackson "

//padEnd(length, 长度不足填充的字符)
var strPadEnd1 = str.padEnd(30, '+')
console.log(strPadEnd1); // " IU and Dami and Jackson +++++"
var strPadEnd2 = str.padEnd(3)
console.log(strPadEnd2); //" IU and Dami and Jackson "

//padStart
var strPadStart1 = str.padStart(30, '+')
console.log(strPadStart1); //"+++++ IU and Dami and Jackson "
var strPadStart2 = str.padStart(3)
console.log(strPadStart2); //" IU and Dami and Jackson "

查 — — indexOf、charAt、startWith、includes

var str = 'IU and Dami and Jackson'
// indexOf 返回查找到第一个符合元素的index
var strIndexOf = str.indexOf('a')
console.log(strIndexOf); // 3

// charAt 
var strCharAt = str.charAt(7)
console.log(strCharAt); // D

// starWith 
var strStartWith1 = str.startsWith('IU')
console.log(strStartWith1); // true
var strStartWith2 = str.startsWith('Dami')
console.log(strStartWith2); // false

// includes
var strIncludes1 = str.includes('Dami')
console.log(strIncludes1); // true
var strIncludes2 = str.includes('foo')
console.log(strIncludes2); // false
2. 转换方法

split

var str = 'IU and Dami and Jackson'
var arr = str.split(' ')
console.log(arr); //['IU', 'and', 'Dami', 'and', 'Jackson']
3. 模板匹配

match、search、replace

//match
let text = "cat, bat, sat, fat";
let pattern = /.at/;
let matches = text.match(pattern);
console.log(matches[0]); // "cat"

//search 返回匹配的索引，没找到返回-1
let text = "cat, bat, sat, fat";
let pos = text.search(/at/);
console.log(pos); // 1

//replace(匹配的内容，替换的参数)
let text = "cat, bat, sat, fat";
let result = text.replace("at", "ond");
console.log(result); // "cond, bat, sat, fat"

四、 类型转换机制

1. 强制类型转换

Number() --> 比较严格，只要有一个字符无法转换为数值，整个字符串就会被转为NaN
parseInt() --> 相对没那么严格，逐个解析字符，遇到不能转换的字符就停下来

Number('324abc') // NaN
parseInt('32a3') //32

String()

//对象
String({a: 1}) // "[object Object]"

Boolean

Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true
2. 隐式转换
  • + — — 只要存在一个字符串，则会进行字符串拼接
  • 除了+有可能把运算子转为字符串，其他运算符都会把运算子自动转成数值
'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

五、 == 和 === 的区别

== 是等于操作符，在比较大小之前会先进行类型转换，再确定操作数是否相等。- 两个都为简单类型，字符串和布尔值都会转换成数值，再比较。

  • 简单类型与引用类型比较，对象转化成其原始类型的值，再比较
  • 两个都为引用类型，则比较它们是否指向同一个对象
  • null 和 undefined 相等
  • 存在 NaN 则返回 false === 是全等操作符，不进行类型转换，直接比较，类型和数值相等才返回true。
    undefined 和 null 与自身严格相等
avatar
文章
阅读
粉丝