丸子学JS（学习2小时 - 函数与数组）

作者: 丸子小姐__不懂爱 | 来源:发表于2023-11-21 21:26 被阅读0次

进阶篇：JS数组操作 (7-2)
React-todo-list 系列三
手动实现简单的Bus总线
JS中every()和some()的用法
【ES6学习之对象函数】
JS数组函数
js的骚操作
2018-05-17
2018-06-07
React函数组件与类组件

函数定义方法

静态方法

function 函数名([形参列表]){
    函数体
    [return【函数返回值；】]
}

动态匿名方法

var 函数名 = new Function（[形参列表]，“函数体”）

直接量方法

var 函数名 = function（[形参列表]）{
    函数体；
}

调用方法

● 直接调用 函数名（实参列表）
● 在链接中调用

<a href='javascript:函数名（）'>描述文字</a>

● 在事件中调用 事件类型 = “函数名（）”
● 递归调用
a. 定义在函数体内部调用函数自身
b. 格式

function 函数名（）{
    代码
    函数名（）；
}

let treeArr = [
    {id:12,name:'HTML',pid: 1},
    {id:14,name:'HTML基础',pid: 12},
    {id:164,name:'HTML基础2',pid: 14},
    {id:124,name:'HTML5多媒体',pid: 12},
    {id:134,name:'HTML5拖拽',pid: 12},
    {id:141,name:'HTML网络状态与全屏',pid: 12},
    {id:141,name:'CSS',pid: 1},
    {id:41,name:'CSS基础',pid: 141},
    {id:63,name:'CSS定位锚点与透明',pid: 141},
    {id:203,name:'CSS滤镜',pid: 141},
    {id:211,name:'JavaScript',pid: 1},
    {id:121,name:'JavaScript基础',pid: 211},
    {id:98,name:'JavaScript事件处理',pid: 211},
    {id:19,name:'JavaScript面向对象',pid: 211},
];
let oWrapper = document.querySelector('.wrapper')
var str = '';
// 获取子节点结构
function getChilds(id,arr) {
    let childs = new Array();
    for(let i=0;i< arr.length;i++){
        // 如果pid 等于父节点id
        if(arr[i].pid === id){
            childs.push({
                value: arr[i].id,
                name: arr[i].name
            })
        }
    }
    for(let k=0; k<childs.length; k++){
        let childScope = getChilds(childs[k].value, arr)
        if(childScope.length >0 ) {
            childs[k].children = childScope;
        }
    }
    return childs;
}
// 生成树形结构数据
function createTreeData(arr) {
    let result = [];
    let parent = {};
    for(let i=0; i<arr.length;i++){
        // 检查是否是顶级
        if(arr[i].pid === 1) {
            parent = {
                value: arr[i].id,
                name: arr[i].name
            }
            parent.children = getChilds(arr[i].id, arr)
            result.push(parent)
        }
        
    }
    // 生成节点
    createDOM(result)
    return result;
}
// 生成节点
function createDOM(data) {
    str += '<ul>'
    for(let i=0; i<data.length; i++){
       if(data[i].children) {
            str += `<li><span>> </span>${data[i].name}</li>`;
            // 递归追加
            createDOM(data[i].children)
       }else {
          str += `<li >${data[i].name}</li>`
       }
    }
    str += '</ul>'
    oWrapper.innerHTML = str;
}

let res = createTreeData(treeArr)
oWrapper.addEventListener('click', function(e){
    console.log(e.target.nextSibling);
    var isHide = e.target.nextSibling.classList.contains('hide');
    
    if(isHide) {
        e.target.children[0].style.transform = `rotate(0deg)`
        e.target.nextSibling.classList.remove('hide')
    }else {
        e.target.children[0].style.transform = `rotate(90deg)`
        e.target.nextSibling.classList.add('hide')
    }
})

方法

● apply 将函数作为对象的方法来调用，将参数以数组形式传递给该方法
● call 将函数作为对象的方法来调用，将指定参数传递给该方法
● toString 返回函数的字符串表示
简单使用

