js基础知识

js基础知识

1、数据类型

javaScript(即js,下⽂就⽤js代替了)数据类型分基础数据类型以及引⽤数据类型

  • 基础数据类型:Symbol、String、Number、Null、Boolean、Undefined
  • 引用数据类型:Object、Array、Function
    在const中,基础数据类型是不可更改的;⽽引⽤数据类型是可以的

2、String

  • 字符串截取
  1. str.slice(startIndex,[endIndex]) ===> 返回了⼀个新的startIndex~endIndex之间的字符串。(允许负数)

slice

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(4)); // Expected output: "quick brown fox jumps over the lazy dog."

console.log(str.slice(0, 17)); // Expected output: "The quick brown f"

console.log(str.slice(-4)); // Expected output: "dog."

console.log(str.slice(-9, -3)); // Expected output: "lazy d"
  1. str.substring(startIndex,[endIndex]) ==> 返回⼀个新的startIndex~endIndex之间的字符串,并且当 startIndex为负值时,把所有负值置为0。(不允许负数)

substring

const anyString = 'Mozilla';

console.log(anyString.substring(0, 3)); // Expected output: "Moz"

console.log(anyString.substring(-2, 3)); // Expected output: "Moz"
 
console.log(anyString.substring(2)); // Expected output: "zilla"

console.log(anyString.substring(2, -4)); // Expected output: "Mo"
  1. str.split(xxx) ==> 以xxx为条件参数,返回⼀个全新的数组字符串并不包含xxx这个参数,也可以理解成⽤xxx这个参数对字符串进⾏⼀个分割

split

const str = 'The quick brown fox jumps over the lazy dog.';

console.log('split=====>>>', str.split('f')); // Expected output: "['The quick brown ', 'ox jumps over the lazy dog.' ]"

console.log('split1=====>>>', str.split('f')[1]); // Expected output: ox jumps over the lazy dog.

console.log('split2=====>>>', str.split(' ')); // Expected output: [ 'The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the',' lazy', 'dog.']
  • 字符串⼤⼩写
const str = 'hello';

console.log(str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())); // Expected output: "Hello"

console.log(str.toUpperCase().replace(/( |^)[a-zA-Z]/g, (L) => L.toLowerCase())); // Expected output: "hELLO"

console.log(str.toUpperCase()); // Expected output: "HELLO"

console.log(str.toLowerCase()); // Expected output: "hello"
  • 去除字符串空格
  1. str.trimStart() ==> 去除开头空格

trimStart

const greeting = '   Hello world!   ';

console.log(greeting); // Expected output: "   Hello world!   ";

console.log(greeting.trimStart()); // Expected output: "Hello world!   ";
  1. str.trimEnd() ==> 去除结尾空格

trimEnd

const greeting = '   Hello world!   ';

console.log(greeting); // Expected output: "   Hello world!   ";

console.log(greeting.trimStart()); // Expected output: "   Hello world!";
  1. str.trim() ==> 去除两端空格

Trim

const greeting = '   Hello world!   ';

console.log(greeting); // Expected output: "   Hello world!   ";

console.log(greeting.trim()); // Expected output: "Hello world!";
  • 判断字符串是否包含某个字符(查找元素)
  1. str.search(val) ==> 根据val获取匹配的第⼀个索引,且参数可为正则或是字符串,有值为当前搜索值的第⼀个的索引;⽆值为-1

search

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

console.log(paragraph.search('jumps')); // Expected output: "20";

console.log(paragraph.search('t')); // Expected output: "31";

console.log(paragraph.search('T')); // Expected output: "0";

console.log(paragraph.search('~')); // Expected output: "-1";

console.log(paragraph.search(' ')); // Expected output: "3";
  1. str.includes(val) ==> 判断是否包含val这个值

includes

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

console.log(paragraph.includes('jumps')); // Expected output: true;

console.log(paragraph.includes('t')); // Expected output: true;

console.log(paragraph.includes('T')); // Expected output: true;

console.log(paragraph.includes('~')); // Expected output: false;

console.log(paragraph.includes(' ')); // Expected output: true;
  1. str.charAt(val) ==> 根据索引输出对应的值并val必须是正整数

charAt

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

console.log(paragraph.charAt(0)); // Expected output: "T";

console.log(paragraph.charAt(4)); // Expected output: "q";

console.log(paragraph.charAt(11)); // Expected output: "r";

console.log(paragraph.charAt(-4)); // Expected output: "";

console.log(paragraph.charAt('a')); // Expected output: "T";

