js信息以及相关常使用信息

…正在完善

Javascript篇

文章目录

• Javascript篇
• 一、 什么是Javascript
• 二、使用相关
• • 1.Javascript版本
  • 2.Javascript数值类型
  • 3.Javascript数值处理相关转化以及其他
  • • 3.0.1 字符串转json
    • 3.0.2 字符串转换为数组
    • 3.0.3 数组转换为字符串
    • 3.0.4 数组添加/删除对象/数值等等
    • 3.0.5 类型转化
    • 3.0.6concat() 方法用于连接两个或多个数组。
    • 3.0.7 Javascript中includes()和indexOf()
    • 3.0.8 Javascript去重、匹配返回
    • 3.0.9 Javascript脱敏
  • 4.Javascript循环区别
  • 5. Javascript链式调用基本原理、实现方法
  • 6. js版本增加灵活功能
  • • 6.0.1 ES56
• 总结

---

一、 什么是Javascript

Javascript 是属于 HTML 和 Web 的编程语言。
编程令计算机完成您需要它们做的工作，主要做动态美化网页,校验表单等等。

二、使用相关 1.Javascript版本

ES5学习地址: ES5学习地址.
ES6学习地址: ES6学习地址.
ES7学习地址: ES7学习地址.

2.Javascript数值类型

字符串值（“”），数值（123），布尔值（true,false），数组([])，对象({})。

3.Javascript数值处理相关转化以及其他 3.0.1 字符串转json

//es5
JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串 
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 

3.0.2 字符串转换为数组

var string = '123,456,789';
var stringResult = string.split(',');
console.log(string2Result) //输出['a','b','c','d','e','f']
string2.split(",").map(Number);//输出[123,456,789]
JSON.parse("[" + string + "]"); //输出[123,456,789]

3.0.3 数组转换为字符串

var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')
console.log(arrayResult) // 输出"abc,def,hig"
array.toString()//输出"abc,def,hig"

3.0.4 数组添加/删除对象/数值等等

let newelement1 = “abc”
arrayObject.push(newelement1)
例如：
let imgArray =[{img:'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'},{img:'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'},{img:'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'}]
let aaa = []
for(const item of imgArray) {
	aaa.push(item)
}
asplice(index){
	imgArray.splice(index, 1)//删除某元素
}
asplite(){
  datastr="2,2,3,5,6,6";      
  var str= new Array();   
  str=datastr.split(",");   
}

3.0.5 类型转化

Number() 方法
parseInt() 方法
parseFloat() 方法

数值转化可能出现精确度确实可以通过此方法防止精确度对视
var showSure = 222
let seed = ""
seed = parseFloat((showSure*100).toFixed(10));

3.0.6concat() 方法用于连接两个或多个数组。

let arrayObject = [1,2,3];
arrayObject.concat(4,5)

3.0.7 Javascript中includes()和indexOf()

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
var str="Hello world, welcome to the universe.";
var n=str.includes("welcome");

3.0.8 Javascript去重、匹配返回

Javascript去重

//字符串去重
let productIds = {1,2，3,4，5,6，1,2，2,2}
productIds = Array.from(new Set(productIds.split(','))).join(',');
//对象去重
objArry(arr){
    let result = {};
    let finalResult=[];
    for(let i=0;i 
Javascript匹配返回
 
querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) :       restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      let spreadItem = spreadPosterData.find((item) => {
      return !item.spreadPoster
})
//根据返回值分反元/万元并分配小数点值
amountFliter(val) {
      if (!val) return '--';
      if (val == 0) return '--';
      if (Number(val) >= 10000) {
        var exValue = Number(val) / 10000;
        var unit = '万元';
      } else {
        var exValue = Number(val);
        var unit = '元';
      }
      let arr = [Number(exValue).toFixed(0), Number(exValue).toFixed(1), Number(exValue).toFixed(2)];
      return arr.find(item => { return (item - arr[arr.length - 1] == 0) }) + unit
    },
 
3.0.9 Javascript脱敏 
4.Javascript循环区别 
1、for
 
for(let index = 0; index < array.length; index++) {
    const element = array[index];
}
 
2、forEach
 
array.forEach(element => {
 });
 
3、for…of…
 
for (const iterator of object) {  
}
 
4、for…in…
 
for (const key in object) {
       if (Object.hasOwnProperty.call(object, key)) {
          const element = object[key];
          console.log(o[p]);  // 属性名赋值给变量p  输出每一个属性的值
       }
 }
 
5. Javascript链式调用基本原理、实现方法 
一般的函数调用和链式调用的区别：链式调用完方法后，return this返回当前调用方法的对象。
 在调用一个方法是，后面的方法像链条一样被调用（如.XXX方法）
 
function Person(name) {
  this.name = name
  this.sayHi = function() {
    console.log(this.name)
    return this
  }
  this.modifyName = function(name) {
    this.name = name
    return this
  }
}
var person = new Person('Shikai Yuan')

person
  .sayHi()
  .modifyName('Shikai Yuan')
  .sayHi()
 
vue3.0 main中类似调用
 
import {
  ...
} from 'ant-design-vue'
createApp(App)
  .use(Radio)
  .use(Pop/confirm/i)
  .use(Switch)
  .use(Modal)
  .use(store)
  ...
 
6. js版本增加灵活功能 
6.0.1 ES56 
//判断两个
//判断数组中是否包含符合条件的元素 
var bool=arr.some(function(val){
		return 判断条件
	  })
//判断数组中是否所有元素都符合条件
var bool=arr.every(function(val){
		return 判断条件
	  })
//遍历2个
//仅单纯遍历原数组中每个元素
  arr.forEach(function(val){
		对val的操作
	  })
//遍历元素数组中每个元素，修改后，放入新数组中返回
var 新数组=arr.map(function(val){
		return 根据当前元素值val，修改后的一个新值
	  })
//过滤和汇总
//复制出原数组中符合条件的元素组成新数组返回，原数组保持不变
var 新数组=arr.filter(function(val){
		return 判断条件
	})
//遍历数组中每个元素，对所有元素进行统计，最终得出一个统计结果
var 统计结果=arr.reduce(
		function(prev, val){
			prev+=val;
			return prev
		},
		起始值
	)

 
总结