function test(a,b){
    console.log(a,b,this);
}
// 不传参
test.call() // undefined undefined window
test.apply(null) // undefined undefined window

test.call(null, 5,10)  // 5 10 window
test.apply(null, [5,10]) // 5 10 window

改变指向

function test(a,b){
    console.log(a,b, this.name);
}
let obj = {
    name: '张三'
}

test.call(obj, 5, 10) // 5 10 张三
test.apply(obj, [5 ,10]) // 5 10 张三

arguments对象

● 功能存放实参的参数列表
● 特性（仅能在函数体内使用；带有下标属性，但并非数组；函数声明时自动初始化；）
● 属性
a. length 获取函数实参的长度
b. callee 返回当前正在指向的函数
c. caller 返回调用当前正在执行函数的函数名

var inp = document.querySelector("input");
var btn = document.querySelector("button");
var p = document.querySelector("p");
btn.onclick = function (){
  // 转换为数组
  var arrValue = inp.value.split(",");
  p.innerHTML = calc(arrValue)
}
function calc (arr){
  var result = 0;
  for (var i = 0; i<arr.length; i++) {
    // 取出数组中的每个值 累计
      result += parseInt(arguments[0][i]); 
  }
  return result;
}

函数参数

● 参数类型
a. 形参 定义函数时使用的参数，接受调用该函数时传递的参数
b. 实参 调用函数时传递给函数的实际参数
● 特性
a. 参数个数没有限制
b. 参数的数据类型没有限制
c. 通过arguments对象访问参数数组
d. 参数始终按值传递（基本类型：传值；引用类型：传址；）

//获取元素
var oBox = document.querySelector(".box");
var btns = document.querySelectorAll("button");
var showCode = document.querySelector('.show-code');
var oPropertyName = document.querySelector('#propertyName');
var oPropertyValue = document.querySelector('#propertyValue')
var styleArr = [];
//封装函数
function getValue (ele,prototype,value){
  ele.style[prototype] = value;
}
// 绑定改变样式按钮
btns[0].onclick = function (){
  changeStyle()
  
}
function changeStyle() {
  //获取 input的值
  var propertyName = document.querySelector('#propertyName').value;
  var propertyValue = document.querySelector('#propertyValue').value;
  styleArr.push({
    name: propertyName,
    value: propertyValue
  })
  getValue(oBox,propertyName,propertyValue);    
  clearValue();
  showCodeFn();
}
//调用函数清除所有的样式
btns[1].onclick = function (){
  clearValue();
  getValue(oBox,"cssText","");
  
}
function clearValue() {
  oPropertyName.value = '';
  oPropertyValue.value = '';
  showCode.innerHTML = '';
}
function showCodeFn() {
  var str = "";
  for(var i=0; i< styleArr.length; i++){
    str += "<p style='text-indent: 2em;'>"+ styleArr[i].name + ": " + styleArr[i].value + ";" +"</p>"
  }
  showCode.innerHTML = "<p>"+ "." +oBox.className+ "{" + str +"</p>" + "<p>}</p>"
}
document.onkeydown= function(event){
  if(event.keyCode === 13){
    changeStyle()
  }
}

指针标识

● this 指向当前操作对象
● callee 指向参数集合所属函数
● prototype 指向函数附带的原型对象
● constructor 指向创建该对象的构造函数

数组创建方式

● 空数组 var Obj = new Array（）
● 指定长度数组 var Obj = new Array (size)
● 指定元素数组 var Obj = new Array (ele1,ele2,ele3)
● 单维数组 var Obj = [ele1,ele2,ele3]
● 多维数组 var Obj = new Array([el1],[el2],[el3])

var btn = document.getElementsByTagName("button");
var arr = [22,33,44,55];
var arr1 = new Array(22,33,44,55);
btn[0].onclick= function(){
  alert("数组的长度为："+arr.length);
}
btn[1].onclick= function (){
  alert("数组的长度为："+arr1.length);
}

基本操作

