JS入门基础

78 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

JS基础

本文主要介绍JS的基本数据类型、常量和变量声明、数组方法(常用方法和遍历方法)、字符串方法、字典

基本数据类型

JS基础数据类型.png

null 表示一个空值必须使用null关键字才能访问。

undefined 表示一个未初始化的值,JavaScript允许声明变量但不对其赋值。

变量声明

var\let\const

JS变量.png

数组

参考: < developer.mozilla.org/zh-CN/docs/… >

实际上JS是不存在多维数组 ,因为无法直接定义一个多维数组,但JS中的数组元素可以是任意数据类型,可以将数组中的某个元素也设置为数组

只能用整数作为数组元素的索引,而不能用字符串。

数组的静态方法

数组静态方法.png

Array.from()

参考: < blog.csdn.net/qq_27674439… >

从类数组对象或者可迭代对象中创建一个新的数组实例>

Array.from(object, function, this)
Object表示要转化为数组的对象。
function 表示数组中的项调用函数,类似与map
this 表示上下文,function的上下文

(1)传入数组,结果返回和原数组一致

const arr = [1, 2, 3, 4, 5, 6]
const objArr = [{ name: 'kk', age: 18 }]
var b = Array.from(arr); //[1, 2, 3, 4, 5, 6]
var b = Array.from(objArr); // [{ name: 'kk', age: 18 }]

(2)传入对象

对象数组中需要有length属性,且对象的属性名为数值或数字字符串,才会返回非空数组。数组的元素及其下表对应属性名的数值。若不存在,对应位置返回undefined。length表示数组的长度。

const obj = { name: 'kk', age: 12 }
const objlength = { name: 'kk', age: 12, 'length': 2 }
var b = Array.from(obj); //[]
var b = Array.from(objlength); //[ undefined, undefined ]
const sxobj = { 0: 'cn', 1: 'kk', 2: 12 }
const sxObjlength = { 3: 'cn', 1: 'kk', 2: 12, 'length': 2 }
const sxObjlength1={ '1':'cn','0':'kk','2':12, length : 3}
var b = Array.from(sxobj); //[]
var b = Array.from(sxObjlength); //[ undifined, 'kk' ]
var b = Array.from(sxObjlength1); //[ 'kk','cn',  12 ]

(3)传入字符串

字符串会被分解为一个数组,每个字符代表一个数组元素

var b = Array.from('kk'); // [ 'k', 'k' ]

Array.of()

参考: < www.cnblogs.com/littleSpill… >

此方法根据传入参数的值和顺序创建数组。

var b = Array.of()      // []
var b = Array.of(1)     // [ 1 ]
var b = Array.of(1,2)   // [ 1, 2 ]
var b = Array.of('1')   // [ '1' ]
var b = Array.of(undefined) // [ undefined ]
var b = Array.of(null)     // [ null ]
const obj={name:'gg'}
var b = Array.of(obj,obj)   // [ { name: 'gg' }, { name: 'gg' } ]

对比Array()

var b = Array()      // []
var b = Array(2)     // [ <2 empty items> ]
var b = Array(1, 2)   // [ 1, 2 ]
var b = Array('1')   // [ '1' ]
var b = Array(undefined) // [ undefined ]
var b = Array(null)     // [ null ]
const obj={name:'gg'}
var b = Array(obj,obj)   // [ { name: 'gg' }, { name: 'gg' } ]

当参数个数为1且参数类型为数值型的时候,实际上是制定了数组的长度。

数组实例方法

数组实例化方法.png

