JS数据类型、数组、this指向复习

简介: JS数据类型、数组、this指向复习

一、JavaScript数据类型

基本数据类型

image.png

var str='abcd'
var str2="xyz"
var str3=`hello,${str}`
 null:typeof null Object   undefined:定义未赋值和没有定义的变量类型都是undefined

image.png

引用数据类型(复杂数据类型)

image.png

for(var key in obj) {
if(obj.hasOwnProperty(key)) {
  console.log(obj[key]) }
}

二、数组:Array

数组方法

栈方法:

push():尾部添加

pop:尾部删除

unshift:头部添加

shift:头部删除

splice:在数组任意的位置添加,删除和替换

  删除:splice(要删除的起始下标,删除数量)
  添加:arr.splice(要插入的起始位置,0,要添加的值)
      arr.splice(2,0,'全栈1909A')
  替换:arr.splice(要替换的志起始位置,替换的数量,替换的值)
      arr.splice(4,2,'我要去阿里')

数组内置的遍历方法:

forEach() :就是for的升级版,forEach返回值undeifned

filter():过滤,遍历满足条件的数组元素,返回新数组

map():对原数组加工处理,得到一个新数组

reduce():归并,将多个值归并成一个值

findIndex() 找下标

find() 找数组中匹配的元素

every() 全部满足才返回true,否则为false

some() 只要有一个满足就返回true,否则为false

includes() 判断数组中是否含有某个值,含有返回true,不含有返回false

flat() 扁平化 将多维数组转换成一维数组

  扁平化方法:
    1.toString实现
    例如:
    var arr=[5,5,5,5,[2,4,[2,[23,5],6],7],3,2,2,5]
    arr.toString().split(',').map(item=>item*1)
    2.用递归来实现数组的扁平化
    function flatFn(arr) {
      var result=[];
      if(!(arr instanceof Array))  return;
       for(var key in arr) {
         result=result.concat(Array.isArray(arr[key]) ? flatFn(arr[key]) : arr[key]           )
         }
        return result;
      }
      3.flat()  //ES2019发布方法

Array参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

2.类数组:

– 何为类数组?

也称伪数组 LikeArray,只能通过length获取数量,和通过下标指定具体的某个元素,但不能使用数组的API方法

类数组的使用场景:获取的dom集合,arguments,…

– 如何将类数组转换为数组

1.Array.from(类数组)或 […类数组]

2.Array.prototype.slice.call(类数组)

ES1.0 1997

ES2.0 1998

ES3.0 1999

ES4.0 夭折

ES5.0 2009

ES5.1 2011

ES6 2015,由此开始,每年都会发布一个新版本

ES7 2016

ES8 2017

官方ECMA Script仓库更新地址:https://github.com/tc39/proposals/blob/master/finished-proposals.md

三、字符串:String

trim() 去除字符串左右空格

不和trim,自己封装一个trim

function trim(str) {undefined

var reg=/^\s+|\s+$/g

return str.replace(reg,’’)

}

String.prototype.quchukongge=function() {undefined

var reg=/^\s+|\s+$/g

return this.replace(reg,’’)

}

toUpperCase() 字母转大写

toLowerCase() 字母转小写

substr() 取子串 str.substr(起始位置,取几个)

substring(起始下标,结束下标) 取子串

split() 字符串转数组 join:数组转字符串

slice(起始下标,结束下标) 取子串

replace(要查找的字符串或匹配的正则,要替换的内容) 替换

indexOf() 查找,有返回下标,没有返回-1

includes() 同数组用法 有返回true,没有返回false

四、数学对象(Math)

Math.abs() : 取绝对值

Math.random() 随机值 范围:0~~~~1

返回做任意数值范围 start-end范围

数量=y-x+1

x=10 ,y=20

11 num=y-x+1

数量=11

起始值:10

公式:Math.floor(Math.random()*数量)+起始值

封装了一个随机函数:

// start:起始下标
// end:开始下标
function randomIndex(start,end) {
var num=end-start+1
return Math.floor(Math.random()*num)+start
}

Math.foor() 向下取整

Math.ceil() 向上取整

Math.round() 四舍五入取整

Math.max() 取大值

var arr=[23,3,34,23,24,-32,34,54,234,234,235,534,235,2]

Math.max.apply(Math,arr)

Math.min.apply(Math,arr)

Math.min.call(Math,…arr)

Math.max.call(Math,…arr)

Math.min() 取小值

五、this指向

检测是否是手机端,是的话,跳转到移动页面

try {
  if (location.search.indexOf('?pc') !== 0 && /Android|Windows Phone|iPhone|iPod/i.test(navigator.userAgent)) {
    window.location.href = 'https://xw.qq.com?f=qqcom';
  }
} catch (e) {}
this的使用场景
*/
//1.直接调用函数 this即window
//console.log(this===window)
/*
function Fn() {
   console.log('Fn:',this)
   //this.name='1909A'
}
//Fn()
//2. new 函数,this即为当前构造函数实例化对象
//var f1=new Fn()
//3.函数属于对象
/*
var obj={
    name:'1909A',
    Fn:function() {
        var hehe=function() {
            console.log('this===window:',this===window)
             console.log('this===obj:',this===obj)
             //console.log('this===Fn:',this===Fn)
        }
       hehe()
    }
}
obj.Fn();
*/
//4.定时器上的this
/*
var obj={
    name:'1909A',
    Fn:function() {
       setTimeout(function() {
           console.log('this===window:',this===window)
           console.log('this===obj:',this===obj)
       },0)
    }
}
obj.Fn();
*/
//5.DOM中的this
var btn=document.querySelector('#btn')
btn.onclick=function() {
  // let _this=this;
   setTimeout(()=> {
        console.log(this===btn)
   },0)
}

总结:this通常是谁调用,this指向谁,难道真的是这样吗?

var name='ok'
var obj={
   name:'alice',
   getName:function() {
     console.log(this.name)
  }
}
(false || obj.getName)()


相关文章
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
218 3
|
12月前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
256 1
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
200 2
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
385 3
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
337 4
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
436 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
169 1
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
333 0