● 存取数组元素
a. 单维数组数组名[下标索引]；
b. 多维数组数组名"[外层下标]"[内层下标]
c. 特性 （数组长度是弹性的；数组的下标从0开始；下标的类型：数值或者非数值）
● 增加数组使用“【】”运算符指定一个新下标
● 删除数组 delete 数组名[下标]
● 遍历数组 for...in

数组属性

● constructor 引用数组对象的构造函数
● length 返回数组的长度
● prototype 通过增加属性和方法扩展数组定义

ECMAScript3 数组方法

● 添加
a. push（）在数组末尾添加数组（push-shift：队列方法，先进先出； push-pop：栈方法，后进先出）
b. unshift（）在数组头部添加元素
c. concat（）合并两个数组
● 删除
a. pop（）删除并返回数组的最后一个元素
b. shift（）删除并返回数组的第一个元素

var btn = document.getElementsByTagName("button");
var arr = [1,2,3,4,5,6,7];
btn[0].onclick = function(){
  alert(arr.length);
}
btn[1].onclick = function(){
  arr.length = 3;
  alert(arr.length);
}
btn[2].onclick = function(){
  arr.push("我来了");
  alert(arr);
}
btn[3].onclick = function(){
  arr.pop();
  alert(arr);
}
btn[4].onclick = function(){
  arr.unshift('我到前面来了');
  alert(arr);
}
btn[5].onclick = function(){
  arr.shift();
  alert(arr);
}
btn[6].onclick = function(){
  let res = arr.concat('合','并')
  alert(res);
}

● 子数组
a. splice（）
■ 删除任意数量的项（要删除的起始下标，要删除的项数）
■ 在指定位置插入指定的项（起始下标，0不要删除任何项，要插入的项）
■ 替换任意数量的项（起始下标，要删除的项数，要插入的项）
b. slice（）
■ 功能从已有数组中选取部分元素构成新数组
■ 参数（返回项的起始位置，返回项的结束位置）

var btn = document.getElementsByTagName("button");
var arr = [1,2,3,4,5,6,7]
btn[0].onclick= function(){
  arr.splice(1,4);
  alert(arr);
}
btn[1].onclick= function(){
  arr.splice(2,0,"我要烟");
  alert(arr);
}
btn[2].onclick= function(){
  arr.splice(2,2,"b","c");
  alert(arr);
}
btn[3].onclick= function(){
  let res = arr.slice(0,4);
  alert(res);
}

● 数组排序
a. reverse（）颠倒数组中元素的顺序
b. sort（）
■ 功能对字符数组或数字数组进行排序
■ 特性默认为字符串比较，按数值大小比较，需函数支持
● 数组转换
a. toString（）转换为字符串并返回
b. toLocaleString（）转换为本地格式字符串并返回
c. join（）使用指定分隔符分割数组并转换为字符串

var btn= document.getElementsByTagName("button");
btn[0].onclick=function(){
  var a =[1,2,3];
  var b = [4,5,6];
  var c = a.concat(b);
  alert(c)
}
btn[1].onclick=function(){
  var a =[1,2,3,4,5,6,7];
    var c= a.join("x");             
  alert(c)
}
btn[2].onclick = function(){
  var yel = ["yellow","red","green","blue","orange"]
  yel.sort();
  alert(yel);
}
btn[3].onclick =function(){
  var a = [22,15,65,198,23,55,3,42];
  a.sort(function(x,y){
    return y-x;
  })
  alert(a)
}
btn[4].onclick =function(){
  var a = [22,15,65,198,23,55,3,42];
  a.sort(function(x,y){
    return x-y;
  })
  alert(a)
}

ECMAScript数组方法

● 位置方法
a. indexOf 从数组的起始位置开始查找（要查找的项，表示查找起点的位置索引）
b. lastIndexOf 从数组的结束位置开始查找

var btn= document.getElementsByTagName("button");
btn[0].onclick=function(){
  var a = ['烟','雨','蒙蒙','唱','扬','州'];
          var res = a.indexOf('唱')
  alert(res)
}
btn[1].onclick=function(){
  var a = ['烟','雨','蒙蒙','唱','扬','州'];
  var res = a.lastIndexOf('唱')              
  alert(res)
}