4.str.indexOf(val) ==> 根据val查找字符串第⼀个匹配索引,val必须是字符串,有值为当前搜索值的第⼀ ;⽆值为-1

indexOf

const str = 'hello world'

str.indexOf('o') // Expected output: 4

str.indexOf(1) // Expected output: -1
  1. str.lastIndexOf(val) ==> 根据val查找匹配元素的最后⼀个索引,val必须是字符串有值为当前搜索值的第⼀个的索引;⽆值为-1

lastIndexOf

const str = 'hello world'

str.lastIndexOf('o')// Expected output: 7

str.lastIndexOf(1) // Expected output: -1

str.lastIndexOf(/[^\w\s]/g) // Expected output: -1

6.str.startsWith(val) ==> 判断开头是否包含val这个字符,正确为true,错误为false

startsWith

const paragraph = 'The quick brown ';

console.log(paragraph.startsWith('T')); // Expected output: true

console.log(paragraph.startsWith('t')); // Expected output: false

7.str.endsWith(val) ==> 判断结尾是否包含val这个字符,正确为true,错误为false

endsWith

const str1 = 'Cats are the best!';

console.log(str1.endsWith('best!')); // Expected output: true

console.log(str1.endsWith('best')); // Expected output: false

const paragraph = 'The quick brown ';

console.log(paragraph.endsWith('brown ')); // Expected output: true

console.log(paragraph.endsWith('brown')); // Expected output: false

console.log(paragraph.endsWith(' ')); // Expected output: true
  • 链接字符串 str.concat(str1,[str2,…]) ==> 将⼀个或多个字符串与原字符串连接合并,形成⼀个新的字符串并返回

concat

const str1 = 'Cats are the best!';

console.log(str1.concat('best!')); // Expected output: "Cats are the best!best!"

console.log(str1.concat('best')); // Expected output: "Cats are the best!best"
  • 拷贝字符串 str.repeat(n) ==> 把str这个字符串重复n次,n代表重复的次数

repeat

const str1 = 'Cats are the best!';

console.log(str1.repeat(3)); // Expected output: "Cats are the best!Cats are the best!Cats are the best!"
  • 替换字符串 str.replace(oldVal,newVal) ==> 把newVal替换成oldVa

replace

const str1 = 'Cats are the best!';

console.log(str1.replace('best!', '哈哈哈哈~')); // Expected output: "Cats are the 哈哈哈哈~"

3、number

  • 转浮点

toFixed

const str = 111.234567;

console.log(str.toFixed(2)); // Expected output: 111.23

console.log(str.toFixed(3)); // Expected output: 111.235
  • 判断是否为整数

isInteger

const str = 111.234567;

console.log(Number.isInteger(str)); // Expected output: false

console.log(Number.isInteger(243423)); // Expected output: true

console.log(Number.isInteger(-9888)); // Expected output: true  

4、Array

  • 判断是否为数组

isArray

console.log(Array.isArray([1, 2, 3])); // Expected output: true

console.log(Array.isArray(['1', '2', '3'])); // Expected output: true

console.log(Array.isArray([{ name: 'hahaha' }, { name: 'hahaha1' }])); // Expected output: true

console.log(Array.isArray(11, 23, 93 - 1)); // Expected output: false
  • 转数组
  1. Array.from(str) ==> 从⼀个类似数组或可迭代对象创建⼀个新的,浅拷⻉的数组实例

from

console.log(Array.from('123')); // Expected output: [ '1', '2', '3' ]

console.log(Array.from([   ['1', '2'], ['a1', 'a2']])); // Expected output: [ [ '1', '2' ], [ 'a1', 'a2' ] ]

console.log(Array.from(new Set(['foo', 'bar', 'baz','foo']))); // Expected output: [ 'foo', 'bar', 'baz' ]
  1. Array.of(str) ==> 创建⼀个具有可变数量参数的新数组实例,⽽不考虑参数的数量或类型

of

const obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3,
};

console.log(Array.of(obj)); // Expected output: [ { '0': 1, '1': 2, '2': 3, length: 3 } ]

console.log(Array.of(1, 2, 3, 4, 5, 6, 7)); // Expected output: [1,2,3,4,5,6,7]
  • 数组转字符串

join

const arr = ['hello', ',world'];

const arr1 = [1, 2, 3, 4, 5, 6, 7];

console.log(arr.join(',')); // Expected output: hello,,world