let arr = [1, 2, 3,]
let arr1 = [4, 5, 6, 5]
let obj = [{ name: 'll', age: 18 }, { name: 'kk', age: 19 }]
const arr3 = [[1, 2], [], [3, 4]];
console.log(arr.at(2), '      原数据', arr);  
// 3 原数据 [ 1, 2, 3 ]   
console.log(arr.concat(arr1), '      原数据', arr);  
// [1, 2, 3, 4, 5, 6, 5] 原数据 [ 1, 2, 3 ]
console.log(arr.copyWithin(1, 0, 2), '      原数据', arr);   
// [ 1, 1, 2 ] 原数据 [ 1, 1, 2 ] 会改变原数组
console.log(Object.entries(arr1), '      原数据', arr1); 
// [ [ '0', 4 ], [ '1', 5 ], [ '2', 6 ], [ '3', 5 ] ] 原数据 [ 4, 5, 6, 5 ]
console.log(Object.entries(obj), '      原数据', obj); 
// [ [ '0', { name: 'll', age: 18 } ], [ '1', { name: 'kk', age: 19 } ] ] 原数据 [ { name: 'll', age: 18 }, { name: 'kk', age: 19 } ]
console.log(arr.every((item) => item > 0), '      原数据', arr); 
// true 原数据 [ 1, 1, 2 ]
console.log(arr.fill(0), '      原数据', arr); 
// [ 0, 0, 0 ] 原数据 [ 0, 0, 0 ] 会改变原数组
console.log(arr1.filter((item, index) => { const test = item + index; return test>6}),'      原数据' ,arr1); 
// [ 6, 5 ] 原数据 [ 4, 5, 6, 5 ]
console.log(arr1.find((item) => item > 4), '      原数据', arr1); 
// 5 原数据 [ 4, 5, 6, 5 ]
console.log(arr1.findIndex((item) => item > 4), '      原数据', arr1); 
// 1 原数据 [ 4, 5, 6, 5 ]
console.log(obj.flat(), '      原数据', obj); 
// [ { name: 'll', age: 18 }, { name: 'kk', age: 19 } ] 原数据 [ { name: 'll', age: 18 }, { name: 'kk', age: 19 } ]
console.log(arr3.flat(), '      原数据', arr3); 
// [ 1, 2, 3, 4 ] 原数据 [ [ 1, 2 ], [], [ 3, 4 ] ]
console.log(arr3.flatMap((item) => item), '      原数据', arr3); 
// [ 1, 2, 3, 4 ] 原数据 [ [ 1, 2 ], [], [ 3, 4 ] ]
console.log(arr3, arr3.join(), '      原数据', arr3); 
// [ [ 1, 2 ], [], [ 3, 4 ] ] 1,2,,3,4 原数据 [ [ 1, 2 ], [], [ 3, 4 ] ]
console.log(Object.keys(arr), '      原数据', arr); 
// [ '0', '1', '2' ] 原数据 [ 0, 0, 0 ]
console.log(arr1.lastIndexOf(5), '      原数据', arr1); 
// 3 原数据 [ 4, 5, 6, 5 ]
console.log(arr1.reduce((total, num) => total - num), '      原数据', arr1);
// -12 原数据 [ 4, 5, 6, 5 ] => 4-5-6-5=-12
console.log(arr1.reduceRight((total, num) => total - num), '      原数据', arr1); 
// -10 原数据 [ 4, 5, 6, 5 ]  => 5-6-5-4=-10
console.log(arr1.sort((a,b)=>a-b),'      原数据' ,arr1); 
// [ 4, 5, 5, 6 ] 原数据 [ 4, 5, 5, 6 ]

参考:www.w3school.com.cn/jsref/jsref…

Array.copyWithin(target, start, end)

target  必需, 将元素复制到的索引位置。
start   可选,开始复制元素的索引位置(默认为 0).
end     可选,停止从中复制元素的索引位置(默认为 array.length)。

Array.flat(depth)

JS循环

参考:blog.csdn.net/qq_41899174…

JS循环.png

foreach,map,filter循环中途是无法停止的,总是会将所有成员遍历完。

map和set

map

map类似于对象,是键值对的集合
new Map()

map.png

set

set类似数组,但其中元素的值是唯一的,向其中添加重复的值时会被忽略
利用set可以很好的进行数组去重,set通过size属性获得其中元素的数量

new Set()

set.png

JS字符串方法

split()字符串方法,对数组无效

参考:www.w3school.com.cn/js/js_strin…

字符串实例方法.png