● 迭代方法
a. every 如果该函数对每一项都返回true，则返回true
b. filter 返回值为true的所有数组成员
c. forEach 无返回值
d. map 返回每次函数调用的结果数组
e. some 有任意一项返回true，则返回true

var btn= document.getElementsByTagName("button");
      var a = [23,45,57,112,24,56,30]
btn[0].onclick=function(){
  var res = a.every(function(item){
              return item%2==0
          })
          alert(res)
}
btn[1].onclick=function(){
  var res = a.filter(function(item){
              return item%2 == 0;
          })
          alert(res)
}
      btn[2].onclick=function(){
  var res = a.map(function(item){
              if(item%2==0) {
                  return item + '是偶数'
              }else {
                  return item + '非偶数'
              }
          })
          alert(res)
}
btn[3].onclick=function(){
  var res = a.some(function(item){
              return item%24
          })
          alert(res)
}

● 缩小方法
a. reduce 从数组起始位置开始遍历
b. reduceRight 从数组末尾开始遍历（传入参数：前一个值prev，当前值cur，项的索引index，数组对象array）

var btn= document.getElementsByTagName("button");
      var a = [43,22,16,88,10,8];
btn[0].onclick=function(){
          let res = a.reduce(function(prev,cur,index){
              return prev+cur;
          })
          alert(res)
}   
      var fruits = ['苹果','西瓜','葡萄','梨子','苹果','香蕉','西瓜','西瓜','梨子']
btn[1].onclick=function(){
  let res = fruits.reduce(function(result,name){
              if(name in result){
                  result[name]++;
              }else {
                  result[name] = 1;
              }
              return result;
          },{})
          alert(JSON.stringify(res))
}
      btn[2].onclick=function(){
  let res = fruits.reduce(function(result, name){
              if(result.indexOf(name) === -1) {
                  result.push(name)
              }
              return result;
          },[])
          alert(res)
}
      var userInfo = [
          {name: '张三',sex: '女', age: 25},
          {name: '王五',sex: '男', age: 43},
          {name: '李八',sex: '男', age: 12},
          {name: '赵四',sex: '女', age: 19},
          {name: '刘二',sex: '女', age: 23},
          {name: '孙九',sex: '男', age: 14},
      ]
btn[3].onclick=function(){
  function groupData(objArray,property){
              return objArray.reduce(function(result,obj){
                  var key = obj[property];
                  if(!result[key]) {
                      result[key] = [];
                  }
                  result[key].push(obj)
                  return result;
              },{})
          }
          let res = groupData(userInfo, 'sex')
          alert('女:'+JSON.stringify(res['女']))
          alert('男:'+JSON.stringify(res['男']))
}

进阶篇：JS数组操作 (7-2)
饥人谷学习进阶第 7 天 JS数组操作创建数组构造函数在使用构造函数创建数组时如果传入一个数字参数，则会创建一...
React-todo-list 系列三
函数组件 => 组件拆分 TodoList.js TodoItem.js
手动实现简单的Bus总线
在emit里面遍历数组取出函数执行函数 main.js bus.js 使用
JS中every()和some()的用法
every() 与 some()方法都是js中数组的迭代方法。 every(): 对数组中每一项运行给定函数，如...
【ES6学习之对象函数】
函数 js函数库：lodash uniq uniqBy 数组处理函数： concat map() 对...
JS数组函数
W3C JavaScript Array 对象 concat(array) concat方法用于拼接数组，a.co...
js的骚操作
1、js数组索引添加值 2、js函数parseInt(转16进制 py版本
2018-05-17
继续学习js： 1.JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... JavaScri...
2018-06-07
JS 基本常用函数 javascript函数一共可分为五类： •常规函数 •数组函数 •日期函数 •数学函数 •...
React函数组件与类组件
函数组件与类组件 GitHub地址函数组件与类组件函数组件(functional component)类组件(c...