console.log(arr1.join(',')); // Expected output:1,2,3,4,5,6,7
  • 分割数组
  • arr.splice(开始位置,[删除个数,新增元素]) ==> 对arr这个数组进⾏元素删除or替换并以数组形式返回被修改的内容。此⽅法会改变原数组

splice

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

console.log(months.splice(0, 4), months); // Expected output: [ 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov',  'Dec' ]

console.log(months.splice(0, 1, 'hahah'), months); // Expected output: [ 'hahah', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec' ]
  • 删除数组最后一个元素

pop

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

console.log(months.pop(), months); // Expected output: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov']
  • 删除数组第一个元素

shift

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

console.log(months.shift(), months); // Expected output: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
  • 向数组最后⼀个元素添加新元素

push

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

console.log(months.push('呵呵呵'), months); // Expected output: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec','呵呵呵'];
  • 向数组第⼀个元素添加新元素

unshift

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

console.log(months.unshift('呵呵呵'), months); // Expected output: ['呵呵呵''Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
  • 反转数组

reverse

const months = ['Jan', 'Feb', 'Mar'];

console.log(months.reverse()); // Expected output: [ 'Mar', 'Feb', 'Jan' ]
  • 填充数组
  • arr.fill(val,[startIndex,[endIndex]]) ==> 填充数组,不包括终⽌索引

fill

const months = ['Jan', 'Feb', 'Mar'];

console.log(months.fill(333, 3, 3)); // Expected output: [ 'Jan', 'Feb', 'Mar' ]

console.log(months.fill(333, 2, 3)); // Expected output: [ 'Jan', 'Feb', 333 ]
  • 合并数组

concat

const months = ['Jan', 'Feb', 'Mar'];

console.log(months.concat([333, 3, 3])); // Expected output: [ 'Jan', 'Feb', 'Mar', 333, 3, 3 ]
  • 过滤数组

filter

const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(months.filter((x) => x > 3)); // Expected output: [ 4, 5, 6, 7, 8, 9 ]
  • 数组运算
  • arr.reduce(上⼀个值,当前值,当前值的索引,数组本身)

reduce

const numArr = [0, 1, 2, 3];

const addTotal = numArr.reduce((previousValue, currentValue, index, arr) => previousValue + currentValue, 0);
const subtractTotal = numArr.reduce((previousValue, currentValue, index, arr) => previousValue - currentValue, 0);
const multiplyTotal = numArr.reduce((previousValue, currentValue, index, arr) => previousValue * currentValue, 0);
const divideTotal = numArr.reduce((previousValue, currentValue, index, arr) => previousValue / currentValue, 0);

const addTotal1 = numArr.reduce((previousValue, currentValue, index, arr) => previousValue + currentValue, 10);
const subtractTotal1 = numArr.reduce((previousValue, currentValue, index, arr) => previousValue - currentValue, 10);
const multiplyTotal1 = numArr.reduce((previousValue, currentValue, index, arr) => previousValue * currentValue, 10);
const divideTotal1 = numArr.reduce((previousValue, currentValue, index, arr) => previousValue / currentValue, 10);

console.log(addTotal); // Expected output: 6 ==> 0+1+2+3
console.log(subtractTotal); // Expected output: -6 ==> 0-1-2-3
console.log(multiplyTotal); // Expected output: 0 ==> 0*1*2*3
console.log(divideTotal); // Expected output: NaN ==> 0/1/2/3

console.log(addTotal1); // Expected output: 16 ==> 0+1+2+3+10
console.log(subtractTotal1); // Expected output: 4 ==>  0-1-2-3-10
console.log(multiplyTotal1); // Expected output: 0 ==> 0*1*2*3*10
console.log(divideTotal1); // Expected output: Infinity ==>  0/1/2/3/10
  • 数组排序

sort

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

const arr = [1, 2, 4, 5, 6, 12, 0, 45, 6, 7];

console.log(months.sort()); // Expected output: ['Apr', 'Aug', 'Dec', 'Feb', 'Jan', 'Jul', 'Jun', 'Mar', 'May', 'Nov', 'Oct', 'Sept']

console.log(arr.sort((a, b) => a - b)); // Expected output: [ 0, 1, 2, 4, 5, 6, 6, 7, 12, 45]

console.log(arr.sort((a, b) => b - a)); // Expected output: [ 45, 12, 7, 6, 6, 5, 4, 2, 1, 0]
  • 数组去重

去重

const months = ['Jan', 'Feb', 'Mar', 'Jan', 'Feb', 'Mar', '2222', '333', 444];

console.log([...new Set(months)]); // Expected output: [ 'Jan', 'Feb', 'Mar', '2222', '333', 444 ]
  • 查找元素
  1. indexOf(xx) ==> 通过xx数组获取第⼀个符合条件的索引,有值返回索引,⽆值返回-1

indexOf

const arr = [1, 2, 4, 5, 6, 12, 0, 45, 6, 7];

console.log(arr.indexOf(2)); // Expected output: 1

console.log(arr.indexOf('sss')); // Expected output: -1
  1. lastIndexOf(xx) ==> 通过xx数组获取最后⼀个符合条件的索引,有值返回索引,⽆值返回-1

lastIndexOf

const arr = [1, 2, 4, 5, 6, 12, 0, 45, 6, 7];

console.log(arr.lastIndexOf(5)); // Expected output: 3

console.log(arr.lastIndexOf('sss')); // Expected output: -1
  1. find((参数)=>条件) ==> 寻找合适的条件,并且返回第⼀个满⾜条件的元素

find

const arr = [1, 2, 4, 5, 6, 8, 0, 9, 7];

console.log(arr.find((e) => e % 2 == 0)); // Expected output: 2
  1. findIndex((参数)=>条件) ==> 返回满⾜条件的第⼀个元素位置

findIndex

const arr = [1, 2, 4, 5, 6, 8, 0, 9, 7];

console.log(arr.findIndex((e) => e % 2 == 0)); // Expected output: 1
  1. includes(xx) ==> 在某个数组中是否包含元素xx,包含返回true;反之返回false

includes

const arr = [1, 2, 4, 5, 6, 8, 0, 9, 7];

console.log(arr.includes(7)); // Expected output: true

console.log(arr.includes(-1)); // Expected output: false
  1. every((参数)=>条件) ==> 判断数组中每个元素是否都能符合条件

every

const arr = [1, 2, 4, 5, 6, 8, 0, 9, 7];

console.log(arr.every((e) => e % 2 == 0)); // Expected output: false
  1. some((参数)=>条件) ==> 判断数组中⾄少有⼀个元素能符合条件

some

const arr = [1, 2, 4, 5, 6, 8, 0, 9, 7];

console.log(arr.some((e) => e % 2 == 0)); // Expected output: true

5、Object

  • 对象浅拷贝

assign

const obj = { a: '111' };

const obj1 = { b: '222' };

console.log(Object.assign(obj, obj1)); // Expected output: { a: '111', b: '222' }
  • 获取所有key

keys

const obj = { name: '苏小妍', age: 14, sex: '女', job: '教师' };

console.log(Object.keys(obj)); // Expected output: [ 'name', 'age', 'sex', 'job' ]
  • 获取对象的所有值

values

const obj = { name: '苏小妍', age: 14, sex: '女', job: '教师' };

console.log(Object.values(obj)); // Expected output: [ '苏小妍', 14, '女', '教师' ]
  • 获取对象的所有key和值

entries

const obj = { name: '苏小妍', age: 14, sex: '女', job: '教师' };

console.log(Object.entries(obj)); // Expected output: [ [ 'name', '苏小妍' ], [ 'age', 14 ], [ 'sex', '女' ], [ 'job', '教师' ] ];
}
  • 判断对象是否包含某个key

hasOwnProperty

const obj = { name: '苏小妍', age: 14, sex: '女', job: '教师' };

console.log(obj.hasOwnProperty('name')); // Expected output: true

console.log(obj.hasOwnProperty('names')); // Expected output: false

6、判断数据类型

  1. typeof(xxx)==> 操作符返回⼀个字符串,表示未经计算的操作数的类型

typeof

console.log(typeof(1)) // Expected output: number
console.log(typeof('ggg')) // Expected output: string
console.log(typeof(null)) // Expected output: object
console.log(typeof([1,2,3])) // Expected output: object
  1. str instanceof xxx ==> ⽤于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

instanceof

const a = [1,2,3]
console.log(a instanceof Array) // Expected output: true
const num = 1
console.log(num instanceof Number) // Expected output: false
  1. object.prototype.toString.call(xxx)
console.log(Object.prototype.toString.call('1')) // Expected output: [object String]
console.log(Object.prototype.toString.call(1)) // Expected output: [object Number]
console.log(Object.prototype.toString.call({})) // Expected output: [object Object]
console.log(Object.prototype.toString.call([])) // Expected output: [object Array]
console.log(Object.prototype.toString.call(null)) // Expected output:  [object Null]
console.log(Object.prototype.toString.call(undefined)) // Expected output:  [object Undefined]
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值